@cat-factory/app 0.75.2 → 0.77.0

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

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Block, ServiceConnection } from '~/types/domain'
+
+// Service-frame (`type: 'service'`) connections: the other services this one USES
+// (consumer→provider edges, stored on this frame — the consumer end). Each row picks a
+// provider service frame and optionally describes the relationship (folded into agent
+// prompts when the provider is involved in a task). The rows ARE the board's
+// service→service links, and the source of a task's "involved services" choices.
+// Persisted as serviceConnections on the block via the shared updateBlock PATCH.
+// The read-only "Used by" list below is the reverse direction, computed from the
+// OTHER frames' connections targeting this one.
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const { t } = useI18n()
+
+const connections = computed<ServiceConnection[]>(() => props.block.serviceConnections ?? [])
+
+function save(next: ServiceConnection[]) {
+  board.updateBlock(props.block.id, { serviceConnections: next })
+}
+
+// Provider candidates: every OTHER service frame on the board. A frame already used by
+// another row is excluded per row (duplicates are rejected server-side too).
+const serviceFrames = computed(() =>
+  board.frames.filter((b) => b.type === 'service' && b.id !== props.block.id),
+)
+
+function targetItems(index: number) {
+  const takenElsewhere = new Set(
+    connections.value.filter((_, i) => i !== index).map((c) => c.serviceBlockId),
+  )
+  return serviceFrames.value
+    .filter((f) => !takenElsewhere.has(f.id))
+    .map((f) => ({ label: f.title || f.id, value: f.id }))
+}
+
+function replaceConnection(index: number, next: ServiceConnection) {
+  save(connections.value.map((c, i) => (i === index ? next : c)))
+}
+
+function setTarget(index: number, serviceBlockId: string) {
+  const c = connections.value[index]
+  if (c) replaceConnection(index, { ...c, serviceBlockId })
+}
+
+function setDescription(index: number, value: string) {
+  const c = connections.value[index]
+  if (c) replaceConnection(index, { ...c, description: value.trim() || undefined })
+}
+
+// A new row starts on the first still-available provider; with none available the add
+// button is disabled, so a placeholder row never round-trips an invalid PATCH.
+const nextAvailable = computed(() => {
+  const taken = new Set(connections.value.map((c) => c.serviceBlockId))
+  return serviceFrames.value.find((f) => !taken.has(f.id))
+})
+
+function addConnection() {
+  const target = nextAvailable.value
+  if (target) save([...connections.value, { serviceBlockId: target.id }])
+}
+
+function removeConnection(index: number) {
+  save(connections.value.filter((_, i) => i !== index))
+}
+
+// Reverse direction, read-only: the service frames whose own connections name this one.
+const usedBy = computed(() =>
+  board.frames.filter(
+    (b) =>
+      b.type === 'service' &&
+      b.id !== props.block.id &&
+      (b.serviceConnections ?? []).some((c) => c.serviceBlockId === props.block.id),
+  ),
+)
+</script>
+
+<template>
+  <div class="space-y-2 border-t border-slate-800 pt-2" data-testid="service-connections">
+    <div class="flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        {{ t('inspector.serviceConnections.title') }}
+      </span>
+      <UButton
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-plus"
+        :disabled="!nextAvailable"
+        data-testid="service-connection-add"
+        @click="addConnection"
+      />
+    </div>
+    <p class="text-[11px] leading-snug text-slate-500">
+      {{ t('inspector.serviceConnections.hint') }}
+    </p>
+
+    <div v-if="connections.length" class="space-y-1.5">
+      <div
+        v-for="(c, i) in connections"
+        :key="c.serviceBlockId"
+        class="flex items-center gap-1"
+        data-testid="service-connection-row"
+      >
+        <USelect
+          :model-value="c.serviceBlockId"
+          :items="targetItems(i)"
+          size="xs"
+          class="flex-1"
+          data-testid="service-connection-target"
+          @update:model-value="(v: string) => setTarget(i, v)"
+        />
+        <UInput
+          :model-value="c.description ?? ''"
+          size="xs"
+          class="flex-1"
+          maxlength="300"
+          :placeholder="t('inspector.serviceConnections.descriptionPlaceholder')"
+          data-testid="service-connection-description"
+          @blur="(e: FocusEvent) => setDescription(i, (e.target as HTMLInputElement).value)"
+          @keydown.enter="
+            (e: KeyboardEvent) => setDescription(i, (e.target as HTMLInputElement).value)
+          "
+        />
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-x"
+          :title="t('inspector.serviceConnections.remove')"
+          data-testid="service-connection-remove"
+          @click="removeConnection(i)"
+        />
+      </div>
+    </div>
+    <div v-else class="text-[11px] text-slate-500">
+      {{ t('inspector.serviceConnections.empty') }}
+    </div>
+
+    <div v-if="usedBy.length" class="space-y-1" data-testid="service-connections-used-by">
+      <span class="text-[11px] text-slate-400">{{ t('inspector.serviceConnections.usedBy') }}</span>
+      <div class="flex flex-wrap gap-1">
+        <UBadge v-for="f in usedBy" :key="f.id" size="sm" variant="soft" color="neutral">
+          {{ f.title || f.id }}
+        </UBadge>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
+import { connectionNeighborIds } from '@cat-factory/contracts'
 import type { Block } from '~/types/domain'
 import type { WritebackOverride } from '~/types/tracker'
 import { mergePresetOptionLabel, mergePresetThresholds } from '~/utils/mergePreset'
