@cat-factory/app 0.176.0 → 0.178.1

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"

package/app/components/settings/ComposeEnvironmentSetupSection.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+// The guided per-service Docker Compose environment setup, as a section of the Infrastructure
+// window's "Test environments" tab.
+//
+// It used to be its own top-level sidebar destination called "Environment setup", which was
+// wrong twice over: the name said nothing about WHAT it sets up (people read it as the place
+// to configure environments in general, which is the rest of this tab), and a wizard that
+// fills in one field of one service's config sat at the same level as the workspace-wide
+// infrastructure it depends on. It lives here now, next to the two settings it writes: the
+// service's provision type and the workspace's Docker Compose handler.
+//
+// The section deliberately carries a full explanation rather than a one-line hint. The wizard
+// is a five-minute flow that touches a repo and can trial-provision a stack, so "when you need
+// this / when you don't" has to be answerable BEFORE opening it — most services on most boards
+// never need it at all.
+const { t } = useI18n()
+const ui = useUiStore()
+
+/** Bullet lists rendered below; static literal keys so the typed-key check sees them. */
+const steps = computed(() => [
+  t('settings.composeEnvSetup.how.scan'),
+  t('settings.composeEnvSetup.how.analyse'),
+  t('settings.composeEnvSetup.how.preflight'),
+  t('settings.composeEnvSetup.how.save'),
+])
+const needed = computed(() => [
+  t('settings.composeEnvSetup.needed.running'),
+  t('settings.composeEnvSetup.needed.compose'),
+  t('settings.composeEnvSetup.needed.setup'),
+])
+const notNeeded = computed(() => [
+  t('settings.composeEnvSetup.notNeeded.inContainer'),
+  t('settings.composeEnvSetup.notNeeded.otherBackend'),
+  t('settings.composeEnvSetup.notNeeded.noRepo'),
+])
+
+// The wizard is its own modal, so hand over rather than stacking: close this window first.
+function start() {
+  ui.closeProviderConnection()
+  ui.openEnvironmentSetup()
+}
+</script>
+
+<template>
+  <section class="space-y-3" data-testid="compose-env-setup-section">
+    <div>
+      <h3 class="text-sm font-semibold text-slate-200">
+        {{ t('settings.composeEnvSetup.title') }}
+      </h3>
+      <p class="mt-1 text-xs leading-relaxed text-slate-400">
+        {{ t('settings.composeEnvSetup.lead') }}
+      </p>
+    </div>
+
+    <div class="rounded border border-slate-800 bg-slate-900/40 p-3">
+      <p class="text-[11px] font-medium uppercase tracking-wide text-slate-400">
+        {{ t('settings.composeEnvSetup.how.title') }}
+      </p>
+      <ol class="mt-2 list-decimal space-y-1 ps-4 text-[11px] leading-relaxed text-slate-400">
+        <li v-for="(step, i) in steps" :key="`how-${i}`">{{ step }}</li>
+      </ol>
+      <p class="mt-2 text-[11px] leading-relaxed text-slate-500">
+        {{ t('settings.composeEnvSetup.how.outcome') }}
+      </p>
+    </div>
+
+    <div class="grid gap-2 sm:grid-cols-2">
+      <div class="rounded border border-emerald-900/50 bg-emerald-950/20 p-3">
+        <p class="flex items-center gap-1.5 text-[11px] font-medium text-emerald-200/90">
+          <UIcon name="i-lucide-check" class="h-3.5 w-3.5 shrink-0" />
+          {{ t('settings.composeEnvSetup.needed.title') }}
+        </p>
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-slate-400">
+          <li v-for="(item, i) in needed" :key="`need-${i}`">{{ item }}</li>
+        </ul>
+      </div>
+      <div class="rounded border border-slate-800 bg-slate-900/40 p-3">
+        <p class="flex items-center gap-1.5 text-[11px] font-medium text-slate-300">
+          <UIcon name="i-lucide-minus" class="h-3.5 w-3.5 shrink-0" />
+          {{ t('settings.composeEnvSetup.notNeeded.title') }}
+        </p>
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-slate-400">
+          <li v-for="(item, i) in notNeeded" :key="`skip-${i}`">{{ item }}</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <UButton
+        size="xs"
+        color="primary"
+        variant="soft"
+        icon="i-lucide-wand-sparkles"
+        data-testid="compose-env-setup-start"
+        @click="start()"
+      >
+        {{ t('settings.composeEnvSetup.start') }}
+      </UButton>
+      <span class="text-[11px] text-slate-500">{{ t('settings.composeEnvSetup.rerunHint') }}</span>
+    </div>
+  </section>
+</template>

