@cat-factory/app 0.256.2 → 0.256.3

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/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/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/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/pipeline/PipelineProgress.vue

@@ -16,6 +16,7 @@ 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<{
@@ -147,15 +148,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 +255,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>

package/app/components/settings/KubernetesEngineForm.vue

@@ -14,6 +14,7 @@ import type {
   InfraEngine,
   InfraHandlerConfig,
 } from '@cat-factory/contracts'
+import { isKubernetesUrlSource } from '@cat-factory/contracts'
 import type { K3sSetupPrefill } from '~/stores/ui'
 
 // The kube branch of the discriminated handler config this form produces (the `local-k3s` /
@@ -22,6 +23,10 @@ import type { K3sSetupPrefill } from '~/stores/ui'
 // `as never` cast, so a wrong config shape is caught at the call site instead of server-side.
 type KubeHandlerConfig = Extract<InfraHandlerConfig, { engine: 'local-k3s' | 'remote-kubernetes' }>
 type KubeHandlerPayload = { config: KubeHandlerConfig; secrets: Record<string, string> }
+/** The engine connection block itself, read off the variant so it cannot drift from it. */
+type KubeEngineConfig = KubeHandlerConfig['kubernetes']
+/** How the environment URL is derived: its own discriminated union, keyed by `source`. */
+type KubeUrlSource = KubeEngineConfig['url']
 
 const props = defineProps<{
   /** `local-k3s` or `remote-kubernetes` — the engine this handler is registered under. */
@@ -46,12 +51,9 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-type UrlSource =
-  | 'ingressTemplate'
-  | 'ingressStatus'
-  | 'serviceStatus'
-  | 'gatewayStatus'
-  | 'httpRouteStatus'
+/** The `source` discriminants, read off the contract union: a source added there makes
+ *  `buildUrl`'s switch non-exhaustive rather than leaving this list quietly short. */
+type UrlSource = KubeUrlSource['source']
 
 const form = reactive({
   label: '',
@@ -101,23 +103,34 @@ watch(
   (h) => {
     const cfg = h?.config
     if (!cfg || (cfg.engine !== 'local-k3s' && cfg.engine !== 'remote-kubernetes')) return
-    const k = cfg.kubernetes as Record<string, unknown>
-    form.label = typeof k.label === 'string' ? k.label : ''
-    form.apiServerUrl = typeof k.apiServerUrl === 'string' ? k.apiServerUrl : ''
-    form.caCertPem = typeof k.caCertPem === 'string' ? k.caCertPem : ''
+    // Narrowing `cfg.engine` above types `kubernetes` as the engine config, so these read the
+    // contract directly. They used to widen it to a `Record` and `typeof`-guard every field,
+    // which re-derived at runtime what the discriminated union already states.
+    const k = cfg.kubernetes
+    form.label = k.label
+    form.apiServerUrl = k.apiServerUrl
+    form.caCertPem = k.caCertPem ?? ''
     form.insecureSkipTlsVerify = k.insecureSkipTlsVerify === true
-    form.namespaceTemplate = typeof k.namespaceTemplate === 'string' ? k.namespaceTemplate : ''
-    form.imageTemplate = typeof k.imageTemplate === 'string' ? k.imageTemplate : ''
-    const url = k.url as Record<string, unknown> | undefined
-    const src = typeof url?.source === 'string' ? (url.source as UrlSource) : 'ingressTemplate'
-    form.urlSource = src
-    form.hostTemplate = typeof url?.hostTemplate === 'string' ? url.hostTemplate : ''
-    form.ingressName = typeof url?.ingressName === 'string' ? url.ingressName : ''
-    form.serviceName = typeof url?.serviceName === 'string' ? url.serviceName : ''
-    form.servicePort = typeof url?.port === 'number' ? String(url.port) : ''
-    form.gatewayName = typeof url?.gatewayName === 'string' ? url.gatewayName : ''
-    form.httpRouteName = typeof url?.httpRouteName === 'string' ? url.httpRouteName : ''
-    form.urlScheme = url?.scheme === 'http' || url?.scheme === 'https' ? url.scheme : 'default'
+    form.namespaceTemplate = k.namespaceTemplate ?? ''
+    form.imageTemplate = k.imageTemplate ?? ''
+    // Each url field is read off the ONE variant that carries it, so a field belonging to a
+    // different `source` cannot silently populate the form.
+    //
+    // Typed as present with an on-union `source`, read as neither: both were true when the
+    // connect form admitted this config, and the value has been through storage since — which is
+    // exactly why the backend re-parses a stored `providerConfig` rather than asserting it, and
+    // this form is where an operator REPAIRS one that drifted. An unrecognised source falls back
+    // to the form's default, because `buildUrl` has no branch to build a config out of one.
+    const url: KubeUrlSource | undefined = k.url
+    const source = url?.source
+    form.urlSource = isKubernetesUrlSource(source) ? source : 'ingressTemplate'
+    form.hostTemplate = url?.source === 'ingressTemplate' ? url.hostTemplate : ''
+    form.ingressName = url?.source === 'ingressStatus' ? (url.ingressName ?? '') : ''
+    form.serviceName = url?.source === 'serviceStatus' ? url.serviceName : ''
+    form.servicePort = url?.source === 'serviceStatus' && url.port != null ? String(url.port) : ''
+    form.gatewayName = url?.source === 'gatewayStatus' ? (url.gatewayName ?? '') : ''
+    form.httpRouteName = url?.source === 'httpRouteStatus' ? (url.httpRouteName ?? '') : ''
+    form.urlScheme = url?.scheme ?? 'default'
   },
   { immediate: true },
 )
@@ -222,42 +235,81 @@ const connectBlockedReason = computed(() => {
   return t('settings.infrastructure.kubernetesEngine.invalidPort')
 })
 
-function buildUrl(): Record<string, unknown> {
-  const url: Record<string, unknown> = { source: form.urlSource }
-  if (form.urlSource === 'ingressTemplate') {
-    url.hostTemplate = form.hostTemplate.trim()
-  } else if (form.urlSource === 'ingressStatus') {
-    if (form.ingressName.trim()) url.ingressName = form.ingressName.trim()
-  } else if (form.urlSource === 'serviceStatus') {
-    url.serviceName = form.serviceName.trim()
-    const port = Number(form.servicePort)
-    if (form.servicePort.trim() && Number.isInteger(port)) url.port = port
-  } else if (form.urlSource === 'gatewayStatus') {
-    if (form.gatewayName.trim()) url.gatewayName = form.gatewayName.trim()
-  } else {
-    if (form.httpRouteName.trim()) url.httpRouteName = form.httpRouteName.trim()
+/**
+ * The URL-derivation block, built as the contract's discriminated union rather than a `Record`.
+ * Each branch returns its OWN variant, so the fields a source carries are checked against that
+ * source: setting `hostTemplate` on a `serviceStatus` url stops compiling instead of shipping a
+ * config the backend rejects. `urlScheme` is the one field every variant shares, and the
+ * 'default' sentinel means "omit it and let the derivation decide".
+ */
+function buildUrl(): KubeUrlSource {
+  const scheme = form.urlScheme === 'default' ? {} : { scheme: form.urlScheme }
+  switch (form.urlSource) {
+    case 'ingressTemplate':
+      return { source: 'ingressTemplate', hostTemplate: form.hostTemplate.trim(), ...scheme }
+    case 'ingressStatus': {
+      const ingressName = form.ingressName.trim()
+      return { source: 'ingressStatus', ...(ingressName ? { ingressName } : {}), ...scheme }
+    }
+    case 'serviceStatus': {
+      const port = Number(form.servicePort)
+      return {
+        source: 'serviceStatus',
+        serviceName: form.serviceName.trim(),
+        ...(form.servicePort.trim() && Number.isInteger(port) ? { port } : {}),
+        ...scheme,
+      }
+    }
+    case 'gatewayStatus': {
+      const gatewayName = form.gatewayName.trim()
+      return { source: 'gatewayStatus', ...(gatewayName ? { gatewayName } : {}), ...scheme }
+    }
+    case 'httpRouteStatus': {
+      const httpRouteName = form.httpRouteName.trim()
+      return { source: 'httpRouteStatus', ...(httpRouteName ? { httpRouteName } : {}), ...scheme }
+    }
+    default:
+      return refuseUnknownUrlSource(form.urlSource)
   }
-  if (form.urlScheme !== 'default') url.scheme = form.urlScheme
-  return url
+}
+
+/**
+ * A `source` outside the contract union, which the switch above therefore cannot build.
+ *
+ * The parameter is `never`, so this keeps BOTH properties at once: a source added to the contract
+ * without a case above still fails the typecheck (the argument stops being `never`), while a value
+ * the union never had is refused at runtime instead of falling off the end of the switch. That end
+ * is what the `default` exists to close: it returned `undefined`, which `buildPayload` then sent as
+ * the config's `url` for the backend to reject as a missing block.
+ *
+ * Deliberately NOT mapped onto a current source. Nothing here knows which one was meant, and a
+ * guess would silently rewrite the operator's URL derivation to something they never picked.
+ */
+function refuseUnknownUrlSource(source: never): never {
+  throw new Error(`Unsupported Kubernetes URL source '${String(source)}'`)
 }
 
 function buildPayload(): KubeHandlerPayload {
-  const kubernetes: Record<string, unknown> = {
+  // Built as the contract type rather than assembled into a `Record` and asserted: an optional
+  // field is a conditional SPREAD, so a key the config does not declare (or a value of the
+  // wrong type) fails the build here instead of surfacing as a server-side validation refusal.
+  const caCertPem = form.caCertPem.trim()
+  const namespaceTemplate = form.namespaceTemplate.trim()
+  const imageTemplate = form.imageTemplate.trim()
+  const kubernetes: KubeEngineConfig = {
     label: form.label.trim(),
     apiServerUrl: form.apiServerUrl.trim(),
     url: buildUrl(),
+    ...(caCertPem ? { caCertPem } : {}),
+    ...(form.insecureSkipTlsVerify ? { insecureSkipTlsVerify: true } : {}),
+    ...(namespaceTemplate ? { namespaceTemplate } : {}),
+    ...(imageTemplate ? { imageTemplate } : {}),
   }
-  if (form.caCertPem.trim()) kubernetes.caCertPem = form.caCertPem.trim()
-  if (form.insecureSkipTlsVerify) kubernetes.insecureSkipTlsVerify = true
-  if (form.namespaceTemplate.trim()) kubernetes.namespaceTemplate = form.namespaceTemplate.trim()
-  if (form.imageTemplate.trim()) kubernetes.imageTemplate = form.imageTemplate.trim()
-  // One honest assertion at the boundary that actually builds the shape (the reactive form is
-  // dynamically assembled, then validated server-side); the emitted config flows typed onward.
   // OMIT the token when the field is blank so the backend preserves the saved one (a blank
   // secret means "keep it") — only a typed value is sent, and it replaces the stored token.
   const token = apiToken.value.trim()
   return {
-    config: { engine: props.engine, kubernetes } as unknown as KubeHandlerConfig,
+    config: { engine: props.engine, kubernetes },
     secrets: token ? { [KUBERNETES_ENV_TOKEN_SECRET_KEY]: token } : {},
   }
 }

package/app/components/spec/ServiceSpecWindow.vue

@@ -21,6 +21,7 @@ import {
   summarizeSpecStates,
   type RequirementStateFilter,
 } from './ServiceSpecWindow.logic'
+import type { BadgeColor } from '~/utils/badge'
 
 const { t } = useI18n()
 const board = useBoardStore()
@@ -115,7 +116,7 @@ function retry() {
 
 // Exhaustive priority → label/chip map. Literal `t()` keys keep the typed-key drift
 // guard live, vs a runtime-built `spec.priority.${value}`.
-const PRIORITY_META: Record<RequirementPriority, { label: string; chip: string }> = {
+const PRIORITY_META: Record<RequirementPriority, { label: string; chip: BadgeColor }> = {
   must: { label: t('spec.priority.must'), chip: 'error' },
   should: { label: t('spec.priority.should'), chip: 'warning' },
   could: { label: t('spec.priority.could'), chip: 'neutral' },
@@ -131,7 +132,7 @@ const KIND_LABELS: Record<RequirementKind, string> = {
 // Exhaustive implementation-state → presentation map. `established` is the only state that
 // means "the service is observed to do this"; everything else is a behaviour that has been
 // agreed and not yet seen to hold, which must never read as standing behaviour.
-const STATE_META: Record<RequirementState, { label: string; chip: string; icon: string }> = {
+const STATE_META: Record<RequirementState, { label: string; chip: BadgeColor; icon: string }> = {
   established: {
     label: t('spec.state.established'),
     chip: 'success',
@@ -448,7 +449,7 @@ function kindLabel(item: RequirementItem): string {
                     <!-- implementation state: agreed vs observed to hold. The distinction the
                          build prompt and the tester act on, so a reader must see it too. -->
                     <UBadge
-                      :color="stateMeta(req).chip as any"
+                      :color="stateMeta(req).chip"
                       variant="subtle"
                       size="sm"
                       :icon="stateMeta(req).icon"
@@ -456,7 +457,7 @@ function kindLabel(item: RequirementItem): string {
                     >
                       {{ stateMeta(req).label }}
                     </UBadge>
-                    <UBadge :color="priorityMeta(req).chip as any" variant="subtle" size="sm">
+                    <UBadge :color="priorityMeta(req).chip" variant="subtle" size="sm">
                       {{ priorityMeta(req).label }}
                     </UBadge>
                     <UBadge color="neutral" variant="subtle" size="sm">{{ kindLabel(req) }}</UBadge>

package/app/docs/architecture.md

@@ -3,7 +3,7 @@
 How the SPA stays in sync with the backend. The app is a **thin client**: it holds
 no business logic, calls the Worker for every mutation, and hydrates its stores
 from server snapshots plus pushed events. For the high-level tour see
-[`../README.md`](../README.md).
+[`frontend/app/README.md`](../../README.md).
 
 ## The three paths
 

package/app/modular/panels/inspector.ts

@@ -4,8 +4,8 @@ import type { PanelEntry } from '@modular-vue/core'
 import type { Block } from '~/types/domain'
 
 /** The engine's opaque component type on a `PanelEntry` (the neutral `UiComponent`,
- *  which isn't exported by name). A Vue component is a valid one; the outlet renders
- *  it as a Vue component. We reference it structurally so no cast reaches for `any`. */
+ *  which isn't exported by name). Referenced structurally off `PanelEntry` so a
+ *  `defineComponent` result is checked against it rather than asserted into it. */
 type PanelComponent = PanelEntry<Block>['component']
 import {
   INSPECTOR_PANELS_SLOT,
@@ -61,7 +61,7 @@ function blockPanel(component: Component, id: InspectorPanelId): PanelComponent
       const block = usePanelSubject<Block>()
       return () => h(component, { block: block.value })
     },
-  }) as unknown as PanelComponent
+  })
 }
 
 /** Exhaustive id → sub-panel map. Typed `Record<InspectorPanelId, …>` so adding a

package/app/stores/board/placement.ts

@@ -3,9 +3,29 @@ import { useServicesStore } from '~/stores/services'
 import { useWorkspaceStore } from '~/stores/workspace'
 import { createBoardDependencies } from './dependencies'
 import { moveRefusalKey } from './moveRefusal'
+import type { Block } from '~/types/domain'
 import type { BoardWriteContext } from './context'
 import { UNDO_WINDOW_MS } from './context'
 
+/** A field `updateBlock` may patch: the contract's key set, nothing wider. */
+type PatchKey = keyof UpdateBlockInput
+/** The pre-patch values of the fields one call touches, for the rollback. */
+type PatchSnapshot = Partial<Record<PatchKey, unknown>>
+
+/**
+ * View a block through the patch key set, for the optimistic write's snapshot + rollback.
+ *
+ * A plain widening, not an assertion: the rollback is inherently keyed by whatever the caller
+ * put in the patch, so it has to index the block dynamically, and this bounds that indexing to
+ * the contract instead of the `Record<string, unknown>` it used to widen to. Two patch keys
+ * (`customTaskTypeFields` / `builtinTaskTypeFields`) are request-only, since the server folds
+ * them into the block's `taskTypeFields`, so the view is `Partial`: they read as absent going in
+ * and are cleared again by a rollback, which is what the untyped version did.
+ */
+function blockAsPatchable(block: Block): PatchSnapshot {
+  return block
+}
+
 /**
  * The board's placement (drag/drop/reparent) and per-block edit operations — the writes that
  * move a block or patch its fields, including the dependency edges. Extracted from
@@ -194,10 +214,13 @@ export function createBoardPlacement(ctx: BoardWriteContext) {
     // Snapshot ONLY the fields this patch touches so a rejected write restores them exactly
     // (a patch may set several at once) rather than leaving a stale optimistic value stuck on
     // screen with no feedback — the same rollback contract the other mutations here follow.
-    const prev: Record<string, unknown> = {}
-    const patchRecord = patch as Record<string, unknown>
-    const record = b as unknown as Record<string, unknown>
-    for (const key of Object.keys(patch)) prev[key] = record[key]
+    // `Object.keys` is typed `string[]`, so the key set is narrowed to the patch contract once
+    // here; every read and write below then goes through `PatchKey`, and a key outside the
+    // contract cannot reach the block.
+    const keys = Object.keys(patch) as PatchKey[]
+    const prev: PatchSnapshot = {}
+    const before = blockAsPatchable(b)
+    for (const key of keys) prev[key] = before[key]
     Object.assign(b, patch) // optimistic
     try {
       upsert(await api.updateBlock(useWorkspaceStore().requireId(), id, patch))
@@ -206,10 +229,11 @@ export function createBoardPlacement(ctx: BoardWriteContext) {
       // swaps in a fresh one) while the write was in flight, so `b` can be stale. Only revert
       // fields that still hold OUR optimistic value, so a newer server value that landed
       // mid-flight isn't clobbered by the rollback.
-      const cur = getBlock(id) as unknown as Record<string, unknown> | undefined
-      if (cur) {
-        for (const key of Object.keys(patch)) {
-          if (cur[key] === patchRecord[key]) cur[key] = prev[key]
+      const live = getBlock(id)
+      if (live) {
+        const cur = blockAsPatchable(live)
+        for (const key of keys) {
+          if (cur[key] === patch[key]) cur[key] = prev[key]
         }
       }
       toast.add({

package/app/utils/badge.ts

@@ -0,0 +1,14 @@
+import type { BadgeProps } from '@nuxt/ui'
+
+/**
+ * The colour names a `UBadge` accepts, derived from the component's own prop type rather
+ * than restated as a literal union. Nuxt UI resolves the prop from the app config's badge
+ * theme, so deriving keeps a chip map honest if the deployment's palette gains or loses a
+ * colour, where a hand-written copy would just drift.
+ *
+ * A status → chip map types its values against this, which is what lets a `:color="…"`
+ * binding pass the value straight through. The maps used to be typed `string`, so every
+ * binding needed an `as any` to get past the prop's union; that cast also silently accepted
+ * a typo'd colour, which renders as an unstyled badge rather than failing the build.
+ */
+export type BadgeColor = NonNullable<BadgeProps['color']>

package/app/utils/catalog.ts

@@ -7,6 +7,7 @@ import type {
   BlockType,
   TaskTypeMeta,
 } from '~/types/domain'
+import type { BadgeColor } from '~/utils/badge'
 
 /** Simple unique id helper (fine for a client-only prototype). */
 export function uid(prefix = 'id'): string {
@@ -1022,7 +1023,7 @@ export function blockTypeMeta(type: BlockType): BlockTypeMeta {
 /** Color + iconography for each block status. */
 export const STATUS_META: Record<
   BlockStatus,
-  { label: string; color: string; chip: string; icon: string }
+  { label: string; color: string; chip: BadgeColor; icon: string }
 > = {
   planned: {
     label: 'Planned',

package/app/utils/initiative.ts

@@ -7,16 +7,13 @@ import type {
   InitiativeQa,
   InitiativeStatus,
 } from '~/types/domain'
+import type { BadgeColor } from '~/utils/badge'
 
 // Shared initiative presentation vocabulary, so the board card, the inspector body and
 // the tracker window render statuses/progress from ONE source. The exhaustive
 // `Record<Enum, …>` maps keep the tier-2 typecheck guard live (a new status without
 // a label/chip fails the build) without triplicating it across the components.
 
-/** Nuxt UI badge/chip colour names — mirrors `UBadge`'s `color` prop union, so a chip map
- *  types its values against it and the `:color` binding needs no cast. */
-type BadgeColor = 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'neutral'
-
 /** Initiative lifecycle status → i18n label key. */
 export const INITIATIVE_STATUS_LABEL_KEYS: Record<InitiativeStatus, string> = {
   planning: 'initiative.status.planning',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.256.2",
+  "version": "0.256.3",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "valibot": "^1.4.2",
     "vue": "3.5.41",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.283.1"
+    "@cat-factory/contracts": "0.284.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",