@cat-factory/app 0.70.1 → 0.71.1

package/app/components/auth/LoginScreen.vue

@@ -129,8 +129,9 @@ const showOAuthDivider = computed(
 
 // Hosted (remote node) PAT login: the user pastes their OWN source-control PAT, which the
 // server resolves to an account and holds to its login/org/domain allowlist. The available
-// providers come from the server (`auth.patProviders`); empty in local mode (which uses the
-// configured-token flow above) and on OAuth-only facades like the Worker.
+// providers come from the server (`auth.patProviders`) — GitHub always, GitLab when configured,
+// on both hosted facades (Node + Worker); empty in local mode (which uses the configured-token
+// flow above).
 const remotePatProviders = computed<PatProvider[]>(() =>
   isLocalMode.value ? [] : (auth.patProviders as PatProvider[]),
 )

package/app/components/board/AddTaskModal.vue

@@ -16,6 +16,7 @@ import { DOC_KINDS } from '~/types/domain'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import { mergePresetOptionLabel, mergePresetThresholds } from '~/utils/mergePreset'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -195,6 +196,11 @@ const selectedModelPresetLabel = computed(() => {
   )
 })
 
+// Hide UI-testing pipelines (`tester-ui` / `visual-confirmation`) when the target frame has no
+// UI to exercise — they'd be refused server-side (see utils/pipeline + the backend gate).
+const selectablePipelines = computed(() =>
+  pipelines.pipelines.filter((p) => pipelineAllowedForFrame(p, frame.value, board.blocks)),
+)
 const pipelineMenu = computed(() => [
   [
     {
@@ -202,7 +208,7 @@ const pipelineMenu = computed(() => [
       icon: 'i-lucide-rotate-ccw',
       onSelect: () => (pipelineId.value = ''),
     },
-    ...pipelines.pipelines.map((p) => ({
+    ...selectablePipelines.value.map((p) => ({
       label: p.name,
       icon: 'i-lucide-workflow',
       onSelect: () => (pipelineId.value = p.id),

package/app/components/board/RecurringPipelineModal.vue

@@ -6,6 +6,7 @@
 // pipeline is picked, the workspace issue-tracker choice is surfaced inline (it is
 // where that pipeline files its ticket) and saved alongside.
 import type { Recurrence, ScheduleTemplate } from '~/types/recurring'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -47,8 +48,12 @@ function defaultRecurrence(): Recurrence {
   }
 }
 
+// Hide UI-testing pipelines when the frame has no UI to exercise — they'd be refused at run start.
+const selectablePipelines = computed(() =>
+  pipelines.pipelines.filter((p) => pipelineAllowedForFrame(p, frame.value, board.blocks)),
+)
 const pipelineMenu = computed(() => [
-  pipelines.pipelines.map((p) => ({
+  selectablePipelines.value.map((p) => ({
     label: p.name,
     icon: 'i-lucide-workflow',
     onSelect: () => (pipelineId.value = p.id),

package/app/components/bootstrap/BootstrapModal.vue

@@ -15,6 +15,7 @@ const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
 
 const open = computed({
   get: () => ui.bootstrapOpen,
@@ -349,9 +350,11 @@ async function saveArch() {
 }
 
 async function removeArch(a: ReferenceArchitecture) {
+  if (!(await confirmAction('remove', a.name))) return
   try {
     await bootstrap.deleteArchitecture(a.id)
     if (selectedArchId.value === a.id) selectedArchId.value = undefined
+    toastDone('remove', a.name)
   } catch (e) {
     toast.add({
       title: t('bootstrap.toast.deleteFailed'),

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -10,6 +10,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
 const toast = useToast()
+const { confirmAction } = useConfirmAction()
 
 const source = computed(() => ui.documentConnect?.source ?? null)
 const descriptor = computed(() =>
@@ -70,11 +71,11 @@ async function submit() {
 
 async function disconnect() {
   if (!source.value) return
+  const label = descriptor.value?.label ?? t('documents.connect.sourceFallback')
+  if (!(await confirmAction('disconnect', label))) return
   await documents.disconnect(source.value)
   toast.add({
-    title: t('documents.connect.disconnected', {
-      source: descriptor.value?.label ?? t('documents.connect.sourceFallback'),
-    }),
+    title: t('documents.connect.disconnected', { source: label }),
     icon: 'i-lucide-unplug',
   })
   ui.closeDocumentConnect()

package/app/components/focus/BlockFocusView.vue

@@ -2,6 +2,7 @@
 import { onKeyStroke } from '@vueuse/core'
 import type { Block } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
 
 const board = useBoardStore()
@@ -26,13 +27,17 @@ const deps = computed(() =>
   (block.value?.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
 )
 
-const runMenu = computed(() =>
-  pipelines.pipelines.map((p) => ({
-    label: p.name,
-    icon: 'i-lucide-play',
-    onSelect: () => block.value && execution.start(block.value.id, p),
-  })),
-)
+// Hide UI-testing pipelines when this block's frame has no UI to exercise (see the backend gate).
+const runMenu = computed(() => {
+  const frame = block.value ? board.serviceOf(block.value) : undefined
+  return pipelines.pipelines
+    .filter((p) => pipelineAllowedForFrame(p, frame, board.blocks))
+    .map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-play',
+      onSelect: () => block.value && execution.start(block.value.id, p),
+    }))
+})
 
 function close() {
   ui.focus(null)

package/app/components/humanTest/HumanTestWindow.vue

@@ -19,6 +19,8 @@ const board = useBoardStore()
 const execution = useExecutionStore()
 const humanTest = useHumanTestStore()
 const { t, d } = useI18n()
+const toast = useToast()
+const { confirmAction, toastDone } = useConfirmAction()
 
 // Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: the gate state
 // rides on the execution step, pushed over the stream.
@@ -102,7 +104,19 @@ async function recreate() {
 }
 async function destroy() {
   if (!blockId.value) return
-  await humanTest.destroyEnv(blockId.value)
+  const noun = t('humanTest.envNoun')
+  if (!(await confirmAction('destroy', noun))) return
+  try {
+    await humanTest.destroyEnv(blockId.value)
+    toastDone('destroy', noun)
+  } catch (e) {
+    toast.add({
+      title: t('humanTest.destroyFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
 }
 
 /** Env actions need a provider (an env is/was present, or it's provisioning) — disabled in degraded mode. */

package/app/components/layout/AccountDeploymentSettings.vue

@@ -14,6 +14,7 @@ const store = useAccountSettingsStore()
 const ui = useUiStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirmAction } = useConfirmAction()
 
 // Deep-link anchor: the pipeline-start "configure storage" prompt opens this tab with the
 // ui store's scroll target set to `content-storage`, so we bring the storage section (which
@@ -207,6 +208,7 @@ async function saveSlack() {
 }
 
 async function clearSlack() {
+  if (!(await confirmAction('clear', 'Slack'))) return
   savingSlack.value = true
   try {
     await store.save(props.accountId, { secrets: { slackOAuth: null } })
@@ -262,6 +264,7 @@ async function saveLinear() {
 }
 
 async function clearLinear() {
+  if (!(await confirmAction('clear', 'Linear'))) return
   savingLinear.value = true
   try {
     await store.save(props.accountId, { secrets: { linearOAuth: null } })
@@ -319,6 +322,7 @@ async function saveWeb() {
 }
 
 async function clearWeb() {
+  if (!(await confirmAction('clear', t('layout.accountDeployment.web.title')))) return
   savingWeb.value = true
   try {
     await store.save(props.accountId, { secrets: { webSearch: null } })

package/app/components/layout/AccountTeamSettings.vue

@@ -14,6 +14,7 @@ const props = defineProps<{ accountId: string }>()
 const accounts = useAccountsStore()
 const toast = useToast()
 const { t, te } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
 const busy = ref(false)
 
 const ROLE_ITEMS = computed<{ label: string; value: AccountRole }[]>(() => [
@@ -132,9 +133,11 @@ async function sendInvite() {
   }
 }
 
-async function revoke(id: string) {
+async function revoke(id: string, email: string) {
+  if (!(await confirmAction('revoke', email))) return
   try {
     await accounts.revokeInvite(props.accountId, id)
+    toastDone('revoke', email)
   } catch (e) {
     notifyError(t('layout.accountTeam.errors.revokeInvite'), e)
   }
@@ -164,9 +167,12 @@ async function connectEmail() {
 }
 
 async function disconnectEmail() {
+  const noun = t('layout.accountTeam.emailNoun')
+  if (!(await confirmAction('disconnect', noun))) return
   busy.value = true
   try {
     await accounts.disconnectEmail(props.accountId)
+    toastDone('disconnect', noun)
   } catch (e) {
     notifyError(t('layout.accountTeam.errors.disconnectEmail'), e)
   } finally {
@@ -258,7 +264,7 @@ async function disconnectEmail() {
               variant="ghost"
               icon="i-lucide-x"
               :aria-label="t('layout.accountTeam.invite.revoke')"
-              @click="revoke(inv.id)"
+              @click="revoke(inv.id, inv.email)"
             />
           </span>
         </li>

package/app/components/layout/AiProvidersBanner.vue

@@ -18,7 +18,9 @@ const show = computed(() => showSetup.value || showPreset.value)
 
 <template>
   <Transition name="fade">
-    <div v-if="show" class="absolute inset-x-0 top-0 z-40 flex justify-center px-4 pt-4">
+    <!-- Positioning/stacking is owned by the shared banner column in `pages/index.vue`; this
+         renders only its card and re-enables pointer events on it. -->
+    <div v-if="show" class="pointer-events-auto w-full max-w-3xl">
       <!-- (1) No usable AI source -->
       <div
         v-if="showSetup"

package/app/components/layout/BoardToolbar.vue

@@ -6,6 +6,7 @@ const ui = useUiStore()
 const board = useBoardStore()
 const execution = useExecutionStore()
 const workspace = useWorkspaceStore()
+const workspaceSettings = useWorkspaceSettingsStore()
 const services = useServicesStore()
 const toast = useToast()
 const { t, n } = useI18n()
@@ -54,9 +55,18 @@ const LOD_LABEL_KEYS = {
 } as const
 const lodLabel = computed(() => t(LOD_LABEL_KEYS[ui.lod]))
 
-// Live spend indicator: shown once any tokens have been metered this period.
+// Live spend indicator: shown once the workspace has an explicit budget configured
+// (so the meter appears the moment a budget is set, at zero spend), or once any tokens
+// have been metered this period (the built-in default budget still applies unconfigured).
 const spend = computed(() => workspace.spend)
-const showSpend = computed(() => !!spend.value && spend.value.costSpent > 0)
+const budgetConfigured = computed(
+  () =>
+    workspaceSettings.settings.spendMonthlyLimit != null ||
+    workspaceSettings.settings.spendCurrency != null,
+)
+const showSpend = computed(
+  () => !!spend.value && (budgetConfigured.value || spend.value.costSpent > 0),
+)
 const spendLabel = computed(() => {
   const s = spend.value
   if (!s) return ''

package/app/components/layout/InfraSetupBanner.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+// Loud prompt that this deployment needs a piece of infrastructure the operator hasn't set up
+// yet, so a whole class of agents can't run. Driven off the server-computed `infraSetup`
+// snapshot projection (`not_defined` per area) — so it only fires on a runtime that actually
+// requires the piece (the runner-pool executor matters on remote Node; binary storage on any
+// runtime whose account picked no backend — incl. Cloudflare without an ARTIFACT_BUCKET binding;
+// ephemeral test environments on any runtime that wires the integration).
+//
+// Positioning/stacking against the sibling advisory banners (AI-readiness, provider-config) is
+// owned by the shared, click-through banner column in `pages/index.vue` — so concurrent prompts
+// stack vertically instead of drawing on top of each other. This component only stacks its OWN
+// (up to three) area cards; each card re-enables pointer events while the column stays inert.
+//
+// Dismissal offers the two choices the product asks for: hide for THIS SESSION (a ui-store flag,
+// cleared on workspace switch, re-nags next load) or "I'm OK with the limitations, don't notify
+// me again" — a PERMANENT, per-USER dismissal persisted in localStorage keyed by the signed-in
+// user id (so it's this-user-only and survives reloads).
+//
+// Scope note: the permanent dismissal is per-USER and DEPLOYMENT-wide, not per-account. That is
+// exact for `agentExecutor`/`ephemeralEnvironments` (deployment-level wiring). `binaryStorage` is
+// per-account, so a user who permanently silences it on one account won't be re-nagged on another
+// account that also has no storage — an accepted trade-off (the setting stays reachable from
+// account settings, and the SESSION dismissal re-nags on the next load regardless).
+//
+// Freshness note: `infraSetup` is a server projection recomputed only on snapshot (re)load, so a
+// banner clears on the next board load after the operator configures the area via the deep-link,
+// not the instant the config panel saves.
+import { useLocalStorage } from '@vueuse/core'
+import { computed } from 'vue'
+// The localStorage key holding the permanent per-user dismissals lives in `@cat-factory/contracts`
+// (a dependency-free package the SPA and the e2e suite both import), so the key + shape can't drift
+// between this component and the e2e seed in `backend/internal/e2e/tests/helpers.ts` (`pinWorkspace`).
+import { INFRA_SETUP_DISMISSED_STORAGE_KEY } from '@cat-factory/contracts'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { InfraSetupArea } from '~/types/domain'
+
+const { t } = useI18n()
+const ui = useUiStore()
+const auth = useAuthStore()
+const workspace = useWorkspaceStore()
+
+// Severity order: no executor blocks EVERY agent, so it leads; a missing test environment blocks
+// only testing agents; missing storage only degrades the UI-tester's screenshots.
+const AREAS: InfraSetupArea[] = ['agentExecutor', 'ephemeralEnvironments', 'binaryStorage']
+
+// Exhaustive per-area presentation (an exhaustive `Record<InfraSetupArea, …>`, so adding an area
+// without a meta entry fails typecheck — the tier-2 guard). The i18n keys are resolved
+// dynamically (`t(AREA_META[area].titleKey)`), so tier-1 typed-key checking doesn't cover them;
+// the `i18n:check` drift guard (tier 3) catches any that are absent from the catalog. `action`
+// deep-links into the relevant setup surface.
+const AREA_META: Record<
+  InfraSetupArea,
+  { icon: string; titleKey: string; bodyKey: string; actionKey: string; onConfigure: () => void }
+> = {
+  agentExecutor: {
+    icon: 'i-lucide-server-cog',
+    titleKey: 'layout.infraSetupBanner.agentExecutor.title',
+    bodyKey: 'layout.infraSetupBanner.agentExecutor.body',
+    actionKey: 'layout.infraSetupBanner.agentExecutor.action',
+    onConfigure: () => ui.openProviderConnection('runner-pool'),
+  },
+  ephemeralEnvironments: {
+    icon: 'i-lucide-flask-conical',
+    titleKey: 'layout.infraSetupBanner.ephemeralEnvironments.title',
+    bodyKey: 'layout.infraSetupBanner.ephemeralEnvironments.body',
+    actionKey: 'layout.infraSetupBanner.ephemeralEnvironments.action',
+    onConfigure: () => ui.openProviderConnection('environment'),
+  },
+  binaryStorage: {
+    icon: 'i-lucide-hard-drive',
+    titleKey: 'layout.infraSetupBanner.binaryStorage.title',
+    bodyKey: 'layout.infraSetupBanner.binaryStorage.body',
+    actionKey: 'layout.infraSetupBanner.binaryStorage.action',
+    onConfigure: () => ui.openContentStorageSettings(),
+  },
+}
+
+// Permanent, per-user dismissals: one shared localStorage record keyed BY user id (so it's
+// scoped to the signed-in user and doesn't leak across accounts on a shared browser). No
+// signed-in user (local/auth-off single-user mode) ⇒ the `local` bucket.
+const permanentDismissed = useLocalStorage<Record<string, InfraSetupArea[]>>(
+  INFRA_SETUP_DISMISSED_STORAGE_KEY,
+  {},
+)
+const userKey = computed(() => auth.user?.id ?? 'local')
+const dismissedForUser = computed(() => permanentDismissed.value[userKey.value] ?? [])
+function dismissPermanently(area: InfraSetupArea) {
+  const current = permanentDismissed.value[userKey.value] ?? []
+  if (!current.includes(area)) {
+    permanentDismissed.value = {
+      ...permanentDismissed.value,
+      [userKey.value]: [...current, area],
+    }
+  }
+}
+
+const visible = computed<InfraSetupArea[]>(() => {
+  const status = workspace.infraSetup
+  if (!status) return []
+  return AREAS.filter(
+    (area) =>
+      status[area] === 'not_defined' &&
+      !ui.infraSetupSessionDismissed.includes(area) &&
+      !dismissedForUser.value.includes(area),
+  )
+})
+
+// The dismiss dropdown: the product wants the user asked WHICH kind of dismissal on close.
+function dismissMenu(area: InfraSetupArea): DropdownMenuItem[][] {
+  return [
+    [
+      {
+        label: t('layout.infraSetupBanner.dismiss.session'),
+        icon: 'i-lucide-clock',
+        onSelect: () => ui.dismissInfraSetupForSession(area),
+      },
+      {
+        label: t('layout.infraSetupBanner.dismiss.permanent'),
+        icon: 'i-lucide-bell-off',
+        onSelect: () => dismissPermanently(area),
+      },
+    ],
+  ]
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <!-- One polite live region for ALL area cards (plus the sibling AI/provider banners) rather
+         than an assertive `role="alert"` per card — an advisory setup nag shouldn't interrupt a
+         screen reader, and up to three stacked alerts would spam it. -->
+    <div
+      v-if="visible.length > 0"
+      class="flex w-full flex-col items-center gap-2"
+      role="status"
+      aria-live="polite"
+    >
+      <div
+        v-for="area in visible"
+        :key="area"
+        class="pointer-events-auto w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
+        :data-testid="`infra-setup-banner-${area}`"
+      >
+        <div class="flex items-start gap-4">
+          <UIcon :name="AREA_META[area].icon" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-start justify-between gap-3">
+              <h2 class="text-lg font-semibold text-amber-100">
+                {{ t(AREA_META[area].titleKey) }}
+              </h2>
+              <UDropdownMenu :items="dismissMenu(area)" :content="{ align: 'end' }">
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  icon="i-lucide-x"
+                  :aria-label="t('common.close')"
+                  :data-testid="`infra-setup-dismiss-${area}`"
+                />
+              </UDropdownMenu>
+            </div>
+            <p class="mt-1 text-sm text-amber-200/90">
+              {{ t(AREA_META[area].bodyKey) }}
+            </p>
+            <div class="mt-4">
+              <UButton
+                color="warning"
+                variant="solid"
+                icon="i-lucide-settings"
+                :data-testid="`infra-setup-configure-${area}`"
+                @click="AREA_META[area].onConfigure()"
+              >
+                {{ t(AREA_META[area].actionKey) }}
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/layout/ProviderConfigBanner.vue

@@ -38,7 +38,9 @@ const show = computed(() => pending.value.length > 0 && !dismissed.value)
 
 <template>
   <Transition name="fade">
-    <div v-if="show" class="absolute inset-x-0 top-0 z-40 flex justify-center px-4 pt-4">
+    <!-- Positioning/stacking is owned by the shared banner column in `pages/index.vue`; this
+         renders only its card and re-enables pointer events on it. -->
+    <div v-if="show" class="pointer-events-auto w-full max-w-3xl">
       <div
         class="w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
         role="alert"

package/app/components/panels/InspectorPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Block, BlockStatus } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 import TaskContextDocs from '~/components/documents/TaskContextDocs.vue'
 import TaskContextIssues from '~/components/tasks/TaskContextIssues.vue'
 import TaskAgentConfig from '~/components/panels/inspector/TaskAgentConfig.vue'
@@ -137,13 +138,18 @@ const taskBranchUrl = computed(() => {
   return base ? `${base}/tree/${pr.branch}` : null
 })
 
-const runMenu = computed(() =>
-  pipelines.pipelines.map((p) => ({
-    label: p.name,
-    icon: 'i-lucide-play',
-    onSelect: () => block.value && execution.start(block.value.id, p),
-  })),
-)
+// Hide UI-testing pipelines when this block's frame has no UI to exercise — they'd be refused
+// at run start (see utils/pipeline + the backend gate).
+const runMenu = computed(() => {
+  const frame = block.value ? board.serviceOf(block.value) : undefined
+  return pipelines.pipelines
+    .filter((p) => pipelineAllowedForFrame(p, frame, board.blocks))
+    .map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-play',
+      onSelect: () => block.value && execution.start(block.value.id, p),
+    }))
+})
 
 // Delegate to the shared confirm-gated deletion so the button and the keyboard shortcut
 // (Delete/Backspace) follow the exact same prompt + optimistic-delete + rollback path.

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

@@ -18,8 +18,15 @@ import type {
 const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
+const auth = useAuthStore()
 const { t } = useI18n()
 
+// A browsable preview needs a long-lived host serve, so it is a local/node runtime capability
+// the deployment advertises (`infrastructure.frontendPreview.supported`); the Worker reports it
+// unsupported. Default to true until the auth handshake resolves so the toggle isn't briefly
+// disabled on a runtime that does support it.
+const previewSupported = computed(() => auth.infrastructure?.frontendPreview?.supported !== false)
+
 const config = computed<FrontendConfig>(() => props.block.frontendConfig ?? { backendBindings: [] })
 const bindings = computed(() => config.value.backendBindings ?? [])
 
@@ -226,7 +233,7 @@ function removeBinding(index: number) {
           step="1"
           size="xs"
           class="font-mono"
-          placeholder="8080"
+          placeholder="4173"
           @blur="(e: FocusEvent) => saveServePort((e.target as HTMLInputElement).value)"
         />
       </div>
@@ -247,6 +254,9 @@ function removeBinding(index: number) {
             (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
           "
         />
+        <p class="col-span-2 text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.frontendConfig.mockMappingsHint') }}
+        </p>
       </div>
     </div>
 
@@ -331,18 +341,23 @@ function removeBinding(index: number) {
       </div>
     </div>
 
-    <!-- Browsable preview (local/node only). -->
+    <!-- Browsable preview (local/node only; the Worker reports it unsupported). -->
     <div class="border-t border-slate-800 pt-2">
       <UCheckbox
-        :model-value="config.previewEnabled === true"
+        :model-value="previewSupported && config.previewEnabled === true"
         :label="t('inspector.frontendConfig.previewEnabled')"
+        :disabled="!previewSupported"
         size="xs"
         @update:model-value="
           (v: boolean | 'indeterminate') => save({ previewEnabled: v === true ? true : undefined })
         "
       />
       <p class="mt-1 text-[11px] leading-snug text-slate-500">
-        {{ t('inspector.frontendConfig.previewHint') }}
+        {{
+          previewSupported
+            ? t('inspector.frontendConfig.previewHint')
+            : t('inspector.frontendConfig.previewUnsupported')
+        }}
       </p>
     </div>
   </div>

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

@@ -12,6 +12,7 @@ const store = useReleaseHealthStore()
 const ui = useUiStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
 
 const busy = ref(false)
 const draft = reactive({ monitorIds: '', sloIds: '', envTag: '' })
@@ -70,12 +71,15 @@ async function save() {
 }
 
 async function clear() {
+  const noun = t('inspector.releaseHealth.configNoun')
+  if (!(await confirmAction('clear', noun))) return
   busy.value = true
   try {
     await store.removeConfig(props.block.id)
     draft.monitorIds = ''
     draft.sloIds = ''
     draft.envTag = ''
+    toastDone('clear', noun)
   } catch (e) {
     notifyError(t('inspector.releaseHealth.clearFailed'), e)
   } finally {

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

@@ -3,6 +3,7 @@ import { computed, onMounted } from 'vue'
 import type { Block } from '~/types/domain'
 import type { WritebackOverride } from '~/types/tracker'
 import { mergePresetOptionLabel, mergePresetThresholds } from '~/utils/mergePreset'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 
 const props = defineProps<{ block: Block }>()
 
@@ -129,6 +130,12 @@ function setModelPreset(id: string) {
 const selectedPipeline = computed(() =>
   props.block.pipelineId ? pipelines.getPipeline(props.block.pipelineId) : undefined,
 )
+// Hide UI-testing pipelines when this task's frame has no UI to exercise — they'd be refused at
+// run start (see utils/pipeline + the backend gate).
+const taskFrame = computed(() => board.serviceOf(props.block))
+const selectablePipelines = computed(() =>
+  pipelines.pipelines.filter((p) => pipelineAllowedForFrame(p, taskFrame.value, board.blocks)),
+)
 const pipelineMenu = computed(() => [
   [
     {
@@ -136,7 +143,7 @@ const pipelineMenu = computed(() => [
       icon: 'i-lucide-rotate-ccw',
       onSelect: () => setPipeline(''),
     },
-    ...pipelines.pipelines.map((p) => ({
+    ...selectablePipelines.value.map((p) => ({
       label: p.name,
       icon: 'i-lucide-workflow',
       onSelect: () => setPipeline(p.id),