@cat-factory/app 0.49.1 → 0.50.0

package/app/components/layout/IntegrationsHub.vue

@@ -20,7 +20,6 @@ const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const tracker = useTrackerStore()
 const releaseHealth = useReleaseHealthStore()
-const providerConnections = useProviderConnectionsStore()
 const userSecrets = useUserSecretsStore()
 const apiKeys = useApiKeysStore()
 const workspace = useWorkspaceStore()
@@ -50,7 +49,6 @@ watch(
     if (isOpen) {
       query.value = ''
       void releaseHealth.ensureLoaded().catch(() => {})
-      void providerConnections.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
       // Drives the OpenRouter row's "Key connected" badge.
       if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
@@ -258,70 +256,9 @@ const groups = computed<IntegrationGroup[]>(() => {
     })
   }
 
-  // --- Infrastructure (ephemeral environments + self-hosted runner pool) -----
-  // The two providers — container agents (runner pool) and Tester environments — are the
-  // same "bring your own infra" idea and the same custom pool typically backs both, so they
-  // collapse into ONE row opening the tabbed Infrastructure window. The row shows a combined
-  // per-concern summary ("Agents: connected · Envs: not connected"). Each concern still gates
-  // on its own availability probe (a tab whose backend is off simply doesn't render), so the
-  // row appears whenever EITHER is available. The ProviderConfigBanner handles the louder
-  // "missing mandatory fields" warning.
-  const infra: IntegrationItem[] = []
-  const agentsAvailable = providerConnections.isAvailable('runner-pool')
-  const envsAvailable = providerConnections.isAvailable('environment')
-  if (agentsAvailable || envsAvailable) {
-    const agentsConn = providerConnections.connectionFor('runner-pool')
-    const envsConn = providerConnections.connectionFor('environment')
-    // Combined summary across the available concerns only.
-    const stateWord = (conn: unknown) =>
-      conn
-        ? t('layout.integrationsHub.status.connected')
-        : t('layout.integrationsHub.status.notConnected')
-    const parts: string[] = []
-    if (agentsAvailable)
-      parts.push(
-        t('layout.integrationsHub.items.infrastructure.agents', { state: stateWord(agentsConn) }),
-      )
-    if (envsAvailable)
-      parts.push(
-        t('layout.integrationsHub.items.infrastructure.envs', { state: stateWord(envsConn) }),
-      )
-    // Default the window to the agents tab when available (the common case), else envs.
-    const defaultKind = agentsAvailable ? 'runner-pool' : 'environment'
-    // A concern counts as satisfied when it's unavailable (nothing to configure) or connected.
-    // The row is "connected" (green) only when EVERY available concern is connected — a
-    // half-connected state shows the amber "attention" badge instead, so the green badge can't
-    // claim "done" while one concern is still unconfigured.
-    const agentsSatisfied = !agentsAvailable || !!agentsConn
-    const envsSatisfied = !envsAvailable || !!envsConn
-    const allConnected = agentsSatisfied && envsSatisfied
-    const someConnected = !!agentsConn || !!envsConn
-    infra.push({
-      key: 'infrastructure',
-      icon: 'i-lucide-server-cog',
-      label: t('layout.integrationsHub.items.infrastructure.label'),
-      description: t('layout.integrationsHub.items.infrastructure.description'),
-      status: parts.join(' · '),
-      connected: allConnected,
-      attention: someConnected && !allConnected,
-      attentionLabel: parts.join(' · '),
-      onClick: () => go(() => ui.openProviderConnection(defaultKind)),
-    })
-  }
-  // Local-mode-only: the warm-container pool + checkout reuse for the local runner. Shown
-  // only on the local-mode service (the controller 503s elsewhere, and `auth.localMode`
-  // is set from /auth/config).
-  if (auth.localMode?.enabled) {
-    infra.push({
-      key: 'local-mode',
-      icon: 'i-lucide-container',
-      label: t('layout.integrationsHub.items.localMode.label'),
-      description: t('layout.integrationsHub.items.localMode.description'),
-      onClick: () => go(ui.openLocalModeSettings),
-    })
-  }
-  if (infra.length)
-    out.push({ title: t('layout.integrationsHub.groups.infrastructure'), items: infra })
+  // 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`.
 
   // --- Personal (only you) — fallback when there is no UserMenu to host "My setup" -------
   // Per-user connections normally live in the My-setup hub; with auth disabled they fold in

package/app/components/layout/SideBar.vue

@@ -20,8 +20,20 @@ const slack = useSlackStore()
 const library = useFragmentLibraryStore()
 const workspace = useWorkspaceStore()
 const accounts = useAccountsStore()
+const auth = useAuthStore()
+const providerConnections = useProviderConnectionsStore()
 const ui = useUiStore()
 
+// The Infrastructure menu (agent-container execution + test environments) is relevant when
+// either provider integration is available OR we're running the local-mode facade (which
+// always has host-Docker execution + the warm-pool/checkout settings to configure).
+const showInfrastructure = computed(
+  () =>
+    auth.localMode?.enabled === true ||
+    providerConnections.isAvailable('runner-pool') ||
+    providerConnections.isAvailable('environment'),
+)
+
 // `isCompact` (< lg) is the breakpoint at which the navbar is an off-canvas drawer;
 // above it the aside is static and the drawer flag is inert.
 const { isCompact } = useViewport()
@@ -89,6 +101,7 @@ watch(
     void github.probe()
     void slack.probe()
     void library.probe()
+    void providerConnections.ensureLoaded().catch(() => {})
   },
   { immediate: true },
 )