@@ -154,6 +155,33 @@ function setPipeline(id: string) {
   board.updateBlock(props.block.id, { pipelineId: id })
 }
 
+// ---- involved services ------------------------------------------------------
+// Which of the connected services are directly involved in this task (beyond its own
+// service, which is always implicit): each involved service is spun up as an ephemeral
+// environment alongside it, and the coding agent may change its repo too. Choices come
+// from the frame's connection NEIGHBORS (either direction). An id whose connection was
+// removed after selection is stale: badged, and dropped on the next toggle (the write
+// gate would reject it).
+const connectedServices = computed(() => {
+  const frame = taskFrame.value
+  if (!frame) return []
+  return [...connectionNeighborIds(board.blocks, frame.id)]
+    .map((id) => board.getBlock(id))
+    .filter((b): b is Block => !!b)
+})
+const involvedIds = computed(() => props.block.involvedServiceIds ?? [])
+const staleInvolvedServices = computed(() => {
+  const connected = new Set(connectedServices.value.map((b) => b.id))
+  return involvedIds.value.filter((id) => !connected.has(id))
+})
+function toggleInvolved(serviceId: string, on: boolean) {
+  const connected = new Set(connectedServices.value.map((b) => b.id))
+  const kept = involvedIds.value.filter((id) => id !== serviceId && connected.has(id))
+  board.updateBlock(props.block.id, {
+    involvedServiceIds: on ? [...kept, serviceId] : kept,
+  })
+}
+
 // ---- issue-tracker writeback overrides -------------------------------------
 // Per-task overrides for the two workspace writeback toggles (comment on PR open,
 // close linked issue on merge). null override ⇒ inherit the workspace default.
@@ -400,6 +428,44 @@ const technicalLabel = computed(() => {
       </div>
     </div>
 
+    <!-- involved services: connected services this task spans (envs + possible code changes) -->
+    <div data-testid="involved-services">
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ t('inspector.runSettings.involvedServices') }}
+        </span>
+      </div>
+      <div v-if="connectedServices.length" class="space-y-1">
+        <UCheckbox
+          v-for="s in connectedServices"
+          :key="s.id"
+          :model-value="involvedIds.includes(s.id)"
+          :label="s.title || s.id"
+          size="xs"
+          data-testid="involved-service-toggle"
+          @update:model-value="(v: boolean | 'indeterminate') => toggleInvolved(s.id, v === true)"
+        />
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        {{ t('inspector.runSettings.involvedServicesEmpty') }}
+      </div>
+      <div v-if="staleInvolvedServices.length" class="mt-1 flex flex-wrap gap-1">
+        <UBadge
+          v-for="id in staleInvolvedServices"
+          :key="id"
+          size="sm"
+          variant="soft"
+          color="warning"
+          :title="t('inspector.runSettings.involvedServiceStale')"
+        >
+          {{ board.getBlock(id)?.title ?? id }}
+        </UBadge>
+      </div>
+      <div class="mt-1 text-[11px] text-slate-500">
+        {{ t('inspector.runSettings.involvedServicesHint') }}
+      </div>
+    </div>
+
     <!-- issue-tracker writeback overrides -->
     <div>
       <div class="mb-1 flex items-center justify-between">

