@cat-factory/app 0.76.0 → 0.78.0

package/app/components/board/TaskDependencyEdges.vue

@@ -21,6 +21,9 @@ 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[]>([])
+// Service frame → connected provider service frame links (from serviceConnections).
+type ConnectionSeg = { id: string; x1: number; y1: number; x2: number; y2: number }
+const connectionSegments = ref<ConnectionSeg[]>([])
 
 // task → its dependencies, both ends being tasks
 const taskDeps = computed(() => {
@@ -66,6 +69,24 @@ const frontendLinks = computed(() => {
   return out
 })
 
+// consumer service frame → each provider service it connects to (a serviceConnections
+// entry, stored on the consumer end). Deduped; a target deleted out of band draws nothing.
+const connectionLinks = computed(() => {
+  const out: { id: string; source: string; target: string }[] = []
+  for (const f of board.frames) {
+    if (f.type !== 'service') continue
+    const seen = new Set<string>()
+    for (const connection of f.serviceConnections ?? []) {
+      const providerId = connection.serviceBlockId
+      if (seen.has(providerId)) continue
+      seen.add(providerId)
+      if (board.getBlock(providerId))
+        out.push({ id: `${f.id}__conn__${providerId}`, source: f.id, target: providerId })
+    }
+  }
+  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 {
@@ -152,6 +173,23 @@ function recompute() {
     fes.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
   }
   frontendSegments.value = fes
+
+  const conns: ConnectionSeg[] = []
+  for (const link of connectionLinks.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)
+    conns.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
+  }
+  connectionSegments.value = conns
 }
 
 const { pause, resume } = useRafFn(recompute, { immediate: false })
@@ -195,8 +233,34 @@ onBeforeUnmount(pause)
       >
         <path d="M0,0 L10,5 L0,10 z" fill="#22d3ee" />
       </marker>
+      <marker
+        id="service-connection-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="#34d399" />
+      </marker>
     </defs>
 
+    <!-- consumer service → provider service connection links (emerald, arrow toward the provider) -->
+    <line
+      v-for="s in connectionSegments"
+      :key="s.id"
+      :x1="s.x1"
+      :y1="s.y1"
+      :x2="s.x2"
+      :y2="s.y2"
+      stroke="#34d399"
+      :stroke-width="1.5"
+      stroke-dasharray="3 4"
+      :stroke-opacity="0.55"
+      marker-end="url(#service-connection-arrow)"
+    />
+
     <!-- frontend frame → bound service frame links (cyan, arrow toward the service under test) -->
     <line
       v-for="s in frontendSegments"

package/app/components/layout/IntegrationsHub.vue

@@ -20,6 +20,7 @@ const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const tracker = useTrackerStore()
 const releaseHealth = useReleaseHealthStore()
+const packageRegistries = usePackageRegistriesStore()
 const userSecrets = useUserSecretsStore()
 const apiKeys = useApiKeysStore()
 const workspace = useWorkspaceStore()
@@ -49,6 +50,7 @@ watch(
     if (isOpen) {
       query.value = ''
       void releaseHealth.ensureLoaded().catch(() => {})
+      void packageRegistries.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
       // Drives the OpenRouter row's "Key connected" badge.
       if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
@@ -256,6 +258,27 @@ const groups = computed<IntegrationGroup[]>(() => {
     })
   }
 
+  // --- Development (private package registries) -------------------------------
+  // Gated like observability: hidden until a probe confirms the module is wired
+  // (`available === true`), so an unconfigured backend doesn't show a dead row.
+  if (packageRegistries.available) {
+    const hasEntries = packageRegistries.entries.length > 0
+    out.push({
+      title: t('layout.integrationsHub.groups.development'),
+      items: [
+        {
+          key: 'package-registries',
+          icon: 'i-lucide-package',
+          label: t('layout.integrationsHub.items.packageRegistries.label'),
+          description: t('layout.integrationsHub.items.packageRegistries.description'),
+          status: hasEntries ? t('layout.integrationsHub.status.connected') : undefined,
+          connected: hasEntries,
+          onClick: () => go(ui.openPackageRegistries),
+        },
+      ],
+    })
+  }
+
   // NOTE: Infrastructure (agent-container execution + Tester environments + the local-mode
   // warm pool/checkout) is no longer listed here — it moved to its OWN top-level navbar menu
   // (SideBar → "Infrastructure" → the tabbed Infrastructure window). See `ui.openInfrastructure`.

package/app/components/panels/AgentStepDetail.vue

@@ -7,6 +7,8 @@ import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepMetadataCard from '~/components/panels/StepMetadataCard.vue'
 import StepTestReport from '~/components/panels/StepTestReport.vue'
 import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusPanel.vue'
+import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
+import { UI_TESTER_AGENT_KIND } from '@cat-factory/contracts'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
 import { useStepTimer } from '~/composables/useStepTimer'
@@ -58,6 +60,24 @@ const testPhase = computed(() => step.value?.test ?? null)
 // coder consume it), so the panel shows its spinning-up/running/shutdown/errored state.
 const stepEnvironment = computed(() => step.value?.environment ?? null)
 
+// For a frontend UI-test step (`tester-ui`): the enclosing `frontend` frame's backend-binding
+// config, so the detail can project how each env var resolved (live URL | mocked) — rendered from
+// the FROZEN bindings the engine stamped on the run (`instance.frontendBindings`), so a finished
+// run shows what it actually drove against rather than re-resolving against current live state.
+const frontendFrame = computed(() => (block.value ? board.serviceOf(block.value) : undefined))
+const isFrontendFrame = computed(() => frontendFrame.value?.type === 'frontend')
+const frontendConfig = computed(() =>
+  step.value?.agentKind === UI_TESTER_AGENT_KIND && isFrontendFrame.value
+    ? (frontendFrame.value!.frontendConfig ?? null)
+    : null,
+)
+// The frozen start-time resolution the tester ran against (absent for a non-frontend / pre-6b run).
+const frontendBindings = computed(() => instance.value?.frontendBindings ?? [])
+// The run-start advisories the engine stamped on the run (duplicate env vars / partially-mocked
+// services) are a whole-RUN fact, so surface them on ANY step detail of a frontend-frame run, not
+// only the `tester-ui` step — a duplicate-env-var note shouldn't be invisible from the coder step.
+const runNotes = computed(() => (isFrontendFrame.value ? (instance.value?.notes ?? []) : []))
+
 // The run's infrastructure attempts (container/runner/env spin-up + tear-down), behind
 // a toggle. This is the surface that makes the per-run `container` log rows + the
 // executionId filter visible — most useful when the run failed to start a container.
@@ -345,6 +365,27 @@ async function copyOutput() {
                    errored + the exact error), when this step runs against one -->
               <EnvironmentStatusPanel v-if="stepEnvironment" :environment="stepEnvironment" />
 
+              <!-- frontend UI-test: how the frame's backend bindings resolved (env var →
+                   live URL | mocked) + the run-start advisories (duplicate env vars /
+                   partially-mocked services) the engine stamped on the run. Rendered from the
+                   FROZEN start-time bindings so a finished run shows what it actually drove
+                   against, not a live re-resolution. -->
+              <FrontendBindingsResolved
+                v-if="frontendConfig"
+                :config="frontendConfig"
+                :resolved="frontendBindings"
+              />
+              <ul v-if="runNotes.length" class="space-y-1" data-testid="run-notes">
+                <li
+                  v-for="(note, i) in runNotes"
+                  :key="i"
+                  class="flex items-start gap-1.5 text-[11px] leading-snug text-amber-300/80"
+                >
+                  <UIcon name="i-lucide-info" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                  <span>{{ note }}</span>
+                </li>
+              </ul>
+
               <!-- this run's infrastructure attempts (container/runner/env spin-up +
                    tear-down): the surface for the per-run container log rows + the exact
                    provider error, behind a toggle (most useful on a failed-to-start run) -->

package/app/components/panels/InspectorPanel.vue

@@ -9,6 +9,7 @@ import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.v
 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 ServiceConnections from '~/components/panels/inspector/ServiceConnections.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'
@@ -465,6 +466,9 @@ const showOriginalDescription = ref(false)
       <!-- frontend (frame): build/serve/mock config + backend bindings (board links) -->
       <FrontendConfig v-if="isFrame && block.type === 'frontend'" :block="block" />
 
+      <!-- service (frame): directed connections to the other services it uses (board links) -->
+      <ServiceConnections v-if="isFrame && block.type === 'service'" :block="block" />
+
       <!-- service (frame): test infra + provisioning configuration -->
       <ServiceTestConfig v-if="isFrame" :block="block" />
 

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import {
+  duplicateBindingEnvVars,
+  resolveFrontendBindings,
+  type FrontendBackendBinding,
+  type FrontendConfig,
+  type ResolvedFrontendBinding,
+} from '@cat-factory/contracts'
+
+// The resolution of a frontend frame's backend bindings — each env var → a bound service's live
+// ephemeral URL, or WireMock. Two modes, same view:
+//   - **Live** (frame inspector, `resolved` omitted): resolves against the workspace's CURRENT env
+//     handles (fetched once via the environments store), so the operator sees how a run would
+//     resolve RIGHT NOW. Feeds the SAME pure helpers the backend uses so it can't drift.
+//   - **Projected** (`tester-ui` run/step detail, `resolved` provided): renders the FROZEN
+//     start-time bindings the engine stamped on the run, so a finished run shows what it ACTUALLY
+//     drove against — truthful even after the underlying envs are torn down (no live re-read).
+// Also surfaces the duplicate-env-var misconfiguration in live mode (projected mode leaves that to
+// the run-start note, which owns the frozen advisory).
+const props = defineProps<{ config: FrontendConfig; resolved?: ResolvedFrontendBinding[] }>()
+
+const environments = useEnvironmentsStore()
+const board = useBoardStore()
+const { t } = useI18n()
+
+const projected = computed(() => props.resolved !== undefined)
+
+// Live mode refreshes the env handles when this view opens so a just-provisioned service shows as
+// live; a projected snapshot needs no live read.
+onMounted(() => {
+  if (!projected.value) void environments.load()
+})
+
+// The duplicate advisory is config-derived; in projected mode the run-start note owns it (frozen
+// at start), so don't re-derive it here against a possibly-since-edited config.
+const duplicates = computed(() => (projected.value ? [] : duplicateBindingEnvVars(props.config)))
+
+// Each resolved binding + the display metadata a bare {envVar, serviceUrl} can't carry: whether
+// a mocked upstream was a `mock` source or a `service` with no live env, and the bound service's
+// title. Joined off the LAST config binding per envVar (matching `resolveFrontendBindings`'
+// last-wins dedup), so the extra labels stay in step with the canonical resolution.
+const rows = computed(() => {
+  const resolved =
+    props.resolved ??
+    resolveFrontendBindings(props.config, environments.liveServiceEnvUrls(props.config))
+  const lastByEnvVar = new Map<string, FrontendBackendBinding>()
+  for (const b of props.config.backendBindings) {
+    const key = b.envVar.trim()
+    if (key) lastByEnvVar.set(key, b)
+  }
+  return resolved.map((r) => {
+    const source = lastByEnvVar.get(r.envVar)?.source
+    const serviceFrameId = source?.kind === 'service' ? source.serviceBlockId : undefined
+    return {
+      envVar: r.envVar,
+      serviceUrl: r.serviceUrl,
+      kind: r.serviceUrl ? 'live' : source?.kind === 'service' ? 'service-offline' : 'mock',
+      serviceTitle: serviceFrameId
+        ? (board.getBlock(serviceFrameId)?.title ?? serviceFrameId)
+        : undefined,
+    } as const
+  })
+})
+</script>
+
+<template>
+  <div v-if="rows.length || duplicates.length" class="space-y-1.5" data-testid="frontend-resolved">
+    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      {{ t('inspector.frontendConfig.resolved.title') }}
+    </div>
+
+    <p
+      v-if="duplicates.length"
+      class="text-[11px] leading-snug text-amber-300/80"
+      data-testid="frontend-resolved-duplicates"
+    >
+      {{ t('inspector.frontendConfig.resolved.duplicateWarning', { vars: duplicates.join(', ') }) }}
+    </p>
+
+    <ul v-if="rows.length" class="space-y-0.5">
+      <li
+        v-for="row in rows"
+        :key="row.envVar"
+        class="flex items-baseline gap-1.5 text-[11px] leading-snug"
+        data-testid="frontend-resolved-row"
+      >
+        <span
+          class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full"
+          :class="{
+            'bg-emerald-400': row.kind === 'live',
+            'bg-amber-400': row.kind === 'service-offline',
+            'bg-slate-500': row.kind === 'mock',
+          }"
+        />
+        <span class="font-mono text-slate-300">{{ row.envVar }}</span>
+        <span class="text-slate-600">→</span>
+        <template v-if="row.kind === 'live'">
+          <span class="truncate font-mono text-emerald-300/90">{{ row.serviceUrl }}</span>
+          <span v-if="row.serviceTitle" class="text-slate-500">({{ row.serviceTitle }})</span>
+        </template>
+        <span v-else-if="row.kind === 'service-offline'" class="text-amber-300/80">
+          {{ t('inspector.frontendConfig.resolved.serviceOffline', { service: row.serviceTitle }) }}
+        </span>
+        <span v-else class="text-slate-500">
+          {{ t('inspector.frontendConfig.resolved.mock') }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>

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

@@ -10,6 +10,7 @@ import type {
   FrontendServeMode,
   PreviewStatus,
 } from '~/types/domain'
+import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
 
 // 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),
@@ -625,6 +626,13 @@ onUnmounted(() => preview.stopPolling(props.block.id))
         <div v-else class="text-[11px] text-slate-500">
           {{ t('inspector.frontendConfig.bindings.empty') }}
         </div>
+
+        <!-- How the bindings resolve RIGHT NOW: each env var → a bound service's live ephemeral
+             URL, or WireMock — plus the duplicate-env-var warning. The same view a UI-test run
+             would resolve against (shared helpers), so what you see is what a run will drive. -->
+        <div class="border-t border-slate-800/60 pt-2">
+          <FrontendBindingsResolved :config="config" />
+        </div>
       </div>
     </div>
 

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">