@cat-factory/app 0.256.2 → 0.257.0

package/README.md

@@ -161,6 +161,10 @@ The failure is silent, which is why this is a rule rather than a preference. An
 
 `scripts/check-component-imports.mjs` enforces it (CI's `repo-guards` job). If a panel section is missing and the data looks right, check the import first.
 
+### Type a chip map with `BadgeColor`, never `string`
+
+A status → chip map feeding a `<UBadge :color="…">` types its values as `BadgeColor` (`utils/badge.ts`), which is derived from `UBadge`'s own prop type rather than restated as a literal union. Typed `string`, the binding does not compile and the reflex is `as any` at each call site: seven of them had accumulated. That cast also accepts a colour Nuxt UI does not define, which renders as an unstyled badge with nothing failing.
+
 ## Interface modes (basic / advanced)
 
 The SPA renders at one of two **interface tiers**. `basic` (the default) is the everyday

package/app/components/binaryCandidates/BinaryCandidatesWindow.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+// Generated-candidate comparison window: the dedicated surface for a binary-output step that
+// generated several candidates rather than committing to one producer unobserved
+// (docs/initiatives/binary-output-foundational-storage.md).
+//
+// It reads the live state straight off the run's step (`step.binaryCandidates`, kept fresh by the
+// execution stream) and lets a human KEEP one candidate, or several under distinct ids. Keeping
+// re-runs the same step to deliver exactly what survived and clear the rest.
+//
+// Two properties the surface has to hold on to, both of which are the reason this feature exists:
+//
+//  - A candidate WITHOUT a preview is still a candidate. An org's asset store may issue no public
+//    link, and the platform will not invent one, so such a row renders its details and says the
+//    preview is unavailable rather than disappearing or showing a broken image.
+//  - It doubles as the RECORD. Once the choice is made the window keeps rendering, marking what
+//    was kept and under which id, because the decision is the only place the run's own rationale
+//    lives. An AUTOMATIC keep says so: nobody looked at it.
+import { computed, ref, watch } from 'vue'
+import { useResultView } from '~/composables/useResultView'
+import { useExecutionStore } from '~/stores/execution'
+import { useBoardStore } from '~/stores/board'
+import { useBinaryCandidatesStore } from '~/stores/binaryCandidates'
+import {
+  BINARY_CANDIDATE_NO_CHOICE_KEYS,
+  binaryCandidateHasWarnings,
+  binaryCandidateView,
+} from '~/utils/binaryCandidates'
+import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+
+const execution = useExecutionStore()
+const board = useBoardStore()
+const candidates = useBinaryCandidatesStore()
+const access = useWorkspaceAccess()
+const { t } = useI18n()
+
+// The warm-up read is keyed by the RUN, not the block: `load` calls
+// `GET /workspaces/:ws/executions/:executionId/binary-candidates`, and a block id put in that
+// position resolves to no run at all, so the fetch quietly returns nothing and the window shows
+// whatever the stream happened to deliver. `instanceId` is nullable (a view can be opened without
+// a resolved run), so the guard is the same one `PrReviewWindow` makes.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('binary-candidates', {
+  onOpen: ({ instanceId }) => {
+    if (instanceId) void candidates.load(instanceId)
+  },
+})
+
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+const headerTitle = computed(() =>
+  block.value
+    ? t('binaryCandidates.titleWithBlock', { title: block.value.title })
+    : t('binaryCandidates.title'),
+)
+const instance = computed(() =>
+  instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
+)
+const step = computed(() => {
+  if (instance.value === null || stepIndex.value === null) return null
+  return instance.value.steps[stepIndex.value] ?? null
+})
+const view = computed(() => binaryCandidateView(step.value))
+const warnings = computed(() => (view.value ? binaryCandidateHasWarnings(view.value) : false))
+const noChoiceKey = computed(() => {
+  const reason = view.value?.state.noChoiceReason
+  return reason ? BINARY_CANDIDATE_NO_CHOICE_KEYS[reason] : null
+})
+
+/** The ids the human has ticked, and the id each is to be stored under. */
+const selected = ref<string[]>([])
+const aliases = ref<Record<string, string>>({})
+const note = ref('')
+
+// Default the selection to the first candidate of the first subject whenever the candidate set
+// changes. Something ticked is the honest default for a single-select comparison (the person is
+// choosing between options, not deciding whether to have one) and it keeps the primary button
+// meaningful from the first render.
+watch(
+  () => view.value?.state.candidates.map((c) => c.id).join(','),
+  () => {
+    const first = view.value?.groups[0]?.rows[0]?.id
+    if (selected.value.some((id) => view.value?.state.candidates.some((c) => c.id === id))) return
+    selected.value = first ? [first] : []
+  },
+  { immediate: true },
+)
+
+function toggle(id: string): void {
+  if (!view.value?.awaiting) return
+  if (view.value.multiSelect) {
+    selected.value = selected.value.includes(id)
+      ? selected.value.filter((existing) => existing !== id)
+      : [...selected.value, id]
+    return
+  }
+  selected.value = [id]
+}
+
+/**
+ * Whether the request would be accepted. Mirrors the backend's own refusals rather than only
+ * disabling on emptiness: keeping several candidates under one name would store one artifact and
+ * report several, so the alias requirement is stated here, where it can be fixed, instead of
+ * arriving as a 422.
+ */
+const missingAliases = computed(() =>
+  selected.value.length > 1 ? selected.value.filter((id) => !(aliases.value[id] ?? '').trim()) : [],
+)
+const duplicateAliases = computed(() => {
+  const used = selected.value.map((id) => (aliases.value[id] ?? '').trim()).filter(Boolean)
+  return new Set(used).size !== used.length
+})
+const canKeep = computed(
+  () =>
+    view.value?.awaiting === true &&
+    !candidates.keeping &&
+    selected.value.length > 0 &&
+    missingAliases.value.length === 0 &&
+    !duplicateAliases.value,
+)
+
+async function onKeep() {
+  const id = instanceId.value
+  if (!id || !canKeep.value) return
+  const keep = selected.value.map((candidateId) => {
+    const alias = (aliases.value[candidateId] ?? '').trim()
+    return alias ? { candidateId, storeAs: alias } : { candidateId }
+  })
+  const text = note.value.trim()
+  await candidates.keep(id, { keep, ...(text ? { note: text } : {}) }).catch(() => {})
+}
+</script>
+
+<template>
+  <ResultWindowShell
+    :open="open"
+    icon="i-lucide-images"
+    icon-class="bg-sky-500/15 text-sky-300"
+    :title="headerTitle"
+    :subtitle="t('binaryCandidates.subtitle')"
+    width="5xl"
+    testid="binary-candidates-window"
+    @close="close"
+  >
+    <div v-if="view" class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+      <!-- Why there was nothing to choose between. Its own line per reason: a model that never
+           declared its candidates and one whose block was unreadable need different fixes. -->
+      <p
+        v-if="noChoiceKey"
+        class="mb-3 rounded border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-200"
+        data-testid="binary-candidates-no-choice"
+      >
+        {{ t(noChoiceKey) }}
+      </p>
+
+      <!-- An automatic keep is NOT a review, and must never render as one. -->
+      <p
+        v-if="view.automatic"
+        class="mb-3 rounded border border-slate-600/40 bg-slate-800/40 px-3 py-2 text-xs text-slate-300"
+        data-testid="binary-candidates-automatic"
+      >
+        {{ t('binaryCandidates.automatic') }}
+      </p>
+
+      <!-- Every loss the parse counted, so a comparison over three of five cannot read as one
+           over all five. -->
+      <p
+        v-if="warnings"
+        class="mb-3 text-xs text-amber-300"
+        data-testid="binary-candidates-warnings"
+      >
+        <span v-if="view.state.omitted">{{
+          t('binaryCandidates.warning.omitted', { count: view.state.omitted })
+        }}</span>
+        <span v-if="view.state.invalidEntries">
+          {{ t('binaryCandidates.warning.invalid', { count: view.state.invalidEntries }) }}</span
+        >
+        <span v-if="view.state.unusablePreviews">
+          {{ t('binaryCandidates.warning.previews', { count: view.state.unusablePreviews }) }}</span
+        >
+      </p>
+
+      <div v-for="group in view.groups" :key="group.subject ?? '·'" class="mb-6">
+        <h3 class="mb-2 text-xs font-medium text-slate-400">
+          {{ group.subject ?? t('binaryCandidates.unlabelledSubject') }}
+        </h3>
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <div
+            v-for="row in group.rows"
+            :key="row.id"
+            class="rounded border p-2 transition"
+            :class="
+              selected.includes(row.id) || row.kept
+                ? 'border-sky-400/60 bg-sky-500/5'
+                : 'border-slate-700/60'
+            "
+            data-testid="binary-candidate-card"
+            @click="toggle(row.id)"
+          >
+            <img
+              v-if="row.previewUrl"
+              :src="row.previewUrl"
+              :alt="row.label ?? row.id"
+              class="mb-2 max-h-56 w-full rounded object-contain"
+              data-testid="binary-candidate-preview"
+            />
+            <!-- No preview is ORDINARY (a private asset store issues no link), so it is stated
+                 rather than left as an empty frame the reader reads as a failed generation. -->
+            <p
+              v-else
+              class="mb-2 flex h-24 items-center justify-center rounded bg-slate-800/60 px-2 text-center text-[10px] text-slate-400"
+              data-testid="binary-candidate-no-preview"
+            >
+              {{ t('binaryCandidates.noPreview') }}
+            </p>
+            <p class="text-xs text-slate-200">
+              {{
+                row.generator
+                  ? t('binaryCandidates.fromGenerator', { generator: row.generator })
+                  : t('binaryCandidates.unattributed')
+              }}
+            </p>
+            <p v-if="row.note" class="mt-1 text-[11px] text-slate-400">{{ row.note }}</p>
+            <p class="mt-1 break-all text-[10px] text-slate-500">{{ row.location }}</p>
+            <p v-if="row.contentType" class="text-[10px] text-slate-500">{{ row.contentType }}</p>
+            <p v-if="row.kept" class="mt-1 text-[11px] text-emerald-300">
+              {{
+                row.storeAs
+                  ? t('binaryCandidates.keptAs', { id: row.storeAs })
+                  : t('binaryCandidates.kept')
+              }}
+            </p>
+            <!-- The ALTERNATE ID, shown only where it is load-bearing: keeping two candidates
+                 under one name stores one artifact and reports two. -->
+            <UInput
+              v-if="view.awaiting && view.multiSelect && selected.includes(row.id)"
+              class="mt-2"
+              size="xs"
+              :model-value="aliases[row.id] ?? ''"
+              :placeholder="t('binaryCandidates.storeAsPlaceholder')"
+              data-testid="binary-candidate-store-as"
+              @click.stop
+              @update:model-value="aliases[row.id] = String($event)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div v-if="view.awaiting" class="mt-2">
+        <UTextarea
+          v-model="note"
+          :rows="2"
+          size="xs"
+          :placeholder="t('binaryCandidates.notePlaceholder')"
+          data-testid="binary-candidates-note"
+        />
+        <p
+          v-if="missingAliases.length"
+          class="mt-1 text-[11px] text-amber-300"
+          data-testid="binary-candidates-missing-alias"
+        >
+          {{ t('binaryCandidates.missingAlias') }}
+        </p>
+        <p
+          v-else-if="duplicateAliases"
+          class="mt-1 text-[11px] text-amber-300"
+          data-testid="binary-candidates-duplicate-alias"
+        >
+          {{ t('binaryCandidates.duplicateAlias') }}
+        </p>
+        <p v-if="candidates.error" class="mt-1 text-[11px] text-red-300">{{ candidates.error }}</p>
+        <div class="mt-2 flex justify-end">
+          <UButton
+            size="xs"
+            :disabled="!canKeep || !access.canExecuteRuns.value"
+            :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+            :loading="candidates.keeping"
+            data-testid="binary-candidates-keep"
+            @click="onKeep"
+          >
+            {{ t('binaryCandidates.keepAction', { count: selected.length }) }}
+          </UButton>
+        </div>
+      </div>
+    </div>
+  </ResultWindowShell>
+</template>

