@cat-factory/app 0.49.2 → 0.50.1

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/panels/inspector/ServiceFragments.vue

@@ -9,27 +9,53 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
+const ui = useUiStore()
+const accounts = useAccountsStore()
 const { t } = useI18n()
 
 onMounted(() => fragments.ensureLoaded())
 
+type MenuItem = { label: string; icon?: string; onSelect: () => void }
+
 const selectedFragments = computed(() =>
   (props.block.serviceFragmentIds ?? [])
     .map((id) => fragments.getFragment(id))
     .filter((f): f is NonNullable<typeof f> => !!f),
 )
 
-// Picker menu: every pool fragment not already selected, grouped by category.
-const fragmentMenu = computed(() => {
+// A trailing group that jumps from "attach a fragment" to authoring/editing the
+// library itself (board tier always; account tier when accounts are enabled).
+// Open to every member — managing fragments is not an admin-only action.
+const manageItems = computed<MenuItem[]>(() => {
+  const items: MenuItem[] = [
+    {
+      label: t('inspector.fragments.manageBoard'),
+      icon: 'i-lucide-book-marked',
+      onSelect: () => ui.openFragmentLibrary(),
+    },
+  ]
+  if (accounts.enabled) {
+    items.push({
+      label: t('inspector.fragments.manageAccount'),
+      icon: 'i-lucide-users',
+      onSelect: () => ui.openAccountSettings('fragments'),
+    })
+  }
+  return items
+})
+
+// Picker menu: every pool fragment not already selected, grouped by category, with
+// the management links appended as the final group.
+const fragmentMenu = computed<MenuItem[][]>(() => {
   const selected = new Set(props.block.serviceFragmentIds ?? [])
-  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  const groups = new Map<string, MenuItem[]>()
   for (const f of fragments.fragments) {
     if (selected.has(f.id)) continue
     const items = groups.get(f.category) ?? []
     items.push({ label: f.title, onSelect: () => addFragment(f.id) })
     groups.set(f.category, items)
   }
-  return [...groups.values()]
+  return [...groups.values(), manageItems.value]
 })
 
 function addFragment(id: string) {
@@ -52,7 +78,7 @@ function removeFragment(id: string) {
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
         {{ t('inspector.fragments.serviceTitle') }}
       </span>
-      <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
+      <UDropdownMenu :items="fragmentMenu">
         <UButton
           size="xs"
           variant="ghost"

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

@@ -5,8 +5,12 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
+const ui = useUiStore()
+const accounts = useAccountsStore()
 const { t } = useI18n()
 
+type MenuItem = { label: string; icon?: string; onSelect: () => void }
+
 // ---- best-practice prompt fragments ----------------------------------------
 // Selected fragments (resolved against the catalog; unknown ids are dropped).
 const selectedFragments = computed(() =>
@@ -15,18 +19,40 @@ const selectedFragments = computed(() =>
     .filter((f): f is NonNullable<typeof f> => !!f),
 )
 
+// A trailing group that jumps from "attach a fragment" to authoring/editing the
+// library itself (board tier always; account tier when accounts are enabled).
+// Open to every member — managing fragments is not an admin-only action.
+const manageItems = computed<MenuItem[]>(() => {
+  const items: MenuItem[] = [
+    {
+      label: t('inspector.fragments.manageBoard'),
+      icon: 'i-lucide-book-marked',
+      onSelect: () => ui.openFragmentLibrary(),
+    },
+  ]
+  if (accounts.enabled) {
+    items.push({
+      label: t('inspector.fragments.manageAccount'),
+      icon: 'i-lucide-users',
+      onSelect: () => ui.openAccountSettings('fragments'),
+    })
+  }
+  return items
+})
+
 // Picker menu: fragments suitable for this block's type, not already selected,
-// grouped by category so the dropdown reads like the catalog.
-const fragmentMenu = computed(() => {
+// grouped by category so the dropdown reads like the catalog, with the management
+// links appended as the final group.
+const fragmentMenu = computed<MenuItem[][]>(() => {
   const selected = new Set(props.block.fragmentIds ?? [])
-  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  const groups = new Map<string, MenuItem[]>()
   for (const f of fragments.forBlockType(props.block.type)) {
     if (selected.has(f.id)) continue
     const items = groups.get(f.category) ?? []
     items.push({ label: f.title, onSelect: () => addFragment(f.id) })
     groups.set(f.category, items)
   }
-  return [...groups.values()]
+  return [...groups.values(), manageItems.value]
 })
 
 function addFragment(id: string) {
@@ -65,7 +91,7 @@ function removeFragment(id: string) {
         <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
           {{ t('inspector.structure.bestPractices') }}
         </span>
-        <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
+        <UDropdownMenu :items="fragmentMenu">
           <UButton
             size="xs"
             variant="ghost"

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>