@cat-factory/app 0.69.1 → 0.70.0

package/app/components/board/TaskDependencyEdges.vue

@@ -18,6 +18,9 @@ const segments = ref<Seg[]>([])
 // Epic→member membership links (distinct style from dependency edges).
 type MemberSeg = { id: string; x1: number; y1: number; x2: number; y2: number }
 const memberSegments = ref<MemberSeg[]>([])
+// Frontend frame → bound service frame links (from a frontend's backend bindings).
+type FrontendSeg = { id: string; x1: number; y1: number; x2: number; y2: number }
+const frontendSegments = ref<FrontendSeg[]>([])
 
 // task → its dependencies, both ends being tasks
 const taskDeps = computed(() => {
@@ -43,6 +46,26 @@ const epicLinks = computed(() => {
   return out
 })
 
+// frontend frame → each service it binds a backend upstream to (its ephemeral env is the
+// "service under test"). The link IS a `service`-sourced backend binding on the frontend's
+// config; deduped so multiple env vars bound to the same service draw one edge.
+const frontendLinks = computed(() => {
+  const out: { id: string; source: string; target: string }[] = []
+  for (const f of board.frames) {
+    if (f.type !== 'frontend') continue
+    const seen = new Set<string>()
+    for (const binding of f.frontendConfig?.backendBindings ?? []) {
+      if (binding.source.kind !== 'service') continue
+      const serviceId = binding.source.serviceBlockId
+      if (seen.has(serviceId)) continue
+      seen.add(serviceId)
+      if (board.getBlock(serviceId))
+        out.push({ id: `${f.id}__fe__${serviceId}`, source: f.id, target: serviceId })
+    }
+  }
+  return out
+})
+
 /** Resolve a task's anchor: walk up task → module → service to the first card
  * that's actually rendered (a container may be collapsed). */
 function anchorEl(taskId: string): HTMLElement | null {
@@ -112,6 +135,23 @@ function recompute() {
     members.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
   }
   memberSegments.value = members
+
+  const fes: FrontendSeg[] = []
+  for (const link of frontendLinks.value) {
+    const a = anchorEl(link.source)
+    const b = anchorEl(link.target)
+    if (!a || !b || a === b) continue
+    const ra = a.getBoundingClientRect()
+    const rb = b.getBoundingClientRect()
+    const ax = ra.left + ra.width / 2 - origin.left
+    const ay = ra.top + ra.height / 2 - origin.top
+    const bx = rb.left + rb.width / 2 - origin.left
+    const by = rb.top + rb.height / 2 - origin.top
+    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
+    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
+    fes.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
+  }
+  frontendSegments.value = fes
 }
 
 const { pause, resume } = useRafFn(recompute, { immediate: false })
@@ -144,8 +184,34 @@ onBeforeUnmount(pause)
       >
         <path d="M0,0 L10,5 L0,10 z" fill="#64748b" />
       </marker>
+      <marker
+        id="frontend-arrow"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M0,0 L10,5 L0,10 z" fill="#22d3ee" />
+      </marker>
     </defs>
 
+    <!-- frontend frame → bound service frame links (cyan, arrow toward the service under test) -->
+    <line
+      v-for="s in frontendSegments"
+      :key="s.id"
+      :x1="s.x1"
+      :y1="s.y1"
+      :x2="s.x2"
+      :y2="s.y2"
+      stroke="#22d3ee"
+      :stroke-width="1.5"
+      stroke-dasharray="1 4"
+      :stroke-opacity="0.6"
+      marker-end="url(#frontend-arrow)"
+    />
+
     <!-- epic → member membership links (soft violet, no arrowhead) -->
     <line
       v-for="s in memberSegments"

package/app/components/panels/InspectorPanel.vue

@@ -7,6 +7,7 @@ import TaskAgentConfig from '~/components/panels/inspector/TaskAgentConfig.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
 import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
 import ServiceReleaseHealthConfig from '~/components/panels/inspector/ServiceReleaseHealthConfig.vue'
+import FrontendConfig from '~/components/panels/inspector/FrontendConfig.vue'
 import ContainerSummary from '~/components/panels/inspector/ContainerSummary.vue'
 import TaskDependencies from '~/components/panels/inspector/TaskDependencies.vue'
 import TaskStructure from '~/components/panels/inspector/TaskStructure.vue'
@@ -435,6 +436,9 @@ const showOriginalDescription = ref(false)
 
       <!-- service / module: tasks summary -->
       <ContainerSummary v-if="isContainer" :block="block" />
+      <!-- frontend (frame): build/serve/mock config + backend bindings (board links) -->
+      <FrontendConfig v-if="isFrame && block.type === 'frontend'" :block="block" />
+
       <!-- service (frame): test infra + provisioning configuration -->
       <ServiceTestConfig v-if="isFrame" :block="block" />
 

package/app/components/panels/inspector/FrontendConfig.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {
+  Block,
+  FrontendBackendBinding,
+  FrontendConfig,
+  FrontendEnvInjection,
+  FrontendPackageManager,
+  FrontendServeMode,
+} from '~/types/domain'
+
+// Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
+// frontend for a self-contained UI test (+ an optional browsable preview on local/node),
+// and its backend bindings. Each binding names an env var the frontend reads for an upstream
+// URL and where that URL resolves — a bound SERVICE frame's ephemeral env (the service under
+// test), or WireMock. The bindings ARE the board's frontend→service links. Persisted as a
+// serialized FrontendConfig on the block via the shared updateBlock PATCH.
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const { t } = useI18n()
+
+const config = computed<FrontendConfig>(() => props.block.frontendConfig ?? { backendBindings: [] })
+const bindings = computed(() => config.value.backendBindings ?? [])
+
+// Merge a partial onto the current config, preserving the other fields, and persist. A field
+// set to undefined is dropped (JSON.stringify omits it), so the harness default applies.
+function save(patch: Partial<FrontendConfig>) {
+  const base: FrontendConfig = props.block.frontendConfig ?? { backendBindings: [] }
+  board.updateBlock(props.block.id, { frontendConfig: { ...base, ...patch } })
+}
+
+// A trimmed string field: an empty value clears it (undefined) so the harness default applies.
+function saveText(field: keyof FrontendConfig, value: string) {
+  save({ [field]: value.trim() || undefined } as Partial<FrontendConfig>)
+}
+
+// The serve port must be an integer in [1, 65535] (the contract's schema bounds). Coerce and
+// clamp to a valid port, dropping anything else to undefined (clears it → the harness default),
+// so an out-of-range or non-integer value never 422s the PATCH.
+function saveServePort(value: string) {
+  const n = Math.trunc(Number(value.trim()))
+  save({ servePort: Number.isInteger(n) && n >= 1 && n <= 65535 ? n : undefined })
+}
+
+const PACKAGE_MANAGERS: FrontendPackageManager[] = ['pnpm', 'npm', 'yarn']
+const packageManager = computed(() => config.value.packageManager ?? 'pnpm')
+const serveMode = computed<FrontendServeMode>(() => config.value.serveMode ?? 'static')
+const envInjection = computed<FrontendEnvInjection>(() => config.value.envInjection ?? 'build')
+
+// The service frames on the board a binding can point at (its ephemeral env URL becomes the
+// service under test). Every other binding resolves to WireMock.
+const serviceFrames = computed(() => board.frames.filter((b) => b.type === 'service'))
+
+// USelect options for a binding's source: WireMock, or one of the service frames.
+const sourceItems = computed(() => [
+  { label: t('inspector.frontendConfig.bindings.mock'), value: 'mock' },
+  ...serviceFrames.value.map((f) => ({ label: f.title || f.id, value: f.id })),
+])
+
+// The select value for a binding: 'mock', or the bound service block id.
+function sourceValue(binding: FrontendBackendBinding): string {
+  return binding.source.kind === 'service' ? binding.source.serviceBlockId : 'mock'
+}
+
+function replaceBinding(index: number, next: FrontendBackendBinding) {
+  save({ backendBindings: bindings.value.map((b, i) => (i === index ? next : b)) })
+}
+
+function setBindingEnvVar(index: number, value: string) {
+  const b = bindings.value[index]
+  if (b) replaceBinding(index, { ...b, envVar: value.trim() })
+}
+
+function setBindingSource(index: number, value: string) {
+  const b = bindings.value[index]
+  if (!b) return
+  const source: FrontendBackendBinding['source'] =
+    value === 'mock' ? { kind: 'mock' } : { kind: 'service', serviceBlockId: value }
+  replaceBinding(index, { ...b, source })
+}
+
+function addBinding() {
+  save({ backendBindings: [...bindings.value, { envVar: '', source: { kind: 'mock' } }] })
+}
+
+function removeBinding(index: number) {
+  save({ backendBindings: bindings.value.filter((_, i) => i !== index) })
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      {{ t('inspector.frontendConfig.title') }}
+    </div>
+    <p class="text-[11px] leading-snug text-slate-500">
+      {{ t('inspector.frontendConfig.hint') }}
+    </p>
+
+    <!-- Package manager -->
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.packageManager')
+      }}</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="pm in PACKAGE_MANAGERS"
+          :key="pm"
+          :color="packageManager === pm ? 'primary' : 'neutral'"
+          :variant="packageManager === pm ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ packageManager: pm })"
+        >
+          {{ pm }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Build: install command + build script + output dir -->
+    <div class="space-y-1">
+      <label class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.installCommand')
+      }}</label>
+      <UInput
+        :model-value="config.installCommand ?? ''"
+        size="xs"
+        class="font-mono"
+        maxlength="400"
+        placeholder="pnpm install --frozen-lockfile"
+        @blur="(e: FocusEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)"
+        @keydown.enter="
+          (e: KeyboardEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)
+        "
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.buildScript')
+        }}</label>
+        <UInput
+          :model-value="config.buildScript ?? ''"
+          size="xs"
+          class="font-mono"
+          maxlength="200"
+          placeholder="build"
+          @blur="(e: FocusEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)"
+          @keydown.enter="
+            (e: KeyboardEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)
+          "
+        />
+      </div>
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.outputDir')
+        }}</label>
+        <UInput
+          :model-value="config.outputDir ?? ''"
+          size="xs"
+          class="font-mono"
+          maxlength="400"
+          placeholder="dist"
+          @blur="(e: FocusEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)"
+          @keydown.enter="
+            (e: KeyboardEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)
+          "
+        />
+      </div>
+    </div>
+
+    <!-- Serve: mode (static vs command) + serve script (command mode) + port -->
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">{{ t('inspector.frontendConfig.serveMode') }}</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          :color="serveMode === 'static' ? 'primary' : 'neutral'"
+          :variant="serveMode === 'static' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ serveMode: 'static' })"
+        >
+          {{ t('inspector.frontendConfig.serveStatic') }}
+        </UButton>
+        <UButton
+          :color="serveMode === 'command' ? 'primary' : 'neutral'"
+          :variant="serveMode === 'command' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ serveMode: 'command' })"
+        >
+          {{ t('inspector.frontendConfig.serveCommand') }}
+        </UButton>
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.serveModeHint') }}
+      </p>
+    </div>
+
+    <div v-if="serveMode === 'command'" class="space-y-1">
+      <label class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.serveScript')
+      }}</label>
+      <UInput
+        :model-value="config.serveScript ?? ''"
+        size="xs"
+        class="font-mono"
+        maxlength="200"
+        placeholder="preview"
+        @blur="(e: FocusEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)"
+        @keydown.enter="
+          (e: KeyboardEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)
+        "
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.servePort')
+        }}</label>
+        <UInput
+          :model-value="config.servePort != null ? String(config.servePort) : ''"
+          type="number"
+          min="1"
+          max="65535"
+          step="1"
+          size="xs"
+          class="font-mono"
+          placeholder="8080"
+          @blur="(e: FocusEvent) => saveServePort((e.target as HTMLInputElement).value)"
+        />
+      </div>
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.mockMappingsPath')
+        }}</label>
+        <UInput
+          :model-value="config.mockMappingsPath ?? ''"
+          size="xs"
+          class="font-mono"
+          maxlength="400"
+          placeholder="mocks/"
+          @blur="
+            (e: FocusEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
+          "
+          @keydown.enter="
+            (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
+          "
+        />
+      </div>
+    </div>
+
+    <!-- Env injection: build-time env vars vs a runtime window.env shim -->
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.envInjection')
+      }}</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          :color="envInjection === 'build' ? 'primary' : 'neutral'"
+          :variant="envInjection === 'build' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ envInjection: 'build' })"
+        >
+          {{ t('inspector.frontendConfig.envBuild') }}
+        </UButton>
+        <UButton
+          :color="envInjection === 'runtime' ? 'primary' : 'neutral'"
+          :variant="envInjection === 'runtime' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ envInjection: 'runtime' })"
+        >
+          {{ t('inspector.frontendConfig.envRuntime') }}
+        </UButton>
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.envInjectionHint') }}
+      </p>
+    </div>
+
+    <!-- Backend bindings: env var → upstream. These double as the board's frontend→service links. -->
+    <div class="space-y-2 border-t border-slate-800 pt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ t('inspector.frontendConfig.bindings.title') }}
+        </span>
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-plus"
+          @click="addBinding"
+        />
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.bindings.hint') }}
+      </p>
+
+      <div v-if="bindings.length" class="space-y-1.5">
+        <div v-for="(b, i) in bindings" :key="i" class="flex items-center gap-1">
+          <UInput
+            :model-value="b.envVar"
+            size="xs"
+            class="flex-1 font-mono"
+            maxlength="200"
+            placeholder="PUB_BACKEND_URL"
+            @blur="(e: FocusEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)"
+            @keydown.enter="
+              (e: KeyboardEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)
+            "
+          />
+          <USelect
+            :model-value="sourceValue(b)"
+            :items="sourceItems"
+            size="xs"
+            class="flex-1"
+            @update:model-value="(v: string) => setBindingSource(i, v)"
+          />
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-x"
+            :title="t('inspector.frontendConfig.bindings.remove')"
+            @click="removeBinding(i)"
+          />
+        </div>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        {{ t('inspector.frontendConfig.bindings.empty') }}
+      </div>
+    </div>
+
+    <!-- Browsable preview (local/node only). -->
+    <div class="border-t border-slate-800 pt-2">
+      <UCheckbox
+        :model-value="config.previewEnabled === true"
+        :label="t('inspector.frontendConfig.previewEnabled')"
+        size="xs"
+        @update:model-value="
+          (v: boolean | 'indeterminate') => save({ previewEnabled: v === true ? true : undefined })
+        "
+      />
+      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.previewHint') }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/types/domain.ts

