@cat-factory/app 0.97.0 → 0.98.0

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

@@ -12,6 +12,7 @@ import type {
 } from '~/types/domain'
 import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import { apiErrorEnvelope } from '~/composables/api/errors'
 
 // Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
 // frontend for a self-contained UI test (+ an optional browsable preview on local/node),
@@ -119,7 +120,9 @@ const showPreview = ref(false)
 // frame links to its repo the same way a service does (`github_repos.block_id`).
 const repoLink = computed(() => github.repoForBlock(props.block.id))
 const detecting = ref(false)
-const detectError = ref(false)
+// The detect failure message to show, or null when there's no error. Holds the SERVER's real
+// message (the backend raises an actionable one for an unreadable repo) instead of a fixed line.
+const detectError = ref<string | null>(null)
 const detectResult = ref<FrontendConfigRecommendation | null>(null)
 
 // A detection result is scoped to the inspected block — clear it (and any error) when the
@@ -128,18 +131,20 @@ watch(
   () => props.block.id,
   () => {
     detectResult.value = null
-    detectError.value = false
+    detectError.value = null
   },
 )
 
 async function detectFromRepo() {
   const repo = repoLink.value
   if (!repo) {
-    detectError.value = true
+    // The frame points at a repo that isn't in the connected-repo projection, so we can't resolve
+    // its owner/name to ask the backend. A "sync/connect GitHub" problem, not a read failure.
+    detectError.value = t('inspector.detectRepoUnresolved')
     return
   }
   detecting.value = true
-  detectError.value = false
+  detectError.value = null
   detectResult.value = null
   try {
     const result = await infra.detectFrontendConfig({
@@ -151,8 +156,13 @@ async function detectFromRepo() {
     // When nothing was detected the "none" hint tells the user to set the frontend directory —
     // that field lives in the (collapsed) Build group, so open it so the advice is actionable.
     if (!result.detected) showBuild.value = true
-  } catch {
-    detectError.value = true
+  } catch (e) {
+    // Surface the server's real message (an actionable "couldn't read the repo — check App access"
+    // for a read fault), falling back to the generic line only when none is available.
+    detectError.value =
+      apiErrorEnvelope(e)?.message ??
+      (e instanceof Error ? e.message : null) ??
+      t('inspector.frontendConfig.detect.error')
   } finally {
     detecting.value = false
   }
@@ -243,7 +253,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       </p>
 
       <p v-if="detectError" class="text-[11px] text-rose-300/80">
-        {{ t('inspector.frontendConfig.detect.error') }}
+        {{ detectError }}
       </p>
 
       <template v-if="detectResult && !detecting">

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

@@ -18,6 +18,7 @@ import type {
 } from '@cat-factory/contracts'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import { apiErrorEnvelope } from '~/composables/api/errors'
 
 // Service-level (frame) configuration: the service-owned PROVISIONING — the provision
 // TYPE this service produces (`infraless` / `docker-compose` / `kubernetes` / `custom`)
@@ -42,6 +43,7 @@ const github = useGitHubStore()
 const services = useServicesStore()
 const infra = useInfraConfigStore()
 const agentRuns = useAgentRunsStore()
+const ui = useUiStore()
 const { t } = useI18n()
 
 // The custom-manifest-type catalog feeds the `custom` picker. Cheap + shared (coalesced).
@@ -284,7 +286,10 @@ function applyPicked() {
 // every field stays editable, and the engine-level URL/namespace suggestions are surfaced
 // read-only (the workspace handler owns them). Nothing is persisted server-side by detection.
 const detecting = ref(false)
-const detectError = ref(false)
+// The detect failure message to show, or null when there's no error. Holds the SERVER's real
+// message (the backend now raises an actionable one for an unreadable repo) so the user sees why
+// detection failed instead of a fixed, vague line.
+const detectError = ref<string | null>(null)
 const detectResult = ref<ProvisioningRecommendation | null>(null)
 // Advisory, LOCAL-ONLY selection: which compose `services:` key the user picked. It is NOT persisted
 // (the compose backend targets the file, not a single service), so it lives only in component state
@@ -298,7 +303,7 @@ watch(
   () => props.block.id,
   () => {
     detectResult.value = null
-    detectError.value = false
+    detectError.value = null
     pickedComposeService.value = null
   },
 )
@@ -308,11 +313,14 @@ async function detectFromRepo() {
   if (!ctx) return
   const repo = github.repoFor(ctx.githubId)
   if (!repo) {
-    detectError.value = true
+    // The frame points at a repo that isn't in the connected-repo projection, so we can't resolve
+    // its owner/name to ask the backend. That's a "sync/connect GitHub" problem, NOT "couldn't read
+    // the repo" — say so specifically.
+    detectError.value = t('inspector.detectRepoUnresolved')
     return
   }
   detecting.value = true
-  detectError.value = false
+  detectError.value = null
   try {
     const rec = await infra.detectProvisioning({
       owner: repo.owner,
@@ -342,8 +350,13 @@ async function detectFromRepo() {
       board.updateBlock(props.block.id, { provisioning: rec.provisioning })
       if (rec.provisioning.type === 'kubernetes') seedKubeSource(rec.provisioning.manifestSource)
     }
-  } catch {
-    detectError.value = true
+  } catch (e) {
+    // Surface the server's real message (an actionable "couldn't read the repo — check App access"
+    // for a read fault), falling back to the generic line only when none is available.
+    detectError.value =
+      apiErrorEnvelope(e)?.message ??
+      (e instanceof Error ? e.message : null) ??
+      t('inspector.testConfig.detect.error')
   } finally {
     detecting.value = false
   }
@@ -431,6 +444,34 @@ function setSize(value: InstanceSize) {
       </p>
     </div>
 
+    <!-- Nudge into the guided environment setup wizard for a docker-compose service: the wizard
+         drives detect → review (recipe + analyst draft) → preflight → save so the single Deployer
+         provisions the compose stack, rather than editing the raw path inline. -->
+    <div
+      v-if="provisionType === 'docker-compose'"
+      class="flex items-center justify-between gap-2 rounded border border-primary-800/40 bg-primary-950/20 p-2"
+      data-testid="env-setup-nudge"
+    >
+      <div class="min-w-0">
+        <p class="text-[11px] font-medium text-primary-200/90">
+          {{ t('inspector.testConfig.envWizard.title') }}
+        </p>
+        <p class="text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.testConfig.envWizard.hint') }}
+        </p>
+      </div>
+      <UButton
+        size="xs"
+        variant="soft"
+        color="primary"
+        icon="i-lucide-flask-conical"
+        data-testid="env-setup-nudge-open"
+        @click="ui.openEnvironmentSetup(props.block.id)"
+      >
+        {{ t('inspector.testConfig.envWizard.open') }}
+      </UButton>
+    </div>
+
     <!-- Auto-detect a recommended provisioning config from the repo (slice 11). Non-binding:
          it prefills the form below + the kube edit refs; the user confirms/edits everything. -->
     <div v-if="repoContext" class="space-y-2 rounded border border-slate-800 bg-slate-900/40 p-2">
@@ -452,7 +493,7 @@ function setSize(value: InstanceSize) {
       </p>
 
       <p v-if="detectError" class="text-[11px] text-rose-300/80">
-        {{ t('inspector.testConfig.detect.error') }}
+        {{ detectError }}
       </p>
 
       <template v-if="detectResult && !detecting">

package/app/composables/api/environments.ts

@@ -1,4 +1,5 @@
-import { listEnvironmentsContract } from '@cat-factory/contracts'
+import { listEnvironmentsContract, provisionEnvironmentContract } from '@cat-factory/contracts'
+import type { ProvisionEnvironmentInput } from '@cat-factory/contracts'
 import type { ApiContext } from './context'
 
 /** Ephemeral environments: the workspace's live env handles (used to resolve frontend bindings). */
@@ -6,5 +7,10 @@ export function environmentsApi({ send, ws }: ApiContext) {
   return {
     listEnvironments: (workspaceId: string) =>
       send(listEnvironmentsContract, { pathPrefix: ws(workspaceId) }),
+
+    // Manually provision an environment for a service frame (outside a pipeline run) — the setup
+    // wizard's "trial provision" against the just-saved config. Returns the resulting handle.
+    provisionEnvironment: (workspaceId: string, body: ProvisionEnvironmentInput) =>
+      send(provisionEnvironmentContract, { pathPrefix: ws(workspaceId), body }),
   }
 }

package/app/composables/api/preflights.ts

@@ -0,0 +1,16 @@
+import { runPreflightsContract } from '@cat-factory/contracts'
+import type { PreflightRef } from '@cat-factory/contracts'
+import type { ApiContext } from './context'
+
+/**
+ * Preflight checks (machine-prerequisite probes for a stack recipe): run a set of refs and get one
+ * verdict each (pass / fail / warn + detail + remediation). Used by the environment setup wizard's
+ * checklist + live re-check. The probes run only on the local (host) facade; the endpoint 503s
+ * elsewhere. See PreflightController in @cat-factory/server.
+ */
+export function preflightsApi({ send, ws }: ApiContext) {
+  return {
+    runPreflights: (workspaceId: string, prerequisites: PreflightRef[]) =>
+      send(runPreflightsContract, { pathPrefix: ws(workspaceId), body: { prerequisites } }),
+  }
+}

package/app/composables/useApi.ts

@@ -21,6 +21,7 @@ import { localSettingsApi } from './api/localSettings'
 import { modelsApi } from './api/models'
 import { notificationsApi } from './api/notifications'
 import { packageRegistriesApi } from './api/packageRegistries'
+import { preflightsApi } from './api/preflights'
 import { presetsApi } from './api/presets'
 import { sharedStacksApi } from './api/sharedStacks'
 import { providerConnectionsApi } from './api/providerConnections'
@@ -113,6 +114,7 @@ export function useApi() {
     ...specApi(ctx),
     ...notificationsApi(ctx),
     ...presetsApi(ctx),
+    ...preflightsApi(ctx),
     ...sharedStacksApi(ctx),
     ...providerConnectionsApi(ctx),
     ...infraHandlersApi(ctx),

package/app/pages/index.vue

@@ -95,6 +95,9 @@ const PackageRegistriesPanel = defineAsyncComponent(
 const InfrastructureWindow = defineAsyncComponent(
   () => import('~/components/settings/InfrastructureWindow.vue'),
 )
+const EnvironmentSetupWizard = defineAsyncComponent(
+  () => import('~/components/environments/EnvironmentSetupWizard.vue'),
+)
 const ModelConfigurationPanel = defineAsyncComponent(
   () => import('~/components/settings/ModelConfigurationPanel.vue'),
 )
@@ -373,6 +376,7 @@ watch(
       <ObservabilityConnectionPanel v-if="ui.observabilityConnectionOpen" />
       <PackageRegistriesPanel v-if="ui.packageRegistriesOpen" />
       <InfrastructureWindow v-if="ui.infrastructureOpen" />
+      <EnvironmentSetupWizard v-if="ui.environmentWizardOpen" />
       <ModelConfigurationPanel v-if="ui.modelConfigOpen" />
       <LocalModelEndpointsPanel v-if="ui.localModelsOpen" />
       <SandboxPanel v-if="ui.sandboxOpen" />