@cat-factory/app 0.288.2 → 0.290.0

package/app/components/environments/EnvironmentStatusPanel.logic.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import { readStatusNote, showsProviderFailure } from './EnvironmentStatusPanel.logic'
+import type { RunEnvironment } from '~/types/execution'
+
+/**
+ * The panel is where a person watches an environment come up, so it is also where the two prose
+ * channels can be shown to contradict each other. The failure this pins is a fault going unshown:
+ * a note is only ever context, and rendering it while `lastError` is suppressed reports a healthy
+ * spin-up on a row that recorded a real problem.
+ */
+const env = (over: Partial<RunEnvironment>): RunEnvironment =>
+  ({ id: 'env-1', url: null, status: 'provisioning', ...over }) as RunEnvironment
+
+describe('readStatusNote', () => {
+  it('shows what a still-provisioning environment is waiting on', () => {
+    expect(readStatusNote(env({ statusNote: '  the deploy job is queued  ' }))).toBe(
+      'the deploy job is queued',
+    )
+  })
+
+  it('withholds the note whenever a fault is recorded, whatever the status', () => {
+    // A teardown carries the row's `lastError` forward, so a failed-then-torn-down environment is
+    // a real shape with both fields set and a status the error block does not cover. Keyed off
+    // that block's own render condition, the panel showed the note and NO fault at all.
+    expect(
+      readStatusNote(
+        env({ status: 'torn_down', lastError: 'quota exceeded', statusNote: 'still deploying' }),
+      ),
+    ).toBeNull()
+    expect(
+      readStatusNote(
+        env({ status: 'failed', lastError: 'quota exceeded', statusNote: 'still deploying' }),
+      ),
+    ).toBeNull()
+  })
+
+  it('says nothing beside an environment that reached the state the note explains', () => {
+    // "Provider note: the workload is not routed yet" beside a green READY badge is two claims,
+    // and the badge is the true one.
+    expect(readStatusNote(env({ status: 'ready', statusNote: 'not routed yet' }))).toBeNull()
+    expect(readStatusNote(env({ status: 'torn_down', statusNote: 'still deploying' }))).toBeNull()
+    expect(
+      readStatusNote(env({ status: 'tearing_down', statusNote: 'still deploying' })),
+    ).toBeNull()
+  })
+
+  it('keeps the note on a terminal status that recorded no fault', () => {
+    // The same disposition kernel's readiness verdict takes: with no error to show, the last
+    // thing the provider said is all there is.
+    expect(
+      readStatusNote(env({ status: 'failed', statusNote: 'the deploy job never started' })),
+    ).toBe('the deploy job never started')
+  })
+
+  it('reads a blank note, an absent one and no environment alike', () => {
+    expect(readStatusNote(env({ statusNote: '   ' }))).toBeNull()
+    expect(readStatusNote(env({}))).toBeNull()
+    expect(readStatusNote(null)).toBeNull()
+  })
+})
+
+describe('showsProviderFailure', () => {
+  it('is the fault block, on the statuses that stopped at one', () => {
+    expect(showsProviderFailure(env({ status: 'failed', lastError: 'quota' }))).toBe(true)
+    expect(showsProviderFailure(env({ status: 'expired', lastError: 'quota' }))).toBe(true)
+    expect(showsProviderFailure(env({ status: 'provisioning', lastError: 'quota' }))).toBe(false)
+    expect(showsProviderFailure(env({ status: 'failed' }))).toBe(false)
+    expect(showsProviderFailure(null)).toBe(false)
+  })
+})

package/app/components/environments/EnvironmentStatusPanel.logic.ts