@@ -30,6 +30,13 @@ export type {
   InstanceSize,
   ProvisionType,
   ServiceProvisioning,
+  FrontendConfig,
+  FrontendBackendBinding,
+  FrontendBackendSource,
+  FrontendBranch,
+  FrontendPackageManager,
+  FrontendServeMode,
+  FrontendEnvInjection,
   AgentConfigOption,
   AgentConfigDescriptor,
   TestConcernSeverity,

package/i18n/locales/en.json

@@ -415,6 +415,34 @@
       "manageBoard": "Manage this board's fragment library…",
       "manageAccount": "Manage account fragments…"
     },
+    "frontendConfig": {
+      "title": "Frontend",
+      "hint": "How to build, serve, and mock this frontend for a self-contained UI test. Bindings below link it to the backend services it calls.",
+      "packageManager": "Package manager",
+      "installCommand": "Install command",
+      "buildScript": "Build script",
+      "outputDir": "Output directory",
+      "serveMode": "Serve mode",
+      "serveStatic": "Static",
+      "serveCommand": "Command",
+      "serveModeHint": "Static serves the build output directory; Command runs a package.json script (e.g. preview).",
+      "serveScript": "Serve script",
+      "servePort": "Serve port",
+      "mockMappingsPath": "Mock mappings path",
+      "envInjection": "Env injection",
+      "envBuild": "Build-time",
+      "envRuntime": "Runtime",
+      "envInjectionHint": "Build-time injects the backend URLs as build env vars; Runtime writes them into a window.env shim.",
+      "previewEnabled": "Enable browsable preview",
+      "previewHint": "Keeps a served preview running with a clickable URL. Local and Node runtimes only.",
+      "bindings": {
+        "title": "Backend bindings",
+        "hint": "Each env var the frontend reads for an upstream URL, and where it resolves: a bound service's ephemeral environment, or a WireMock stub.",
+        "mock": "Mock (WireMock)",
+        "remove": "Remove binding",
+        "empty": "No backend bindings. Add one to point an env var at a service or a mock."
+      }
+    },
     "releaseHealth": {
       "title": "Post-release health",
       "clear": "Clear",

package/i18n/locales/es.json

@@ -378,6 +378,34 @@
       "manageBoard": "Gestionar la biblioteca de fragmentos de este tablero…",
       "manageAccount": "Gestionar los fragmentos de la cuenta…"
     },
