@cat-factory/app 0.97.1 → 0.99.0

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

@@ -43,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).
@@ -443,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">

package/app/components/settings/BudgetSettings.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+// The Budget configuration screen: the three spend-budget tiers (workspace, account,
+// user). The workspace tier is a per-workspace monthly limit + currency; the account and
+// user tiers are monthly ceilings that gate a run when EITHER is exhausted. When the
+// operator sets a hard cap env var, the account/user input cannot exceed it and the cap is
+// shown here. See docs/initiatives/tiered-budgets.md.
+import { computed, reactive, ref, watch, type Ref } from 'vue'
+
+const { t, n } = useI18n()
+const toast = useToast()
+
+const settingsStore = useWorkspaceSettingsStore()
+const userSettingsStore = useUserSettingsStore()
+const accounts = useAccountsStore()
+const workspace = useWorkspaceStore()
+
+const caps = computed(() => workspace.budgetCaps)
+const capCurrency = computed(() => caps.value?.currency ?? 'EUR')
+// Format an amount in a given currency. The account/user tiers are in the base pricing
+// currency (`capCurrency`); the workspace tier is in its OWN overridden `spend.currency`, so
+// its callers pass that in — otherwise a USD workspace on a EUR deployment renders `€` on USD.
+const money = (value: number, currency: string = capCurrency.value) =>
+  n(value, { key: 'currency', currency })
+
+// Persist one tier's budget: save, toast success, then best-effort refresh the snapshot AFTER
+// the save has succeeded. A transient snapshot-refresh failure must NOT report a persisted
+// budget as failed (the spend meter also catches up on the next pushed snapshot); a genuine
+// save rejection surfaces its message so the user sees why (e.g. the operator hard-cap reject).
+async function runSave(saving: Ref<boolean>, save: () => Promise<unknown>) {
+  saving.value = true
+  try {
+    await save()
+    toast.add({ title: t('settings.workspaceSettings.toast.budgetSaved'), color: 'success' })
+    try {
+      await useWorkspaceStore().refresh()
+    } catch {
+      // ignore — the budget is persisted; the meter will catch up on the next snapshot.
+    }
+  } catch (e) {
+    toast.add({
+      title: t('settings.workspaceSettings.toast.budgetSaveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+// ---- Workspace tier -------------------------------------------------------
+const wsDraft = reactive({ spendCurrency: '', spendMonthlyLimit: '' })
+function hydrateWorkspace() {
+  const s = settingsStore.settings
+  wsDraft.spendCurrency = s.spendCurrency ?? ''
+  wsDraft.spendMonthlyLimit = s.spendMonthlyLimit == null ? '' : String(s.spendMonthlyLimit)
+}
+watch(() => settingsStore.settings, hydrateWorkspace, { immediate: true })
+
+const savingWorkspace = ref(false)
+function saveWorkspace() {
+  const raw = String(wsDraft.spendMonthlyLimit ?? '').trim()
+  return runSave(savingWorkspace, () =>
+    settingsStore.update({
+      spendCurrency: wsDraft.spendCurrency.trim()
+        ? wsDraft.spendCurrency.trim().toUpperCase()
+        : null,
+      spendMonthlyLimit: raw === '' ? null : Number(raw),
+    }),
+  )
+}
+
+// ---- Account tier ---------------------------------------------------------
+const account = computed(() => accounts.activeAccount)
+const canEditAccount = computed(() => account.value?.roles?.includes('admin') ?? false)
+const accountCap = computed(() => caps.value?.accountMonthlyLimitMax ?? null)
+const accountDraft = ref('')
+watch(
+  account,
+  (a) => {
+    accountDraft.value = a?.spendMonthlyLimit == null ? '' : String(a.spendMonthlyLimit)
+  },
+  { immediate: true },
+)
+const accountOverCap = computed(
+  () =>
+    accountCap.value != null &&
+    accountDraft.value.trim() !== '' &&
+    Number(accountDraft.value) > accountCap.value,
+)
+const savingAccount = ref(false)
+function saveAccount() {
+  const acc = account.value
+  if (!acc || accountOverCap.value) return
+  const raw = accountDraft.value.trim()
+  return runSave(savingAccount, () =>
+    accounts.setSpendMonthlyLimit(acc.id, raw === '' ? null : Number(raw)),
+  )
+}
+
+// ---- User tier ------------------------------------------------------------
+const userCap = computed(() => caps.value?.userMonthlyLimitMax ?? null)
+const userDraft = ref('')
+watch(
+  () => userSettingsStore.settings,
+  (s) => {
+    userDraft.value = s.spendMonthlyLimit == null ? '' : String(s.spendMonthlyLimit)
+  },
+  { immediate: true },
+)
+const userOverCap = computed(
+  () =>
+    userCap.value != null &&
+    userDraft.value.trim() !== '' &&
+    Number(userDraft.value) > userCap.value,
+)
+const savingUser = ref(false)
+function saveUser() {
+  if (userOverCap.value) return
+  const raw = userDraft.value.trim()
+  return runSave(savingUser, () =>
+    userSettingsStore.update({ spendMonthlyLimit: raw === '' ? null : Number(raw) }),
+  )
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <p class="text-[11px] text-slate-400">
+      {{ t('settings.workspaceSettings.budget.body') }}
+    </p>
+
+    <!-- Workspace tier -->
+    <section class="space-y-2">
+      <h3 class="text-sm font-semibold text-slate-200">
+        {{ t('settings.workspaceSettings.budget.workspace') }}
+      </h3>
+      <div class="grid grid-cols-2 gap-3">
+        <label class="block">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+            {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
+          </span>
+          <UInput
+            v-model="wsDraft.spendMonthlyLimit"
+            type="number"
+            :min="0"
+            :placeholder="t('settings.workspaceSettings.budget.defaultPlaceholder')"
+            size="sm"
+          />
+        </label>
+        <label class="block">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+            {{ t('settings.workspaceSettings.budget.currency') }}
+          </span>
+          <UInput
+            v-model="wsDraft.spendCurrency"
+            placeholder="EUR"
+            maxlength="3"
+            size="sm"
+            class="uppercase"
+          />
+        </label>
+      </div>
+      <div v-if="workspace.spend" class="text-[11px] text-slate-400">
+        {{
+          t('settings.workspaceSettings.budget.spent', {
+            spent: money(workspace.spend.costSpent, workspace.spend.currency),
+            limit: money(workspace.spend.costLimit, workspace.spend.currency),
+          })
+        }}
+      </div>
+      <div class="flex justify-end">
+        <UButton
+          color="primary"
+          icon="i-lucide-save"
+          size="sm"
+          :loading="savingWorkspace"
+          @click="saveWorkspace"
+        >
+          {{ t('settings.workspaceSettings.budget.saveTier') }}
+        </UButton>
+      </div>
+    </section>
+
+    <!-- Account tier -->
+    <section v-if="account" class="space-y-2">
+      <h3 class="text-sm font-semibold text-slate-200">
+        {{ t('settings.workspaceSettings.budget.account') }}
+      </h3>
+      <p class="text-[11px] text-slate-400">
+        {{ t('settings.workspaceSettings.budget.accountBody') }}
+      </p>
+      <label class="block">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
+        </span>
+        <UInput
+          v-model="accountDraft"
+          type="number"
+          :min="0"
+          :max="accountCap ?? undefined"
+          :disabled="!canEditAccount"
+          :placeholder="t('settings.workspaceSettings.budget.noLimitPlaceholder')"
+          size="sm"
+        />
+      </label>
+      <p
+        v-if="accountCap != null"
+        class="text-[11px]"
+        :class="accountOverCap ? 'text-rose-400' : 'text-amber-400'"
+      >
+        {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(accountCap) }) }}
+        <span class="text-slate-500"
+          >({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span
+        >
+      </p>
+      <div v-if="workspace.accountSpend" class="text-[11px] text-slate-400">
+        {{
+          t('settings.workspaceSettings.budget.spent', {
+            spent: money(workspace.accountSpend.costSpent),
+            limit: money(workspace.accountSpend.costLimit),
+          })
+        }}
+      </div>
+      <p v-if="!canEditAccount" class="text-[11px] text-slate-500">
+        {{ t('settings.workspaceSettings.budget.adminOnly') }}
+      </p>
+      <div v-if="canEditAccount" class="flex justify-end">
+        <UButton
+          color="primary"
+          icon="i-lucide-save"
+          size="sm"
+          :loading="savingAccount"
+          :disabled="accountOverCap"
+          @click="saveAccount"
+        >
+          {{ t('settings.workspaceSettings.budget.saveTier') }}
+        </UButton>
+      </div>
+    </section>
+
+    <!-- User tier -->
+    <section class="space-y-2">
+      <h3 class="text-sm font-semibold text-slate-200">
+        {{ t('settings.workspaceSettings.budget.user') }}
+      </h3>
+      <p class="text-[11px] text-slate-400">
+        {{ t('settings.workspaceSettings.budget.userBody') }}
+      </p>
+      <label class="block">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
+        </span>
+        <UInput
+          v-model="userDraft"
+          type="number"
+          :min="0"
+          :max="userCap ?? undefined"
+          :placeholder="t('settings.workspaceSettings.budget.noLimitPlaceholder')"
+          size="sm"
+        />
+      </label>
+      <p
+        v-if="userCap != null"
+        class="text-[11px]"
+        :class="userOverCap ? 'text-rose-400' : 'text-amber-400'"
+      >
+        {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(userCap) }) }}
+        <span class="text-slate-500"
+          >({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span
+        >
+      </p>
+      <div v-if="workspace.userSpend" class="text-[11px] text-slate-400">
+        {{
+          t('settings.workspaceSettings.budget.spent', {
+            spent: money(workspace.userSpend.costSpent),
+            limit: money(workspace.userSpend.costLimit),
+          })
+        }}
+      </div>
+      <div class="flex justify-end">
+        <UButton
+          color="primary"
+          icon="i-lucide-save"
+          size="sm"
+          :loading="savingUser"
+          :disabled="userOverCap"
+          @click="saveUser"
+        >
+          {{ t('settings.workspaceSettings.budget.saveTier') }}
+        </UButton>
+      </div>
+    </section>
+  </div>
+</template>

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -12,6 +12,7 @@ import type { CreateTaskType, TaskLimitMode } from '~/types/domain'
 import MergeThresholdsPanel from '~/components/settings/MergeThresholdsPanel.vue'
 import IssueTrackerPanel from '~/components/settings/IssueTrackerPanel.vue'
 import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
+import BudgetSettings from '~/components/settings/BudgetSettings.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const { t, te } = useI18n()
@@ -114,9 +115,6 @@ const draft = reactive({
   storeAgentContext: true,
   artifactRetentionDays: 14,
   kaizenEnabled: true,
-  // Budget: empty string ⇒ "use the built-in default" (null on the wire).
-  spendCurrency: '',
-  spendMonthlyLimit: '',
 })
 
 function hydrate() {
@@ -129,8 +127,6 @@ function hydrate() {
   draft.storeAgentContext = s.storeAgentContext
   draft.artifactRetentionDays = s.artifactRetentionDays
   draft.kaizenEnabled = s.kaizenEnabled
-  draft.spendCurrency = s.spendCurrency ?? ''
-  draft.spendMonthlyLimit = s.spendMonthlyLimit == null ? '' : String(s.spendMonthlyLimit)
 }
 
 // `store.settings` is always replaced wholesale (store hydrate/update reassign the ref),
@@ -176,46 +172,6 @@ async function save() {
     saving.value = false
   }
 }
-
-const savingBudget = ref(false)
-
-async function saveBudget() {
-  savingBudget.value = true
-  // The number input emits a raw number once edited but starts as a string from hydrate, so
-  // coerce through String() before trimming. Blank ⇒ "use the built-in default" (null on the wire).
-  const raw = String(draft.spendMonthlyLimit ?? '').trim()
-  const monthlyLimit = raw === '' ? null : Number(raw)
-  try {
-    await store.update({
-      spendCurrency: draft.spendCurrency.trim() ? draft.spendCurrency.trim().toUpperCase() : null,
-      spendMonthlyLimit: monthlyLimit,
-    })
-    toast.add({
-      title: t('settings.workspaceSettings.toast.budgetSaved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
-    // The settings PUT only returns the settings; re-fetch the snapshot so the toolbar's
-    // spend meter reflects the newly-set limit/currency (spendService.status) right away.
-    // Best-effort and AFTER the save succeeded: a transient snapshot-refresh failure must
-    // not report a successfully-saved budget as failed (the meter also catches up on the
-    // next snapshot pushed over the stream).
-    try {
-      await useWorkspaceStore().refresh()
-    } catch {
-      // ignore — the budget is persisted; the meter will catch up on the next snapshot.
-    }
-  } catch (e) {
-    toast.add({
-      title: t('settings.workspaceSettings.toast.budgetSaveFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
-  } finally {
-    savingBudget.value = false
-  }
-}
 </script>
 
 <template>
@@ -370,56 +326,9 @@ async function saveBudget() {
           </div>
         </template>
 
-        <!-- Budget -->
+        <!-- Budget (workspace / account / user tiers) -->
         <template #budget>
-          <div class="space-y-6">
-            <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
-                {{ t('settings.workspaceSettings.budget.heading') }}
-              </h3>
-              <p class="text-[11px] text-slate-400">
-                {{ t('settings.workspaceSettings.budget.body') }}
-              </p>
-              <div class="grid grid-cols-2 gap-3">
-                <label class="block">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-                    {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
-                  </span>
-                  <UInput
-                    v-model="draft.spendMonthlyLimit"
-                    type="number"
-                    :min="0"
-                    :placeholder="t('settings.workspaceSettings.budget.defaultPlaceholder')"
-                    size="sm"
-                  />
-                </label>
-                <label class="block">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-                    {{ t('settings.workspaceSettings.budget.currency') }}
-                  </span>
-                  <UInput
-                    v-model="draft.spendCurrency"
-                    placeholder="EUR"
-                    maxlength="3"
-                    size="sm"
-                    class="uppercase"
-                  />
-                </label>
-              </div>
-            </section>
-
-            <div class="flex justify-end">
-              <UButton
-                color="primary"
-                icon="i-lucide-save"
-                size="sm"
-                :loading="savingBudget"
-                @click="saveBudget"
-              >
-                {{ t('settings.workspaceSettings.budget.save') }}
-              </UButton>
-            </div>
-          </div>
+          <BudgetSettings />
         </template>
 
         <!-- Merge thresholds -->

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/api/userSettings.ts

@@ -0,0 +1,12 @@
+import { getUserSettingsContract, updateUserSettingsContract } from '@cat-factory/contracts'
+import type { UpdateUserSettingsInput } from '~/types/domain'
+import type { ApiContext } from './context'
+
+/** Per-user settings (the user-tier spend budget), scoped to the signed-in user. */
+export function userSettingsApi({ send }: ApiContext) {
+  return {
+    getUserSettings: () => send(getUserSettingsContract, {}),
+    updateUserSettings: (body: UpdateUserSettingsInput) =>
+      send(updateUserSettingsContract, { body }),
+  }
+}

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'
@@ -35,6 +36,7 @@ import { slackApi } from './api/slack'
 import { specApi } from './api/spec'
 import { tasksApi } from './api/tasks'
 import { userSecretsApi } from './api/userSecrets'
+import { userSettingsApi } from './api/userSettings'
 import { workspacesApi } from './api/workspaces'
 
 /**
@@ -113,6 +115,7 @@ export function useApi() {
     ...specApi(ctx),
     ...notificationsApi(ctx),
     ...presetsApi(ctx),
+    ...preflightsApi(ctx),
     ...sharedStacksApi(ctx),
     ...providerConnectionsApi(ctx),
     ...infraHandlersApi(ctx),
@@ -129,5 +132,6 @@ export function useApi() {
     ...slackApi(ctx),
     ...bootstrapApi(ctx),
     ...userSecretsApi(ctx),
+    ...userSettingsApi(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" />

package/app/stores/accounts.ts

@@ -67,6 +67,17 @@ export const useAccountsStore = defineStore(
       return updated
     }
 
+    /**
+     * Set an account's monthly spend budget (the account tier). Admin-only on the
+     * backend; `null` clears the limit. Patches the loaded account in place on success.
+     */
+    async function setSpendMonthlyLimit(id: string, limit: number | null) {
+      const updated = await api.updateAccount(id, { spendMonthlyLimit: limit })
+      const i = accounts.value.findIndex((a) => a.id === id)
+      if (i >= 0) accounts.value[i] = updated
+      return updated
+    }
+
     // ---- members + invitations -------------------------------------------
 
     const members = ref<AccountMember[]>([])
@@ -139,6 +150,7 @@ export const useAccountsStore = defineStore(
       createOrg,
       switchTo,
       setDefaultCloudProvider,
+      setSpendMonthlyLimit,
       loadRoster,
       invite,
       revokeInvite,