@cat-factory/app 0.49.2 → 0.50.1

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>
 

package/app/components/settings/LocalContainerPoolSettings.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+// Local-mode-only: the warm-container pool + per-repo checkout reuse. These are a
+// per-DEPLOYMENT singleton stored in the DB (they replaced the LOCAL_POOL_* / HARNESS_* env
+// vars), so a developer tunes them here instead of editing .env. The warm pool keeps idle
+// harness containers ready and re-leases one (preferring repo affinity) to each run — far
+// faster startup than a cold container per run. Saving applies the new sizing to the running
+// service immediately (live resize, no restart); in-flight runs keep the container they hold,
+// and the checkout config applies to containers started after the save.
+//
+// Previously a standalone modal (LocalModeSettingsPanel); now folded into the Agent-containers
+// tab of the Infrastructure window, since the warm pool IS the local agent-container runtime.
+import { reactive, ref, watch } from 'vue'
+
+const { t } = useI18n()
+const store = useLocalSettingsStore()
+const toast = useToast()
+
+const saving = ref(false)
+
+// Editable draft. `idleMinutes` and `cleanKeep` are friendlier renderings of the stored
+// `pool.idleTtlMs` (ms) and `checkout.cleanKeep` (string[]).
+const draft = reactive({
+  size: 0,
+  minWarm: 0,
+  max: null as number | null,
+  idleMinutes: 10,
+  workspaceRoot: '/workspace',
+  cleanKeep: 'node_modules,.venv,target,.gradle,.pnpm-store',
+})
+
+function syncDraft() {
+  const s = store.settings
+  if (!s) return
+  draft.size = s.pool.size
+  draft.minWarm = s.pool.minWarm
+  draft.max = s.pool.max
+  draft.idleMinutes = Math.round(s.pool.idleTtlMs / 60_000)
+  draft.workspaceRoot = s.checkout.workspaceRoot
+  draft.cleanKeep = s.checkout.cleanKeep.join(',')
+}
+
+// Load + hydrate the draft on mount (the tab only mounts in local mode).
+void store.load().then(syncDraft)
+watch(() => store.settings, syncDraft)
+
+async function save() {
+  const cleanKeep = draft.cleanKeep
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+  saving.value = true
+  try {
+    await store.save({
+      pool: {
+        size: Math.max(0, Math.floor(draft.size)),
+        minWarm: Math.max(0, Math.floor(draft.minWarm)),
+        max: draft.max == null ? null : Math.max(0, Math.floor(draft.max)),
+        idleTtlMs: Math.max(0, Math.floor(draft.idleMinutes * 60_000)),
+      },
+      checkout: { workspaceRoot: draft.workspaceRoot.trim() || '/workspace', cleanKeep },
+    })
+    toast.add({
+      title: t('settings.localMode.toast.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    toast.add({
+      title: t('settings.localMode.toast.saveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6" data-testid="local-container-pool-settings">
+    <i18n-t
+      keypath="settings.localMode.intro"
+      tag="p"
+      class="text-xs text-slate-400"
+      scope="global"
+    >
+      <template #poolVars>
+        <code>LOCAL_POOL_*</code>
+      </template>
+      <template #harnessVars>
+        <code>HARNESS_*</code>
+      </template>
+    </i18n-t>
+
+    <!-- Warm container pool -->
+    <section class="space-y-3">
+      <div>
+        <h4 class="text-sm font-semibold text-slate-200">
+          {{ t('settings.localMode.pool.heading') }}
+        </h4>
+        <i18n-t
+          keypath="settings.localMode.pool.description"
+          tag="p"
+          class="text-[11px] text-slate-400"
+          scope="global"
+        >
+          <template #appleContainer>
+            <code>container</code>
+          </template>
+        </i18n-t>
+      </div>
+      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <UFormField
+          :label="t('settings.localMode.pool.size.label')"
+          :help="t('settings.localMode.pool.size.help')"
+        >
+          <UInput v-model.number="draft.size" type="number" :min="0" size="sm" />
+        </UFormField>
+        <UFormField
+          :label="t('settings.localMode.pool.minWarm.label')"
+          :help="t('settings.localMode.pool.minWarm.help')"
+        >
+          <UInput v-model.number="draft.minWarm" type="number" :min="0" size="sm" />
+        </UFormField>
+        <UFormField
+          :label="t('settings.localMode.pool.max.label')"
+          :help="t('settings.localMode.pool.max.help')"
+        >
+          <UInput
+            v-model.number="draft.max"
+            type="number"
+            :min="0"
+            size="sm"
+            :placeholder="t('settings.localMode.pool.max.placeholder')"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('settings.localMode.pool.idleTimeout.label')"
+          :help="t('settings.localMode.pool.idleTimeout.help')"
+        >
+          <UInput v-model.number="draft.idleMinutes" type="number" :min="0" size="sm" />
+        </UFormField>
+      </div>
+    </section>
+
+    <!-- Checkout reuse -->
+    <section class="space-y-3 border-t border-slate-800 pt-6">
+      <div>
+        <h4 class="text-sm font-semibold text-slate-200">
+          {{ t('settings.localMode.checkout.heading') }}
+        </h4>
+        <p class="text-[11px] text-slate-400">
+          {{ t('settings.localMode.checkout.description') }}
+        </p>
+      </div>
+      <UFormField
+        :label="t('settings.localMode.checkout.workspaceRoot.label')"
+        :help="t('settings.localMode.checkout.workspaceRoot.help')"
+      >
+        <UInput v-model="draft.workspaceRoot" size="sm" placeholder="/workspace" />
+      </UFormField>
+      <UFormField
+        :label="t('settings.localMode.checkout.cleanKeep.label')"
+        :help="t('settings.localMode.checkout.cleanKeep.help')"
+      >
+        <UInput
+          v-model="draft.cleanKeep"
+          size="sm"
+          placeholder="node_modules,.venv,target,.gradle,.pnpm-store"
+        />
+      </UFormField>
+    </section>
+
+    <div class="flex justify-end">
+      <UButton color="primary" icon="i-lucide-save" :loading="saving" @click="save">
+        {{ t('common.save') }}
+      </UButton>
+    </div>
+  </div>
+</template>

package/app/components/settings/ProviderConnectionTab.vue

@@ -440,18 +440,31 @@ function fieldHelp(key: string): string | undefined {
       </div>
     </div>
 
-    <!-- MANIFEST-driven provider: the full in-app manifest editor. -->
-    <ProviderManifestEditor
+    <!-- MANIFEST-driven provider: the raw JSON manifest editor. Collapsed by default — it's
+         the advanced path, needed ONLY to integrate a custom API-based scheduler. The common
+         backends (local Docker, Cloudflare Containers, Kubernetes) don't need it. -->
+    <details
       v-else
-      :kind="kind"
-      :saved-manifest="descriptor.savedManifest"
-      :connected="!!connection"
-      :supports-test="descriptor.supportsTest"
-      :testing="testing"
-      :busy="busy"
-      :test-result="testResult"
-      @test="testManifest"
-      @save="saveManifest"
-    />
+      class="rounded-lg border border-slate-700 bg-slate-900/40 p-3"
+      :open="!!connection"
+    >
+      <summary class="cursor-pointer text-sm font-medium text-slate-200">
+        {{ t('settings.providerConnection.advancedManifest.summary') }}
+      </summary>
+      <p class="mt-2 mb-3 text-[11px] text-slate-400">
+        {{ t('settings.providerConnection.advancedManifest.intro') }}
+      </p>
+      <ProviderManifestEditor
+        :kind="kind"
+        :saved-manifest="descriptor.savedManifest"
+        :connected="!!connection"
+        :supports-test="descriptor.supportsTest"
+        :testing="testing"
+        :busy="busy"
+        :test-result="testResult"
+        @test="testManifest"
+        @save="saveManifest"
+      />
+    </details>
   </div>
 </template>

package/app/pages/index.vue

@@ -79,9 +79,6 @@ const ModelConfigurationPanel = defineAsyncComponent(
 const LocalModelEndpointsPanel = defineAsyncComponent(
   () => import('~/components/settings/LocalModelEndpointsPanel.vue'),
 )
-const LocalModeSettingsPanel = defineAsyncComponent(
-  () => import('~/components/settings/LocalModeSettingsPanel.vue'),
-)
 const SandboxPanel = defineAsyncComponent(() => import('~/components/sandbox/SandboxPanel.vue'))
 const UserSecretsSection = defineAsyncComponent(
   () => import('~/components/settings/UserSecretsSection.vue'),
@@ -287,7 +284,6 @@ watch(
       <InfrastructureWindow v-if="ui.infrastructureOpen" />
       <ModelConfigurationPanel v-if="ui.modelConfigOpen" />
       <LocalModelEndpointsPanel v-if="ui.localModelsOpen" />
-      <LocalModeSettingsPanel v-if="ui.localModeSettingsOpen" />
       <SandboxPanel v-if="ui.sandboxOpen" />
       <UserSecretsSection v-if="ui.userSecretsOpen" />
       <OpenRouterCatalogPanel v-if="ui.openRouterOpen" />

package/app/stores/auth.ts

@@ -1,4 +1,4 @@
-import type { LocalModeConfig } from '@cat-factory/contracts'
+import type { InfrastructureCapabilities, LocalModeConfig } from '@cat-factory/contracts'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import type { AuthUser } from '~/types/domain'
@@ -31,6 +31,13 @@ export const useAuthStore = defineStore(
      * setup banner). Null on every other facade.
      */
     const localMode = ref<LocalModeConfig | null>(null)
+    /**
+     * The deployment's infrastructure execution backends (which agent-container runtime + test
+     * environment options exist, and the deployment default active one). Drives the
+     * Infrastructure window's backend selector. Null until the auth handshake resolves / on a
+     * facade that doesn't report it.
+     */
+    const infrastructure = ref<InfrastructureCapabilities | null>(null)
     /**
      * Local mode only: the source-control provider the user last chose to sign in with
      * (its PAT lives server-side in env — this is just the non-secret choice). Persisted, so
@@ -72,6 +79,7 @@ export const useAuthStore = defineStore(
         required.value = config.enabled
         if (config.providers) providers.value = config.providers
         localMode.value = config.localMode ?? null
+        infrastructure.value = config.infrastructure ?? null
       } catch {
         // Backend unreachable — let the board's own error UI handle it.
         required.value = false
@@ -222,6 +230,7 @@ export const useAuthStore = defineStore(
       required,
       providers,
       localMode,
+      infrastructure,
       autoLoginProvider,
       ready,
       isAuthenticated,

package/app/stores/ui.ts

@@ -125,11 +125,12 @@ export const useUiStore = defineStore('ui', () => {
   // today, pluggable). NB: distinct from `observabilityInstanceId` below, which is the
   // LLM per-call observability panel.
   const observabilityConnectionOpen = ref(false)
-  // The single tabbed Infrastructure window (ephemeral-environment provider + self-hosted
-  // runner pool — the same custom pool typically backs both jobs, so they're configured
-  // together). `infrastructureOpen` is the modal flag; `infrastructureTab` selects which
-  // provider's tab is shown. `openProviderConnection(kind)` stays the entry API but now
-  // selects the matching tab instead of mounting a per-kind standalone panel.
+  // The single tabbed Infrastructure window — a TOP-LEVEL navbar destination (no longer
+  // reached via the Integrations hub). Two topical tabs: "Agent containers" (the execution
+  // backend + self-hosted runner pool, plus the local-mode warm pool/checkout) and "Test
+  // environments" (the ephemeral-environment provider). `infrastructureOpen` is the modal
+  // flag; `infrastructureTab` selects the tab. `openInfrastructure()` is the navbar entry;
+  // `openProviderConnection(kind)` remains for deep-links (a banner's "Configure…" button).
   const infrastructureOpen = ref(false)
   const infrastructureTab = ref<'environment' | 'runner-pool'>('runner-pool')
   const modelConfigOpen = ref(false)
@@ -140,9 +141,6 @@ export const useUiStore = defineStore('ui', () => {
   const vendorCredentialsTab = ref('pool')
   // Per-user settings panel: the signed-in user's own-machine local model runners.
   const localModelsOpen = ref(false)
-  // Local-mode-only settings panel: the warm-container pool sizing + per-repo checkout reuse
-  // (a per-deployment singleton that replaced the LOCAL_POOL_* / HARNESS_* env vars).
-  const localModeSettingsOpen = ref(false)
   // The Sandbox (parallel prompt/model testing) surface — an opt-in, on-demand window.
   const sandboxOpen = ref(false)
   const userSecretsOpen = ref(false)
@@ -479,6 +477,13 @@ export const useUiStore = defineStore('ui', () => {
   function closeObservabilityConnection() {
     observabilityConnectionOpen.value = false
   }
+  // Top-level navbar entry into the Infrastructure window. No hub-return marker (it isn't
+  // reached from the Integrations hub), so the window shows no "Back to Integrations" control.
+  function openInfrastructure(tab: 'environment' | 'runner-pool' = 'runner-pool') {
+    resetHubReturn()
+    infrastructureTab.value = tab
+    infrastructureOpen.value = true
+  }
   function openProviderConnection(kind: 'environment' | 'runner-pool') {
     resetHubReturn()
     infrastructureTab.value = kind
@@ -511,13 +516,6 @@ export const useUiStore = defineStore('ui', () => {
   function closeLocalModels() {
     localModelsOpen.value = false
   }
-  function openLocalModeSettings() {
-    resetHubReturn()
-    localModeSettingsOpen.value = true
-  }
-  function closeLocalModeSettings() {
-    localModeSettingsOpen.value = false
-  }
   function openSandbox() {
     sandboxOpen.value = true
   }
@@ -669,11 +667,11 @@ export const useUiStore = defineStore('ui', () => {
     observabilityConnectionOpen,
     infrastructureOpen,
     infrastructureTab,
+    openInfrastructure,
     modelConfigOpen,
     vendorCredentialsOpen,
     vendorCredentialsTab,
     localModelsOpen,
-    localModeSettingsOpen,
     sandboxOpen,
     userSecretsOpen,
     openRouterOpen,
@@ -754,8 +752,6 @@ export const useUiStore = defineStore('ui', () => {
     closeVendorCredentials,
     openLocalModels,
     closeLocalModels,
-    openLocalModeSettings,
-    closeLocalModeSettings,
     openSandbox,
     closeSandbox,
     openUserSecrets,