package/app/components/binaryOutput/BinaryOutputReport.vue

@@ -14,6 +14,7 @@
 import { computed } from 'vue'
 import type { PipelineStep } from '~/types/execution'
 import { BINARY_OUTPUT_STATE_KEYS, binaryOutputView } from '~/utils/binaryOutput'
+import { binaryCandidateView } from '~/utils/binaryCandidates'
 import CopyButton from '~/components/common/CopyButton.vue'
 
 // Two callers, one renderer — the same split `StepEffortReport` makes: the generic step-detail
@@ -27,6 +28,16 @@ const { t } = useI18n()
 
 const view = computed(() => binaryOutputView(props.step))
 
+/**
+ * The CANDIDATE decision, when this step compared before delivering.
+ *
+ * Rendered here rather than left to the comparison window, because that window is reachable only
+ * while the run is PARKED on it: once the choice is made, a step click routes to the kind's own
+ * result view and the record of what was compared, and by whom, would have nowhere to live. This
+ * is the same placement rule the artifacts above it follow, one decision earlier.
+ */
+const candidates = computed(() => binaryCandidateView(props.step))
+
 /**
  * The outcome's own copy, from the shared exhaustive map — shared so the collapsed section row
  * above this panel and the sentence inside it can never claim different outcomes. `stored`
@@ -55,6 +66,28 @@ const state = computed(() => {
       <span>{{ t('binaryOutput.heading') }}</span>
     </div>
 
+    <!-- The CANDIDATE decision, when this step compared before delivering. It sits ABOVE the
+         delivery outcome because it happened first, and because "which of four was this" is the
+         question the artifacts below cannot answer. An AUTOMATIC keep says so: nobody looked. -->
+    <p
+      v-if="candidates && candidates.state.candidates.length > 0"
+      class="text-[12px] leading-relaxed text-slate-300"
+      data-testid="binary-output-candidate-decision"
+    >
+      {{
+        candidates.automatic
+          ? t('binaryOutput.candidates.automatic', { total: candidates.state.candidates.length })
+          : candidates.state.choice
+            ? t('binaryOutput.candidates.chosen', {
+                kept: candidates.state.choice.kept.length,
+                total: candidates.state.candidates.length,
+              })
+            : t('binaryOutput.candidates.awaiting', {
+                total: candidates.state.candidates.length,
+              })
+      }}
+    </p>
+
     <!-- What happened, in one sentence, before any list. Four of the five states have no list
          at all, and the fifth still needs its qualifications read alongside it. -->
     <p

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

@@ -392,13 +392,9 @@ 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"
-                :title="statusHint"
-                >{{ statusLabel }}</UBadge
-              >
+              <UBadge :color="statusMeta.chip" 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 status badge
                    (the one view-only affordance here). -->

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

@@ -97,7 +97,7 @@ function onHandle(e: PointerEvent) {
           <UIcon name="i-lucide-milestone" class="h-4 w-4 shrink-0 text-indigo-400" />
           <div class="text-xs font-semibold text-white">{{ block.title }}</div>
         </div>
-        <UBadge :color="INITIATIVE_STATUS_CHIPS[status] as any" variant="subtle" size="sm">
+        <UBadge :color="INITIATIVE_STATUS_CHIPS[status]" variant="subtle" size="sm">
           {{ statusLabel }}
         </UBadge>
       </div>

package/app/components/focus/BlockFocusView.vue

@@ -124,7 +124,7 @@ function openApprovalFor(approvalId: string) {
           {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
         </div>
       </div>
-      <UBadge :color="statusMeta.chip as any" variant="subtle" class="ms-2">
+      <UBadge :color="statusMeta.chip" variant="subtle" class="ms-2">
         {{ statusMeta.label }}
       </UBadge>
       <div class="ms-auto flex items-center gap-2">

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -26,7 +26,9 @@ const { t } = useI18n()
 // Hybrid: state rides the coder step (like follow-ups), but warm it from the GET on open too.
 // No `stepRef`: this is a pre-run decision, so there's no "restart from here".
 const { open, blockId, instanceId, stepIndex, close } = useResultView('fork-decision', {
-  onOpen: ({ blockId }) => void forkDecision.load(blockId),
+  onOpen: ({ instanceId }) => {
+    if (instanceId) void forkDecision.load(instanceId)
+  },
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/outcome/OutcomeSummaryWindow.vue

@@ -39,6 +39,7 @@ import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import type { BadgeColor } from '~/utils/badge'
 
 const board = useBoardStore()
 const documents = useDocumentsStore()
@@ -105,8 +106,6 @@ const DISPOSITION_KEYS: Record<OutcomeDisposition, string> = {
   not_run: 'outcome.disposition.not_run',
   unknown: 'outcome.disposition.unknown',
 }
-/** The badge palette, named once so every colour map below is checked against it. */
-type BadgeColor = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
 
 const DISPOSITION_COLOR: Record<OutcomeDisposition, BadgeColor> = {
   merged: 'success',

package/app/components/panels/AgentStepDetail.vue

@@ -21,7 +21,11 @@ import StepExecutionHistory from '~/components/board/StepExecutionHistory.vue'
 import { useStepTimer } from '~/composables/useStepTimer'
 import { useStepProse } from '~/composables/useStepProse'
 import { useStepApproval } from '~/composables/useStepApproval'
-import { dedicatedParkView } from '~/utils/pipelineRender'
+import {
+  REDIRECT_PARK_PRESENTATION,
+  type RedirectParkView,
+  dedicatedParkView,
+} from '~/utils/pipelineRender'
 import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
@@ -191,14 +195,37 @@ const genericApprovalPending = computed(
   () => approvalPending.value && !companionExceeded.value && !dedicatedPark.value,
 )
 
-/** Jump from this overlay to the window that can actually resolve the dedicated park. */
+/**
+ * How the park that holds this step presents itself (prose, icon, action label), or null when no
+ * window owns it. Read from the shared table rather than branched on here, so this overlay cannot
+ * go on naming the fork decision for a park that is not one.
+ */
+const parkPresentation = computed(() =>
+  dedicatedPark.value && dedicatedPark.value !== 'input-gate'
+    ? REDIRECT_PARK_PRESENTATION[dedicatedPark.value]
+    : null,
+)
+
+/**
+ * Jump from this overlay to the window that can actually resolve the dedicated park.
+ *
+ * A `Record` over the vocabulary rather than an `if` chain, for the reason the presentation table
+ * gives: an unhandled member falls out of a chain as a button that closes this overlay and opens
+ * NOTHING, which is indistinguishable from a misclick. Here a new park fails to compile until it
+ * names its opener.
+ */
+const PARK_OPENERS: Record<RedirectParkView, (instanceId: string, stepIndex: number) => void> = {
+  'follow-ups': (id, idx) => ui.openFollowUps(id, idx),
+  'fork-decision': (id, idx) => ui.openForkDecision(id, idx),
+  'binary-candidates': (id, idx) => ui.openBinaryCandidates(id, idx),
+}
+
 function openDedicatedWindow() {
   const c = ctx.value
   const park = dedicatedPark.value
-  if (!c || !park) return
+  if (!c || !park || park === 'input-gate') return
   close()
-  if (park === 'follow-ups') ui.openFollowUps(c.instanceId, c.stepIndex)
-  else if (park === 'fork-decision') ui.openForkDecision(c.instanceId, c.stepIndex)
+  PARK_OPENERS[park](c.instanceId, c.stepIndex)
 }
 
 // The GitHub-style approval/review state machine for a pending gate step. A park a
@@ -476,9 +503,11 @@ async function copyOutput() {
                 @resolve="resolveCompanionCap"
               />
 
-              <!-- a park a dedicated window owns (fork choice / follow-up triage): the
-                   generic approval rail can't resolve it (the server refuses), so point
-                   the human at the window that can -->
+              <!-- a park a dedicated window owns (fork choice / follow-up triage / candidate
+                   comparison): the generic approval rail can't resolve it (the server refuses),
+                   so point the human at the window that can. Copy and icon come from the shared
+                   per-park table, so a park added to the vocabulary can never inherit another
+                   one's wording here. -->
               <!-- the pre-dispatch input gate holds this step: answered here, in place -->
               <InputGateNotice
                 v-if="inputGateVerdict && instance"
@@ -489,30 +518,23 @@ async function copyOutput() {
               />
 
               <div
-                v-if="dedicatedPark && dedicatedPark !== 'input-gate'"
+                v-if="parkPresentation"
                 class="rounded-xl border border-amber-500/30 bg-amber-500/5 p-4"
                 data-testid="dedicated-park-redirect"
+                :data-park="dedicatedPark"
               >
                 <p class="text-[13px] leading-relaxed text-amber-200/90">
-                  {{
-                    dedicatedPark === 'follow-ups'
-                      ? t('panels.stepDetail.followUpsParked')
-                      : t('panels.stepDetail.forkParked')
-                  }}
+                  {{ t(parkPresentation.noticeKey) }}
                 </p>
                 <UButton
                   class="mt-3"
                   color="primary"
                   size="sm"
-                  :icon="dedicatedPark === 'follow-ups' ? 'i-lucide-compass' : 'i-lucide-git-fork'"
+                  :icon="parkPresentation.icon"
                   data-testid="dedicated-park-open"
                   @click="openDedicatedWindow"
                 >
-                  {{
-                    dedicatedPark === 'follow-ups'
-                      ? t('panels.stepDetail.openFollowUps')
-                      : t('panels.stepDetail.chooseApproach')
-                  }}
+                  {{ t(parkPresentation.actionKey) }}
                 </UButton>
               </div>
 

package/app/components/panels/InspectorPanel.vue

@@ -328,7 +328,7 @@ const showOriginalDescription = ref(false)
           <div>
             <div class="text-sm font-semibold text-white">{{ block.title }}</div>
             <div class="mt-0.5 flex items-center gap-1.5">
-              <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">
+              <UBadge :color="statusMeta.chip" variant="subtle" size="sm">
                 {{ statusLabel }}
               </UBadge>
               <span class="text-[10px] uppercase tracking-wide text-slate-500">{{ level }}</span>
@@ -521,18 +521,13 @@ const showOriginalDescription = ref(false)
            wrapper). Replaces the pre-slice-4 `v-if` fan; `subject-key` is the block
            id, so switching selections remounts panel content (matching the old
            per-panel `:key`). A consumer contributes its own panels to the SAME
-           group via `registerAppModule`.
-
-           The `subject` cast is an upstream typing quirk, not a modelling escape
-           hatch: `<PanelsOutlet>` declares `subject` as `PropType<unknown>` with
-           `default: null`, which Volar narrows to `null`, so passing a typed
-           `Block | null` is rejected at compile time. `unknown` is the real
-           runtime contract; `as any` is the minimal unblock until the binding
-           types the prop explicitly (filed upstream — see the slice-4 residuals
-           in backend/docs/adr/0049-modular-vue-adoption.md). -->
+           group via `registerAppModule`. `subject` used to need an `as any`: the
+           outlet's `default: null` narrowed the declared `PropType<unknown>` to
+           `null`, rejecting a typed `Block | null`. The published prop type now
+           resolves to `unknown`, so the binding passes through unasserted. -->
       <PanelsOutlet
         :group="inspectorPanels"
-        :subject="(block ?? null) as any"
+        :subject="block ?? null"
         :subject-key="block?.id ?? ''"
       />
 

package/app/components/panels/ResultWindowShell.logic.spec.ts

@@ -27,6 +27,10 @@ const SHELL_DEFAULT_WIDTH: ResultWindowWidth = '3xl'
  * not made the decision.
  */
 const WINDOWS: Record<string, { width: ResultWindowWidth; why: string }> = {
+  'binaryCandidates/BinaryCandidatesWindow.vue': {
+    width: '5xl',
+    why: 'a preview grid of generated candidates grouped by subject, read side by side to be compared, with no rail beside it',
+  },
   'brainstorm/BrainstormWindow.vue': {
     width: 'full',
     why: 'options column + the choose/dismiss action rail',