package/app/components/settings/InfrastructureWindow.vue

@@ -6,7 +6,10 @@
 //     mode — the warm-container-pool + checkout-reuse settings (the local agent-container
 //     runtime, folded in from the former LocalModeSettingsPanel).
 //   - "Test environments" — where the Tester's ephemeral environments run. Shows the test-env
-//     backend selector and the environment-provider connection.
+//     backend selector, the environment-provider connection, and the guided per-service Docker
+//     Compose setup (formerly a standalone "Environment setup" sidebar entry — it writes a
+//     service's Compose recipe plus the workspace's Compose handler, so it belongs beside the
+//     settings it edits rather than at the same level as them).
 // Local-specific affordances render inline, gated on `auth.localMode?.enabled`. A tab whose
 // backend integration is disabled (503) simply doesn't render.
 import { computed, ref, watch } from 'vue'
@@ -16,6 +19,7 @@ import InfraHandlersConfigurator from '~/components/settings/InfraHandlersConfig
 import DefaultProvisionTypeSection from '~/components/settings/DefaultProvisionTypeSection.vue'
 import LocalContainerPoolSettings from '~/components/settings/LocalContainerPoolSettings.vue'
 import SharedStacksPanel from '~/components/settings/SharedStacksPanel.vue'
+import ComposeEnvironmentSetupSection from '~/components/settings/ComposeEnvironmentSetupSection.vue'
 
 // The shared-stacks tab uses its own slot key beyond the provider-connection kinds.
 type InfraTabValue = ProviderConnectionKind | 'shared-stacks'