+    "frontendConfig": {
+      "title": "Frontend",
+      "hint": "Cómo compilar, servir y simular este frontend para una prueba de interfaz autónoma. Las vinculaciones de abajo lo conectan con los servicios de backend a los que llama.",
+      "packageManager": "Gestor de paquetes",
+      "installCommand": "Comando de instalación",
+      "buildScript": "Script de compilación",
+      "outputDir": "Directorio de salida",
+      "serveMode": "Modo de servicio",
+      "serveStatic": "Estático",
+      "serveCommand": "Comando",
+      "serveModeHint": "Estático sirve el directorio de salida de la compilación; Comando ejecuta un script de package.json (p. ej. preview).",
+      "serveScript": "Script de servicio",
+      "servePort": "Puerto de servicio",
+      "mockMappingsPath": "Ruta de asignaciones de simulación",
+      "envInjection": "Inyección de variables de entorno",
+      "envBuild": "En compilación",
+      "envRuntime": "En ejecución",
+      "envInjectionHint": "En compilación inyecta las URL del backend como variables de entorno de compilación; En ejecución las escribe en un shim de window.env.",
+      "previewEnabled": "Activar vista previa navegable",
+      "previewHint": "Mantiene una vista previa servida en ejecución con una URL clicable. Solo en los entornos Local y Node.",
+      "bindings": {
+        "title": "Vinculaciones del backend",
+        "hint": "Cada variable de entorno que el frontend lee para una URL upstream, y dónde se resuelve: el entorno efímero de un servicio vinculado, o un stub de WireMock.",
+        "mock": "Simulación (WireMock)",
+        "remove": "Eliminar vinculación",
+        "empty": "No hay vinculaciones de backend. Añade una para apuntar una variable de entorno a un servicio o a una simulación."
+      }
+    },
     "releaseHealth": {
       "title": "Salud posterior al lanzamiento",
       "clear": "Limpiar",

package/i18n/locales/fr.json

@@ -378,6 +378,34 @@
       "manageBoard": "Gérer la bibliothèque de fragments de ce tableau…",
       "manageAccount": "Gérer les fragments du compte…"
     },