@@ -241,6 +254,32 @@ watch(
         </div>
       </section>
 
+      <template v-if="showInfrastructure">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('nav.infrastructure') }}
+          </h2>
+          <div class="space-y-1.5">
+            <!-- Where agent containers run + Tester environments + (local mode) the warm
+               pool/checkout reuse. Its own top-level destination, no longer inside the
+               Integrations hub. -->
+            <UButton
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-server-cog"
+              class="justify-start"
+              data-testid="nav-infrastructure"
+              @click="ui.openInfrastructure()"
+            >
+              {{ t('nav.infrastructure') }}
+            </UButton>
+          </div>
+        </section>
+      </template>
+
       <template v-if="library.available">
         <USeparator />
         <section>

package/app/components/settings/ExecutionBackendSelector.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// A clear picker for WHERE work runs, replacing the old bare "delegate to runner pool"
+// yes/no switch. It reads the deployment's available backends from the capability descriptor
+// (`auth.infrastructure`) and presents the actual options for THIS deployment:
+//   - execution axis → where agent containers run (local Docker host / Cloudflare Containers /
+//     self-hosted runner pool);
+//   - testEnv axis   → where the Tester's ephemeral environments run (in-container
+//     docker-compose / an environment provider).
+//
+// The control is WRITABLE only in local mode, where the choice is a real per-workspace toggle
+// (the `delegateAgentsToRunnerPool` / `delegateTestEnvToProvider` settings — this selector is a
+// nicer face over those existing booleans, no new persistence). On the Worker/Node facades the
+// active backend is determined by the deployment + whether a pool is registered (the Worker
+// routes to a registered pool automatically, else Cloudflare Containers), so there it renders a
+// read-only "Active: …" line instead of a control that wouldn't actually switch anything.
+import { computed, ref } from 'vue'
+import type { ExecutionBackendKind, TestEnvBackendKind } from '@cat-factory/contracts'
+
+const props = defineProps<{ axis: 'execution' | 'testEnv' }>()
+
+const { t } = useI18n()
+const auth = useAuthStore()
+const settings = useWorkspaceSettingsStore()
+const providerConnections = useProviderConnectionsStore()
+const toast = useToast()
+
+type BackendKind = ExecutionBackendKind | TestEnvBackendKind
+
+// Per-axis labels — static literal keys whose leaves mirror the contract enum values verbatim
+// (so the typed-message-keys check stays live and a dynamic lookup is total).
+const EXECUTION_LABELS: Record<ExecutionBackendKind, string> = {
+  'local-docker': 'settings.infrastructure.executionBackend.local-docker',
+  'cloudflare-containers': 'settings.infrastructure.executionBackend.cloudflare-containers',
+  'runner-pool': 'settings.infrastructure.executionBackend.runner-pool',
+}
+const TEST_ENV_LABELS: Record<TestEnvBackendKind, string> = {
+  'local-compose': 'settings.infrastructure.testEnvBackend.local-compose',
+  'environment-provider': 'settings.infrastructure.testEnvBackend.environment-provider',
+}
+
+function labelFor(kind: BackendKind): string {
+  const key =
+    props.axis === 'execution'
+      ? EXECUTION_LABELS[kind as ExecutionBackendKind]
+      : TEST_ENV_LABELS[kind as TestEnvBackendKind]
+  return t(key)
+}
+
+// Normalise to the union element type so array ops (`includes`/`find`) don't collapse to
+// `never` across the execution/testEnv discriminated union.
+const cap = computed<{ available: BackendKind[]; active: BackendKind } | null>(() => {
+  const c = auth.infrastructure?.[props.axis]
+  return c ? { available: c.available as BackendKind[], active: c.active as BackendKind } : null
+})
+const isLocal = computed(() => auth.localMode?.enabled === true)
+
+// The backend reached by "delegating" away from the on-machine default, plus the provider
+// connection that must exist for it to work.
+const delegatedKind = computed<BackendKind>(() =>
+  props.axis === 'execution' ? 'runner-pool' : 'environment-provider',
+)
+const connectionKind = computed<'runner-pool' | 'environment'>(() =>
+  props.axis === 'execution' ? 'runner-pool' : 'environment',
+)
+const delegatedRegistered = computed(
+  () => !!providerConnections.connectionFor(connectionKind.value),
+)
+
+// The on-machine / built-in default (the available option that isn't the delegated one).
+const localKind = computed<BackendKind>(
+  () =>
+    cap.value?.available.find((k) => k !== delegatedKind.value) ??
+    cap.value?.active ??
+    'local-docker',
+)
+
+// The delegation flag is a genuine per-workspace toggle ONLY in local mode; elsewhere the
+// active backend is registration/deployment-driven, so the control is read-only there.
+const writable = computed(() => isLocal.value && (cap.value?.available.length ?? 0) > 1)
+
+const delegated = computed(() =>
+  props.axis === 'execution'
+    ? settings.settings.delegateAgentsToRunnerPool
+    : settings.settings.delegateTestEnvToProvider,
+)
+
+// The effective active backend. In local mode it follows the delegation flag; otherwise the
+// delegated backend is active when its provider is registered (the Worker auto-routes to a
+// registered pool), else the deployment default from the descriptor.
+const activeKind = computed<BackendKind>(() => {
+  if (!cap.value) return localKind.value
+  if (writable.value) return delegated.value ? delegatedKind.value : localKind.value
+  if (cap.value.available.includes(delegatedKind.value) && delegatedRegistered.value) {
+    return delegatedKind.value
+  }
+  return cap.value.active
+})
+
+const saving = ref(false)
+
+async function select(kind: BackendKind) {
+  if (kind === activeKind.value) return
+  const toRunnerPool = kind === delegatedKind.value
+  saving.value = true
+  try {
+    await settings.update(
+      props.axis === 'execution'
+        ? { delegateAgentsToRunnerPool: toRunnerPool }
+        : { delegateTestEnvToProvider: toRunnerPool },
+    )
+  } catch (e) {
+    toast.add({
+      title: t('settings.infrastructure.updateFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const labelKey = computed(() =>
+  props.axis === 'execution'
+    ? 'settings.infrastructure.executionBackend.label'
+    : 'settings.infrastructure.testEnvBackend.label',
+)
+</script>
+
+<template>
+  <section v-if="cap" class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
+    <h3 class="text-sm font-semibold text-slate-200">{{ t(labelKey) }}</h3>
+
+    <!-- Local mode: a real choice the user can flip (writes the delegation setting). -->
+    <div v-if="writable" class="space-y-1.5" :data-testid="`${axis}-backend-options`">
+      <label
+        v-for="kind in cap.available"
+        :key="kind"
+        class="flex items-start gap-2"
+        :class="
+          kind === delegatedKind && !delegatedRegistered
+            ? 'cursor-not-allowed opacity-50'
+            : 'cursor-pointer'
+        "
+      >
+        <input
+          type="radio"
+          class="mt-1"
+          :value="kind"
+          :checked="kind === activeKind"
+          :disabled="saving || (kind === delegatedKind && !delegatedRegistered)"
+          @change="select(kind)"
+        />
+        <span class="min-w-0">
+          <span class="text-sm text-slate-200">{{ labelFor(kind) }}</span>
+          <span
+            v-if="kind === delegatedKind && !delegatedRegistered"
+            class="block text-[11px] text-amber-300/80"
+          >
+            {{ t('settings.infrastructure.registerHint') }}
+          </span>
+        </span>
+      </label>
+    </div>
+
+    <!-- Worker/Node: the active backend is deployment/registration-driven, not a toggle. -->
+    <p v-else class="text-sm text-slate-300" :data-testid="`${axis}-backend-active`">
+      {{ t('settings.infrastructure.active', { backend: labelFor(activeKind) }) }}
+    </p>
+  </section>
+</template>

package/app/components/settings/InfrastructureWindow.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
-// The single tabbed "Infrastructure" window. It merges what used to be two separate
-// Integrations-Hub entries — the self-hosted runner pool (container agents) and the
-// ephemeral-environment provider (Tester environments) — into one surface, because the
-// same custom pool typically backs both jobs, so configuring them together reflects
-// reality. Each provider gets its own tab (ProviderConnectionTab); a tab whose backend
-// integration is disabled (503) simply doesn't render.
-//
-// The local-mode delegation toggles are cross-cutting (one per concern), so they live at
-// the TOP of the window rather than buried in one tab — removing the old awkward
-// cross-link hint that pointed from the runner-pool screen back to the env screen.
+// The single tabbed "Infrastructure" window — now a TOP-LEVEL navbar destination (no longer
+// reached through the Integrations hub). Two topical tabs:
+//   - "Agent containers" — where repo-operating agent containers run. Shows the execution
+//     backend selector, the runner-pool connection (ProviderConnectionTab), and — in local
+//     mode — the warm-container-pool + checkout-reuse settings (the local agent-container
+//     runtime, folded in from the former LocalModeSettingsPanel).
+//   - "Test environments" — where the Tester's ephemeral environments run. Shows the test-env
+//     backend selector and the environment-provider connection.
+// Local-specific affordances render inline, gated on `auth.localMode?.enabled`. A tab whose
+// backend integration is disabled (503) simply doesn't render.
 import { computed, ref, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
-import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import ProviderConnectionTab from '~/components/settings/ProviderConnectionTab.vue'
+import ExecutionBackendSelector from '~/components/settings/ExecutionBackendSelector.vue'
+import LocalContainerPoolSettings from '~/components/settings/LocalContainerPoolSettings.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const store = useProviderConnectionsStore()
 const auth = useAuthStore()
-const settings = useWorkspaceSettingsStore()
-const toast = useToast()
 
 const open = computed({
   get: () => ui.infrastructureOpen,
@@ -27,7 +26,8 @@ const open = computed({
     if (!v) ui.closeProviderConnection()
   },
 })
-const back = useIntegrationBack(open)
+
+const isLocal = computed(() => auth.localMode?.enabled === true)
 
 // Each concern gates on its own availability probe; an unavailable tab isn't offered.
 const agentsAvailable = computed(() => store.isAvailable('runner-pool'))
@@ -38,7 +38,7 @@ const tabs = computed(() => {
   if (agentsAvailable.value)
     out.push({
       value: 'runner-pool',
-      label: t('settings.providerConnection.tabs.containerAgents'),
+      label: t('settings.providerConnection.tabs.agentContainers'),
       icon: 'i-lucide-server-cog',
       slot: 'runner-pool',
     })
@@ -54,8 +54,8 @@ const tabs = computed(() => {
 
 const activeTab = ref<ProviderConnectionKind>(ui.infrastructureTab)
 
-// Honour the deep-linked tab each time the window opens (e.g. the banner's per-kind
-// "Configure…" button), falling back to the first available tab if the requested one is off.
+// Honour the deep-linked tab each time the window opens, falling back to the first available
+// tab if the requested one is off.
 watch(
   open,
   (isOpen) => {
@@ -69,9 +69,7 @@ watch(
 )
 // When availability resolves after open, re-pin onto a valid tab — but keep honouring the
 // deep-linked request. The two availability probes resolve independently, so `tabs` can pass
-// through a transient single-tab list (e.g. the runner-pool probe lands a tick before the
-// environment one). We must NOT let that transient list steal focus from a still-loading
-// requested tab, so only fall back to the first tab once loading has fully settled.
+// through a transient single-tab list; only fall back to the first tab once loading settled.
 watch([tabs, () => store.loaded], () => {
   const list = tabs.value
   if (list.some((x) => x.value === activeTab.value)) return
@@ -82,38 +80,6 @@ watch([tabs, () => store.loaded], () => {
     activeTab.value = list[0]!.value
   }
 })
-
-// --- Local-mode infrastructure delegation (cross-cutting; shown only in local mode) ---
-// In local mode this is where a developer chooses, per workspace, whether to run on this
-// machine (host Docker for agents, in-container docker-compose for the Tester) or delegate
-// to an external service. Each toggle is enabled only once its provider is registered.
-const isLocal = computed(() => auth.localMode?.enabled === true)
-const runnerPoolRegistered = computed(() => !!store.connectionFor('runner-pool'))
-const envRegistered = computed(() => !!store.connectionFor('environment'))
-const savingDelegation = ref(false)
-
-async function setDelegation(patch: {
-  delegateAgentsToRunnerPool?: boolean
-  delegateTestEnvToProvider?: boolean
-}) {
-  savingDelegation.value = true
-  try {
-    await settings.update(patch)
-  } catch (e) {
-    toast.add({
-      title: t('settings.providerConnection.delegation.updateFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
-  } finally {
-    savingDelegation.value = false
-  }
-}
-
-function selectTab(kind: ProviderConnectionKind) {
-  activeTab.value = kind
-}
 </script>
 
 <template>
@@ -122,80 +88,8 @@ function selectTab(kind: ProviderConnectionKind) {
     :title="t('settings.providerConnection.windowTitle')"
     :ui="{ content: 'max-w-xl' }"
   >
-    <template #title>
-      <IntegrationBackTitle :title="t('settings.providerConnection.windowTitle')" @back="back" />
-    </template>
     <template #body>
       <div class="space-y-4">
-        <!-- Local-mode delegation: the local-vs-external choice for BOTH container agents
-             AND the Tester's ephemeral environments, made once here at the top. -->
-        <section
-          v-if="isLocal"
-          class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
-        >
-          <div>
-            <h3 class="text-sm font-semibold text-slate-200">
-              {{ t('settings.providerConnection.delegation.title') }}
-            </h3>
-            <p class="mt-1 text-[11px] text-slate-400">
-              {{ t('settings.providerConnection.delegation.intro') }}
-            </p>
-          </div>
-
-          <!-- Container agents → self-hosted runner pool -->
-          <div class="space-y-1">
-            <label class="flex items-center gap-2">
-              <USwitch
-                size="sm"
-                :model-value="settings.settings.delegateAgentsToRunnerPool"
-                :disabled="savingDelegation || !runnerPoolRegistered"
-                @update:model-value="(v) => setDelegation({ delegateAgentsToRunnerPool: v })"
-              />
-              <span class="text-sm text-slate-200">
-                {{ t('settings.providerConnection.delegation.agentsToggle') }}
-              </span>
-            </label>
-            <p class="pl-9 text-[11px] text-slate-400">
-              {{ t('settings.providerConnection.delegation.agentsHint') }}
-              <template v-if="!runnerPoolRegistered">
-                <i18n-t
-                  keypath="settings.providerConnection.delegation.registerPoolPrompt"
-                  tag="span"
-                  scope="global"
-                >
-                  <template #link>
-                    <button
-                      type="button"
-                      class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
-                      @click="selectTab('runner-pool')"
-                    >
-                      {{ t('settings.providerConnection.delegation.registerPoolLink') }}
-                    </button>
-                  </template>
-                </i18n-t>
-              </template>
-            </p>
-          </div>
-
-          <!-- Tester environments → environment provider -->
-          <div class="space-y-1">
-            <label class="flex items-center gap-2">
-              <USwitch
-                size="sm"
-                :model-value="settings.settings.delegateTestEnvToProvider"
-                :disabled="savingDelegation || !envRegistered"
-                @update:model-value="(v) => setDelegation({ delegateTestEnvToProvider: v })"
-              />
-              <span class="text-sm text-slate-200">
-                {{ t('settings.providerConnection.delegation.envToggle') }}
-              </span>
-            </label>
-            <p class="pl-9 text-[11px] text-slate-400">
-              {{ t('settings.providerConnection.delegation.envHint') }}
-            </p>
-          </div>
-        </section>
-
         <UTabs
           v-if="tabs.length"
           v-model="activeTab"
@@ -205,10 +99,26 @@ function selectTab(kind: ProviderConnectionKind) {
           data-testid="infrastructure-tabs"
         >
           <template #runner-pool>
-            <ProviderConnectionTab kind="runner-pool" />
+            <div class="space-y-4">
+              <!-- Where agent containers run (writable in local mode; read-only elsewhere). -->
+              <ExecutionBackendSelector axis="execution" />
+              <ProviderConnectionTab kind="runner-pool" />
+              <!-- Local mode: the warm-pool + checkout reuse ARE the host agent-container
+                   runtime, so they live here rather than in a separate menu. -->
+              <section v-if="isLocal" class="border-t border-slate-800 pt-4">
+                <h3 class="mb-3 text-sm font-semibold text-slate-200">
+                  {{ t('settings.localMode.title') }}
+                </h3>
+                <LocalContainerPoolSettings />
+              </section>
+            </div>
           </template>
           <template #environment>
-            <ProviderConnectionTab kind="environment" />
+            <div class="space-y-4">
+              <!-- Where Tester environments run (writable in local mode; read-only elsewhere). -->
+              <ExecutionBackendSelector axis="testEnv" />
+              <ProviderConnectionTab kind="environment" />
+            </div>
           </template>
         </UTabs>