@cat-factory/app 0.288.2 → 0.289.0

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

@@ -848,6 +848,13 @@ function exportJson() {
                       :title="c.model"
                     >
                       {{ c.provider }}:{{ c.model }}
+                      <!-- Which upstream a GATEWAY routed to. Without it every `openrouter` row
+                           reads alike, and an upstream having a bad day cannot be told from the
+                           gateway having one. Absent for a direct vendor, where `provider`
+                           already names who served the call. -->
+                      <span v-if="c.upstreamProvider" class="text-slate-600">
+                        {{ t('observability.call.viaUpstream', { upstream: c.upstreamProvider }) }}
+                      </span>
                     </span>
                     <div
                       class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
@@ -927,6 +934,18 @@ function exportJson() {
                       <span>{{
                         t('observability.call.total', { duration: formatMs(c.totalMs) })
                       }}</span>
+                      <!-- The one MEASURED cost on the row: what the gateway's own ledger says,
+                           in USD, against the derived estimate every other figure on this panel
+                           is. `!= null` and not truthiness: a reported 0 is a free route saying
+                           so, which is a different fact from a producer that reports nothing and
+                           must not be hidden as if it were. -->
+                      <span v-if="c.reportedCostUsd != null" class="text-slate-400">
+                        {{
+                          t('observability.call.reportedCost', {
+                            cost: formatCost(c.reportedCostUsd, 'USD'),
+                          })
+                        }}
+                      </span>
                     </div>
                     <div>
                       <div

package/app/components/providers/ApiKeysSection.vue

@@ -16,6 +16,7 @@
 //  - With `accountId`: manage ACCOUNT-wide keys (shared by every workspace in the
 //    account); admin-only, enforced server-side. Surfaced from account/team settings.
 import { computed, ref, watch } from 'vue'
+import { providerCachesPrompts } from '@cat-factory/contracts'
 import type { ApiKey, ApiKeyProvider } from '~/types/domain'
 import SecretInput from '~/components/common/SecretInput.vue'
 
@@ -48,18 +49,29 @@ interface ProviderMeta {
   label: string
   url: string
   steps: string[]
-  /**
-   * Whether this provider caches the re-sent prompt prefix. Connecting a key here
-   * upgrades its models to the caching `direct` flavour, so a long agentic run stops
-   * re-billing its whole growing prompt every turn. Mirrors the backend
-   * `providerCachePolicy`; the gateways are pass-through (no caching we rely on yet).
-   */
-  caches?: boolean
+}
+
+/**
+ * Whether connecting a key here upgrades its models to the caching flavour, so a long agentic
+ * run stops re-billing its whole growing prompt every turn.
+ *
+ * READ from the shared rule rather than kept as a flag beside each entry. A hand-kept copy was
+ * already stale: the backend answers per (provider, MODEL) for a gateway, so it now reports
+ * caching for several OpenRouter routes while a boolean here still said the gateways cache
+ * nothing. A per-provider question is the one this page can ask, and asking the same function
+ * the picker and the call paths ask is what keeps the three answers from diverging again.
+ *
+ * A GATEWAY therefore answers false here, honestly: whether an OpenRouter key caches depends on
+ * which model the run picks, which is a per-model badge in the picker rather than a promise this
+ * page can make about a key.
+ */
+function cachesPrompts(provider: ApiKeyProvider): boolean {
+  return providerCachesPrompts(provider)
 }
 
 // Provider metadata. Labels + step instructions resolve through i18n (reactive to the
 // locale), so each `t(...)` uses a literal key (kept tier-1 typed-key checkable); only the
-// `value`/`url`/`caches` differentiators stay inline.
+// `value`/`url` differentiators stay inline.
 /** Direct vendors: the key reaches that one vendor's own endpoint. */
 const DIRECT_PROVIDERS = computed<ProviderMeta[]>(() => [
   {
@@ -70,7 +82,6 @@ const DIRECT_PROVIDERS = computed<ProviderMeta[]>(() => [
       t('providers.apiKeys.providers.openai.step1'),
       t('providers.apiKeys.providers.openai.step2'),
     ],
-    caches: true,
   },
   {
     value: 'anthropic',
@@ -80,7 +91,6 @@ const DIRECT_PROVIDERS = computed<ProviderMeta[]>(() => [
       t('providers.apiKeys.providers.anthropic.step1'),
       t('providers.apiKeys.providers.anthropic.step2'),
     ],
-    caches: true,
   },
   {
     value: 'qwen',
@@ -90,7 +100,6 @@ const DIRECT_PROVIDERS = computed<ProviderMeta[]>(() => [
       t('providers.apiKeys.providers.qwen.step1'),
       t('providers.apiKeys.providers.qwen.step2'),
     ],
-    caches: true,
   },
   {
     value: 'deepseek',
@@ -100,7 +109,6 @@ const DIRECT_PROVIDERS = computed<ProviderMeta[]>(() => [
       t('providers.apiKeys.providers.deepseek.step1'),
       t('providers.apiKeys.providers.deepseek.step2'),
     ],
-    caches: true,
   },
   {
     value: 'moonshot',
@@ -116,7 +124,6 @@ const DIRECT_PROVIDERS = computed<ProviderMeta[]>(() => [
     label: t('providers.apiKeys.providers.xai.label'),
     url: 'https://console.x.ai/',
     steps: [t('providers.apiKeys.providers.xai.step1'), t('providers.apiKeys.providers.xai.step2')],
-    caches: true,
   },
 ])
 
@@ -334,7 +341,10 @@ async function remove(k: ApiKey) {
 
     <!-- caching capability: connecting a direct key that caches upgrades its models to
          the caching flavour, so long agentic runs stop re-billing the whole prompt. -->
-    <p v-if="selected.caches" class="flex items-center gap-1.5 text-[12px] text-emerald-400/90">
+    <p
+      v-if="cachesPrompts(selected.value)"
+      class="flex items-center gap-1.5 text-[12px] text-emerald-400/90"
+    >
       <UIcon name="i-lucide-zap" class="h-3.5 w-3.5 shrink-0" />
       {{ t('providers.apiKeys.cachingNote', { provider: selected.label }) }}
     </p>

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -351,6 +351,14 @@ function manageKeys() {
               <span class="min-w-0 flex-1">
                 <span class="block truncate text-slate-200">{{ m.name }}</span>
                 <span class="block truncate font-mono text-[11px] text-slate-500">{{ m.id }}</span>
+                <!--
+                  A withdrawal date is the one fact about a model that fails SILENTLY: past it the
+                  route simply stops answering and the run falls through to whatever the picker
+                  offers next, so the moment to see it is while choosing.
+                -->
+                <span v-if="m.expirationDate" class="block truncate text-[11px] text-amber-400">{{
+                  t('settings.openRouterCatalog.retiresOn', { date: m.expirationDate })
+                }}</span>
               </span>
               <span class="shrink-0 text-end text-[11px] text-slate-500">
                 <span v-if="m.contextLength" class="block">{{

package/app/composables/api/foundationalServices.ts

@@ -1,6 +1,11 @@
 import {
+  connectServiceCatalogContract,
   createFoundationalServiceContract,
   deleteFoundationalServiceContract,
+  disconnectServiceCatalogContract,
+  getServiceCatalogContract,
+  probeServiceCatalogContract,
+  syncServiceCatalogContract,
   foundationalServiceSourceStatusContract,
   getFoundationalServiceContractsContract,
   linkFoundationalServiceSourceContract,
@@ -15,6 +20,7 @@ import {
   updateFoundationalServiceContract,
 } from '@cat-factory/contracts'
 import type {
+  ConnectServiceCatalogInput,
   CreateFoundationalServiceInput,
   FoundationalServiceOwnerKind,
   LinkFoundationalServiceSourceInput,
@@ -136,5 +142,23 @@ export function foundationalServicesApi({ send, ws, scope }: ApiContext) {
         pathPrefix: scope(kind, id),
         pathParams: { id: sourceId },
       }),
+
+    // ---- the SERVICE CATALOG connection (a developer portal) --------------
+    // Workspace-only, and not by omission: the portal credential rides the workspace-keyed secret
+    // delegation, so there is no account-scoped shape of this connection to serve.
+    getServiceCatalog: (workspaceId: string) =>
+      send(getServiceCatalogContract, { pathPrefix: ws(workspaceId) }),
+
+    connectServiceCatalog: (workspaceId: string, body: ConnectServiceCatalogInput) =>
+      send(connectServiceCatalogContract, { pathPrefix: ws(workspaceId), body }),
+
+    disconnectServiceCatalog: (workspaceId: string) =>
+      send(disconnectServiceCatalogContract, { pathPrefix: ws(workspaceId) }),
+
+    probeServiceCatalog: (workspaceId: string, body: ConnectServiceCatalogInput) =>
+      send(probeServiceCatalogContract, { pathPrefix: ws(workspaceId), body }),
+
+    syncServiceCatalog: (workspaceId: string) =>
+      send(syncServiceCatalogContract, { pathPrefix: ws(workspaceId) }),
   }
 }

package/app/composables/usePipelineErrorToast.ts

@@ -358,6 +358,11 @@ const UNAVAILABLE_DESCRIPTION_KEYS: Record<UnavailableReason, string> = {
   connection_credentials_unreadable:
     'errors.unavailable.description.connection_credentials_unreadable',
   vcs_capability_unsupported: 'errors.unavailable.description.vcs_capability_unsupported',
+  service_catalog_unreachable: 'errors.unavailable.description.service_catalog_unreachable',
+  service_catalog_unauthorized: 'errors.unavailable.description.service_catalog_unauthorized',
+  service_catalog_filter_missing: 'errors.unavailable.description.service_catalog_filter_missing',
+  service_catalog_response_too_large:
+    'errors.unavailable.description.service_catalog_response_too_large',
 }
 
 /**