+    "frontendConfig": {
+      "title": "Frontend",
+      "hint": "Comment compiler, servir et simuler ce frontend pour un test d'interface autonome. Les liaisons ci-dessous le relient aux services de backend qu'il appelle.",
+      "packageManager": "Gestionnaire de paquets",
+      "installCommand": "Commande d'installation",
+      "buildScript": "Script de compilation",
+      "outputDir": "Répertoire de sortie",
+      "serveMode": "Mode de service",
+      "serveStatic": "Statique",
+      "serveCommand": "Commande",
+      "serveModeHint": "Statique sert le répertoire de sortie de la compilation ; Commande exécute un script de package.json (p. ex. preview).",
+      "serveScript": "Script de service",
+      "servePort": "Port de service",
+      "mockMappingsPath": "Chemin des mappages de simulation",
+      "envInjection": "Injection de variables d'environnement",
+      "envBuild": "À la compilation",
+      "envRuntime": "À l'exécution",
+      "envInjectionHint": "À la compilation, injecte les URL du backend comme variables d'environnement de compilation ; À l'exécution, les écrit dans un shim window.env.",
+      "previewEnabled": "Activer l'aperçu navigable",
+      "previewHint": "Maintient un aperçu servi en cours d'exécution avec une URL cliquable. Uniquement pour les runtimes Local et Node.",
+      "bindings": {
+        "title": "Liaisons du backend",
+        "hint": "Chaque variable d'environnement que le frontend lit pour une URL en amont, et où elle se résout : l'environnement éphémère d'un service lié, ou un stub WireMock.",
+        "mock": "Simulation (WireMock)",
+        "remove": "Supprimer la liaison",
+        "empty": "Aucune liaison de backend. Ajoutez-en une pour pointer une variable d'environnement vers un service ou une simulation."
+      }
+    },
     "releaseHealth": {
       "title": "Santé post-déploiement",
       "clear": "Effacer",

package/i18n/locales/he.json

@@ -378,6 +378,34 @@
       "manageBoard": "נהל את ספריית הקטעים של לוח זה…",
       "manageAccount": "נהל קטעי חשבון…"
     },