@@ -142,6 +146,12 @@ watch([tabs, () => store.loaded], () => {
               <div class="border-t border-slate-800 pt-4">
                 <InfraHandlersConfigurator />
               </div>
+              <!-- The guided per-SERVICE Compose flow (formerly the standalone "Environment
+                   setup" sidebar entry). Last, because it fills in one service's recipe on
+                   top of the workspace-wide choices above. -->
+              <div class="border-t border-slate-800 pt-4">
+                <ComposeEnvironmentSetupSection />
+              </div>
             </div>
           </template>
           <template #shared-stacks>

package/app/composables/api/validationChecks.ts

@@ -1,5 +1,6 @@
 import {
   deleteServiceValidationConfigContract,
+  detectServiceValidationChecksContract,
   getServiceValidationConfigContract,
   listServiceValidationConfigsContract,
   setServiceValidationConfigContract,
@@ -30,6 +31,13 @@ export function validationChecksApi({ send, ws }: ApiContext) {
         body,
       }),
 
+    /** Suggest checks from the service repo's manifests — a read; the operator still saves. */
+    detectServiceValidationChecks: (workspaceId: string, blockId: string) =>
+      send(detectServiceValidationChecksContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { blockId },
+      }),
+
     deleteServiceValidationConfig: (workspaceId: string, blockId: string) =>
       send(deleteServiceValidationConfigContract, {
         pathPrefix: ws(workspaceId),

package/app/composables/useIntegrationBack.ts

@@ -10,8 +10,9 @@ import type { Ref, WritableComputedRef } from 'vue'
  * resort to an obscure comma-operator expression. A named handler reads clearly instead.
  *
  * Returns to whichever hub the panel was reached from: the user-scoped "My setup" hub when
- * `cameFromPersonal` is set, else the workspace Integrations hub. A shared panel (e.g. the
- * vendor-credentials modal, reachable from both) thus lands the user back where they were.
+ * `cameFromPersonal` is set, the Model providers hub when `cameFromModelProviders` is set,
+ * else the workspace Integrations hub. A shared panel (e.g. the vendor-credentials modal,
+ * reachable from all three) thus lands the user back where they were.
  *
  * Pass the panel's `open` model (the writable ref/computed bound to its `UModal`).
  */
@@ -19,8 +20,10 @@ export function useIntegrationBack(open: Ref<boolean> | WritableComputedRef<bool
   const ui = useUiStore()
   return () => {
     const toPersonal = ui.cameFromPersonal
+    const toModelProviders = ui.cameFromModelProviders
     open.value = false
     if (toPersonal) ui.openPersonalSetup()
+    else if (toModelProviders) ui.openModelProviders()
     else ui.openIntegrations()
   }
 }

package/app/composables/useNavContributions.ts

@@ -33,10 +33,10 @@ export function useNavContributions() {
     addFromRepo: () => ui.openAddService(),
     bootstrapRepo: () => ui.openBootstrap(),
     integrationsHub: () => ui.openIntegrations(),
+    modelProviders: () => ui.openModelProviders(),
     sandbox: () => ui.openSandbox(),
     kaizen: () => ui.openKaizen(),
     infrastructure: () => ui.openInfrastructure(),
-    environmentSetup: () => ui.openEnvironmentSetup(),
     fragmentLibrary: () => ui.openFragmentLibrary(),
     mergeThresholds: () => ui.openWorkspaceSettings('merge'),
     workspaceSettings: () => ui.openWorkspaceSettings(),

package/app/modular/nav-contributions.spec.ts

@@ -99,12 +99,15 @@ describe('navSlotFilter', () => {
     expect(kept).toContain('integrations-hub')
     expect(kept).toContain('workspace-settings')
     expect(kept).toContain('model-config')
+    // Model providers are NOT an integration: the split is what makes the engines findable.
+    expect(kept).toContain('model-providers')
     // ...and so does everything the everyday delivery loop runs on, however deep it feels:
     // authoring a flow, the standards library, and the PREnv/runner plumbing.
     expect(kept).toContain('build-pipeline')
     expect(kept).toContain('fragments')
+    // Also the only route to the guided per-service Compose environment setup, which folded
+    // into this window rather than staying a sibling nav entry.
     expect(kept).toContain('infrastructure')
-    expect(kept).toContain('environment-setup')
     // What drops is either a shortcut basic mode reaches another way, or a capability
     // deliberately kept out of the tier (experimentation, one-off repo setup, the
     // deployment-wide operator rollups).
@@ -134,7 +137,7 @@ describe('navSlotFilter', () => {
       },
       'local-models': {
         kind: 'reached-another-way',
-        why: 'integrations-hub -> Local runners',
+        why: 'model-providers -> My local runners',
       },
       sandbox: {
         kind: 'out-of-tier',
@@ -250,6 +253,7 @@ describe('NAV_CONTRIBUTIONS catalog integrity', () => {
     for (const group of [
       'create',
       'repositories',
+      'models',
       'integrations',
       'infrastructure',
       'workspaceContext',
@@ -275,15 +279,19 @@ describe('nav grouping helpers', () => {
     expect(groups.map((g) => g.group)).toEqual([
       'create',
       'repositories',
+      'models',
       'integrations',
       'infrastructure',
       'workspaceContext',
       'configuration',
     ])
+    // The engines are their own section, ahead of the optional integrations; `model-config`
+    // sits beside the providers it picks models from rather than under `configuration`.
+    const models = groups.find((g) => g.group === 'models')
+    expect(models?.items.map((i) => i.id)).toEqual(['model-providers', 'model-config'])
     const configuration = groups.find((g) => g.group === 'configuration')
     expect(configuration?.items.map((i) => i.id)).toEqual([
       'workspace-settings',
-      'model-config',
       'account-settings',
       'operator-dashboard',
       'reports',

package/app/modular/nav-contributions.ts

@@ -25,10 +25,21 @@ export type { AppSlots } from './slots'
 /** Which shell(s) render a contribution. */
 export type NavSurface = 'sidebar' | 'command' | 'toolbar'
 
-/** Sidebar section a contribution lands in (its i18n header is `nav.<group>`). */
+/**
+ * Sidebar section a contribution lands in (its i18n header is `nav.<group>`).
+ *
+ * `models` and `integrations` are deliberately SEPARATE sections even though a model
+ * provider is technically also an external system we connect to. They answer different
+ * questions: `models` is the ENGINE the harnesses run on (no provider ⇒ nothing runs at
+ * all), `integrations` is the optional systems that feed a run context or receive its
+ * output (source control, trackers, documents, chat, observability) — each of which a
+ * deployment can live without. Folding the providers in among them buried the one
+ * connection every deployment must make in a list of ones most never touch.
+ */
 export type NavSidebarGroup =
   | 'create'
   | 'repositories'
+  | 'models'
   | 'integrations'
   | 'infrastructure'
   | 'workspaceContext'
@@ -90,10 +101,10 @@ export const NAV_ACTIONS = [
   'addFromRepo',
   'bootstrapRepo',
   'integrationsHub',
+  'modelProviders',
   'sandbox',
   'kaizen',
   'infrastructure',
-  'environmentSetup',
   'fragmentLibrary',
   'mergeThresholds',
   'workspaceSettings',
@@ -164,7 +175,7 @@ const S = (...s: NavSurface[]) => s as readonly NavSurface[]
  *  - `merge-thresholds` / `service-fragment-defaults` — palette shortcuts into Workspace
  *    settings tabs (Merge, Service best practices), which basic mode reaches via
  *    `workspace-settings`.
- *  - `local-models` — a per-user endpoint knob the Integrations hub already offers.
+ *  - `local-models` — a per-user endpoint knob the Model providers hub already offers.
  *
  * OUT OF THE TIER — the sole route, hidden deliberately, so the capability itself is absent
  * from basic mode. This is a product decision, not an oversight: each of these answers a
@@ -180,8 +191,9 @@ const S = (...s: NavSurface[]) => s as readonly NavSurface[]
  *
  * Everything else stays in basic because the delivery loop needs it: authoring a flow
  * (`build-pipeline`), adding a repo (`add-from-repo`), the standards/skills library
- * (`fragments`), the PREnv + runner plumbing (`infrastructure`, `environment-setup`), and the
- * workspace/model configuration a run actually reads (`workspace-settings`, `model-config`).
+ * (`fragments`), the PREnv + runner plumbing (`infrastructure`, which is also the only route
+ * to the guided per-service Compose environment setup), and the workspace/model configuration
+ * a run actually reads (`workspace-settings`, `model-config`).
  */
 export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
   {
@@ -233,6 +245,19 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
       keywordsKey: 'layout.commandBar.keywords.bootstrapRepo',
     },
   },
+  {
+    // The engines. Kept out of `integrations-hub` on purpose (see NavSidebarGroup): a
+    // deployment with no provider connected cannot run anything, so this is the one
+    // connection that must not sit in a list of optional ones.
+    id: 'model-providers',
+    labelKey: 'nav.modelProviders',
+    icon: 'i-lucide-plug-zap',
+    surfaces: S('sidebar'),
+    gate: (g) => g.canManageIntegrations,
+    action: 'modelProviders',
+    testId: 'nav-model-providers',
+    sidebar: { group: 'models', order: 10 },
+  },
   {
     id: 'integrations-hub',
     labelKey: 'nav.integrations',
@@ -280,16 +305,6 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     testId: 'nav-infrastructure',
     sidebar: { group: 'infrastructure', order: 10 },
   },
-  {
-    id: 'environment-setup',
-    labelKey: 'nav.environmentSetup',
-    icon: 'i-lucide-flask-conical',
-    surfaces: S('sidebar'),
-    gate: (g) => g.infrastructureAvailable,
-    action: 'environmentSetup',
-    testId: 'nav-environment-setup',
-    sidebar: { group: 'infrastructure', order: 20 },
-  },
   {
     id: 'fragments',
     labelKey: 'nav.contextFragments',
@@ -344,7 +359,10 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     gate: (g) => g.canManageSettings,
     action: 'modelConfiguration',
     testId: 'nav-model-config',
-    sidebar: { group: 'configuration', order: 20 },
+    // Beside `model-providers`, not in `configuration`: "which key do we hold" and "which
+    // model does each agent kind use" are two halves of one question, and splitting them
+    // across sections is what sent people to Integrations looking for a model.
+    sidebar: { group: 'models', order: 20 },
     command: {
       group: 'workspace',
       order: 40,
@@ -491,6 +509,7 @@ export function navSlotFilter(slots: AppSlots, deps: { gates?: NavGates }): AppS
 export const SIDEBAR_GROUP_ORDER: readonly NavSidebarGroup[] = [
   'create',
   'repositories',
+  'models',
   'integrations',
   'infrastructure',
   'workspaceContext',

package/app/pages/index.vue

@@ -89,6 +89,9 @@ const ModelPresetHealthModal = defineAsyncComponent(
 const IntegrationsHub = defineAsyncComponent(
   () => import('~/components/layout/IntegrationsHub.vue'),
 )
+const ModelProvidersHub = defineAsyncComponent(
+  () => import('~/components/layout/ModelProvidersHub.vue'),
+)
 const PersonalSetupModal = defineAsyncComponent(
   () => import('~/components/layout/PersonalSetupModal.vue'),
 )
@@ -429,6 +432,7 @@ watch(
       <RiskPolicyHealthModal v-if="ui.riskPolicyHealthOpen" />
       <ModelPresetHealthModal v-if="ui.modelPresetHealthOpen" />
       <IntegrationsHub v-if="ui.integrationsOpen" />
+      <ModelProvidersHub v-if="ui.modelProvidersOpen" />
       <PersonalSetupModal v-if="ui.personalSetupOpen" />
       <WorkspaceSettingsPanel v-if="ui.workspaceSettingsOpen" />
       <AccountSettingsPanel v-if="ui.accountSettingsOpen" />

package/app/stores/documents.ts

@@ -106,12 +106,15 @@ export const useDocumentsStore = defineStore('documents', () => {
     return api.planDocument(workspace.requireId(), source, externalId)
   }
 
-  /** Apply a page's structure to the board, then refresh the board snapshot. */
-  async function spawn(source: DocumentSourceKind, externalId: string, frameId?: string) {
-    const { result } = await api.spawnDocument(workspace.requireId(), source, {
-      externalId,
-      frameId,
-    })
+  /**
+   * Apply a page's structure to the board as new top-level frames, then refresh the
+   * board snapshot. The endpoint also accepts a `frameId` that flattens the planned
+   * frames into an existing service; the SPA deliberately never sends one, because the
+   * planner is target-blind and that path discards the frame titles/types the preview
+   * shows. Scoping a spawn to a service needs a target-aware plan first.
+   */
+  async function spawn(source: DocumentSourceKind, externalId: string) {
+    const { result } = await api.spawnDocument(workspace.requireId(), source, { externalId })
     await workspace.refresh()
     return result
   }