@cat-factory/app 0.176.0 → 0.178.0

package/README.md

@@ -86,7 +86,7 @@ hoc where it can be avoided:
   it**, and marking an item does one of two distinguishable things:
   - **Reached another way** — a shortcut whose surface a basic destination also opens, so
     nothing is lost (the Merge / Service-best-practices palette entries into Workspace
-    settings, the local-models knob the Integrations hub already offers).
+    settings, the local-models knob the Model providers hub already offers).
   - **Out of the tier** — the sole route, hidden on purpose, so the capability is _absent_
     from basic mode and the tier switch is the way to it (Sandbox, Kaizen, repo bootstrap,
     and the deployment-wide operator + reports rollups).
@@ -153,9 +153,36 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
   by every VCS provider), `vcs` (the GitLab personal-access-token connect),
   `bootstrap`, `documents`, `tasks`, `requirements` (review), `scenarios`
   (acceptance), and `fragments` (the prompt-fragment library).
+- **Model providers** — `ModelProvidersHub.vue`, the sibling hub for the ENGINES
+  (OpenRouter, vendor keys, personal subscriptions, own-machine runners). Kept out
+  of the Integrations hub on purpose: an integration is optional context in or
+  output out, while a provider is what executes the work, so a deployment with none
+  connected runs nothing at all. **A new provider-shaped connection belongs here,
+  never in `IntegrationsHub.vue`.** Both hubs, plus the user-scoped `PersonalSetupModal`,
+  share the `IntegrationBackTitle` Back control, which returns to whichever hub set
+  its came-from marker (`ui.cameFrom{Integrations,ModelProviders,Personal}`) — a panel
+  reachable from more than one hub must not hard-code its return.
 - **Auth** (`components/auth`) — `AuthGate` / `LoginScreen` / `UserMenu`; the app
   is gated when the backend requires sign-in.
 