+    "frontendConfig": {
+      "title": "Frontend",
+      "hint": "כיצד לבנות, להגיש ולדמות את ה-frontend הזה לבדיקת ממשק עצמאית. הקישורים למטה מחברים אותו לשירותי ה-backend שהוא קורא אליהם.",
+      "packageManager": "מנהל חבילות",
+      "installCommand": "פקודת התקנה",
+      "buildScript": "סקריפט בנייה",
+      "outputDir": "תיקיית פלט",
+      "serveMode": "מצב הגשה",
+      "serveStatic": "סטטי",
+      "serveCommand": "פקודה",
+      "serveModeHint": "סטטי מגיש את תיקיית פלט הבנייה; פקודה מריצה סקריפט מ-package.json (למשל preview).",
+      "serveScript": "סקריפט הגשה",
+      "servePort": "פורט הגשה",
+      "mockMappingsPath": "נתיב מיפויי הדמיה",
+      "envInjection": "הזרקת משתני סביבה",
+      "envBuild": "בזמן בנייה",
+      "envRuntime": "בזמן ריצה",
+      "envInjectionHint": "בזמן בנייה מזריק את כתובות ה-backend כמשתני סביבה של בנייה; בזמן ריצה כותב אותן ל-shim של window.env.",
+      "previewEnabled": "הפעל תצוגה מקדימה לגלישה",
+      "previewHint": "משאיר תצוגה מקדימה מוגשת פועלת עם כתובת URL לחיצה. רק בסביבות Local ו-Node.",
+      "bindings": {
+        "title": "קישורי backend",
+        "hint": "כל משתנה סביבה שה-frontend קורא עבור כתובת URL במעלה הזרם, והיכן הוא נפתר: הסביבה הזמנית של שירות מקושר, או stub של WireMock.",
+        "mock": "הדמיה (WireMock)",
+        "remove": "הסר קישור",
+        "empty": "אין קישורי backend. הוסף אחד כדי להפנות משתנה סביבה לשירות או להדמיה."
+      }
+    },
     "releaseHealth": {
       "title": "תקינות לאחר שחרור",
       "clear": "נקה",

package/i18n/locales/ja.json

@@ -378,6 +378,34 @@
       "manageBoard": "このボードのフラグメントライブラリを管理…",
       "manageAccount": "アカウントのフラグメントを管理…"
     },
