@cat-factory/app 0.115.2 → 0.116.0

package/app/components/fragments/FragmentLibraryManager.vue

@@ -6,7 +6,7 @@
 // the merged catalog (built-in ∪ account ∪ workspace) an agent is selected from per
 // run. The account scope has no resolved/merged catalog and fetches document
 // fragments through `viaWorkspaceId` (document-source credentials are per-workspace).
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import type {
   DocumentSourceKind,
   FragmentOwnerKind,
@@ -111,6 +111,24 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
+// Per-row / per-form in-flight tracking. The store's single `library.loading` flag
+// drove every row's button at once (UX-29) and cross-spun the add/link forms; key
+// each async action so only the control that triggered it shows a spinner.
+const busyRows = reactive(new Set<string>())
+const rowBusy = (key: string) => busyRows.has(key)
+async function withRow(key: string, fn: () => Promise<void>) {
+  if (busyRows.has(key)) return
+  busyRows.add(key)
+  try {
+    await fn()
+  } finally {
+    busyRows.delete(key)
+  }
+}
+const creating = ref(false)
+const linkingDoc = ref(false)
+const linkingSource = ref(false)
+
 // ---- create a hand-authored fragment --------------------------------------
 const draft = ref({ title: '', summary: '', body: '', tags: '' })
 const draftValid = computed(
@@ -119,6 +137,7 @@ const draftValid = computed(
 
 async function createFragment() {
   if (!draftValid.value) return
+  creating.value = true
   try {
     await library.create({
       title: draft.value.title.trim(),
@@ -133,6 +152,8 @@ async function createFragment() {
     toast.add({ title: t('fragments.toast.added'), icon: 'i-lucide-check' })
   } catch (e) {
     notifyError(t('fragments.toast.addFailed'), e)
+  } finally {
+    creating.value = false
   }
 }
 
@@ -146,12 +167,14 @@ async function removeFragment(id: string) {
     icon: 'i-lucide-trash-2',
   })
   if (!ok) return
-  try {
-    await library.remove(id)
-    toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })
-  } catch (e) {
-    notifyError(t('fragments.toast.removeFailed'), e)
-  }
+  await withRow(`remove:${id}`, async () => {
+    try {
+      await library.remove(id)
+      toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })
+    } catch (e) {
+      notifyError(t('fragments.toast.removeFailed'), e)
+    }
+  })
 }
 
 // ---- document-backed (living) fragments -----------------------------------
