@cat-factory/app 0.25.0 → 0.26.1

package/app/components/board/nodes/EpicNode.vue

@@ -15,8 +15,8 @@ const block = computed<Block | undefined>(() => board.getBlock(props.id))
 const members = computed(() => board.epicMembers(props.id))
 const total = computed(() => members.value.length)
 const done = computed(() => members.value.filter((m) => m.status === 'done').length)
-const active = computed(() =>
-  members.value.filter((m) => m.status === 'in_progress' || m.status === 'pr_ready').length,
+const active = computed(
+  () => members.value.filter((m) => m.status === 'in_progress' || m.status === 'pr_ready').length,
 )
 const selected = computed(() => ui.selectedBlockId === props.id)
 </script>
@@ -26,9 +26,7 @@ const selected = computed(() => ui.selectedBlockId === props.id)
     v-if="block"
     :data-block-id="block.id"
     class="w-56 cursor-pointer rounded-lg border bg-slate-900/90 px-3 py-2 shadow-lg backdrop-blur transition-colors"
-    :class="
-      selected ? 'border-violet-400 ring-1 ring-violet-400/50' : 'border-violet-500/40'
-    "
+    :class="selected ? 'border-violet-400 ring-1 ring-violet-400/50' : 'border-violet-500/40'"
     @click="ui.select(block.id)"
   >
     <div class="flex items-center gap-1.5">

package/app/components/layout/IntegrationsHub.vue

@@ -14,6 +14,7 @@ const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const tracker = useTrackerStore()
 const releaseHealth = useReleaseHealthStore()
+const providerConnections = useProviderConnectionsStore()
 const userSecrets = useUserSecretsStore()
 const apiKeys = useApiKeysStore()
 const workspace = useWorkspaceStore()
@@ -32,6 +33,7 @@ watch(
   (isOpen) => {
     if (isOpen) {
       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(() => {})
@@ -224,6 +226,37 @@ const groups = computed<IntegrationGroup[]>(() => {
     })
   }
 
+  // --- Infrastructure (ephemeral environments + self-hosted runner pool) -----
+  // Each gates on its own availability probe, so a backend with the integration off
+  // shows no dead row. The connected badge reflects a saved connection; the
+  // ProviderConfigBanner handles the louder "missing mandatory fields" warning.
+  const infra: IntegrationItem[] = []
+  if (providerConnections.isAvailable('environment')) {
+    const conn = providerConnections.connectionFor('environment')
+    infra.push({
+      key: 'environment',
+      icon: 'i-lucide-cloud',
+      label: 'Ephemeral environments',
+      description: 'Where the Tester agent runs against a live preview environment.',
+      status: conn ? 'Connected' : undefined,
+      connected: !!conn,
+      onClick: () => go(() => ui.openProviderConnection('environment')),
+    })
+  }
+  if (providerConnections.isAvailable('runner-pool')) {
+    const conn = providerConnections.connectionFor('runner-pool')
+    infra.push({
+      key: 'runner-pool',
+      icon: 'i-lucide-server-cog',
+      label: 'Self-hosted runner pool',
+      description: 'Where the coding agents run when not using Cloudflare Containers.',
+      status: conn ? 'Connected' : undefined,
+      connected: !!conn,
+      onClick: () => go(() => ui.openProviderConnection('runner-pool')),
+    })
+  }
+  if (infra.length) out.push({ title: 'Infrastructure', items: infra })
+
   return out
 })
 </script>

package/app/components/layout/ProviderConfigBanner.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+// Loud prompt that an infrastructure provider is wired for this instance but the workspace
+// hasn't supplied its mandatory config yet — mirroring AiProvidersBanner. A custom
+// environment provider / runner pool can declare required-without-default fields (e.g. an
+// API token); until they're set, the provider can't run, so we surface it with a direct
+// link into its connect panel. Dismissible per session.
+import { computed, ref, watch } from 'vue'
+import type { ProviderConnectionKind } from '~/types/providerConnections'
+
+const ui = useUiStore()
+const workspace = useWorkspaceStore()
+const store = useProviderConnectionsStore()
+
+const LABEL: Record<ProviderConnectionKind, string> = {
+  environment: 'Environment provider',
+  'runner-pool': 'Runner pool',
+}
+
+// Probe both providers once the workspace is ready (the descriptor view is secret-less).
+watch(
+  () => workspace.ready,
+  (ready) => {
+    if (ready) void store.ensureLoaded().catch(() => {})
+  },
+  { immediate: true },
+)
+
+const dismissed = ref(false)
+const pending = computed(() => store.needingConfig as ProviderConnectionKind[])
+const show = computed(() => pending.value.length > 0 && !dismissed.value)
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="show" class="absolute inset-x-0 top-0 z-40 flex justify-center px-4 pt-4">
+      <div
+        class="w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
+        role="alert"
+      >
+        <div class="flex items-start gap-4">
+          <UIcon name="i-lucide-plug" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-start justify-between gap-3">
+              <h2 class="text-lg font-semibold text-amber-100">
+                {{
+                  pending.length > 1
+                    ? 'Providers need configuration'
+                    : `${LABEL[pending[0]!]} needs configuration`
+                }}
+              </h2>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-x"
+                aria-label="Dismiss"
+                @click="dismissed = true"
+              />
+            </div>
+            <p class="mt-1 text-sm text-amber-200/90">
+              A provider is wired for this instance but is missing required settings, so it can't
+              run yet. Add the mandatory fields to finish connecting it.
+            </p>
+            <div class="mt-4 flex flex-wrap gap-2">
+              <UButton
+                v-for="k in pending"
+                :key="k"
+                color="warning"
+                variant="solid"
+                icon="i-lucide-settings"
+                @click="ui.openProviderConnection(k)"
+              >
+                Configure {{ LABEL[k].toLowerCase() }}
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -18,7 +18,10 @@ const done = computed(() => members.value.filter((m) => m.status === 'done').len
 const groups = computed(() => {
   const byService = new Map<
     string,
-    { service: Block | undefined; modules: Map<string, { module: Block | undefined; tasks: Block[] }> }
+    {
+      service: Block | undefined
+      modules: Map<string, { module: Block | undefined; tasks: Block[] }>
+    }
   >()
   for (const task of members.value) {
     const service = board.serviceOf(task)
@@ -29,7 +32,10 @@ const groups = computed(() => {
     const parent = task.parentId ? board.getBlock(task.parentId) : undefined
     const moduleKey = parent && parent.level === 'module' ? parent.id : '—'
     if (!group.modules.has(moduleKey)) {
-      group.modules.set(moduleKey, { module: parent?.level === 'module' ? parent : undefined, tasks: [] })
+      group.modules.set(moduleKey, {
+        module: parent?.level === 'module' ? parent : undefined,
+        tasks: [],
+      })
     }
     group.modules.get(moduleKey)!.tasks.push(task)
   }
@@ -51,7 +57,11 @@ const groups = computed(() => {
     </div>
 
     <div v-else class="space-y-2">
-      <div v-for="(group, gi) in groups" :key="gi" class="rounded-md border border-slate-700/60 p-2">
+      <div
+        v-for="(group, gi) in groups"
+        :key="gi"
+        class="rounded-md border border-slate-700/60 p-2"
+      >
         <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-slate-300">
           <UIcon name="i-lucide-box" class="h-3 w-3 text-slate-500" />
           {{ group.service?.title ?? 'Unassigned' }}

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

@@ -444,8 +444,8 @@ const technicalLabel = computed(() => {
         />
       </div>
       <div class="mt-1 text-[11px] text-slate-500">
-        When this task merges, automatically start the tasks that depend on it (once their
-        other dependencies are also done).
+        When this task merges, automatically start the tasks that depend on it (once their other
+        dependencies are also done).
       </div>
     </div>
   </div>

package/app/components/settings/ProviderConnectionPanel.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+// The generic connect form for the two infrastructure providers — the ephemeral-environment
+// provider and the self-hosted runner pool. Both self-describe via a ProviderDescriptor
+// (fields + defaults + the missingRequired keys still owed); this renders them without
+// hard-coding either. A NATIVE provider also ships a `manifestTemplate`, so the flat fields
+// are overlaid back onto a full manifest before saving (the single manifest storage path —
+// see backend/docs/native-environment-adapter.md): a `secret` field → the write-only secret
+// bundle, a non-secret field → providerConfig[key], a `baseUrl` field → baseUrl. A field
+// with a `default` is optional — left blank it falls back to that default.
+import { computed, ref, watch } from 'vue'
+import type { ProviderConnectionKind } from '~/types/providerConnections'
+
+const ui = useUiStore()
+const store = useProviderConnectionsStore()
+const toast = useToast()
+
+const META: Record<ProviderConnectionKind, { title: string; icon: string; blurb: string }> = {
+  environment: {
+    title: 'Ephemeral environment provider',
+    icon: 'i-lucide-cloud',
+    blurb:
+      'Where the Tester agent runs against a live preview environment. Configure the per-workspace settings and credentials your provider needs.',
+  },
+  'runner-pool': {
+    title: 'Self-hosted runner pool',
+    icon: 'i-lucide-server-cog',
+    blurb:
+      'Where the coding agents run when not using Cloudflare Containers. Configure the pool scheduler endpoint and credentials.',
+  },
+}
+
+const kind = computed<ProviderConnectionKind | null>(() => ui.providerConnectionKind)
+const open = computed({
+  get: () => kind.value !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeProviderConnection()
+  },
+})
+
+const meta = computed(() => (kind.value ? META[kind.value] : null))
+const descriptor = computed(() => (kind.value ? store.descriptorFor(kind.value) : null))
+const connection = computed(() => (kind.value ? store.connectionFor(kind.value) : null))
+
+// Per-field draft values, keyed by field key (blank ⇒ fall back to default/stored value).
+const values = ref<Record<string, string>>({})
+const testResult = ref<{ ok: boolean; message?: string } | null>(null)
+const testing = ref(false)
+const busy = ref(false)
+
+// Seed the draft from the saved manifest so an edit starts from the CURRENT non-secret config
+// (baseUrl + providerConfig) rather than blanks — re-saving then re-sends it instead of
+// dropping it. Secret fields are never prefilled (write-only); they must be re-entered to save.
+function resetDraft() {
+  testResult.value = null
+  const saved = descriptor.value?.savedManifest
+  const cfg = (saved?.providerConfig as Record<string, unknown> | undefined) ?? {}
+  const next: Record<string, string> = {}
+  for (const f of descriptor.value?.configFields ?? []) {
+    if (f.secret) continue
+    if (f.key === 'baseUrl') {
+      const b = saved?.baseUrl ?? connection.value?.baseUrl
+      if (typeof b === 'string') next[f.key] = b
+    } else if (typeof cfg[f.key] === 'string') {
+      next[f.key] = cfg[f.key] as string
+    }
+  }
+  values.value = next
+}
+
+watch(
+  kind,
+  (k) => {
+    if (k) void store.loadKind(k).then(resetDraft)
+  },
+  { immediate: true },
+)
+
+/** A native provider ships a manifest scaffold ⇒ we can author/register the full manifest. */
+const canAuthor = computed(() => !!descriptor.value?.manifestTemplate)
+const secretFieldCount = computed(
+  () => (descriptor.value?.configFields ?? []).filter((f) => f.secret).length,
+)
+const hasSecretFields = computed(() => secretFieldCount.value > 0)
+/** Already-configured manifest provider: we can still rotate its secrets. */
+const canRotateSecrets = computed(() => !canAuthor.value && !!connection.value)
+
+/** A field is satisfied when filled now, or already stored, or it has a default. */
+function satisfied(key: string): boolean {
+  const f = descriptor.value?.configFields.find((cf) => cf.key === key)
+  if (!f) return true
+  if ((values.value[key] ?? '').trim()) return true
+  if (f.default !== undefined) return true
+  return !(descriptor.value?.missingRequired ?? []).includes(key)
+}
+
+/** Save is allowed once every required-without-default key is supplied. */
+const canSave = computed(() => {
+  if (!descriptor.value) return false
+  if (!canAuthor.value && !canRotateSecrets.value) return false
+  return (descriptor.value.missingRequired ?? []).every(satisfied)
+})
+
+/**
+ * Overlay the flat field values onto the provider's manifest. We base the overlay on the
+ * CURRENT saved manifest when one exists (so previously-stored providerConfig — including
+ * nested values the flat form doesn't render — survives a re-save), falling back to the bare
+ * `manifestTemplate` scaffold on a first connect. Native providers only (a manifest provider
+ * has no template ⇒ null, and rotates secrets via the dedicated path instead).
+ */
+function buildManifestPayload(): {
+  manifest: Record<string, unknown>
+  secrets: Record<string, string>
+} | null {
+  const template = descriptor.value?.manifestTemplate
+  if (!template) return null
+  const base = descriptor.value?.savedManifest ?? template
+  const manifest: Record<string, unknown> = structuredClone(base)
+  const providerConfig: Record<string, unknown> = {
+    ...(manifest.providerConfig as Record<string, unknown> | undefined),
+  }
+  const secrets: Record<string, string> = {}
+  for (const f of descriptor.value?.configFields ?? []) {
+    const val = (values.value[f.key] ?? '').trim()
+    if (!val) continue // omit ⇒ falls back to the scaffold default
+    if (f.secret) secrets[f.key] = val
+    else if (f.key === 'baseUrl') manifest.baseUrl = val
+    else providerConfig[f.key] = val
+  }
+  if (Object.keys(providerConfig).length) manifest.providerConfig = providerConfig
+  return { manifest, secrets }
+}
+
+/** Just the secret-field values (for rotating an authored manifest provider's secrets). */
+function buildSecretsOnly(): Record<string, string> {
+  const secrets: Record<string, string> = {}
+  for (const f of descriptor.value?.configFields ?? []) {
+    if (!f.secret) continue
+    const val = (values.value[f.key] ?? '').trim()
+    if (val) secrets[f.key] = val
+  }
+  return secrets
+}
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function test() {
+  if (!kind.value) return
+  const payload = buildManifestPayload()
+  testing.value = true
+  testResult.value = null
+  try {
+    testResult.value = await store.test(kind.value, payload ?? { secrets: buildSecretsOnly() })
+  } catch (e) {
+    testResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
+  } finally {
+    testing.value = false
+  }
+}
+
+async function save() {
+  if (!kind.value) return
+  busy.value = true
+  try {
+    if (canAuthor.value) {
+      const payload = buildManifestPayload()
+      if (payload) await store.register(kind.value, payload)
+    } else {
+      await store.updateSecrets(kind.value, buildSecretsOnly())
+    }
+    resetDraft()
+    toast.add({ title: `${meta.value?.title} saved`, icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not save the connection', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function remove() {
+  if (!kind.value) return
+  busy.value = true
+  try {
+    await store.remove(kind.value)
+    resetDraft()
+    toast.add({ title: 'Connection removed', icon: 'i-lucide-check' })
+  } catch (e) {
+    notifyError('Could not remove the connection', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+/** The helper line under a field — its own help, plus the "defaulted to …" hint. */
+function fieldHelp(key: string): string | undefined {
+  const f = descriptor.value?.configFields.find((cf) => cf.key === key)
+  if (!f) return undefined
+  const filled = (values.value[key] ?? '').trim()
+  if (f.default !== undefined && !filled) {
+    return f.help ? `${f.help} · Defaults to ${f.default}` : `Defaults to ${f.default}`
+  }
+  return f.help
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="meta?.title ?? 'Provider'" :ui="{ content: 'max-w-xl' }">
+    <template #body>
+      <div v-if="descriptor" class="space-y-4">
+        <p class="text-xs text-slate-400">{{ meta?.blurb }}</p>
+
+        <!-- Saved connection summary -->
+        <div
+          v-if="connection"
+          class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+        >
+          <div>
+            <span class="font-medium text-slate-200">{{ connection.label }}</span>
+            <div class="text-[11px] text-emerald-400">Connected · {{ connection.baseUrl }}</div>
+          </div>
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            size="xs"
+            :disabled="busy"
+            @click="remove()"
+          />
+        </div>
+
+        <!-- Mandatory-fields warning (mirrors the banner) -->
+        <div
+          v-if="descriptor.missingRequired.length"
+          class="rounded-md border border-amber-500/40 bg-amber-950/40 px-3 py-2 text-xs text-amber-200"
+        >
+          Missing required config: {{ descriptor.missingRequired.join(', ') }}
+        </div>
+
+        <!-- Generic, descriptor-driven field form -->
+        <div
+          v-if="canAuthor || canRotateSecrets"
+          class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3"
+        >
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ connection ? 'Update configuration' : 'Connect' }}
+          </p>
+          <!-- A native re-register replaces the whole manifest; secrets are write-only so they
+               must be re-supplied. Non-secret config is prefilled, so it survives a save. -->
+          <p
+            v-if="connection && canAuthor && hasSecretFields"
+            class="text-[11px] text-amber-300/80"
+          >
+            Re-enter the secret field{{ secretFieldCount > 1 ? 's' : '' }} to save changes — stored
+            secrets are write-only and aren't shown.
+          </p>
+
+          <UFormField
+            v-for="field in descriptor.configFields"
+            :key="field.key"
+            :label="
+              field.label + (field.required && field.default === undefined ? '' : ' (optional)')
+            "
+            :help="fieldHelp(field.key)"
+          >
+            <USelect
+              v-if="field.type === 'select'"
+              v-model="values[field.key]"
+              :items="(field.options ?? []).map((o) => ({ label: o.label, value: o.value }))"
+              :placeholder="field.default ?? field.placeholder"
+            />
+            <UInput
+              v-else
+              v-model="values[field.key]"
+              :type="field.secret ? 'password' : 'text'"
+              class="font-mono"
+              :placeholder="field.default ?? field.placeholder"
+            />
+          </UFormField>
+
+          <div v-if="descriptor.supportsTest" class="flex items-center gap-2">
+            <UButton
+              color="neutral"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-plug-zap"
+              :loading="testing"
+              @click="test()"
+            >
+              Test connection
+            </UButton>
+            <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
+              {{ testResult.message ?? 'Connection OK' }}
+            </span>
+            <span v-else-if="testResult" class="text-xs text-rose-400">
+              {{ testResult.message ?? 'Connection failed' }}
+            </span>
+          </div>
+
+          <div class="flex justify-end">
+            <UButton color="primary" size="sm" :loading="busy" :disabled="!canSave" @click="save()">
+              {{ connection ? 'Save' : 'Connect' }}
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Manifest provider with nothing to overlay onto: needs the manifest editor -->
+        <div
+          v-else
+          class="rounded-md border border-slate-700 bg-slate-900/40 px-3 py-3 text-xs text-slate-400"
+        >
+          This provider is configured by authoring a manifest. The in-app manifest editor isn't
+          available yet — register it via the API for now.
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -117,7 +117,8 @@ async function toggleEnabled(enabled: boolean) {
             credentials to enter.
           </p>
           <p v-if="!available" class="text-[11px] text-amber-400">
-            Install the workspace's GitHub App (connect GitHub repos) to offer {{ descriptor.label }}.
+            Install the workspace's GitHub App (connect GitHub repos) to offer
+            {{ descriptor.label }}.
           </p>
         </template>
 

package/app/composables/api/providerConnections.ts

@@ -0,0 +1,61 @@
+import type {
+  ConnectionTestResult,
+  ProviderConnection,
+  ProviderConnectionKind,
+  ProviderDescriptor,
+  RegisterProviderInput,
+  TestProviderInput,
+} from '~/types/providerConnections'
+import type { ApiContext } from './context'
+
+// The two infrastructure providers share an identical REST surface, differing only in the
+// path segment (`environments` vs `runner-pool`). One factory serves both so a single
+// generic store + connect form drives either.
+const SEGMENT: Record<ProviderConnectionKind, string> = {
+  environment: 'environments',
+  'runner-pool': 'runner-pool',
+}
+
+/** Environment-provider + runner-pool connection endpoints (self-describe + register/test). */
+export function providerConnectionsApi({ http, ws }: ApiContext) {
+  const base = (workspaceId: string, kind: ProviderConnectionKind) =>
+    `${ws(workspaceId)}/${SEGMENT[kind]}`
+
+  return {
+    describeProvider: (workspaceId: string, kind: ProviderConnectionKind) =>
+      http<ProviderDescriptor>(`${base(workspaceId, kind)}/provider`),
+
+    getProviderConnection: (workspaceId: string, kind: ProviderConnectionKind) =>
+      http<{ connection: ProviderConnection | null }>(`${base(workspaceId, kind)}/connection`),
+
+    registerProviderConnection: (
+      workspaceId: string,
+      kind: ProviderConnectionKind,
+      body: RegisterProviderInput,
+    ) =>
+      http<ProviderConnection>(`${base(workspaceId, kind)}/connection`, { method: 'POST', body }),
+
+    updateProviderSecrets: (
+      workspaceId: string,
+      kind: ProviderConnectionKind,
+      secrets: Record<string, string>,
+    ) =>
+      http<ProviderConnection>(`${base(workspaceId, kind)}/connection/secrets`, {
+        method: 'PUT',
+        body: { secrets },
+      }),
+
+    testProviderConnection: (
+      workspaceId: string,
+      kind: ProviderConnectionKind,
+      body: TestProviderInput,
+    ) =>
+      http<ConnectionTestResult>(`${base(workspaceId, kind)}/connection/test`, {
+        method: 'POST',
+        body,
+      }),
+
+    deleteProviderConnection: (workspaceId: string, kind: ProviderConnectionKind) =>
+      http(`${base(workspaceId, kind)}/connection`, { method: 'DELETE' }),
+  }
+}

package/app/composables/api/reviews.ts

@@ -104,12 +104,7 @@ export function reviewsApi({ http, ws }: ApiContext) {
         { method: 'POST' },
       ),
 
-    reRequestRecommendation: (
-      workspaceId: string,
-      reviewId: string,
-      recId: string,
-      note: string,
-    ) =>
+    reRequestRecommendation: (workspaceId: string, reviewId: string, recId: string, note: string) =>
       http<RequirementReview>(
         `${ws(workspaceId)}/requirement-reviews/${encodeURIComponent(reviewId)}/recommendations/${encodeURIComponent(recId)}/re-request`,
         { method: 'POST', body: { note } },

package/app/composables/useApi.ts

@@ -12,6 +12,7 @@ import { humanTestApi } from './api/humanTest'
 import { modelsApi } from './api/models'
 import { notificationsApi } from './api/notifications'
 import { presetsApi } from './api/presets'
+import { providerConnectionsApi } from './api/providerConnections'
 import { recurringApi } from './api/recurring'
 import { releaseHealthApi } from './api/releaseHealth'
 import { reviewsApi } from './api/reviews'
@@ -85,6 +86,7 @@ export function useApi() {
     ...specApi(ctx),
     ...notificationsApi(ctx),
     ...presetsApi(ctx),
+    ...providerConnectionsApi(ctx),
     ...releaseHealthApi(ctx),
     ...recurringApi(ctx),
     ...githubApi(ctx),

package/app/pages/index.vue

@@ -29,6 +29,8 @@ import CommandBar from '~/components/layout/CommandBar.vue'
 import IntegrationsHub from '~/components/layout/IntegrationsHub.vue'
 import WorkspaceSettingsPanel from '~/components/settings/WorkspaceSettingsPanel.vue'
 import ObservabilityConnectionPanel from '~/components/settings/ObservabilityConnectionPanel.vue'
+import ProviderConnectionPanel from '~/components/settings/ProviderConnectionPanel.vue'
+import ProviderConfigBanner from '~/components/layout/ProviderConfigBanner.vue'
 import ModelConfigurationPanel from '~/components/settings/ModelConfigurationPanel.vue'
 import LocalModelEndpointsPanel from '~/components/settings/LocalModelEndpointsPanel.vue'
 import UserSecretsSection from '~/components/settings/UserSecretsSection.vue'
@@ -138,6 +140,8 @@ watch(
     <GitHubPatBanner />
     <!-- AI-readiness prompt (no usable model source, or default preset uses unavailable models). -->
     <AiProvidersBanner v-if="workspace.ready && !needsGitHubInstall && !githubProbePending" />
+    <!-- Infrastructure provider prompt (env/runner-pool wired but missing mandatory config). -->
+    <ProviderConfigBanner v-if="workspace.ready && !needsGitHubInstall && !githubProbePending" />
 
     <!-- Resolving whether the GitHub App is installed, before we decide what to show. -->
     <div
@@ -182,6 +186,7 @@ watch(
       <IntegrationsHub />
       <WorkspaceSettingsPanel />
       <ObservabilityConnectionPanel />
+      <ProviderConnectionPanel />
       <ModelConfigurationPanel />
       <LocalModelEndpointsPanel />
       <UserSecretsSection />

package/app/stores/providerConnections.ts

@@ -0,0 +1,136 @@
+import { defineStore } from 'pinia'
+import { computed, reactive, ref } from 'vue'
+import type {
+  ProviderConnection,
+  ProviderConnectionKind,
+  ProviderDescriptor,
+  RegisterProviderInput,
+  TestProviderInput,
+} from '~/types/providerConnections'
+import { useWorkspaceStore } from '~/stores/workspace'
+
+const KINDS: ProviderConnectionKind[] = ['environment', 'runner-pool']
+
+interface ProviderState {
+  /** null until first probed; false ⇒ integration disabled on the backend (hide it). */
+  available: boolean | null
+  descriptor: ProviderDescriptor | null
+  connection: ProviderConnection | null
+}
+
+function emptyState(): ProviderState {
+  return { available: null, descriptor: null, connection: null }
+}
+
+/**
+ * The two infrastructure providers configured through the generic connect form — the
+ * ephemeral-environment provider and the self-hosted runner pool. Each exposes a
+ * self-describing `ProviderDescriptor` (fields + defaults + the `missingRequired` keys the
+ * org still has to supply) plus the saved connection metadata (never secret values). Loaded
+ * on demand: the banner probes both eagerly so it can warn when a provider is wired for the
+ * instance but mandatory fields are missing; the panel re-loads its own kind on open.
+ */
+export const useProviderConnectionsStore = defineStore('providerConnections', () => {
+  const api = useApi()
+  const state = reactive<Record<ProviderConnectionKind, ProviderState>>({
+    environment: emptyState(),
+    'runner-pool': emptyState(),
+  })
+  const loaded = ref(false)
+  let inFlight: Promise<void> | null = null
+
+  async function loadKind(kind: ProviderConnectionKind) {
+    const ws = useWorkspaceStore()
+    const s = state[kind]
+    try {
+      const [descriptor, { connection }] = await Promise.all([
+        api.describeProvider(ws.requireId(), kind),
+        api.getProviderConnection(ws.requireId(), kind),
+      ])
+      s.descriptor = descriptor
+      s.connection = connection
+      s.available = true
+    } catch {
+      // 503 (integration disabled) or any error → hide this provider's UI entry points.
+      s.available = false
+      s.descriptor = null
+      s.connection = null
+    }
+  }
+
+  /** Refresh both providers (used by the banner + after a save/remove). */
+  async function load() {
+    await Promise.all(KINDS.map(loadKind))
+    loaded.value = true
+  }
+
+  /** Load once and share the result (coalescing concurrent callers). */
+  async function ensureLoaded() {
+    if (loaded.value) return
+    if (!inFlight) inFlight = load().finally(() => (inFlight = null))
+    return inFlight
+  }
+
+  function descriptorFor(kind: ProviderConnectionKind): ProviderDescriptor | null {
+    return state[kind].descriptor
+  }
+  function connectionFor(kind: ProviderConnectionKind): ProviderConnection | null {
+    return state[kind].connection
+  }
+  function isAvailable(kind: ProviderConnectionKind): boolean {
+    return state[kind].available === true
+  }
+
+  /**
+   * Providers that are wired for this instance but still missing mandatory config —
+   * exactly what the loud banner surfaces. A provider with no config fields at all (a
+   * stock manifest provider with nothing authored yet) is NOT flagged: there is nothing
+   * to nag about until someone introduces a provider that declares required fields.
+   */
+  const needingConfig = computed<ProviderConnectionKind[]>(() =>
+    KINDS.filter((kind) => {
+      const d = state[kind].descriptor
+      return state[kind].available === true && !!d && d.missingRequired.length > 0
+    }),
+  )
+
+  async function register(kind: ProviderConnectionKind, input: RegisterProviderInput) {
+    const ws = useWorkspaceStore()
+    state[kind].connection = await api.registerProviderConnection(ws.requireId(), kind, input)
+    await loadKind(kind) // refresh missingRequired/descriptor after the change
+  }
+
+  async function updateSecrets(kind: ProviderConnectionKind, secrets: Record<string, string>) {
+    const ws = useWorkspaceStore()
+    state[kind].connection = await api.updateProviderSecrets(ws.requireId(), kind, secrets)
+    await loadKind(kind)
+  }
+
+  async function test(kind: ProviderConnectionKind, input: TestProviderInput) {
+    const ws = useWorkspaceStore()
+    return api.testProviderConnection(ws.requireId(), kind, input)
+  }
+
+  async function remove(kind: ProviderConnectionKind) {
+    const ws = useWorkspaceStore()
+    await api.deleteProviderConnection(ws.requireId(), kind)
+    state[kind].connection = null
+    await loadKind(kind)
+  }
+
+  return {
+    state,
+    loaded,
+    load,
+    loadKind,
+    ensureLoaded,
+    descriptorFor,
+    connectionFor,
+    isAvailable,
+    needingConfig,
+    register,
+    updateSecrets,
+    test,
+    remove,
+  }
+})

package/app/stores/ui.ts

@@ -96,6 +96,9 @@ export const useUiStore = defineStore('ui', () => {
   // today, pluggable). NB: distinct from `observabilityInstanceId` below, which is the
   // LLM per-call observability panel.
   const observabilityConnectionOpen = ref(false)
+  // Infrastructure provider connect panels (ephemeral-environment provider + self-hosted
+  // runner pool). One panel renders whichever kind is open; null ⇒ closed.
+  const providerConnectionKind = ref<'environment' | 'runner-pool' | null>(null)
   const modelConfigOpen = ref(false)
   // LLM-vendor subscription credentials (the token pool powering the Claude Code
   // / Codex harnesses).
@@ -341,6 +344,12 @@ export const useUiStore = defineStore('ui', () => {
   function closeObservabilityConnection() {
     observabilityConnectionOpen.value = false
   }
+  function openProviderConnection(kind: 'environment' | 'runner-pool') {
+    providerConnectionKind.value = kind
+  }
+  function closeProviderConnection() {
+    providerConnectionKind.value = null
+  }
   function openModelConfig() {
     modelConfigOpen.value = true
   }
@@ -455,6 +464,7 @@ export const useUiStore = defineStore('ui', () => {
     workspaceSettingsOpen,
     workspaceSettingsTab,
     observabilityConnectionOpen,
+    providerConnectionKind,
     modelConfigOpen,
     vendorCredentialsOpen,
     localModelsOpen,
@@ -514,6 +524,8 @@ export const useUiStore = defineStore('ui', () => {
     setWorkspaceSettingsTab,
     openObservabilityConnection,
     closeObservabilityConnection,
+    openProviderConnection,
+    closeProviderConnection,
     openModelConfig,
     closeModelConfig,
     openVendorCredentials,

package/app/types/providerConnections.ts

@@ -0,0 +1,67 @@
+// Frontend mirrors of the shared provider self-description + connection wire contracts
+// (`@cat-factory/contracts` provider-config.ts + environments.ts + runners.ts), used by
+// the generic connect form for the two infrastructure providers: the ephemeral-environment
+// provider and the self-hosted runner pool. Both speak the same ProviderDescriptor.
+
+/** The two infrastructure providers configured through the generic connect form. */
+export type ProviderConnectionKind = 'environment' | 'runner-pool'
+
+/** One config value a provider needs, rendered as a single form field. */
+export interface ProviderConfigField {
+  key: string
+  label: string
+  help?: string
+  placeholder?: string
+  secret?: boolean
+  required?: boolean
+  type?: 'text' | 'password' | 'select'
+  options?: { value: string; label: string }[]
+  /** The provider/manifest default; a field with one is optional (UI shows a hint). */
+  default?: string
+}
+
+/** What the SPA needs to render a provider's connect form. */
+export interface ProviderDescriptor {
+  providerId: string
+  label: string
+  kind: 'native' | 'manifest'
+  configFields: ProviderConfigField[]
+  supportsTest: boolean
+  /** Required-without-default keys not yet supplied (drives the banner). */
+  missingRequired: string[]
+  /** Base manifest a native provider's flat fields are overlaid onto before save. */
+  manifestTemplate?: Record<string, unknown>
+  /**
+   * The CURRENT saved manifest (non-secret — only secret-ref key names), present once a
+   * connection exists. Edits are overlaid onto this (not the bare `manifestTemplate`) so
+   * re-saving preserves previously-stored providerConfig instead of dropping it.
+   */
+  savedManifest?: Record<string, unknown>
+}
+
+/** A workspace's provider binding, as exposed to clients (never secret values). */
+export interface ProviderConnection {
+  providerId: string
+  label: string
+  baseUrl: string
+  connectedAt: number
+  /** Which secret/config keys are stored (names only), so the UI shows completeness. */
+  secretKeys: string[]
+}
+
+export interface ConnectionTestResult {
+  ok: boolean
+  message?: string
+}
+
+/** The assembled register payload (a full manifest + the write-only secret bundle). */
+export interface RegisterProviderInput {
+  manifest: Record<string, unknown>
+  secrets: Record<string, string>
+}
+
+export interface TestProviderInput {
+  manifest?: Record<string, unknown>
+  config?: Record<string, string>
+  secrets?: Record<string, string>
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",