+## Where a surface lives
+
+Two placements are load-bearing enough to state, because putting a new one in the
+wrong place is invisible until a user cannot find it:
+
+- **The sidebar section is a claim about what the destination IS.** `models` is the
+  engines, `integrations` the optional systems, `infrastructure` where agent
+  containers and test environments run, `configuration` workspace/account settings.
+  `nav-contributions.spec.ts` pins the section order and each section's membership.
+- **A flow that edits ONE entity's config is a section of the window that owns that
+  config, not a sibling nav entry.** The guided Docker Compose environment setup
+  (`ComposeEnvironmentSetupSection.vue` → `EnvironmentSetupWizard.vue`) lives inside
+  Infrastructure → Test environments for exactly this reason: it writes a service's
+  Compose recipe plus the workspace's Compose handler, both configured in that tab.
+  It also carries a full "how it works / when you need this / when you can skip it"
+  explanation there rather than a one-line hint, since the decision to run it has to
+  be made before opening a five-minute wizard.
+
 ## Develop & test
 
 ```bash

package/app/components/environments/steps/EnvPickStep.vue

@@ -18,6 +18,9 @@ const { t } = useI18n()
 <template>
   <section class="space-y-3" data-testid="env-setup-step-pick">
     <p class="text-sm text-slate-400">{{ t('environmentWizard.pick.intro') }}</p>
+    <!-- The one-service scope caveat, stated on the step that asks for the service: nothing
+         here changes any other service, and running it twice just re-edits this one's recipe. -->
+    <p class="text-xs leading-relaxed text-slate-500">{{ t('environmentWizard.pick.scope') }}</p>
     <p v-if="!store.serviceFrames.length" class="text-sm text-slate-500">
       {{ t('environmentWizard.pick.empty') }}
     </p>

package/app/components/layout/IntegrationBackTitle.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
 // Title content for an integration sub-panel's modal header. Renders the panel
 // title with a leading "back" control that returns to the hub the panel was reached
-// from — the workspace Integrations hub (`ui.cameFromIntegrations`) or the user-scoped
-// "My setup" hub (`ui.cameFromPersonal`) — shown only when there is one. Panels opened
-// from the command bar, sidebar, a banner or an inspector link don't grow a dead Back.
+// from — the workspace Integrations hub (`ui.cameFromIntegrations`), the Model providers
+// hub (`ui.cameFromModelProviders`) or the user-scoped "My setup" hub
+// (`ui.cameFromPersonal`) — shown only when there is one. Panels opened from the command
+// bar, sidebar, a banner or an inspector link don't grow a dead Back.
 // Dropped into a UModal's #title slot, so it inherits the modal's title styling; it
 // emits `back` and the host panel closes itself + reopens the right hub.
 defineProps<{ title?: string }>()
 const emit = defineEmits<{ back: [] }>()
 const { t } = useI18n()
 const ui = useUiStore()
-const cameFromHub = computed(() => ui.cameFromIntegrations || ui.cameFromPersonal)
-const backLabel = computed(() =>
-  ui.cameFromPersonal
-    ? t('layout.integrationBack.backToMySetup')
-    : t('layout.integrationBack.backToIntegrations'),
+const cameFromHub = computed(
+  () => ui.cameFromIntegrations || ui.cameFromModelProviders || ui.cameFromPersonal,
 )
+const backLabel = computed(() => {
+  if (ui.cameFromPersonal) return t('layout.integrationBack.backToMySetup')
+  if (ui.cameFromModelProviders) return t('layout.integrationBack.backToModelProviders')
+  return t('layout.integrationBack.backToIntegrations')
+})
 </script>
 
 <template>

package/app/components/layout/IntegrationsHub.vue

@@ -1,18 +1,26 @@
 <script setup lang="ts">
 import { showOverrideField } from '~/utils/uiMode'
 
-// The Integrations hub: a single modal that lists every external system the WORKSPACE can
-// enable or link in. Each row reuses the existing per-integration panel handlers on the `ui`
-// store (so the integrations themselves are unchanged); opening one closes the hub and
-// reveals that integration's own panel/modal.
+// The Integrations hub: a single modal that lists the OPTIONAL external systems the WORKSPACE
+// can enable or link in — the ones that feed a run its context (source control, documents,
+// trackers) or receive its output (chat, observability). Each row reuses the existing
+// per-integration panel handlers on the `ui` store (so the integrations themselves are
+// unchanged); opening one closes the hub and reveals that integration's own panel/modal.
 //
 // Sections gate on the same `available` probes the navbar used, so a system that the backend
 // has turned off simply doesn't appear here.
 //
-// Scope split: per-USER connections (a personal GitHub token, own-machine runners, personal
-// subscriptions) now live in the "My setup" hub (UserMenu → My setup), NOT here — keeping
-// this hub purely workspace-scoped. When auth is disabled there is no UserMenu to host them,
-// so a "Personal (only you)" group falls back into this hub so they stay reachable.
+// Scope split 1 — MODEL PROVIDERS are NOT integrations here. They are the engines the
+// harnesses run on (with none connected nothing runs at all), so they have their own
+// top-level hub, `ModelProvidersHub.vue`. Keeping them out is the point: an integration is
+// something a deployment can live without, and burying the one mandatory connection among a
+// dozen optional ones is what made this hub confusing.
+//
+// Scope split 2 — per-USER connections (a personal GitHub token, own-machine runners, personal
+// subscriptions) live in the "My setup" hub (UserMenu → My setup), NOT here, keeping this hub
+// workspace-scoped. When auth is disabled there is no UserMenu to host them, so a "Personal
+// (only you)" group falls back into this hub so the workspace-adjacent ones stay reachable
+// (the model-shaped ones fall back into the Model providers hub instead).
 const { t } = useI18n()
 const ui = useUiStore()
 const auth = useAuthStore()
@@ -25,8 +33,6 @@ const releaseHealth = useReleaseHealthStore()
 const packageRegistries = usePackageRegistriesStore()
 const publicApiKeys = usePublicApiKeysStore()
 const userSecrets = useUserSecretsStore()
-const apiKeys = useApiKeysStore()
-const workspace = useWorkspaceStore()
 const uiMode = useUiModeStore()
 
 // True when the per-user "My setup" hub is reachable (UserMenu renders only when signed in).
@@ -57,8 +63,6 @@ watch(
       void packageRegistries.ensureLoaded().catch(() => {})
       void publicApiKeys.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
-      // Drives the OpenRouter row's "Key connected" badge.
-      if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
     }
   },
   // Lazy v-if mount: the hub mounts with `integrationsOpen` already true → load immediately.
@@ -114,42 +118,9 @@ function go(fn: () => void) {
 const groups = computed<IntegrationGroup[]>(() => {
   const out: IntegrationGroup[] = []
 
-  // --- Models & providers ----------------------------------------------------
-  // Top of the hub: an OpenRouter key is the fastest path to 300+ models, so it leads.
-  const openRouterKeyConnected = apiKeys.configuredProviders.has('openrouter')
-  out.push({
-    title: t('layout.integrationsHub.groups.models'),
-    items: [
-      {
-        key: 'openrouter',
-        icon: 'i-lucide-waypoints',
-        label: 'OpenRouter',
-        description: t('layout.integrationsHub.items.openrouter.description'),
-        status: openRouterKeyConnected
-          ? t('layout.integrationsHub.status.keyConnected')
-          : undefined,
-        connected: openRouterKeyConnected,
-        recommended: true,
-        onClick: () => go(ui.openOpenRouter),
-      },
-      {
-        key: 'vendors',
-        icon: 'i-lucide-key-round',
-        label: t('layout.integrationsHub.items.vendors.label'),
-        description: t('layout.integrationsHub.items.vendors.description'),
-        onClick: () => go(ui.openVendorCredentials),
-      },
-    ],
-    // Personal (individual-usage) subscriptions are per-USER, so they live in My setup —
-    // but this hub is where people look first when connecting "their Claude plan". A quiet
-    // pointer link keeps them findable without a workspace-scoped row competing here.
-    footerLink: {
-      key: 'personal-subs',
-      icon: 'i-lucide-user',
-      label: t('layout.integrationsHub.items.personalSubs.label'),
-      onClick: () => go(() => ui.openVendorCredentials('personal')),
-    },
-  })
+  // NOTE: model providers (OpenRouter, vendor keys, personal subscriptions, local runners)
+  // are NOT listed here — they have their own top-level hub (`ModelProvidersHub.vue`, SideBar
+  // → "Model providers"). See the scope split at the top of this file.
 
   // --- Source control --------------------------------------------------------
   const code: IntegrationItem[] = []
@@ -338,6 +309,8 @@ const groups = computed<IntegrationGroup[]>(() => {
   // --- Personal (only you) — fallback when there is no UserMenu to host "My setup" -------
   // Per-user connections normally live in the My-setup hub; with auth disabled they fold in
   // here so they stay reachable. (The badge reflects the signed-in user's stored secret.)
+  // Only the source-control one: the per-user MODEL connections are listed unconditionally
+  // in the Model providers hub, so they need no fallback.
   if (!personalHubReachable.value) {
     const pat = !!userSecrets.statusFor('github_pat')
     out.push({
@@ -352,13 +325,6 @@ const groups = computed<IntegrationGroup[]>(() => {
           connected: pat,
           onClick: () => go(ui.openUserSecrets),
         },
-        {
-          key: 'local-runners',
-          icon: 'i-lucide-server',
-          label: t('layout.integrationsHub.items.localRunners.label'),
-          description: t('layout.integrationsHub.items.localRunners.description'),
-          onClick: () => go(ui.openLocalModels),
-        },
       ],
     })
   }

package/app/components/layout/ModelProvidersHub.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+// The Model providers hub: where the ENGINES the harnesses run on are connected.
+//
+// Split out of the Integrations hub deliberately. Both are technically "external systems we
+// hold a credential for", but they answer different questions: an integration is an OPTIONAL
+// system that feeds a run context or receives its output (source control, trackers, documents,
+// chat, observability), while a model provider is what actually executes the work — with none
+// connected, nothing runs at all. Listing the providers among a dozen optional connectors
+// buried the one connection every deployment must make.
+//
+// Rows reuse the existing per-provider panel handlers on the `ui` store via
+// `ui.openFromModelProviders(...)`, so opening one closes this hub and gives that panel a
+// "Back to Model providers" control (IntegrationBackTitle). Layout mirrors the Integrations
+// hub row-for-row so the two read as siblings.
+const { t } = useI18n()
+const ui = useUiStore()
+const apiKeys = useApiKeysStore()
+const localModels = useLocalModelsStore()
+const personalSubs = usePersonalSubscriptionsStore()
+const workspace = useWorkspaceStore()
+
+const open = computed({
+  get: () => ui.modelProvidersOpen,
+  set: (v: boolean) => (v ? ui.openModelProviders() : ui.closeModelProviders()),
+})
+
+// Free-text filter over the rows (label + description), matching the Integrations hub.
+// Declared before the `immediate` watch below, which resets it on open.
+const query = ref('')
+
+// Load the cheap status reads each time the hub opens so every badge is accurate.
+watch(
+  () => ui.modelProvidersOpen,
+  (isOpen) => {
+    if (!isOpen) return
+    query.value = ''
+    if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
+    void localModels.load().catch(() => {})
+    void personalSubs.load().catch(() => {})
+  },
+  // Lazy v-if mount: the hub mounts with `modelProvidersOpen` already true → load immediately.
+  { immediate: true },
+)
+
+/** One provider row. `connected` drives the green badge; `status` is its line. */
+interface ProviderItem {
+  key: string
+  icon: string
+  label: string
+  description: string
+  status?: string
+  connected?: boolean
+  /** Tags the fastest path to a working deployment while nothing is connected yet. */
+  recommended?: boolean
+  onClick: () => void
+}
+
+interface ProviderGroup {
+  title: string
+  /** Rendered under the group's rows — the scope caveat for the personal group. */
+  note?: string
+  items: ProviderItem[]
+}
+
+function go(fn: () => void) {
+  ui.openFromModelProviders(fn)
+}
+
+const groups = computed<ProviderGroup[]>(() => {
+  const openRouterKeyConnected = apiKeys.configuredProviders.has('openrouter')
+  const runnerCount = localModels.endpoints.length
+  const subCount = personalSubs.subscriptions.length
+
+  return [
+    // --- Workspace-wide providers ------------------------------------------
+    // An OpenRouter key is the fastest path to 300+ models, so it leads.
+    {
+      title: t('layout.modelProvidersHub.groups.workspace'),
+      items: [
+        {
+          key: 'openrouter',
+          icon: 'i-lucide-waypoints',
+          label: 'OpenRouter',
+          description: t('layout.modelProvidersHub.items.openrouter.description'),
+          status: openRouterKeyConnected
+            ? t('layout.modelProvidersHub.status.keyConnected')
+            : undefined,
+          connected: openRouterKeyConnected,
+          recommended: true,
+          onClick: () => go(ui.openOpenRouter),
+        },
+        {
+          key: 'vendors',
+          icon: 'i-lucide-key-round',
+          label: t('layout.modelProvidersHub.items.vendors.label'),
+          description: t('layout.modelProvidersHub.items.vendors.description'),
+          onClick: () => go(ui.openVendorCredentials),
+        },
+      ],
+    },
+    // --- Personal (per-user) providers -------------------------------------
+    // These live on the user, not the workspace, and are also reachable from "My setup".
+    // They are listed here as full rows rather than a pointer link because this hub is
+    // scoped by TOPIC (what runs the work) rather than by ownership — "where do I put my
+    // Claude plan" is the single most common reason to open it.
+    {
+      title: t('layout.modelProvidersHub.groups.personal'),
+      note: t('layout.modelProvidersHub.groups.personalNote'),
+      items: [
+        {
+          key: 'personal-subs',
+          icon: 'i-lucide-user',
+          label: t('layout.modelProvidersHub.items.personalSubs.label'),
+          description: t('layout.modelProvidersHub.items.personalSubs.description'),
+          status: subCount
+            ? t('layout.modelProvidersHub.status.connectedCount', { count: subCount }, subCount)
+            : undefined,
+          connected: subCount > 0,
+          onClick: () => go(() => ui.openVendorCredentials('personal')),
+        },
+        {
+          key: 'local-runners',
+          icon: 'i-lucide-server',
+          label: t('layout.modelProvidersHub.items.localRunners.label'),
+          description: t('layout.modelProvidersHub.items.localRunners.description'),
+          status: runnerCount
+            ? t(
+                'layout.modelProvidersHub.status.connectedCount',
+                { count: runnerCount },
+                runnerCount,
+              )
+            : undefined,
+          connected: runnerCount > 0,
+          onClick: () => go(ui.openLocalModels),
+        },
+      ],
+    },
+  ]
+})
+
+// Connected rows first, then idle — a stable rank so each group reads "what's live" top-down.
+function stateRank(item: ProviderItem): number {
+  return item.connected ? 0 : 1
+}
+
+const allItems = computed(() => groups.value.flatMap((g) => g.items))
+const anyConnected = computed(() => allItems.value.some((i) => i.connected))
+
+function matches(text: string, q: string): boolean {
+  return text.toLowerCase().includes(q)
+}
+
+const filteredGroups = computed<ProviderGroup[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  return groups.value
+    .map((g) => ({
+      ...g,
+      items: (q ? g.items.filter((i) => matches(i.label, q) || matches(i.description, q)) : g.items)
+        .slice()
+        .sort((a, b) => stateRank(a) - stateRank(b)),
+    }))
+    .filter((g) => g.items.length)
+})
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="t('layout.modelProvidersHub.title')"
+    :ui="{ content: 'max-w-xl' }"
+  >
+    <template #body>
+      <div class="space-y-5" data-testid="model-providers-hub">
+        <p class="text-xs text-slate-400">
+          {{ t('layout.modelProvidersHub.intro') }}
+        </p>
+
+        <!-- Nothing connected at all is a hard stop, not a nudge: no provider means no agent
+             step can run. Say so plainly rather than showing an empty list of options. -->
+        <div
+          v-if="!anyConnected"
+          class="rounded-lg border border-primary-500/40 bg-primary-500/10 p-3"
+        >
+          <div class="mb-1.5 flex items-center gap-2 text-sm font-medium text-primary-200">
+            <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0" />
+            <span>{{ t('layout.modelProvidersHub.getStarted.title') }}</span>
+          </div>
+          <p class="text-xs text-slate-300">
+            {{ t('layout.modelProvidersHub.getStarted.body') }}
+          </p>
+        </div>
+
+        <UInput
+          v-model="query"
+          icon="i-lucide-search"
+          size="sm"
+          :placeholder="t('layout.modelProvidersHub.searchPlaceholder')"
+          class="w-full"
+        />
+
+        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-slate-500">
+          {{ t('layout.modelProvidersHub.noMatches', { query }) }}
+        </p>
+
+        <section v-for="group in filteredGroups" :key="group.title">
+          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ group.title }}
+          </h3>
+          <div class="space-y-1.5">
+            <button
+              v-for="item in group.items"
+              :key="item.key"
+              type="button"
+              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-start transition hover:border-slate-700 hover:bg-slate-900"
+              :data-testid="`model-provider-${item.key}`"
+              @click="item.onClick()"
+            >
+              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <span class="truncate text-sm font-medium text-slate-100">{{ item.label }}</span>
+                  <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
+                    {{ item.status || t('layout.modelProvidersHub.status.connected') }}
+                  </UBadge>
+                  <span v-else class="text-[11px] text-slate-500">{{
+                    t('layout.modelProvidersHub.status.notConnected')
+                  }}</span>
+                  <UBadge
+                    v-if="!anyConnected && item.recommended"
+                    color="primary"
+                    variant="subtle"
+                    size="sm"
+                  >
+                    {{ t('layout.modelProvidersHub.status.recommended') }}
+                  </UBadge>
+                </div>
+                <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
+              </div>
+              <UIcon
+                name="i-lucide-chevron-right"
+                class="h-4 w-4 shrink-0 text-slate-500 rtl:-scale-x-100"
+              />
+            </button>
+          </div>
+          <p v-if="group.note" class="mt-1.5 px-1 text-[11px] text-slate-500">{{ group.note }}</p>
+        </section>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -7,7 +7,9 @@ import {
   VALIDATION_MAX_ATTEMPTS_CEILING,
   VALIDATION_MAX_CHECKS,
   type ValidationCheck,
+  type ValidationEcosystem,
 } from '~/types/validationChecks'
+import { mergeDetectedChecks } from '~/utils/validationDetection'
 
 // Per-service (frame) PRE-PR VALIDATION CHECKS: the shell commands the executor-harness runs
 // against the checkout after the coder settles and BEFORE the PR opens. A failing command's
@@ -18,10 +20,11 @@ const props = defineProps<{ block: Block }>()
 
 const store = useValidationChecksStore()
 const toast = useToast()
-const { t } = useI18n()
+const { t, te } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 
 const busy = ref(false)
+const detecting = ref(false)
 const rows = ref<ValidationCheck[]>([])
 const maxAttempts = ref(VALIDATION_DEFAULT_MAX_ATTEMPTS)
 
@@ -64,6 +67,88 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
+// Ecosystem label KEYS, exhaustive over the contracts `ValidationEcosystem` union: a new
+// backend detector fails THIS typecheck until it is mapped (the key is assembled at runtime,
+// so the typed-message-keys check cannot see the `t()` lookup — the map's exhaustiveness is
+// the drift guard, same pattern as `ENV_TEST_STAGE_KEYS`).
+const ECOSYSTEM_KEYS: Record<ValidationEcosystem, string> = {
+  node: 'inspector.validationChecks.ecosystem.node',
+  python: 'inspector.validationChecks.ecosystem.python',
+  go: 'inspector.validationChecks.ecosystem.go',
+  rust: 'inspector.validationChecks.ecosystem.rust',
+  maven: 'inspector.validationChecks.ecosystem.maven',
+  gradle: 'inspector.validationChecks.ecosystem.gradle',
+  dotnet: 'inspector.validationChecks.ecosystem.dotnet',
+  ruby: 'inspector.validationChecks.ecosystem.ruby',
+  php: 'inspector.validationChecks.ecosystem.php',
+  elixir: 'inspector.validationChecks.ecosystem.elixir',
+  make: 'inspector.validationChecks.ecosystem.make',
+  just: 'inspector.validationChecks.ecosystem.just',
+  task: 'inspector.validationChecks.ecosystem.task',
+}
+
+function ecosystemLabel(id: ValidationEcosystem): string {
+  const key = ECOSYSTEM_KEYS[id]
+  // `te`-guarded so a locale missing the key shows the raw id, never a raw message key.
+  return te(key) ? t(key) : id
+}
+
+/**
+ * Fill the rows from what the service's repo declares. The suggestion is NOT saved — it
+ * lands in the same unsaved rows the operator edits by hand, so Detect is always reversible
+ * by walking away from the panel.
+ */
+async function detect() {
+  detecting.value = true
+  try {
+    const result = await store.detect(props.block.id)
+    if (result.status !== 'ok') {
+      // The backend distinguishes "no repo linked" from "the repo could not be read"; say
+      // which, because they send the operator to different places.
+      toast.add({
+        title: t(`inspector.validationChecks.detect.${result.status}`),
+        icon: 'i-lucide-triangle-alert',
+        color: 'warning',
+      })
+      return
+    }
+    const merged = mergeDetectedChecks(rows.value, result.checks, VALIDATION_MAX_CHECKS)
+    rows.value = merged.rows
+    if (merged.added === 0) {
+      toast.add({
+        title: t('inspector.validationChecks.detect.nothingNew'),
+        description:
+          result.checks.length > 0
+            ? t('inspector.validationChecks.detect.alreadyPresent')
+            : t('inspector.validationChecks.detect.unrecognised'),
+        icon: 'i-lucide-info',
+        color: 'neutral',
+      })
+      return
+    }
+    const names = result.ecosystems.map(ecosystemLabel).join(', ')
+    toast.add({
+      title: t('inspector.validationChecks.detect.added', { count: merged.added }, merged.added),
+      // Name what was recognised AND what was left out: a cap that silently swallowed a
+      // suggestion reads as "that is everything your repo has".
+      description: [
+        names ? t('inspector.validationChecks.detect.found', { ecosystems: names }) : '',
+        merged.dropped > 0 || result.truncated
+          ? t('inspector.validationChecks.detect.capped', { max: VALIDATION_MAX_CHECKS })
+          : '',
+      ]
+        .filter(Boolean)
+        .join(' '),
+      icon: 'i-lucide-wand-sparkles',
+      color: 'success',
+    })
+  } catch (e) {
+    notifyError(t('inspector.validationChecks.detect.failed'), e)
+  } finally {
+    detecting.value = false
+  }
+}
+
 async function save() {
   busy.value = true
   try {
@@ -179,6 +264,19 @@ async function clear() {
           />
         </UFormField>
         <div class="flex gap-2">
+          <UButton
+            color="neutral"
+            variant="soft"
+            size="xs"
+            icon="i-lucide-wand-sparkles"
+            :loading="detecting"
+            :disabled="!canAdd"
+            :title="t('inspector.validationChecks.detect.hint')"
+            data-testid="validation-detect"
+            @click="detect"
+          >
+            {{ t('inspector.validationChecks.detect.action') }}
+          </UButton>
           <UButton
             color="neutral"
             variant="soft"