@@ -201,6 +224,7 @@ const documentFragments = computed(() => library.fragments.filter((f) => f.docum
 
 async function linkDocumentFragment() {
   if (!docDraftValid.value) return
+  linkingDoc.value = true
   try {
     await library.createDocumentFragment({
       source: docDraft.value.source as DocumentSourceKind,
@@ -214,16 +238,20 @@ async function linkDocumentFragment() {
     toast.add({ title: t('fragments.toast.documentLinked'), icon: 'i-lucide-link' })
   } catch (e) {
     notifyError(t('fragments.toast.linkDocumentFailed'), e)
+  } finally {
+    linkingDoc.value = false
   }
 }
 
 async function refreshFragment(id: string) {
-  try {
-    await library.refreshDocumentFragment(id)
-    toast.add({ title: t('fragments.toast.refreshed'), icon: 'i-lucide-refresh-cw' })
-  } catch (e) {
-    notifyError(t('fragments.toast.refreshFailed'), e)
-  }
+  await withRow(`refresh:${id}`, async () => {
+    try {
+      await library.refreshDocumentFragment(id)
+      toast.add({ title: t('fragments.toast.refreshed'), icon: 'i-lucide-refresh-cw' })
+    } catch (e) {
+      notifyError(t('fragments.toast.refreshFailed'), e)
+    }
+  })
 }
 
 // ---- repo sources ----------------------------------------------------------
@@ -263,6 +291,7 @@ async function linkSource() {
   if (!ownerName) return
   const dirPath =
     (githubReady.value ? sourceDir.value : manualSource.value.dirPath.trim()) || undefined
+  linkingSource.value = true
   try {
     const source = await library.linkSource({
       repoOwner: ownerName.owner,
@@ -271,48 +300,71 @@ async function linkSource() {
       gitRef: sourceRef.value.trim() || undefined,
     })
     resetSourceDraft()
+    // Auto-sync the freshly-linked source via the store method directly (not the
+    // `syncSource` row wrapper): a failure here should surface as a link failure, and
+    // the form-level `linkingSource` spinner already covers the whole operation.
     await library.syncSource(source.id)
     toast.add({ title: t('fragments.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
   } catch (e) {
     notifyError(t('fragments.toast.linkSourceFailed'), e)
+  } finally {
+    linkingSource.value = false
   }
 }
 
 async function syncSource(id: string) {
-  try {
-    const result = await library.syncSource(id)
-    toast.add({
-      title: t('fragments.toast.synced', {
-        updated: result.upserted,
-        removed: result.tombstoned,
-      }),
-      icon: 'i-lucide-refresh-cw',
-      color: 'info',
-    })
-  } catch (e) {
-    notifyError(t('fragments.toast.syncFailed'), e)
-  }
+  await withRow(`sync:${id}`, async () => {
+    try {
+      const result = await library.syncSource(id)
+      toast.add({
+        title: t('fragments.toast.synced', {
+          updated: result.upserted,
+          removed: result.tombstoned,
+        }),
+        icon: 'i-lucide-refresh-cw',
+        color: 'info',
+      })
+    } catch (e) {
+      notifyError(t('fragments.toast.syncFailed'), e)
+    }
+  })
 }
 
 async function checkSource(id: string) {
-  try {
-    const status = await library.checkSource(id)
-    toast.add({
-      title: status.changed ? t('fragments.toast.changesAvailable') : t('fragments.toast.upToDate'),
-      icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-    })
-  } catch (e) {
-    notifyError(t('fragments.toast.checkSourceFailed'), e)
-  }
+  await withRow(`check:${id}`, async () => {
+    try {
+      const status = await library.checkSource(id)
+      toast.add({
+        title: status.changed
+          ? t('fragments.toast.changesAvailable')
+          : t('fragments.toast.upToDate'),
+        icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
+      })
+    } catch (e) {
+      notifyError(t('fragments.toast.checkSourceFailed'), e)
+    }
+  })
 }
 
 async function unlinkSource(id: string) {
-  try {
-    await library.unlinkSource(id)
-    toast.add({ title: t('fragments.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
-  } catch (e) {
-    notifyError(t('fragments.toast.unlinkSourceFailed'), e)
-  }
+  const source = library.sources.find((s) => s.id === id)
+  const repo = source ? `${source.repoOwner}/${source.repoName}` : ''
+  const ok = await confirm({
+    title: t('fragments.confirmUnlinkSource.title'),
+    description: t('fragments.confirmUnlinkSource.body', { repo }),
+    variant: 'destructive',
+    confirmLabel: t('fragments.confirmUnlinkSource.confirm'),
+    icon: 'i-lucide-unplug',
+  })
+  if (!ok) return
+  await withRow(`unlink:${id}`, async () => {
+    try {
+      await library.unlinkSource(id)
+      toast.add({ title: t('fragments.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
+    } catch (e) {
+      notifyError(t('fragments.toast.unlinkSourceFailed'), e)
+    }
+  })
 }
 </script>
 
@@ -417,6 +469,7 @@ async function unlinkSource(id: string) {
             color="error"
             variant="ghost"
             class="ms-auto"
+            :loading="rowBusy(`remove:${f.id}`)"
             @click="removeFragment(f.id)"
           />
         </div>
@@ -446,7 +499,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-plus"
               size="sm"
               :disabled="!draftValid"
-              :loading="library.loading"
+              :loading="creating"
               class="self-start"
               @click="createFragment"
             >
@@ -487,7 +540,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
-              :loading="library.loading"
+              :loading="rowBusy(`refresh:${f.id}`)"
               :title="t('fragments.documents.refreshTitle')"
               @click="refreshFragment(f.id)"
             />
@@ -496,6 +549,7 @@ async function unlinkSource(id: string) {
               size="xs"
               color="error"
               variant="ghost"
+              :loading="rowBusy(`remove:${f.id}`)"
               @click="removeFragment(f.id)"
             />
           </div>
@@ -553,7 +607,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-link"
               size="sm"
               :disabled="!docDraftValid"
-              :loading="library.loading"
+              :loading="linkingDoc"
               class="self-start"
               @click="linkDocumentFragment"
             >
@@ -598,13 +652,14 @@ async function unlinkSource(id: string) {
               icon="i-lucide-search-check"
               size="xs"
               variant="ghost"
+              :loading="rowBusy(`check:${s.id}`)"
               @click="checkSource(s.id)"
             />
             <UButton
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
-              :loading="library.loading"
+              :loading="rowBusy(`sync:${s.id}`)"
               @click="syncSource(s.id)"
             />
             <UButton
@@ -612,6 +667,7 @@ async function unlinkSource(id: string) {
               size="xs"
               color="error"
               variant="ghost"
+              :loading="rowBusy(`unlink:${s.id}`)"
               @click="unlinkSource(s.id)"
             />
           </div>
@@ -669,7 +725,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-link"
               size="sm"
               :disabled="!sourceValid"
-              :loading="library.loading"
+              :loading="linkingSource"
               class="self-start"
               @click="linkSource"
             >

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

@@ -3,11 +3,13 @@ import { computed, onMounted, ref, watch } from 'vue'
 import type {
   Block,
   CloudProvider,
+  EnvironmentTestStage,
   InstanceSize,
   ProvisionType,
   ServiceProvisioning,
 } from '~/types/domain'
 import type {
+  ConflictReason,
   KubernetesManifestSource,
   KubernetesRenderer,
   ProvisioningComposeServiceCandidate,
@@ -19,6 +21,7 @@ import type {
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
+import { parseConflict } from '~/composables/usePipelineErrorToast'
 
 // Service-level (frame) configuration: the service-owned PROVISIONING — the provision
 // TYPE this service produces (`infraless` / `docker-compose` / `kubernetes` / `custom`)
@@ -44,7 +47,7 @@ const services = useServicesStore()
 const infra = useInfraConfigStore()
 const agentRuns = useAgentRunsStore()
 const ui = useUiStore()
-const { t } = useI18n()
+const { t, te } = useI18n()
 
 // The custom-manifest-type catalog feeds the `custom` picker. Cheap + shared (coalesced).
 // The repo list backs the detect-from-repo affordance (owner/name lookup).
@@ -247,6 +250,80 @@ async function generateOrFixManifest() {
   }
 }
 
+// Ephemeral-environment self-test: run the whole create-branch → provision → tear-down →
+// delete-branch cycle against this service's provisioning config and report success / the stage
+// it failed at. The returned run is tracked live (by frame id) via the workspace stream store.
+const envTest = useEnvironmentTestStore()
+const envTestStarting = ref(false)
+const envTestError = ref<string | null>(null)
+// The newest self-test run for this frame — re-attaches after a reconnect (the run is carried in
+// the snapshot while running), so the live stage keeps showing without a locally-held id.
+const envTestRun = computed(() => envTest.runForBlock(props.block.id))
+const envTestRunning = computed(() => envTestRun.value?.status === 'running')
+// Nothing to provision for an `infraless` service, so there is nothing to test.
+const canTestEnv = computed(() => provisionType.value !== 'infraless')
+
+// Per-stage label KEYS, exhaustive over the contracts `EnvironmentTestStage` union: a new
+// backend stage fails THIS typecheck until mapped (the key is resolved at runtime, so the
+// typed-message-keys check can't see the `t()` lookup — the map's exhaustiveness is the
+// drift guard, same pattern as `CONFLICT_TITLE_KEYS`).
+const ENV_TEST_STAGE_KEYS: Record<EnvironmentTestStage, string> = {
+  creating_branch: 'inspector.testConfig.envTest.stage.creating_branch',
+  provisioning: 'inspector.testConfig.envTest.stage.provisioning',
+  tearing_down: 'inspector.testConfig.envTest.stage.tearing_down',
+  deleting_branch: 'inspector.testConfig.envTest.stage.deleting_branch',
+  done: 'inspector.testConfig.envTest.stage.done',
+}
+
+function envTestStageLabel(stage: EnvironmentTestStage): string {
+  const key = ENV_TEST_STAGE_KEYS[stage]
+  // `te`-guarded so a locale missing the key shows the raw stage id, never a raw message key.
+  return te(key) ? t(key) : stage
+}
+
+// The start preflight's machine-readable 409 reasons, mapped to their localized titles —
+// exhaustive over the contracts `env_test_*` conflict reasons (same drift guard as above).
+// The raw backend `message` is only the last-resort fallback for unmapped/non-conflict errors.
+const ENV_TEST_CONFLICT_KEYS: Record<Extract<ConflictReason, `env_test_${string}`>, string> = {
+  env_test_not_a_frame: 'errors.conflict.title.env_test_not_a_frame',
+  env_test_infraless: 'errors.conflict.title.env_test_infraless',
+  env_test_not_provisionable: 'errors.conflict.title.env_test_not_provisionable',
+  env_test_no_vcs: 'errors.conflict.title.env_test_no_vcs',
+}
+
+function envTestErrorText(e: unknown): string {
+  const reason = parseConflict(e)?.reason
+  const key =
+    reason && reason in ENV_TEST_CONFLICT_KEYS
+      ? ENV_TEST_CONFLICT_KEYS[reason as keyof typeof ENV_TEST_CONFLICT_KEYS]
+      : undefined
+  if (key && te(key)) return t(key)
+  return apiErrorEnvelope(e)?.message ?? (e instanceof Error ? e.message : String(e))
+}
+
+async function startEnvTest() {
+  if (!canTestEnv.value || envTestStarting.value || envTestRunning.value) return
+  envTestStarting.value = true
+  envTestError.value = null
+  try {
+    await envTest.start(props.block.id)
+  } catch (e) {
+    envTestError.value = envTestErrorText(e)
+  } finally {
+    envTestStarting.value = false
+  }
+}
+
+async function stopEnvTest() {
+  const run = envTestRun.value
+  if (!run || run.status !== 'running') return
+  try {
+    await envTest.stop(run.id)
+  } catch (e) {
+    envTestError.value = envTestErrorText(e)
+  }
+}
+
 // The provisioning hints (cloud provider + instance size) are advisory inputs to the
 // ephemeral-environment provisioner, not commonly tuned — keep them collapsed by default.
 const showProvisioning = ref(false)
@@ -923,5 +1000,80 @@ function setSize(value: InstanceSize) {
         </div>
       </div>
     </InspectorSection>
+
+    <!-- Ephemeral-environment self-test: exercise the whole provisioning lifecycle against a
+         throwaway branch and report success / the failing stage. Disabled for `infraless`. -->
+    <div class="mt-3 space-y-2 border-t border-white/5 pt-3" data-testid="env-test-section">
+      <div class="flex items-center justify-between gap-2">
+        <div class="min-w-0">
+          <p class="text-[11px] font-medium text-slate-300">
+            {{ t('inspector.testConfig.envTest.title') }}
+          </p>
+          <p class="text-[11px] text-slate-400">{{ t('inspector.testConfig.envTest.hint') }}</p>
+        </div>
+        <UButton
+          v-if="!envTestRunning"
+          icon="i-lucide-flask-conical"
+          size="xs"
+          color="primary"
+          variant="soft"
+          data-testid="env-test-start"
+          :loading="envTestStarting"
+          :disabled="!canTestEnv"
+          @click="startEnvTest"
+        >
+          {{ t('inspector.testConfig.envTest.start') }}
+        </UButton>
+        <UButton
+          v-else
+          icon="i-lucide-square"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          data-testid="env-test-stop"
+          @click="stopEnvTest"
+        >
+          {{ t('inspector.testConfig.envTest.stop') }}
+        </UButton>
+      </div>
+
+      <p v-if="!canTestEnv" class="text-[11px] text-slate-500">
+        {{ t('inspector.testConfig.envTest.infraless') }}
+      </p>
+
+      <!-- Live stage + terminal outcome of the tracked run (pushed via the workspace stream). -->
+      <p
+        v-if="envTestRun"
+        class="text-[11px]"
+        :class="{
+          'text-sky-300/80': envTestRun.status === 'running',
+          'text-emerald-300/80': envTestRun.status === 'succeeded',
+          'text-rose-300/80': envTestRun.status === 'failed',
+        }"
+        data-testid="env-test-status"
+      >
+        <template v-if="envTestRun.status === 'running'">
+          {{
+            t('inspector.testConfig.envTest.running', {
+              stage: envTestStageLabel(envTestRun.stage),
+            })
+          }}
+        </template>
+        <template v-else-if="envTestRun.status === 'succeeded'">
+          {{ t('inspector.testConfig.envTest.succeeded') }}
+        </template>
+        <template v-else>
+          {{ t('inspector.testConfig.envTest.failed') }}
+          <template v-if="envTestRun.failedStage">
+            ({{ envTestStageLabel(envTestRun.failedStage) }})
+          </template>
+          <span v-if="envTestRun.error" class="block text-rose-300/70">{{ envTestRun.error }}</span>
+        </template>
+      </p>
+
+      <p v-if="envTestError" class="text-[11px] text-rose-400" data-testid="env-test-error">
+        {{ envTestError }}
+      </p>
+    </div>
   </InspectorSection>
 </template>

package/app/components/slack/SlackPanel.vue

@@ -6,7 +6,14 @@
 //   - Mentions (per-account): toggle + GitHub-user-id → Slack-member-id map.
 import { computed, reactive, ref, watch } from 'vue'
 import type { NotificationType } from '~/types/notifications'
-import type { SlackMemberMappingEntry, SlackMemberRole, SlackRoute } from '~/types/slack'
+import type { SlackMemberRole, SlackRoute } from '~/types/slack'
+import {
+  type MemberRow,
+  emptyMemberRow,
+  hasHalfFilledRow,
+  toMemberEntries,
+  toMemberRow,
+} from '~/utils/slackMemberMapping'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 
@@ -60,9 +67,15 @@ const routes = reactive<Record<NotificationType, SlackRoute>>({
   initiative: { enabled: false, channel: '' },
 })
 const mentionsEnabled = ref(false)
-const mapping = ref<SlackMemberMappingEntry[]>([])
+// Editable member rows carry a client-only stable `uid` (see `slackMemberMapping`) so
+// a mid-list delete keys the v-model by identity, not the array index (index keys
+// silently rebound a neighbour's inputs — UX-23).
+let uidSeq = 0
+const nextUid = () => `m${++uidSeq}`
+const mapping = ref<MemberRow[]>([])
 const tokenInput = ref('')
 const busy = ref(false)
+const connectingOAuth = ref(false)
 
 function notifyError(title: string, e: unknown) {
   toast.add({
@@ -84,7 +97,7 @@ watch(
         routes[type] = slack.settings?.routes[type] ?? { enabled: false, channel: '' }
       }
       mentionsEnabled.value = slack.settings?.mentionsEnabled ?? false
-      mapping.value = slack.memberMapping.map((e) => ({ role: 'engineering', ...e }))
+      mapping.value = slack.memberMapping.map((e) => toMemberRow(e, nextUid()))
     } catch (e) {
       notifyError(t('slack.error.loadSettings'), e)
     }
@@ -94,9 +107,13 @@ watch(
 )
 
 async function connectViaOAuth() {
+  connectingOAuth.value = true
   try {
+    // On success the browser navigates away, so `connectingOAuth` never resets here —
+    // it only clears on the error path below.
     window.location.href = await slack.installUrl()
   } catch (e) {
+    connectingOAuth.value = false
     notifyError(t('slack.error.startOAuth'), e)
   }
 }
@@ -144,17 +161,29 @@ async function saveRouting() {
 }
 
 function addMapping() {
-  mapping.value.push({ userId: '', slackUserId: '', role: 'engineering' })
+  mapping.value.push(emptyMemberRow(nextUid()))
 }
-function removeMapping(index: number) {
-  mapping.value.splice(index, 1)
+function removeMapping(uid: string) {
+  mapping.value = mapping.value.filter((e) => e.uid !== uid)
 }
 async function saveMapping() {
+  // A partially-filled row (one id present, the other blank) used to be silently
+  // dropped on save (UX-23) — block instead so the user doesn't lose the entry. A
+  // fully-empty row is just an unused slot and is ignored.
+  if (hasHalfFilledRow(mapping.value)) {
+    toast.add({
+      title: t('slack.members.incompleteTitle'),
+      description: t('slack.members.incompleteBody'),
+      icon: 'i-lucide-triangle-alert',
+      color: 'warning',
+    })
+    return
+  }
   busy.value = true
   try {
-    const entries = mapping.value.filter((e) => e.userId.trim() && e.slackUserId.trim())
+    const entries = toMemberEntries(mapping.value)
     await slack.updateMemberMapping(entries)
-    mapping.value = slack.memberMapping.map((e) => ({ ...e }))
+    mapping.value = slack.memberMapping.map((e) => toMemberRow(e, nextUid()))
     toast.add({ title: t('slack.toast.mapSaved'), icon: 'i-lucide-check', color: 'success' })
   } catch (e) {
     notifyError(t('slack.error.saveMap'), e)
@@ -181,6 +210,7 @@ async function saveMapping() {
             v-if="slack.oauthEnabled"
             color="primary"
             icon="i-lucide-slack"
+            :loading="connectingOAuth"
             @click="connectViaOAuth"
           >
             {{ t('slack.connect.addToSlack') }}
@@ -287,7 +317,7 @@ async function saveMapping() {
                 </template>
               </i18n-t>
             </p>
-            <div v-for="(entry, i) in mapping" :key="i" class="flex items-center gap-2">
+            <div v-for="entry in mapping" :key="entry.uid" class="flex items-center gap-2">
               <UInput
                 v-model="entry.userId"
                 size="sm"
@@ -312,7 +342,7 @@ async function saveMapping() {
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-trash-2"
-                @click="removeMapping(i)"
+                @click="removeMapping(entry.uid)"
               />
             </div>
             <div class="flex justify-between">

package/app/composables/api/environments.ts

@@ -1,4 +1,10 @@
-import { listEnvironmentsContract, provisionEnvironmentContract } from '@cat-factory/contracts'
+import {
+  getEnvironmentTestContract,
+  listEnvironmentsContract,
+  provisionEnvironmentContract,
+  startEnvironmentTestContract,
+  stopEnvironmentTestContract,
+} from '@cat-factory/contracts'
 import type { ProvisionEnvironmentInput } from '@cat-factory/contracts'
 import type { ApiContext } from './context'
 
@@ -12,5 +18,14 @@ export function environmentsApi({ send, ws }: ApiContext) {
     // wizard's "trial provision" against the just-saved config. Returns the resulting handle.
     provisionEnvironment: (workspaceId: string, body: ProvisionEnvironmentInput) =>
       send(provisionEnvironmentContract, { pathPrefix: ws(workspaceId), body }),
+
+    // Ephemeral-environment self-test: start a full create-branch → provision → tear-down →
+    // delete-branch cycle against a service frame, then read / stop its run.
+    startEnvironmentTest: (workspaceId: string, blockId: string) =>
+      send(startEnvironmentTestContract, { pathPrefix: ws(workspaceId), pathParams: { blockId } }),
+    getEnvironmentTest: (workspaceId: string, id: string) =>
+      send(getEnvironmentTestContract, { pathPrefix: ws(workspaceId), pathParams: { id } }),
+    stopEnvironmentTest: (workspaceId: string, id: string) =>
+      send(stopEnvironmentTestContract, { pathPrefix: ws(workspaceId), pathParams: { id } }),
   }
 }

package/app/composables/usePipelineErrorToast.ts

@@ -55,6 +55,10 @@ const CONFLICT_TITLE_KEYS: Record<Exclude<ConflictReason, BespokeConflictReason>
   model_policy_blocked: 'errors.conflict.title.model_policy_blocked',
   model_policy_unsupported: 'errors.conflict.title.model_policy_unsupported',
   deployer_required_before_tester: 'errors.conflict.title.deployer_required_before_tester',
+  env_test_not_a_frame: 'errors.conflict.title.env_test_not_a_frame',
+  env_test_infraless: 'errors.conflict.title.env_test_infraless',
+  env_test_not_provisionable: 'errors.conflict.title.env_test_not_provisionable',
+  env_test_no_vcs: 'errors.conflict.title.env_test_no_vcs',
 }
 
 /**

package/app/composables/useWorkspaceStream.ts

@@ -18,6 +18,7 @@ export function useWorkspaceStream() {
   const execution = useExecutionStore()
   const board = useBoardStore()
   const agentRuns = useAgentRunsStore()
+  const environmentTest = useEnvironmentTestStore()
   const notifications = useNotificationsStore()
   const observability = useObservabilityStore()
   const requirements = useRequirementsStore()
@@ -102,6 +103,11 @@ export function useWorkspaceStream() {
       // the infrastructure-providers window's "repairing…" indicator updates in place
       // (then flips to ok / residual issues / a failure) without a refetch. No board block.
       agentRuns.upsertEnvConfigRepair(event.job)
+    } else if (event.type === 'envTest') {
+      // An ephemeral-environment self-test advanced a stage — patch the run so the service
+      // inspector's "Test environment creation" control shows the live stage + final
+      // outcome in place without a refetch. No board block.
+      environmentTest.upsert(event.run)
     } else if (event.type === 'notification') {
       // A PR needs a merge decision, a pipeline finished, or CI gave up — patch the
       // inbox + per-block badge in place (resolved ones drop out of the inbox).