package/app/composables/api/infraHandlers.ts

@@ -1,4 +1,5 @@
 import {
+  detectFrontendConfigContract,
   detectServiceProvisioningContract,
   listEnvironmentHandlersContract,
   listEnvironmentUserHandlersContract,
@@ -12,6 +13,7 @@ import {
   upsertEnvironmentUserHandlerContract,
 } from '@cat-factory/contracts'
 import type {
+  DetectFrontendConfigInput,
   DetectServiceProvisioningInput,
   ProvisionType,
   RegisterEnvironmentHandlerInput,
@@ -47,6 +49,10 @@ export function infraHandlersApi({ send, ws }: ApiContext) {
     detectServiceProvisioning: (workspaceId: string, body: DetectServiceProvisioningInput) =>
       send(detectServiceProvisioningContract, { pathPrefix: ws(workspaceId), body }),
 
+    // Auto-detect a non-binding recommended frontend config from a frontend repo.
+    detectFrontendConfig: (workspaceId: string, body: DetectFrontendConfigInput) =>
+      send(detectFrontendConfigContract, { pathPrefix: ws(workspaceId), body }),
+
     // Generate/fix a service's custom manifest via the fixer coding agent (async repair run).
     repairCustomManifest: (workspaceId: string, body: RepairCustomManifestInput) =>
       send(repairCustomManifestContract, { pathPrefix: ws(workspaceId), body }),

package/app/stores/infraConfig.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, type Ref } from 'vue'
 import type {
   CustomManifestType,
+  DetectFrontendConfigInput,
   DetectServiceProvisioningInput,
   EnvironmentHandlerView,
   ProvisionType,
@@ -113,6 +114,15 @@ export const useInfraConfigStore = defineStore('infraConfig', () => {
     return api.detectServiceProvisioning(ws.requireId(), input)
   }
 
+  /**
+   * Auto-detect a NON-BINDING recommended frontend config from a frontend repo. The SPA prefills a
+   * preview the user applies; nothing is persisted server-side. Pure repo introspection.
+   */
+  async function detectFrontendConfig(input: DetectFrontendConfigInput) {
+    const ws = useWorkspaceStore()
+    return api.detectFrontendConfig(ws.requireId(), input)
+  }
+
   /**
    * Generate (or fix) a service's custom manifest via the fixer coding agent. Dispatches a
    * durable async repair run and returns immediately with `usedAgent`/`repairJobId`; the run is
@@ -192,6 +202,7 @@ export const useInfraConfigStore = defineStore('infraConfig', () => {
     registerHandler,
     testHandler,
     detectProvisioning,
+    detectFrontendConfig,
     repairCustomManifest,
     unregisterHandler,
     upsertCustomType,

package/app/types/domain.ts

@@ -33,10 +33,13 @@ export type {
   FrontendConfig,
   FrontendBackendBinding,
   FrontendBackendSource,
+  ServiceConnection,
   FrontendBranch,
   FrontendPackageManager,
   FrontendServeMode,
   FrontendEnvInjection,
+  FrontendConfigRecommendation,
+  FrontendDetectionNote,
   AgentConfigOption,
   AgentConfigDescriptor,
   TestConcernSeverity,

package/i18n/locales/en.json

@@ -485,14 +485,37 @@
     "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.",
+      "detect": {
+        "title": "Detect from repo",
+        "button": "Detect",
+        "hint": "Read the linked repo and propose a config to review before applying. Nothing is saved until you apply.",
+        "error": "Couldn't read the repo. Check the frontend is linked to a connected repository.",
+        "none": "Nothing frontend-shaped was detected. Set the frontend directory (for a monorepo) or fill the fields in manually.",
+        "apply": "Apply",
+        "dismiss": "Dismiss",
+        "confidenceHigh": "sure",
+        "confidenceLow": "guess"
+      },
+      "groups": {
+        "build": "Build",
+        "serve": "Serve",
+        "mocking": "Mocking",
+        "envInjection": "Env injection",
+        "bindings": "Backend bindings",
+        "preview": "Preview"
+      },
       "packageManager": "Package manager",
+      "directory": "Frontend directory",
+      "directoryHint": "The frontend app's subfolder in the repo (a monorepo, e.g. frontend/). Leave empty if the app is at the repo root.",
       "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).",
+      "serveStaticDesc": "serves the built output directory as static files. Cheapest for a UI test of a fully built app.",
+      "serveCommandDesc": "runs a package.json script (e.g. preview) to serve the app, for builds that need a running server.",
+      "serveEnvAxisNote": "Separate from Env injection (build-time vs runtime) below, which controls how backend URLs reach the app, not how it is served.",
       "serveScript": "Serve script",
       "servePort": "Serve port",
       "mockMappingsPath": "Mock mappings path",
@@ -523,6 +546,14 @@
         }
       }
     },
+    "serviceConnections": {
+      "title": "Service connections",
+      "hint": "The other services this one uses, e.g. a service that sends its emails. Connections draw edges on the board, and tasks can mark a connected service as directly involved.",
+      "descriptionPlaceholder": "How this service uses it, e.g. sends emails via it",
+      "remove": "Remove connection",
+      "empty": "No connections. Add one to link this service to another service it uses.",
+      "usedBy": "Used by"
+    },
     "releaseHealth": {
       "title": "Post-release health",
       "clear": "Clear",
@@ -746,7 +777,11 @@
       "responsibleProduct": "Responsible product",
       "responsibleEmpty": "Unassigned. Set a product owner to notify them when requirement review flags this task.",
       "autoStartDependents": "Auto-start dependents",
-      "autoStartHint": "When this task merges, automatically start the tasks that depend on it (once their other dependencies are also done)."
+      "autoStartHint": "When this task merges, automatically start the tasks that depend on it (once their other dependencies are also done).",
+      "involvedServices": "Involved services",
+      "involvedServicesHint": "Connected services directly involved in this task: each spins up as an ephemeral environment alongside this task's own service, and the coding agent may change their repositories too.",
+      "involvedServicesEmpty": "No connected services. Connect services on the service frame to select them here.",
+      "involvedServiceStale": "No longer connected to this task's service; it is dropped on the next change."
     }
   },
   "panels": {

package/i18n/locales/es.json

@@ -442,14 +442,37 @@
     "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.",
+      "detect": {
+        "title": "Detectar del repositorio",
+        "button": "Detectar",
+        "hint": "Lee el repositorio vinculado y propone una configuración para revisar antes de aplicar. No se guarda nada hasta que la apliques.",
+        "error": "No se pudo leer el repositorio. Comprueba que el frontend esté vinculado a un repositorio conectado.",
+        "none": "No se detectó nada con forma de frontend. Indica el directorio del frontend (para un monorepo) o rellena los campos manualmente.",
+        "apply": "Aplicar",
+        "dismiss": "Descartar",
+        "confidenceHigh": "seguro",
+        "confidenceLow": "estimación"
+      },
+      "groups": {
+        "build": "Compilación",
+        "serve": "Servicio",
+        "mocking": "Simulación",
+        "envInjection": "Inyección de entorno",
+        "bindings": "Vinculaciones de backend",
+        "preview": "Vista previa"
+      },
       "packageManager": "Gestor de paquetes",
+      "directory": "Directorio del frontend",
+      "directoryHint": "La subcarpeta de la app frontend en el repositorio (un monorepo, p. ej. frontend/). Déjalo vacío si la app está en la raíz del repositorio.",
       "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).",
+      "serveStaticDesc": "sirve el directorio de salida compilado como archivos estáticos. Lo más económico para una prueba de interfaz de una app ya compilada.",
+      "serveCommandDesc": "ejecuta un script de package.json (p. ej. preview) para servir la app, para compilaciones que necesitan un servidor en ejecución.",
+      "serveEnvAxisNote": "Distinto de la Inyección de entorno (en compilación vs. en tiempo de ejecución) de abajo, que controla cómo llegan las URL del backend a la app, no cómo se sirve.",
       "serveScript": "Script de servicio",
       "servePort": "Puerto de servicio",
       "mockMappingsPath": "Ruta de asignaciones de simulación",
@@ -480,6 +503,14 @@
         }
       }
     },
+    "serviceConnections": {
+      "title": "Conexiones de servicios",
+      "hint": "Los otros servicios que este utiliza, p. ej. un servicio que envía sus correos. Las conexiones dibujan aristas en el tablero, y las tareas pueden marcar un servicio conectado como directamente involucrado.",
+      "descriptionPlaceholder": "Cómo lo usa este servicio, p. ej. envía correos a través de él",
+      "remove": "Eliminar conexión",
+      "empty": "Sin conexiones. Añade una para vincular este servicio con otro servicio que utiliza.",
+      "usedBy": "Usado por"
+    },
     "releaseHealth": {
       "title": "Salud posterior al lanzamiento",
       "clear": "Limpiar",
@@ -703,7 +734,11 @@
       "responsibleProduct": "Producto responsable",
       "responsibleEmpty": "Sin asignar. Define un responsable de producto para notificarle cuando la revisión de requisitos marque esta tarea.",
       "autoStartDependents": "Iniciar dependientes automáticamente",
-      "autoStartHint": "Cuando esta tarea se fusione, inicia automáticamente las tareas que dependen de ella (una vez que sus otras dependencias también estén completas)."
+      "autoStartHint": "Cuando esta tarea se fusione, inicia automáticamente las tareas que dependen de ella (una vez que sus otras dependencias también estén completas).",
+      "involvedServices": "Servicios involucrados",
+      "involvedServicesHint": "Servicios conectados directamente involucrados en esta tarea: cada uno se levanta como un entorno efímero junto al servicio propio de la tarea, y el agente de código puede modificar también sus repositorios.",
+      "involvedServicesEmpty": "No hay servicios conectados. Conecta servicios en el marco del servicio para seleccionarlos aquí.",
+      "involvedServiceStale": "Ya no está conectado al servicio de esta tarea; se eliminará con el próximo cambio."
     }
   },
   "panels": {

package/i18n/locales/fr.json

@@ -442,14 +442,37 @@
     "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.",
+      "detect": {
+        "title": "Détecter depuis le dépôt",
+        "button": "Détecter",
+        "hint": "Lit le dépôt lié et propose une configuration à vérifier avant application. Rien n'est enregistré tant que vous n'appliquez pas.",
+        "error": "Impossible de lire le dépôt. Vérifiez que le frontend est lié à un dépôt connecté.",
+        "none": "Aucun élément de type frontend détecté. Indiquez le répertoire du frontend (pour un monorepo) ou renseignez les champs manuellement.",
+        "apply": "Appliquer",
+        "dismiss": "Ignorer",
+        "confidenceHigh": "sûr",
+        "confidenceLow": "estimation"
+      },
+      "groups": {
+        "build": "Compilation",
+        "serve": "Service",
+        "mocking": "Simulation",
+        "envInjection": "Injection d'environnement",
+        "bindings": "Liaisons backend",
+        "preview": "Aperçu"
+      },
       "packageManager": "Gestionnaire de paquets",
+      "directory": "Répertoire du frontend",
+      "directoryHint": "Le sous-dossier de l'app frontend dans le dépôt (un monorepo, p. ex. frontend/). Laissez vide si l'app est à la racine du dépôt.",
       "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).",
+      "serveStaticDesc": "sert le répertoire de sortie compilé en fichiers statiques. Le plus économique pour un test d'interface d'une app entièrement compilée.",
+      "serveCommandDesc": "exécute un script de package.json (p. ex. preview) pour servir l'app, pour les compilations nécessitant un serveur en fonctionnement.",
+      "serveEnvAxisNote": "Distinct de l'Injection d'environnement (à la compilation vs à l'exécution) ci-dessous, qui contrôle comment les URL du backend atteignent l'app, pas comment elle est servie.",
       "serveScript": "Script de service",
       "servePort": "Port de service",
       "mockMappingsPath": "Chemin des mappages de simulation",
@@ -480,6 +503,14 @@
         }
       }
     },
+    "serviceConnections": {
+      "title": "Connexions de services",
+      "hint": "Les autres services que celui-ci utilise, p. ex. un service qui envoie ses e-mails. Les connexions tracent des liens sur le tableau, et les tâches peuvent marquer un service connecté comme directement impliqué.",
+      "descriptionPlaceholder": "Comment ce service l'utilise, p. ex. envoie des e-mails via lui",
+      "remove": "Supprimer la connexion",
+      "empty": "Aucune connexion. Ajoutez-en une pour relier ce service à un autre service qu'il utilise.",
+      "usedBy": "Utilisé par"
+    },
     "releaseHealth": {
       "title": "Santé post-déploiement",
       "clear": "Effacer",
@@ -703,7 +734,11 @@
       "responsibleProduct": "Produit responsable",
       "responsibleEmpty": "Non assigné. Définissez un responsable produit pour le notifier lorsque la revue d'exigences signale cette tâche.",
       "autoStartDependents": "Démarrer automatiquement les dépendants",
-      "autoStartHint": "Lorsque cette tâche est fusionnée, démarrer automatiquement les tâches qui en dépendent (une fois que leurs autres dépendances sont également terminées)."
+      "autoStartHint": "Lorsque cette tâche est fusionnée, démarrer automatiquement les tâches qui en dépendent (une fois que leurs autres dépendances sont également terminées).",
+      "involvedServices": "Services impliqués",
+      "involvedServicesHint": "Services connectés directement impliqués dans cette tâche : chacun démarre comme environnement éphémère aux côtés du service propre de la tâche, et l'agent de code peut aussi modifier leurs dépôts.",
+      "involvedServicesEmpty": "Aucun service connecté. Connectez des services sur le cadre du service pour les sélectionner ici.",
+      "involvedServiceStale": "N'est plus connecté au service de cette tâche ; il sera retiré au prochain changement."
     }
   },
   "panels": {

package/i18n/locales/he.json

@@ -442,14 +442,37 @@
     "frontendConfig": {
       "title": "Frontend",
       "hint": "כיצד לבנות, להגיש ולדמות את ה-frontend הזה לבדיקת ממשק עצמאית. הקישורים למטה מחברים אותו לשירותי ה-backend שהוא קורא אליהם.",
+      "detect": {
+        "title": "זהה מהמאגר",
+        "button": "זהה",
+        "hint": "קורא את המאגר המקושר ומציע תצורה לבדיקה לפני החלה. שום דבר לא נשמר עד שתחיל.",
+        "error": "לא ניתן לקרוא את המאגר. ודא שה-frontend מקושר למאגר מחובר.",
+        "none": "לא זוהה דבר בעל מבנה frontend. הגדר את תיקיית ה-frontend (עבור monorepo) או מלא את השדות ידנית.",
+        "apply": "החל",
+        "dismiss": "בטל",
+        "confidenceHigh": "בטוח",
+        "confidenceLow": "ניחוש"
+      },
+      "groups": {
+        "build": "בנייה",
+        "serve": "הגשה",
+        "mocking": "הדמיה",
+        "envInjection": "הזרקת סביבה",
+        "bindings": "קישורי backend",
+        "preview": "תצוגה מקדימה"
+      },
       "packageManager": "מנהל חבילות",
+      "directory": "תיקיית frontend",
+      "directoryHint": "תת-התיקייה של אפליקציית ה-frontend במאגר (monorepo, למשל frontend/). השאר ריק אם האפליקציה נמצאת בשורש המאגר.",
       "installCommand": "פקודת התקנה",
       "buildScript": "סקריפט בנייה",
       "outputDir": "תיקיית פלט",
       "serveMode": "מצב הגשה",
       "serveStatic": "סטטי",
       "serveCommand": "פקודה",
-      "serveModeHint": "סטטי מגיש את תיקיית פלט הבנייה; פקודה מריצה סקריפט מ-package.json (למשל preview).",
+      "serveStaticDesc": "מגיש את תיקיית פלט הבנייה כקבצים סטטיים. הזול ביותר לבדיקת ממשק של אפליקציה בנויה במלואה.",
+      "serveCommandDesc": "מריץ סקריפט מ-package.json (למשל preview) כדי להגיש את האפליקציה, עבור בנייה הזקוקה לשרת פעיל.",
+      "serveEnvAxisNote": "נפרד מהזרקת הסביבה (בזמן בנייה מול זמן ריצה) שלמטה, השולטת כיצד כתובות ה-backend מגיעות לאפליקציה, לא כיצד היא מוגשת.",
       "serveScript": "סקריפט הגשה",
       "servePort": "פורט הגשה",
       "mockMappingsPath": "נתיב מיפויי הדמיה",
@@ -480,6 +503,14 @@
         }
       }
     },
+    "serviceConnections": {
+      "title": "חיבורי שירותים",
+      "hint": "השירותים האחרים שהשירות הזה משתמש בהם, למשל שירות ששולח עבורו הודעות דואר. חיבורים מציירים קשתות על הלוח, ומשימות יכולות לסמן שירות מחובר כמעורב ישירות.",
+      "descriptionPlaceholder": "איך השירות הזה משתמש בו, למשל שולח דרכו הודעות דואר",
+      "remove": "הסר חיבור",
+      "empty": "אין חיבורים. הוסיפו אחד כדי לקשר שירות זה לשירות אחר שהוא משתמש בו.",
+      "usedBy": "בשימוש על ידי"
+    },
     "releaseHealth": {
       "title": "תקינות לאחר שחרור",
       "clear": "נקה",
@@ -703,7 +734,11 @@
       "responsibleProduct": "מוצר אחראי",
       "responsibleEmpty": "לא משויך. הגדר בעלים של מוצר כדי ליידע אותו כאשר סקירת הדרישות מסמנת משימה זו.",
       "autoStartDependents": "הפעלה אוטומטית של תלויות",
-      "autoStartHint": "כאשר משימה זו ממוזגת, הפעל אוטומטית את המשימות התלויות בה (לאחר שגם שאר התלויות שלהן הושלמו)."
+      "autoStartHint": "כאשר משימה זו ממוזגת, הפעל אוטומטית את המשימות התלויות בה (לאחר שגם שאר התלויות שלהן הושלמו).",
+      "involvedServices": "שירותים מעורבים",
+      "involvedServicesHint": "שירותים מחוברים המעורבים ישירות במשימה זו: כל אחד מהם מוקם כסביבה זמנית לצד השירות של המשימה, וסוכן הקוד עשוי לשנות גם את המאגרים שלהם.",
+      "involvedServicesEmpty": "אין שירותים מחוברים. חברו שירותים במסגרת השירות כדי לבחור אותם כאן.",
+      "involvedServiceStale": "כבר לא מחובר לשירות של משימה זו; הוא יוסר בשינוי הבא."
     }
   },
   "panels": {

package/i18n/locales/ja.json

@@ -442,14 +442,37 @@
     "frontendConfig": {
       "title": "フロントエンド",
       "hint": "自己完結型の UI テストのために、このフロントエンドをビルド、配信、モックする方法。下のバインディングは、呼び出すバックエンドサービスとフロントエンドをつなぎます。",
+      "detect": {
+        "title": "リポジトリから検出",
+        "button": "検出",
+        "hint": "リンクされたリポジトリを読み取り、適用前に確認できる設定を提案します。適用するまで何も保存されません。",
+        "error": "リポジトリを読み取れませんでした。フロントエンドが接続済みリポジトリにリンクされているか確認してください。",
+        "none": "フロントエンドらしきものは検出されませんでした。（モノレポの場合は）フロントエンドのディレクトリを指定するか、手動で入力してください。",
+        "apply": "適用",
+        "dismiss": "却下",
+        "confidenceHigh": "確実",
+        "confidenceLow": "推測"
+      },
+      "groups": {
+        "build": "ビルド",
+        "serve": "配信",
+        "mocking": "モック",
+        "envInjection": "環境変数の注入",
+        "bindings": "バックエンドバインディング",
+        "preview": "プレビュー"
+      },
       "packageManager": "パッケージマネージャー",
+      "directory": "フロントエンドのディレクトリ",
+      "directoryHint": "リポジトリ内のフロントエンドアプリのサブフォルダー（モノレポ、例: frontend/）。アプリがリポジトリのルートにある場合は空のままにします。",
       "installCommand": "インストールコマンド",
       "buildScript": "ビルドスクリプト",
       "outputDir": "出力ディレクトリ",
       "serveMode": "配信モード",
       "serveStatic": "静的",
       "serveCommand": "コマンド",
-      "serveModeHint": "静的はビルド出力ディレクトリを配信します。コマンドは package.json のスクリプト（例: preview）を実行します。",
+      "serveStaticDesc": "ビルド出力ディレクトリを静的ファイルとして配信します。完全にビルド済みのアプリの UI テストに最も低コストです。",
+      "serveCommandDesc": "package.json のスクリプト（例: preview）を実行してアプリを配信します。サーバーの起動が必要なビルド向けです。",
+      "serveEnvAxisNote": "下の環境変数の注入（ビルド時とランタイム）とは別物で、そちらはバックエンド URL がアプリにどう届くかを制御し、配信方法ではありません。",
       "serveScript": "配信スクリプト",
       "servePort": "配信ポート",
       "mockMappingsPath": "モックマッピングのパス",
@@ -480,6 +503,14 @@
         }
       }
     },
+    "serviceConnections": {
+      "title": "サービス接続",
+      "hint": "このサービスが利用する他のサービス（例: メール送信を担うサービス）。接続はボード上にエッジとして描画され、タスクは接続先サービスを直接関与としてマークできます。",
+      "descriptionPlaceholder": "このサービスの利用方法（例: これを介してメールを送信）",
+      "remove": "接続を削除",
+      "empty": "接続はありません。このサービスが利用する別のサービスとリンクするには追加してください。",
+      "usedBy": "利用元"
+    },
     "releaseHealth": {
       "title": "リリース後の健全性",
       "clear": "クリア",
@@ -703,7 +734,11 @@
       "responsibleProduct": "担当プロダクト",
       "responsibleEmpty": "未割り当て。要件レビューがこのタスクをフラグしたときに通知するため、プロダクトオーナーを設定してください。",
       "autoStartDependents": "依存タスクを自動開始",
-      "autoStartHint": "このタスクがマージされたら、それに依存するタスクを (他の依存関係も完了したら) 自動的に開始します。"
+      "autoStartHint": "このタスクがマージされたら、それに依存するタスクを (他の依存関係も完了したら) 自動的に開始します。",
+      "involvedServices": "関与するサービス",
+      "involvedServicesHint": "このタスクに直接関与する接続済みサービス。各サービスはタスク自身のサービスと並んで一時的な環境として起動され、コーディングエージェントがそのリポジトリを変更することもあります。",
+      "involvedServicesEmpty": "接続済みのサービスはありません。ここで選択するには、サービスフレームでサービスを接続してください。",
+      "involvedServiceStale": "このタスクのサービスとの接続が解除されています。次回の変更時に削除されます。"
     }
   },
   "panels": {