+    "frontendConfig": {
+      "title": "フロントエンド",
+      "hint": "自己完結型の UI テストのために、このフロントエンドをビルド、配信、モックする方法。下のバインディングは、呼び出すバックエンドサービスとフロントエンドをつなぎます。",
+      "packageManager": "パッケージマネージャー",
+      "installCommand": "インストールコマンド",
+      "buildScript": "ビルドスクリプト",
+      "outputDir": "出力ディレクトリ",
+      "serveMode": "配信モード",
+      "serveStatic": "静的",
+      "serveCommand": "コマンド",
+      "serveModeHint": "静的はビルド出力ディレクトリを配信します。コマンドは package.json のスクリプト（例: preview）を実行します。",
+      "serveScript": "配信スクリプト",
+      "servePort": "配信ポート",
+      "mockMappingsPath": "モックマッピングのパス",
+      "envInjection": "環境変数の注入",
+      "envBuild": "ビルド時",
+      "envRuntime": "ランタイム",
+      "envInjectionHint": "ビルド時はバックエンドの URL をビルド環境変数として注入します。ランタイムは window.env シムに書き込みます。",
+      "previewEnabled": "閲覧可能なプレビューを有効にする",
+      "previewHint": "クリック可能な URL 付きの配信プレビューを実行し続けます。Local および Node ランタイムのみ。",
+      "bindings": {
+        "title": "バックエンドバインディング",
+        "hint": "フロントエンドがアップストリーム URL のために読み取る各環境変数と、その解決先: バインドされたサービスの一時環境、または WireMock スタブ。",
+        "mock": "モック（WireMock）",
+        "remove": "バインディングを削除",
+        "empty": "バックエンドバインディングがありません。追加して、環境変数をサービスまたはモックに向けてください。"
+      }
+    },
     "releaseHealth": {
       "title": "リリース後の健全性",
       "clear": "クリア",

package/i18n/locales/pl.json

@@ -378,6 +378,34 @@
       "manageBoard": "Zarządzaj biblioteką fragmentów tej tablicy…",
       "manageAccount": "Zarządzaj fragmentami konta…"
     },
