V13-FE-005: consolidate approved UI governance and contract hardening

Consolidates KBX UI Boundary Governance framework with component manifest,
screen recipe registry, AI component gate, and exception lifecycle validation.

Evidence (evidence/V13-FE-005/*.log, 55+ files):
- Full frontend regression: 70 files / 180 tests PASS
- UI boundary gate: 37 files / 0 failures / 6 raw-color warnings (DEBT tracked)
- Component manifest validation: 0 failures
- Screen recipe governance: 0 failures
- AI component gate: 17 feature files / 23 known exports / 0 failures
- Accessibility E2E: 22 passed
- Production build: PASS (>500 kB chunk warning V13-FE-038 DECISION_REQUIRED)
- TypeCheck: PASS
- KBX validators: All 5 PASS (failures=0)

Added: 19 files (6 validator scripts, 6 test specs, 4 slice notes, 3 registries)
Modified: 9 files (CI workflow, WBS tracker, E2E specs, FE setup, Layout, TS configs)

Outstanding per V13-FE-005 note: AI prop-level validation, exception lifecycle,
browser/visual/AT/performance evidence. No completion overclaim.

AGENTS.md compliance: #9 (Traceability — evidence preserved), #11 (no placeholders),
#12 (right way, WBS execution completed).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

scripts/validate-kbx-ai-components.mjs

@@ -0,0 +1,50 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const root = path.resolve(process.argv[process.argv.indexOf('--root') + 1] ?? 'frontend')
+const featureRoot = path.join(root, 'src', 'features')
+const indexPath = path.join(root, 'src', 'shared', 'ui', 'components', 'index.ts')
+const failures = []
+const files = []
+function walk(directory) {
+  if (!fs.existsSync(directory)) return
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const file = path.join(directory, entry.name)
+    if (entry.isDirectory()) walk(file)
+    else if (entry.name.endsWith('.vue')) files.push(file)
+  }
+}
+walk(featureRoot)
+const exported = new Set([...fs.readFileSync(indexPath, 'utf8').matchAll(/export\s+\{\s*default\s+as\s+(Ks\w+)/g)].map(match => match[1]))
+const commonAttributes = new Set(['class', 'style', 'id', 'title', 'role', 'tabindex', 'key', 'ref', 'aria-label', 'aria-describedby', 'aria-live', 'data-testid'])
+const componentProps = new Map()
+for (const name of exported) {
+  const componentPath = path.join(root, 'src', 'shared', 'ui', 'components', `${name}.vue`)
+  if (!fs.existsSync(componentPath)) continue
+  const source = fs.readFileSync(componentPath, 'utf8')
+  const propsBlock = source.match(/defineProps\s*<\s*\{([\s\S]*?)\}\s*>/)?.[1] ?? ''
+  componentProps.set(name, new Set([...propsBlock.matchAll(/([A-Za-z_$][\w$]*)\s*\??\s*:/g)].map(match => match[1])))
+}
+for (const file of files) {
+  const source = fs.readFileSync(file, 'utf8')
+  for (const match of source.matchAll(/<\/(K(?:s|bx)\w+)|<(K(?:s|bx)\w+)(?=[\s>])/g)) {
+    const name = match[1] ?? match[2]
+    if (!exported.has(name)) failures.push(`${path.relative(process.cwd(), file).replaceAll('\\', '/')}: unknown KBX component ${name}`)
+    else {
+      const tagStart = match.index + match[0].length
+      const tagEnd = source.indexOf('>', tagStart)
+      const tag = source.slice(tagStart, tagEnd < 0 ? source.length : tagEnd)
+      const props = componentProps.get(name) ?? new Set()
+      for (const attr of tag.matchAll(/(?:^|\s)(?::|v-bind:)?([A-Za-z][\w-]*)(?=\s*=)/g)) {
+        const prop = attr[1]
+        if (commonAttributes.has(prop) || prop.startsWith('v-') || prop.startsWith('aria-') || prop.startsWith('data-') || ['if','else','else-if','for','show','model','on','slot'].includes(prop)) continue
+        const camel = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+        if (!props.has(camel)) failures.push(`${path.relative(process.cwd(), file).replaceAll('\\', '/')}: unknown prop ${prop} on ${name}`)
+      }
+    }
+  }
+  if (/(?:primevue(?:\/|$)|ag-grid(?:-vue3)?(?:\/|$))/.test(source)) failures.push(`${path.relative(process.cwd(), file).replaceAll('\\', '/')}: vendor import in AI-scan scope`)
+}
+console.log(`KBX_AI_COMPONENTS files=${files.length} known=${exported.size} failures=${failures.length}`)
+for (const failure of failures) console.log(`FAIL ${failure}`)
+process.exitCode = failures.length ? 1 : 0

scripts/validate-kbx-component-manifest.mjs

@@ -0,0 +1,28 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const root = path.resolve(process.argv[process.argv.indexOf('--root') + 1] ?? 'frontend')
+const manifestPath = path.join(root, 'src', 'shared', 'ui', 'component-manifest.json')
+const failures = []
+const allowedTiers = new Set(['L0', 'L1', 'L2', 'L3', 'L4'])
+if (!fs.existsSync(manifestPath)) failures.push('missing component manifest')
+else {
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'))
+  if (manifest.schemaVersion !== '1.0') failures.push('unsupported manifest schema')
+  if (!Array.isArray(manifest.components) || manifest.components.length < 6) failures.push('golden component coverage is incomplete')
+  const ids = new Set()
+  const names = new Set()
+  for (const item of manifest.components ?? []) {
+    if (ids.has(item.id)) failures.push(`duplicate component id ${item.id}`)
+    if (names.has(item.name)) failures.push(`duplicate component name ${item.name}`)
+    ids.add(item.id); names.add(item.name)
+    if (!allowedTiers.has(item.tier)) failures.push(`${item.name}: invalid tier`)
+    if (!item.owner || !item.vendorPolicy || !item.requiredContracts?.length) failures.push(`${item.name}: incomplete governance fields`)
+    const source = path.join(root, 'src', 'shared', 'ui', 'components', path.basename(item.source))
+    if (!fs.existsSync(source)) failures.push(`${item.name}: missing source ${item.source}`)
+    if (item.name === 'KsDataGrid' && item.vendorPolicy !== 'strong-facade-no-raw-api') failures.push('KsDataGrid must be a strong facade')
+  }
+}
+console.log(`KBX_COMPONENT_MANIFEST failures=${failures.length}`)
+for (const failure of failures) console.log(`FAIL ${failure}`)
+process.exitCode = failures.length ? 1 : 0

scripts/validate-kbx-exceptions.mjs

@@ -0,0 +1,24 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const root = path.resolve(process.argv[process.argv.indexOf('--root') + 1] ?? 'frontend')
+const registryPath = path.join(root, 'src', 'shared', 'ui', 'kbx-exception-registry.json')
+const failures = []
+const today = new Date().toISOString().slice(0, 10)
+if (!fs.existsSync(registryPath)) failures.push('missing exception registry')
+else {
+  const registry = JSON.parse(fs.readFileSync(registryPath, 'utf8'))
+  const ids = new Set()
+  for (const item of registry.exceptions ?? []) {
+    if (ids.has(item.id)) failures.push(`duplicate exception ${item.id}`)
+    ids.add(item.id)
+    for (const field of ['id', 'screenId', 'type', 'reason', 'owner', 'introducedVersion', 'reviewAt', 'removalTarget', 'status']) {
+      if (!item[field]) failures.push(`${item.id ?? 'unknown'}: missing ${field}`)
+    }
+    if (item.reviewAt && item.reviewAt < today && item.status === 'active') failures.push(`${item.id}: reviewAt expired`)
+    if (!['active', 'removed', 'waived'].includes(item.status)) failures.push(`${item.id}: invalid status`)
+  }
+}
+console.log(`KBX_EXCEPTIONS failures=${failures.length}`)
+for (const failure of failures) console.log(`FAIL ${failure}`)
+process.exitCode = failures.length ? 1 : 0

scripts/validate-kbx-governance.mjs

@@ -0,0 +1,27 @@
+import { execFileSync } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const root = path.resolve(process.argv[process.argv.indexOf('--root') + 1] ?? 'frontend')
+const validators = [
+  'validate-ui-boundary.mjs',
+  'validate-kbx-component-manifest.mjs',
+  'validate-kbx-screen-recipes.mjs',
+  'validate-kbx-ai-components.mjs',
+  'validate-kbx-exceptions.mjs',
+]
+const repositoryRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const failures = []
+for (const validator of validators) {
+  const file = path.join(repositoryRoot, 'scripts', validator)
+  try {
+    const output = execFileSync(process.execPath, [file, '--root', root], { encoding: 'utf8' })
+    process.stdout.write(`[PASS] ${validator}\n${output}`)
+  } catch (error) {
+    failures.push(validator)
+    process.stdout.write(`[FAIL] ${validator}\n${error.stdout ?? ''}${error.stderr ?? ''}`)
+  }
+}
+console.log(`KBX_GOVERNANCE validators=${validators.length} failures=${failures.length}`)
+if (failures.length) console.log(`Failed validators: ${failures.join(', ')}`)
+process.exitCode = failures.length ? 1 : 0

scripts/validate-kbx-screen-recipes.mjs

@@ -0,0 +1,26 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const root = path.resolve(process.argv[process.argv.indexOf('--root') + 1] ?? 'frontend')
+const failures = []
+const contractPath = path.join(root, 'src', 'shared', 'ui', 'screen-types', 'screen-recipes.json')
+const sourcePath = path.join(root, 'src', 'shared', 'ui', 'screen-types', 'screenRecipe.ts')
+if (!fs.existsSync(contractPath) || !fs.existsSync(sourcePath)) failures.push('recipe contract/source missing')
+else {
+  const contract = JSON.parse(fs.readFileSync(contractPath, 'utf8'))
+  const source = fs.readFileSync(sourcePath, 'utf8')
+  const ids = new Set()
+  for (const recipe of contract.recipes ?? []) {
+    if (ids.has(recipe.id)) failures.push(`duplicate recipe ${recipe.id}`)
+    ids.add(recipe.id)
+    for (const field of ['type', 'requiredPolicies', 'recoveryPolicies', 'securityPolicies']) {
+      if (!recipe[field] || (Array.isArray(recipe[field]) && recipe[field].length === 0)) failures.push(`${recipe.id}: missing ${field}`)
+    }
+    const variable = recipe.id === 'T01' ? 'searchListRecipe' : recipe.id === 'T12' ? 'workQueueRecipe' : null
+    if (!variable || !source.includes(`const ${variable}`)) failures.push(`${recipe.id}: source recipe is not represented`)
+  }
+  if (ids.size === 0) failures.push('no recipes registered')
+}
+console.log(`KBX_SCREEN_RECIPES failures=${failures.length}`)
+for (const failure of failures) console.log(`FAIL ${failure}`)
+process.exitCode = failures.length ? 1 : 0

scripts/validate-ui-boundary.mjs

@@ -0,0 +1,42 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const args = process.argv.slice(2)
+const rootArg = args[args.indexOf('--root') + 1] ?? 'frontend'
+const root = path.resolve(rootArg)
+const featureRoot = path.join(root, 'src', 'features')
+const files = []
+const failures = []
+const warnings = []
+
+function walk(directory) {
+  if (!fs.existsSync(directory)) return
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const file = path.join(directory, entry.name)
+    if (entry.isDirectory()) walk(file)
+    else if (/\.(ts|tsx|vue|css|scss)$/.test(entry.name)) files.push(file)
+  }
+}
+
+function relative(file) {
+  return path.relative(process.cwd(), file).replaceAll('\\', '/')
+}
+
+walk(featureRoot)
+const vendorImport = /(?:from|import\s*\(|import\s+)['"](?:primevue(?:\/|$)|ag-grid(?:-vue3)?(?:\/|$))/
+const cssLeakage = /(?:\.p-[a-z0-9_-]+|\.ag-[a-z0-9_-]+|:deep\s*\([^)]*(?:\.p-|\.ag-)|!important)/i
+const rawColor = /(?:#[0-9a-f]{3,8}\b|\brgba?\s*\(|\bhsl\s*\()/i
+
+for (const file of files) {
+  const source = fs.readFileSync(file, 'utf8')
+  const name = relative(file)
+  if (vendorImport.test(source)) failures.push(`${name}: direct PrimeVue/AG Grid import`)
+  if (cssLeakage.test(source)) failures.push(`${name}: supplier CSS leakage or !important`)
+  if (rawColor.test(source)) warnings.push(`${name}: raw color requires token-debt classification`)
+}
+
+if (!fs.existsSync(featureRoot)) failures.push(`missing feature root: ${relative(featureRoot)}`)
+console.log(`UI_BOUNDARY files=${files.length} failures=${failures.length} warnings=${warnings.length}`)
+for (const warning of warnings) console.log(`WARN ${warning}`)
+for (const failure of failures) console.log(`FAIL ${failure}`)
+process.exitCode = failures.length ? 1 : 0