@@ -0,0 +1,48 @@
+// Which of an environment's two prose channels the panel shows, extracted from
+// `EnvironmentStatusPanel.vue` so the precedence can be asserted without mounting the panel (see
+// `EnvironmentStatusPanel.logic.spec.ts`).
+//
+// The environment record carries two accounts of itself and they answer different questions.
+// `lastError` is a recorded FAULT: the provider's verbatim cause, written on a status the
+// environment will not leave. `statusNote` is the provider's account of a state it has NOT left
+// yet: why this environment is not ready. A row can carry both, and which one a reader is shown
+// decides which layer they go looking at.
+
+import type { RunEnvironment } from '~/types/execution'
+import type { EnvironmentStatus } from '@cat-factory/contracts'
+
+/**
+ * The statuses whose failure block the panel renders: a fault is shown as the headline account
+ * only where the environment actually stopped at one.
+ */
+const FAILURE_STATUSES = new Set<EnvironmentStatus>(['failed', 'expired'])
+
+/**
+ * The statuses a note still says something about. `ready` has REACHED the state the note explains
+ * not being in, and the two teardown statuses describe a spin-up nobody is waiting on any more (a
+ * teardown carries the row's note forward, so this is a live shape rather than a hypothetical
+ * one). On `failed` / `expired` the note is what a provider that recorded no fault last said,
+ * which is the disposition kernel's readiness verdict takes for the same pair.
+ */
+const NOTE_STATUSES = new Set<EnvironmentStatus>(['provisioning', 'failed', 'expired'])
+
+/** Whether the verbatim provider error is the panel's account of this environment. */
+export function showsProviderFailure(env: RunEnvironment | null | undefined): boolean {
+  return !!env?.lastError && FAILURE_STATUSES.has(env.status)
+}
+
+/**
+ * The note to render, or null.
+ *
+ * Two rules, and it is the FAULT's presence that decides the first rather than whether the error
+ * block happens to be on screen. A recorded `lastError` outranks a note wherever they collide,
+ * whatever the status: they are two claims about one environment and the fault is the more
+ * specific one, so keying this off the error block's own render condition hid a real fault on
+ * every status that block does not cover. And a status that has left the state the note describes
+ * has nothing left to add with it.
+ */
+export function readStatusNote(env: RunEnvironment | null | undefined): string | null {
+  if (!env || env.lastError) return null
+  if (!NOTE_STATUSES.has(env.status)) return null
+  return env.statusNote?.trim() || null
+}

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -5,6 +5,10 @@
 // shows whether the env is spinning up / running / shut down / errored, with the error.
 import type { InfraEngine, ProvisionType } from '@cat-factory/contracts'
 import type { RunEnvironment, HumanTestEnvironmentStatus } from '~/types/execution'
+import {
+  readStatusNote,
+  showsProviderFailure,
+} from '~/components/environments/EnvironmentStatusPanel.logic'
 
 const props = defineProps<{
   environment: RunEnvironment | null
@@ -86,6 +90,12 @@ const ENV_STATUS_META = computed<
   },
 }))
 