+    "frontendConfig": {
+      "title": "Frontend",
+      "hint": "Jak zbudować, uruchomić i zamockować ten frontend na potrzeby samodzielnego testu interfejsu. Powiązania poniżej łączą go z usługami backendu, które wywołuje.",
+      "packageManager": "Menedżer pakietów",
+      "installCommand": "Polecenie instalacji",
+      "buildScript": "Skrypt budowania",
+      "outputDir": "Katalog wyjściowy",
+      "serveMode": "Tryb serwowania",
+      "serveStatic": "Statyczny",
+      "serveCommand": "Polecenie",
+      "serveModeHint": "Statyczny serwuje katalog wyjściowy budowania; Polecenie uruchamia skrypt z package.json (np. preview).",
+      "serveScript": "Skrypt serwowania",
+      "servePort": "Port serwowania",
+      "mockMappingsPath": "Ścieżka mapowań mocków",
+      "envInjection": "Wstrzykiwanie zmiennych środowiskowych",
+      "envBuild": "W czasie budowania",
+      "envRuntime": "W czasie działania",
+      "envInjectionHint": "W czasie budowania wstrzykuje adresy URL backendu jako zmienne środowiskowe budowania; W czasie działania zapisuje je w shimie window.env.",
+      "previewEnabled": "Włącz przeglądalny podgląd",
+      "previewHint": "Utrzymuje działający serwowany podgląd z klikalnym adresem URL. Tylko środowiska Local i Node.",
+      "bindings": {
+        "title": "Powiązania backendu",
+        "hint": "Każda zmienna środowiskowa, którą frontend odczytuje dla adresu URL nadrzędnego, oraz miejsce jej rozwiązania: efemeryczne środowisko powiązanej usługi lub zaślepka WireMock.",
+        "mock": "Mock (WireMock)",
+        "remove": "Usuń powiązanie",
+        "empty": "Brak powiązań backendu. Dodaj jedno, aby skierować zmienną środowiskową do usługi lub mocka."
+      }
+    },
     "releaseHealth": {
       "title": "Kondycja po wydaniu",
       "clear": "Wyczyść",

package/i18n/locales/tr.json

@@ -378,6 +378,34 @@
       "manageBoard": "Bu pano'nun fragman kütüphanesini yönet…",
       "manageAccount": "Hesap fragmanlarını yönet…"
     },
+    "frontendConfig": {
+      "title": "Frontend",
+      "hint": "Bağımsız bir arayüz testi için bu frontend'in nasıl derleneceği, sunulacağı ve taklit edileceği. Aşağıdaki bağlamalar onu çağırdığı backend hizmetlerine bağlar.",
+      "packageManager": "Paket yöneticisi",
+      "installCommand": "Kurulum komutu",
+      "buildScript": "Derleme betiği",
+      "outputDir": "Çıktı dizini",
+      "serveMode": "Sunma modu",
+      "serveStatic": "Statik",
+      "serveCommand": "Komut",
+      "serveModeHint": "Statik, derleme çıktı dizinini sunar; Komut, bir package.json betiğini (örn. preview) çalıştırır.",
+      "serveScript": "Sunma betiği",
+      "servePort": "Sunma bağlantı noktası",
+      "mockMappingsPath": "Taklit eşleme yolu",
+      "envInjection": "Ortam değişkeni enjeksiyonu",
+      "envBuild": "Derleme zamanı",
+      "envRuntime": "Çalışma zamanı",
+      "envInjectionHint": "Derleme zamanı, backend URL'lerini derleme ortam değişkenleri olarak enjekte eder; Çalışma zamanı, bunları bir window.env shim'ine yazar.",
+      "previewEnabled": "Göz atılabilir önizlemeyi etkinleştir",
+      "previewHint": "Tıklanabilir bir URL ile sunulan bir önizlemeyi çalışır durumda tutar. Yalnızca Local ve Node çalışma zamanları.",
+      "bindings": {
+        "title": "Backend bağlamaları",
+        "hint": "Frontend'in bir üst akış URL'si için okuduğu her ortam değişkeni ve nerede çözümlendiği: bağlı bir hizmetin geçici ortamı veya bir WireMock saplaması.",
+        "mock": "Taklit (WireMock)",
+        "remove": "Bağlamayı kaldır",
+        "empty": "Backend bağlaması yok. Bir ortam değişkenini bir hizmete veya taklide yönlendirmek için bir tane ekleyin."
+      }
+    },
     "releaseHealth": {
       "title": "Sürüm sonrası sağlık",
       "clear": "Temizle",

package/i18n/locales/uk.json

@@ -378,6 +378,34 @@
       "manageBoard": "Керувати бібліотекою фрагментів цієї дошки…",
       "manageAccount": "Керувати фрагментами облікового запису…"
     },
+    "frontendConfig": {
+      "title": "Frontend",
+      "hint": "Як зібрати, обслуговувати та мокувати цей frontend для автономного тесту інтерфейсу. Прив'язки нижче з'єднують його з сервісами backend, які він викликає.",
+      "packageManager": "Менеджер пакетів",
+      "installCommand": "Команда встановлення",
+      "buildScript": "Скрипт збірки",
+      "outputDir": "Каталог виводу",
+      "serveMode": "Режим обслуговування",
+      "serveStatic": "Статичний",
+      "serveCommand": "Команда",
+      "serveModeHint": "Статичний обслуговує каталог виводу збірки; Команда запускає скрипт з package.json (напр. preview).",
+      "serveScript": "Скрипт обслуговування",
+      "servePort": "Порт обслуговування",
+      "mockMappingsPath": "Шлях зіставлень моків",
+      "envInjection": "Впровадження змінних середовища",
+      "envBuild": "Під час збірки",
+      "envRuntime": "Під час виконання",
+      "envInjectionHint": "Під час збірки впроваджує URL-адреси backend як змінні середовища збірки; Під час виконання записує їх у shim window.env.",
+      "previewEnabled": "Увімкнути переглядний попередній перегляд",
+      "previewHint": "Підтримує запущений обслуговуваний попередній перегляд із клікабельним URL. Лише середовища Local і Node.",
+      "bindings": {
+        "title": "Прив'язки backend",
+        "hint": "Кожна змінна середовища, яку frontend читає для висхідного URL, і де вона розв'язується: тимчасове середовище прив'язаного сервісу або заглушка WireMock.",
+        "mock": "Мок (WireMock)",
+        "remove": "Видалити прив'язку",
+        "empty": "Немає прив'язок backend. Додайте одну, щоб спрямувати змінну середовища на сервіс або мок."
+      }
+    },
     "releaseHealth": {
       "title": "Стан після релізу",
       "clear": "Очистити",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.69.1",
+  "version": "0.70.0",
   "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",
@@ -34,7 +34,7 @@
     "valibot": "^1.4.2",
     "vue": "^3.5.39",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.75.0"
+    "@cat-factory/contracts": "0.76.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",