+// Which of the environment's two prose channels this panel shows. Both predicates live in
+// `EnvironmentStatusPanel.logic.ts`, where the precedence between a recorded fault and a
+// still-coming-up note is stated once and asserted without mounting the panel.
+const failureShown = computed(() => showsProviderFailure(props.environment))
+const statusNote = computed(() => readStatusNote(props.environment))
+
 // The two statuses that describe a transition IN FLIGHT. Only these ever animate, and only
 // while the run driving the transition is still being driven itself.
 const envInTransition = computed(
@@ -140,12 +150,19 @@ const envInTransition = computed(
       </dl>
       <!-- The verbatim provider error when the environment failed/expired. -->
       <pre
-        v-if="
-          environment.lastError &&
-          (environment.status === 'failed' || environment.status === 'expired')
-        "
+        v-if="failureShown"
         class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded border border-rose-900/60 bg-rose-950/40 p-1.5 text-[11px] text-rose-200/90"
         >{{ environment.lastError }}</pre>
+      <!-- What the provider says it is still waiting on. Muted rather than alarming: an
+           environment mid-rollout is healthy, and styling this like the error above would report
+           a fault every deploy. Bounded like the error block, because the text is provider
+           prose. -->
+      <p
+        v-if="statusNote"
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-[11px] text-slate-400"
+      >
+        {{ t('environments.statusNote', { note: statusNote }) }}
+      </p>
     </div>
     <p v-else class="text-[12px] text-slate-500">
       {{ degradedReason ?? t('environments.empty') }}

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -34,6 +34,9 @@ const formatLabel = computed<Record<ApiContractFormat, string>>(() => ({
   openapi: t('foundational.format.openapi'),
   'toad-contract': t('foundational.format.toadContract'),
   'lokalise-api-contract': t('foundational.format.lokaliseApiContract'),
+  asyncapi: t('foundational.format.asyncapi'),
+  graphql: t('foundational.format.graphql'),
+  grpc: t('foundational.format.grpc'),
 }))
 // `as const` keeps the literal colour names assignable to UBadge's `color` union.
 const tierColor = {

package/app/components/foundational/FoundationalServiceManager.vue

@@ -20,6 +20,7 @@ import FoundationalServiceCatalogList from '~/components/foundational/Foundation
 import FoundationalServiceRegistry from '~/components/foundational/FoundationalServiceRegistry.vue'
 import FoundationalServiceSources from '~/components/foundational/FoundationalServiceSources.vue'
 import FoundationalSuppressions from '~/components/foundational/FoundationalSuppressions.vue'
+import ServiceCatalogConnection from '~/components/foundational/ServiceCatalogConnection.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -50,7 +51,7 @@ watch(
   { immediate: true },
 )
 
-type Tab = 'catalog' | 'registry' | 'sources'
+type Tab = 'catalog' | 'registry' | 'sources' | 'portal'
 const tab = ref<Tab>(props.showCatalog ? 'catalog' : 'registry')
 
 const ownerLabel = computed(() =>
@@ -62,10 +63,14 @@ const tabs = computed(() => {
     { value: 'registry' as const, label: ownerLabel.value, slot: 'registry' },
     { value: 'sources' as const, label: t('foundational.tab.sources'), slot: 'sources' },
   ]
+  // The developer-portal import is WORKSPACE-only, so it rides the same flag the merged catalog
+  // does rather than a second one: the credential is workspace-keyed, and an account tab would
+  // offer a connection the backend serves at no scope.
   if (!props.showCatalog) return items
   return [
     { value: 'catalog' as const, label: t('foundational.tab.catalog'), slot: 'catalog' },
     ...items,
+    { value: 'portal' as const, label: t('foundational.tab.portal'), slot: 'portal' },
   ]
 })
 
@@ -116,6 +121,9 @@ const activeTab = computed({
       <template #sources>
         <FoundationalServiceSources :kind="props.kind" :owner-id="props.ownerId" />
       </template>
+      <template #portal>
+        <ServiceCatalogConnection />
+      </template>
     </UTabs>
   </div>
 </template>

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -37,6 +37,9 @@ const formatLabel = computed<Record<ApiContractFormat, string>>(() => ({
   openapi: t('foundational.format.openapi'),
   'toad-contract': t('foundational.format.toadContract'),
   'lokalise-api-contract': t('foundational.format.lokaliseApiContract'),
+  asyncapi: t('foundational.format.asyncapi'),
+  graphql: t('foundational.format.graphql'),
+  grpc: t('foundational.format.grpc'),
 }))
 const formatItems = computed(() =>
   (Object.keys(formatLabel.value) as ApiContractFormat[]).map((value) => ({

package/app/components/foundational/ServiceCatalogConnection.vue

@@ -0,0 +1,392 @@
+<script setup lang="ts">
+// The workspace's SERVICE CATALOG connection: the developer portal (Backstage) whose services are
+// imported into the foundational-services catalog as `workspace`-tier entries
+// (backend/docs/service-catalog-import.md).
+//
+// A THIRD supply route beside the registry tab (upload) and the sources tab (a linked repo), so it
+// lives beside them rather than in a settings page of its own: what it produces is the same
+// catalog, and an operator deciding where a service came from should not have to look in two
+// places.
+//
+// The form's shape follows the auth vocabulary, which is closed for a reason: these are the ways
+// organisations actually run a self-hosted Backstage, and each needs a different request built. The
+// fields shown switch on the selected mode, so a static token is one box and nothing else.
+import { computed, reactive, ref } from 'vue'
+import type { ConnectServiceCatalogInput, ServiceCatalogAuthMode } from '~/types/domain'
+import { useFoundationalServicesStore } from '~/stores/foundationalServices'
+import {
+  SERVICE_CATALOG_AUTH_KEYS,
+  SERVICE_CATALOG_AUTH_ORDER,
+  SERVICE_CATALOG_STATUS_COLORS,
+  serviceCatalogStatusKey,
+} from '~/utils/serviceCatalog'
+
+const catalog = useFoundationalServicesStore()
+const toast = useToast()
+const { present } = usePipelineErrorToast()
+const { t, d } = useI18n()
+const { confirm } = useConfirm()
+
+const authMode = ref<ServiceCatalogAuthMode>('static-token')
+const form = reactive({
+  baseUrl: '',
+  token: '',
+  sharedSecret: '',
+  tokenUrl: '',
+  clientId: '',
+  clientSecret: '',
+  scope: '',
+  audience: '',
+  username: '',
+  password: '',
+  headerName: '',
+  headerValue: '',
+  secondHeaderName: '',
+  secondHeaderValue: '',
+  entityFilter: '',
+  includeApis: true,
+  maxServices: 200,
+})
+const busy = ref<'connect' | 'probe' | 'import' | 'disconnect' | null>(null)
+
+const connection = computed(() => catalog.serviceCatalog)
+
+// Both vocabularies map to their keys in `~/utils/serviceCatalog`, whose spec asserts every entry
+// against the base catalog: these are reached through a lookup rather than a literal key written
+// out at the call site, so the typed-message-key guard cannot see them.
+const authModeItems = computed(() =>
+  SERVICE_CATALOG_AUTH_ORDER.map((value) => ({
+    value,
+    label: t(SERVICE_CATALOG_AUTH_KEYS[value]),
+  })),
+)
+
+const authModeLabel = (mode: ServiceCatalogAuthMode) => t(SERVICE_CATALOG_AUTH_KEYS[mode])
+const statusLabel = computed(() =>
+  t(serviceCatalogStatusKey(connection.value?.lastSyncStatus ?? null)),
+)
+const syncStatusColor = computed(() => {
+  const status = connection.value?.lastSyncStatus
+  return status ? SERVICE_CATALOG_STATUS_COLORS[status] : 'neutral'
+})
+
+/**
+ * The body both `connect` and `probe` send.
+ *
+ * ONE builder for both, deliberately: the probe exists to test what the operator has just typed,
+ * and a second builder is how a probe ends up testing a slightly different credential from the one
+ * that gets stored.
+ */
+function buildInput(): ConnectServiceCatalogInput {
+  const terms = form.entityFilter
+    .split(/[\n,]/)
+    .map((term) => term.trim())
+    .filter(Boolean)
+  return {
+    baseUrl: form.baseUrl.trim(),
+    auth: buildAuth(),
+    ...(terms.length > 0 ? { entityFilter: terms } : {}),
+    includeApis: form.includeApis,
+    maxServices: form.maxServices,
+  }
+}
+
+function buildAuth(): ConnectServiceCatalogInput['auth'] {
+  switch (authMode.value) {
+    case 'none':
+      return { mode: 'none' }
+    case 'static-token':
+      return { mode: 'static-token', token: form.token.trim() }
+    case 'legacy-shared-secret':
+      return { mode: 'legacy-shared-secret', sharedSecret: form.sharedSecret.trim() }
+    case 'oauth2-client-credentials':
+      return {
+        mode: 'oauth2-client-credentials',
+        tokenUrl: form.tokenUrl.trim(),
+        clientId: form.clientId.trim(),
+        clientSecret: form.clientSecret.trim(),
+        ...(form.scope.trim() ? { scope: form.scope.trim() } : {}),
+        ...(form.audience.trim() ? { audience: form.audience.trim() } : {}),
+      }
+    case 'basic':
+      return { mode: 'basic', username: form.username.trim(), password: form.password }
+    case 'headers':
+      return {
+        mode: 'headers',
+        headers: [
+          { name: form.headerName.trim(), value: form.headerValue },
+          ...(form.secondHeaderName.trim()
+            ? [{ name: form.secondHeaderName.trim(), value: form.secondHeaderValue }]
+            : []),
+        ],
+      }
+  }
+}
+
+async function withBusy(kind: NonNullable<typeof busy.value>, fn: () => Promise<void>) {
+  if (busy.value) return
+  busy.value = kind
+  try {
+    await fn()
+  } finally {
+    busy.value = null
+  }
+}
+
+async function connect() {
+  await withBusy('connect', async () => {
+    try {
+      await catalog.connectServiceCatalog(buildInput())
+      toast.add({ title: t('serviceCatalog.toast.connected'), color: 'success' })
+    } catch (error) {
+      present(error, 'serviceCatalog.toast.connectFailed')
+      return
+    }
+    // The first import follows the connect, and is REPORTED as its own outcome. The connection is
+    // stored by the time it runs, so a revoked token surfacing here is an import failure with an
+    // import remedy; presenting it under "could not connect" would deny what the panel is already
+    // showing and bury the remedy under a title that says the opposite.
+    await runImport()
+  })
+}
+
+async function probe() {
+  await withBusy('probe', async () => {
+    try {
+      const result = await catalog.probeServiceCatalog(buildInput())
+      toast.add({
+        title: result.ok
+          ? t('serviceCatalog.toast.probeOk')
+          : t('serviceCatalog.toast.probeFailed'),
+        description: result.message,
+        color: result.ok ? 'success' : 'error',
+      })
+    } catch (error) {
+      present(error, 'serviceCatalog.toast.probeFailed')
+    }
+  })
+}
+
+async function importNow() {
+  await withBusy('import', runImport)
+}
+
+/** One import and its toast, shared by the Import button and the connect flow's first pass. */
+async function runImport(): Promise<void> {
+  try {
+    const result = await catalog.importServiceCatalog()
+    toast.add({
+      title: t('serviceCatalog.toast.imported'),
+      description: t('serviceCatalog.toast.importedDetail', {
+        upserted: result.upserted,
+        unchanged: result.unchanged,
+        tombstoned: result.tombstoned,
+      }),
+      color: result.status === 'ok' ? 'success' : 'warning',
+    })
+  } catch (error) {
+    present(error, 'serviceCatalog.toast.importFailed')
+  }
+}
+
+async function disconnect() {
+  // The imported services are TOMBSTONED with the connection, which is destructive enough to
+  // confirm: an operator who expected the rows to stay would otherwise lose a board's whole
+  // imported estate on one click.
+  if (
+    !(await confirm({
+      title: t('serviceCatalog.disconnect.title'),
+      description: t('serviceCatalog.disconnect.body'),
+      confirmLabel: t('serviceCatalog.disconnect.confirm'),
+      variant: 'destructive',
+    }))
+  ) {
+    return
+  }
+  await withBusy('disconnect', async () => {
+    try {
+      await catalog.disconnectServiceCatalog()
+      toast.add({ title: t('serviceCatalog.toast.disconnected'), color: 'success' })
+    } catch (error) {
+      present(error, 'serviceCatalog.toast.disconnectFailed')
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4" data-testid="service-catalog-connection">
+    <!-- Unwired is stated, never offered as a form that would fail with a raw 503. -->
+    <div
+      v-if="catalog.serviceCatalogAvailable === false"
+      class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-sm text-slate-400"
+    >
+      {{ t('serviceCatalog.unavailable') }}
+    </div>
+
+    <template v-else>
+      <p class="text-sm text-slate-400">{{ t('serviceCatalog.intro') }}</p>
+
+      <!-- The CONNECTED state, with what the last import concluded. `lastSyncMessage` is the
+           load-bearing line: it is what says a catalog is a PREFIX of the portal's estate. -->
+      <div
+        v-if="connection"
+        class="flex flex-col gap-2 rounded-md border border-slate-800 bg-slate-900/40 p-3"
+        data-testid="service-catalog-connected"
+      >
+        <div class="flex flex-wrap items-center gap-2">
+          <UBadge :color="syncStatusColor" variant="subtle">{{ statusLabel }}</UBadge>
+          <span class="font-mono text-xs text-slate-300">{{ connection.baseUrl }}</span>
+          <span class="text-xs text-slate-500">{{ authModeLabel(connection.authMode) }}</span>
+          <span v-if="connection.lastSyncedAt" class="text-xs text-slate-500">
+            {{ d(new Date(connection.lastSyncedAt), 'short') }}
+          </span>
+        </div>
+        <p class="text-xs text-slate-400">
+          {{
+            t('serviceCatalog.summary', {
+              filter: connection.entityFilter.join(', '),
+              max: connection.maxServices,
+            })
+          }}
+        </p>
+        <p v-if="connection.lastSyncMessage" class="text-xs text-amber-400">
+          {{ connection.lastSyncMessage }}
+        </p>
+        <div class="flex gap-2">
+          <UButton size="xs" :loading="busy === 'import'" :disabled="!!busy" @click="importNow">
+            {{ t('serviceCatalog.action.import') }}
+          </UButton>
+          <UButton
+            size="xs"
+            color="error"
+            variant="soft"
+            :loading="busy === 'disconnect'"
+            :disabled="!!busy"
+            @click="disconnect"
+          >
+            {{ t('serviceCatalog.action.disconnect') }}
+          </UButton>
+        </div>
+      </div>
+
+      <!-- The connect / re-connect form. Shown alongside a live connection too, because rotating
+           a token is the routine reason to come here. -->
+      <div class="flex flex-col gap-3 rounded-md border border-slate-800 p-3">
+        <h4 class="text-sm font-medium text-slate-200">
+          {{ connection ? t('serviceCatalog.form.replace') : t('serviceCatalog.form.connect') }}
+        </h4>
+
+        <UFormField
+          :label="t('serviceCatalog.field.baseUrl')"
+          :help="t('serviceCatalog.help.baseUrl')"
+        >
+          <UInput v-model="form.baseUrl" placeholder="https://backstage.example.com" />
+        </UFormField>
+
+        <UFormField :label="t('serviceCatalog.field.authMode')">
+          <USelect v-model="authMode" :items="authModeItems" value-key="value" />
+        </UFormField>
+
+        <UFormField
+          v-if="authMode === 'static-token'"
+          :label="t('serviceCatalog.field.token')"
+          :help="t('serviceCatalog.help.token')"
+        >
+          <UInput v-model="form.token" type="password" />
+        </UFormField>
+
+        <UFormField
+          v-if="authMode === 'legacy-shared-secret'"
+          :label="t('serviceCatalog.field.sharedSecret')"
+          :help="t('serviceCatalog.help.sharedSecret')"
+        >
+          <UInput v-model="form.sharedSecret" type="password" />
+        </UFormField>
+
+        <template v-if="authMode === 'oauth2-client-credentials'">
+          <UFormField :label="t('serviceCatalog.field.tokenUrl')">
+            <UInput v-model="form.tokenUrl" placeholder="https://idp.example.com/oauth2/token" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.clientId')">
+            <UInput v-model="form.clientId" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.clientSecret')">
+            <UInput v-model="form.clientSecret" type="password" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.scope')">
+            <UInput v-model="form.scope" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.audience')">
+            <UInput v-model="form.audience" />
+          </UFormField>
+        </template>
+
+        <template v-if="authMode === 'basic'">
+          <UFormField :label="t('serviceCatalog.field.username')">
+            <UInput v-model="form.username" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.password')">
+            <UInput v-model="form.password" type="password" />
+          </UFormField>
+        </template>
+
+        <template v-if="authMode === 'headers'">
+          <UFormField
+            :label="t('serviceCatalog.field.headerName')"
+            :help="t('serviceCatalog.help.headers')"
+          >
+            <UInput v-model="form.headerName" placeholder="CF-Access-Client-Id" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.headerValue')">
+            <UInput v-model="form.headerValue" type="password" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.secondHeaderName')">
+            <UInput v-model="form.secondHeaderName" placeholder="CF-Access-Client-Secret" />
+          </UFormField>
+          <UFormField :label="t('serviceCatalog.field.secondHeaderValue')">
+            <UInput v-model="form.secondHeaderValue" type="password" />
+          </UFormField>
+        </template>
+
+        <UFormField
+          :label="t('serviceCatalog.field.entityFilter')"
+          :help="t('serviceCatalog.help.entityFilter')"
+        >
+          <UTextarea v-model="form.entityFilter" :rows="2" placeholder="kind=component" />
+        </UFormField>
+
+        <UFormField
+          :label="t('serviceCatalog.field.maxServices')"
+          :help="t('serviceCatalog.help.maxServices')"
+        >
+          <UInput v-model.number="form.maxServices" type="number" :min="1" :max="1000" />
+        </UFormField>
+
+        <UCheckbox v-model="form.includeApis" :label="t('serviceCatalog.field.includeApis')" />
+
+        <div class="flex gap-2">
+          <UButton
+            size="xs"
+            :loading="busy === 'connect'"
+            :disabled="!!busy || !form.baseUrl.trim()"
+            @click="connect"
+          >
+            {{
+              connection ? t('serviceCatalog.action.replace') : t('serviceCatalog.action.connect')
+            }}
+          </UButton>
+          <UButton
+            size="xs"
+            variant="soft"
+            :loading="busy === 'probe'"
+            :disabled="!!busy || !form.baseUrl.trim()"
+            @click="probe"
+          >
+            {{ t('serviceCatalog.action.probe') }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/app/components/outcome/OutcomeSummaryWindow.logic.spec.ts

@@ -20,6 +20,7 @@ const env = (overrides: Partial<OutcomeEnvironment> = {}): OutcomeEnvironment =>
   frameId: 'frm_own',
   environmentId: 'env_1',
   detail: null,
+  detailKind: null,
   ...overrides,
 })
 

package/app/components/outcome/OutcomeSummaryWindow.vue

@@ -803,12 +803,21 @@ function openTestReport() {
                   : t('outcome.environments.expires', { date: d(new Date(row.expiresAt), 'long') })
               }}
             </p>
+            <!-- One slot, two kinds of claim. A provider's note about a spin-up in progress is
+                 labelled as one; a recorded fault is the row's own prose. Unlabelled they read
+                 identically, and "the deploy job is queued behind 3 others" in the slot that
+                 otherwise holds "quota exceeded" reports a fault the environment does not have. -->
             <p
               v-if="row.detail"
               class="mt-1 break-words text-[12px] leading-relaxed text-slate-500"
               data-testid="outcome-environment-detail"
+              :data-detail-kind="row.detailKind"
             >
-              {{ row.detail }}
+              {{
+                row.detailKind === 'note'
+                  ? t('environments.statusNote', { note: row.detail })
+                  : row.detail
+              }}
             </p>
           </div>
         </template>