@cat-factory/app 0.310.2 → 0.311.0

package/README.md

@@ -334,16 +334,22 @@ Every CONTROL in the SPA is the Nuxt UI component for it, never the raw HTML ele
 
 What a primary, a secondary or a destructive action looks like is decided once, here, and not per call site. The weights are Nuxt UI's own [variant table](https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/design-system.md) (`solid` highest, then `outline`, `soft`, `subtle`, `ghost`, and `link` for a text link inside content), mapped onto the app's kinds of action:
 
-| Kind                                                   | Props                                                                                         |
-| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
-| Primary action, ONE per view                           | none (the default, `primary solid`)                                                           |
-| Secondary action in a dialog footer or a window header | `color="neutral" variant="outline"`                                                           |
-| Inline, navigation and chrome actions                  | `color="neutral" variant="ghost"`, usually with `size="xs"`                                   |
-| Icon-only action                                       | `IconButton` with `color="neutral" variant="ghost"`                                           |
-| Destructive action                                     | `color="error" variant="soft"`; `color="error"` alone (solid) only as the confirm of a dialog |
-| Status chip                                            | `UBadge` with `variant="subtle" size="sm"`, and a `BadgeColor` map for the colour             |
-
-- **The defaults are Nuxt UI's own**: `primary solid md` for both `UButton` and `UBadge`, stated in `app.config.ts` (`ui.button.defaultVariants`, `ui.badge.defaultVariants`) so the value has one visible home and the guard can read it. A call site states only what DIFFERS. Sibling buttons never mix variants.
+| Kind                                                                  | Props                                                                                                                                                                                   |
+| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Primary action, ONE per view                                          | none (the default, `primary solid`)                                                                                                                                                     |
+| Dismissal in a dialog or form (Cancel, Close)                         | `color="neutral" variant="ghost"`                                                                                                                                                       |
+| Real secondary action (Save draft, Back)                              | `color="neutral" variant="outline"`                                                                                                                                                     |
+| Bulk action in a dialog footer, beside Close (Reseed all, Update all) | `variant="ghost"` (primary colour): the dialog's main action, kept light because each row above it has its own button                                                                   |
+| Send-back on a gate (bounce, request a fix)                           | `color="warning" variant="soft"`, so the approve beside it stays the one primary                                                                                                        |
+| Inline, navigation and chrome actions                                 | `color="neutral" variant="ghost"`, usually with `size="xs"`                                                                                                                             |
+| Icon-only action                                                      | `IconButton` with `color="neutral" variant="ghost"`                                                                                                                                     |
+| Destructive action, labelled                                          | `color="error" variant="soft"`; `color="error"` alone (solid) only as the confirm step of a destructive action (a dialog's confirm, or an armed inline confirm such as a step's reject) |
+| Destructive action, icon-only (a row's trash icon)                    | `IconButton` with `color="error" variant="ghost"`                                                                                                                                       |
+| A banner's call to action                                             | solid, in the banner's colour (`color="warning"`, `color="error"`)                                                                                                                      |
+| Status chip                                                           | `UBadge` with `variant="subtle" size="sm"`, and a `BadgeColor` map for the colour                                                                                                       |
+
+- **The defaults are Nuxt UI's own**: `primary solid md` for both `UButton` and `UBadge`, stated in `app.config.ts` (`ui.button.defaultVariants`, `ui.badge.defaultVariants`) so the value has one visible home and the guard can read it. A call site states only what DIFFERS.
+- **One solid button per view.** Two solid buttons side by side compete for the same attention, so the second action takes a lighter variant from the table. The guard refuses two solid buttons under one parent element; it counts a `v-if` chain as one button and a `v-for` list as one, looks through a plain `<template>` wrapper, and treats a slot `<template #name>` as its own region. A file holding several forms that each end in a Save is several views and passes. A site that genuinely needs two says why with a `solid-ok:` comment on its own line, directly above the second button.
 - **The unstyled group is the one a theme restyles, so it is the primary tier.** A theme document's `style.defaults` (a size, a button variant, a button colour) REPLACES the default for every control that does not state that prop; it does not scale or shift the others. So whichever group is unstyled is the group a theme moves. With the primary actions unstyled, a theme with `size: 'lg'` or `variants: { buttons: 'outline' }` restyles the actions and leaves the chrome alone. With the quiet chrome unstyled, the same theme would grow or fill every toolbar and icon button past the actions and invert the hierarchy. This is why the dense, quiet chrome carries its props and the primary action carries none, and why Nuxt UI's own internal buttons (a modal's close button, a toast's actions) agree with the app's.
 - **A restated default is a bug, not noise.** It pins the value against a theme that changes the default, and it hides which props are the reason a control looks the way it does. `scripts/check-frontend-variants.mjs` (CI) refuses a value equal to the default on `UButton` and `UBadge` (either casing, either quote style, or a key of a `v-bind="{ … }"` object) and on every component that spreads its attributes into one (`IconButton`; the list is derived, so a new wrapper is covered), reading the defaults from `app.config.ts` itself. Inside a `UFieldGroup` or `UButtonGroup` it does not check `size`: the group sets the size there, so an explicit `size` overrides the group rather than restating the default. It reads template tags only, so a `ButtonProps` object (a toast's `actions`, a modal's `:close`) is not checked. A site that must keep a literal says why with a `variant-default-ok:` comment on its own line, directly above the tag; it waives that tag only.
 
@@ -605,6 +611,14 @@ The seams, and what a new feature should use rather than reading the store ad ho
 - **A surface that narrows inline** reads `useUiRoleStore().fullSurface` (the frame header's bug-hunt
   button, the palette's per-connection integration commands). Same rule as the tier: what remains
   must be exactly what the full surface would have shown, only less of it.
+- **A setup prompt** (a "configure this" card over the board) goes through `canActOnSetup`
+  (`app/utils/setupAudience.ts`) with the caller from `useSetupActor()`: it combines the role's
+  surface with the board and account grants and the owner the server reports for the gap
+  (`infraSetupOwners`). A caller who cannot act gets no card. If the gap stops runs they could start,
+  it reaches them as one line saying how it gets fixed (`blockingSetupNotice`): the owner to ask, or
+  the role switch when they hold the grant and only the designer surface hides the card. A viewer
+  gets nothing, and the line honours the card's dismissals. Never a button that opens a screen the
+  caller's save is refused on.
 - **A tutorial tour whose step clicks a non-`intake` nav entry declares
   `TUTORIAL_REQUIREMENTS.fullSurface`.** Which tours those are is not a judgement call:
   `tutorial-tours.spec.ts` derives the pairing from `navItemVisible`, so a tour that gains such a

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -157,7 +157,7 @@ async function disconnect() {
           <UButton
             v-if="connected"
             color="error"
-            variant="ghost"
+            variant="soft"
             icon="i-lucide-unplug"
             @click="disconnect"
           >

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -105,6 +105,7 @@ async function suppress(serviceId: string) {
 
           <div class="mt-2 flex items-center gap-2">
             <UButton
+              color="neutral"
               v-if="s.contracts.length"
               size="xs"
               variant="ghost"
@@ -141,6 +142,7 @@ async function suppress(serviceId: string) {
                deployment registered in code; the board's own row is managed in the registry tab,
                where deleting it is the honest action. -->
           <IconButton
+            color="neutral"
             v-if="s.tier !== 'workspace'"
             icon="i-lucide-eye-off"
             size="xs"

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -205,6 +205,7 @@ async function remove(service: FoundationalService) {
         </div>
         <div class="flex shrink-0 gap-1">
           <IconButton
+            color="neutral"
             v-if="!s.sourceId"
             icon="i-lucide-pencil"
             size="xs"
@@ -310,7 +311,13 @@ async function remove(service: FoundationalService) {
               :placeholder="t('foundational.registry.contractBodyPlaceholder')"
             />
           </div>
-          <UButton icon="i-lucide-plus" size="xs" variant="ghost" @click="addContract">
+          <UButton
+            color="neutral"
+            icon="i-lucide-plus"
+            size="xs"
+            variant="ghost"
+            @click="addContract"
+          >
             {{ t('foundational.registry.addContract') }}
           </UButton>
         </div>
@@ -325,7 +332,7 @@ async function remove(service: FoundationalService) {
           >
             {{ t('foundational.registry.save') }}
           </UButton>
-          <UButton size="sm" variant="ghost" @click="editing = null">
+          <UButton color="neutral" size="sm" variant="ghost" @click="editing = null">
             {{ t('foundational.registry.cancel') }}
           </UButton>
         </div>

package/app/components/foundational/FoundationalServiceSources.vue

@@ -297,6 +297,7 @@ async function unlink(id: string) {
       </UBadge>
       <div class="ms-auto flex gap-1">
         <IconButton
+          color="neutral"
           icon="i-lucide-search-check"
           size="xs"
           variant="ghost"
@@ -305,6 +306,7 @@ async function unlink(id: string) {
           @click="check(s.id)"
         />
         <IconButton
+          color="neutral"
           icon="i-lucide-refresh-cw"
           size="xs"
           variant="ghost"

package/app/components/foundational/FoundationalSuppressions.vue

@@ -81,6 +81,7 @@ async function restore(serviceId: string) {
         </p>
       </div>
       <UButton
+        color="neutral"
         icon="i-lucide-eye"
         size="xs"
         variant="ghost"

package/app/components/fragments/FragmentLibraryManager.vue

@@ -752,6 +752,7 @@ async function unlinkSource(id: string) {
               <!-- Editing a repo-SOURCED fragment locally would be overwritten on the next sync,
                    so only hand-authored fragments are editable here. -->
               <IconButton
+                color="neutral"
                 v-if="!f.source"
                 icon="i-lucide-pencil"
                 size="xs"
@@ -868,6 +869,7 @@ async function unlinkSource(id: string) {
           </div>
           <div class="ms-auto flex gap-1">
             <IconButton
+              color="neutral"
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
@@ -1026,6 +1028,7 @@ async function unlinkSource(id: string) {
           </UBadge>
           <div class="ms-auto flex gap-1">
             <UButton
+              color="neutral"
               icon="i-lucide-search-check"
               size="xs"
               variant="ghost"
@@ -1033,6 +1036,7 @@ async function unlinkSource(id: string) {
               @click="checkSource(s.id)"
             />
             <UButton
+              color="neutral"
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"

package/app/components/github/GitHubOnboarding.vue

@@ -3,8 +3,11 @@
 // has no connection yet. cat-factory's whole flow runs on a connected repository host (agents
 // open pull/merge requests on the user's repos), so the board is withheld until the workspace
 // connects one. <VcsConnectSurfaces> renders whichever connect methods the deployment serves; a
-// "Sign out" escape hatch avoids trapping a user who needs to switch accounts.
+// "Sign out" escape hatch avoids trapping a user who needs to switch accounts. The board switcher is
+// the other escape: the gate replaces the whole board, sidebar included, so without it a member
+// who landed on a board they cannot connect had no way to reach a board they can.
 import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
+import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
 const { t } = useI18n()
@@ -39,6 +42,11 @@ const title = computed(() =>
 
       <VcsConnectSurfaces :app-intro="t('github.onboarding.appIntro')" />
 
+      <div class="mt-6 border-t border-default pt-4" data-testid="vcs-onboarding-switch-board">
+        <p class="mb-2 text-xs text-muted">{{ t('vcs.onboarding.switchBoard') }}</p>
+        <BoardSwitcher standalone />
+      </div>
+
       <p
         v-if="auth.required && auth.user"
         class="mt-6 border-t border-default pt-4 text-center text-xs text-dimmed"

package/app/components/github/RepoTreeBrowser.vue

@@ -207,6 +207,7 @@ watch(
           class="flex items-center justify-between gap-2 px-3 py-1.5"
         >
           <UButton
+            color="neutral"
             variant="ghost"
             class="flex items-center gap-2 truncate p-0 text-sm text-default hover:bg-transparent hover:text-primary"
             @click="browseTo(entry.path)"
@@ -257,6 +258,7 @@ watch(
               @update:model-value="toggleAllFiles"
             />
             <UButton
+              color="neutral"
               variant="ghost"
               class="p-0 text-xs text-muted hover:bg-transparent hover:text-primary"
               @click="toggleAllFiles"
@@ -283,6 +285,7 @@ watch(
                 @update:model-value="pick(entry.path)"
               />
               <UButton
+                color="neutral"
                 variant="ghost"
                 class="flex items-center gap-2 truncate p-0 text-sm hover:bg-transparent hover:text-primary"
                 :class="isPicked(entry.path) ? 'text-primary' : 'text-toned'"

package/app/components/guidedReview/GuidedReviewDraftCard.vue

@@ -114,7 +114,13 @@ async function discard(): Promise<void> {
         <UButton size="sm" :loading="saving" @click="save">
           {{ t('guidedReview.drafts.save') }}
         </UButton>
-        <UButton size="sm" variant="ghost" :disabled="saving" @click="editing = false">
+        <UButton
+          color="neutral"
+          size="sm"
+          variant="ghost"
+          :disabled="saving"
+          @click="editing = false"
+        >
           {{ t('guidedReview.drafts.cancel') }}
         </UButton>
       </div>
@@ -126,13 +132,19 @@ async function discard(): Promise<void> {
         {{ t('guidedReview.drafts.postFailed') }}: {{ draft.postError }}
       </p>
       <div v-if="editable" class="mt-2 flex gap-2">
-        <UButton size="xs" variant="ghost" icon="i-lucide-pencil" @click="startEdit">
+        <UButton
+          color="neutral"
+          size="xs"
+          variant="ghost"
+          icon="i-lucide-pencil"
+          @click="startEdit"
+        >
           {{ t('guidedReview.drafts.edit') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           size="xs"
-          variant="ghost"
-          color="neutral"
           icon="i-lucide-trash-2"
           :loading="saving"
           @click="discard"

package/app/components/guidedReview/GuidedReviewModal.vue

@@ -218,6 +218,7 @@ const title = computed(() =>
               <span class="max-w-48 truncate">{{ threadTitle(tab) }}</span>
             </UButton>
             <UButton
+              color="neutral"
               v-if="!draftOpen"
               size="sm"
               variant="ghost"

package/app/components/guidedReview/GuidedReviewOverview.vue

@@ -36,6 +36,7 @@ const SEVERITY_COLOR = { high: 'error', medium: 'warning', low: 'neutral' } as c
       </UBadge>
       <span class="flex-1" />
       <UButton
+        color="neutral"
         size="xs"
         variant="ghost"
         icon="i-lucide-refresh-cw"

package/app/components/humanTest/HumanTestWindow.vue

@@ -223,9 +223,9 @@ const canDestroy = computed(
               {{ t('humanTest.actions.recreate') }}
             </UButton>
             <UButton
-              size="xs"
+              color="error"
               variant="soft"
-              color="neutral"
+              size="xs"
               icon="i-lucide-trash-2"
               :disabled="busy || !canDestroy || !access.canExecuteRuns.value"
               :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
@@ -281,6 +281,7 @@ const canDestroy = computed(
               class="w-full"
             />
             <UButton
+              variant="soft"
               size="sm"
               color="warning"
               icon="i-lucide-wrench"

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -343,7 +343,7 @@ async function onDiscard() {
       <UButton
         v-if="canDiscard"
         color="error"
-        variant="ghost"
+        variant="soft"
         size="sm"
         icon="i-lucide-trash-2"
         :loading="resetting"

package/app/components/judge/JudgeResultView.vue

@@ -280,6 +280,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
               {{ t('judge.stop') }}
             </UButton>
             <UButton
+              variant="soft"
               size="sm"
               color="warning"
               icon="i-lucide-undo-2"

package/app/components/layout/AccountDeploymentSettings.vue

@@ -483,9 +483,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.slackOAuthConfigured"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingSlack"
           @click="clearSlack"
@@ -538,9 +538,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.linearOAuthConfigured"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingLinear"
           @click="clearLinear"
@@ -593,9 +593,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.figmaOAuthConfigured"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingFigma"
           @click="clearFigma"
@@ -644,9 +644,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.webSearch"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingWeb"
           @click="clearWeb"

package/app/components/layout/AccountTeamSettings.vue

@@ -53,7 +53,7 @@ function invitationStatusLabel(status: InvitationStatus): string {
 }
 
 /** Whether the signed-in caller is an admin of this account (drives edit affordances). */
-const isAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
+const isAdmin = computed(() => accounts.isActiveAccountAdmin)
 /**
  * Members / roles / invitations are org-scoped — the backend rejects membership on a
  * personal account. For a personal account we show a "create an organization" CTA in
@@ -328,7 +328,7 @@ async function disconnectEmail() {
             </template>
             <template #from>{{ accounts.emailConnection.fromAddress }}</template>
           </i18n-t>
-          <UButton size="xs" color="error" variant="ghost" :loading="busy" @click="disconnectEmail">
+          <UButton size="xs" color="error" variant="soft" :loading="busy" @click="disconnectEmail">
             {{ t('layout.accountTeam.email.disconnect') }}
           </UButton>
         </div>

package/app/components/layout/BoardSwitcher.vue

@@ -12,7 +12,16 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 // account row folds away — it is a label with a menu duplicated inside the board menu's
 // reach — and the board button keeps only its glyph. Both dropdowns are unchanged, so
 // switching boards never requires expanding the sidebar first.
-withDefaults(defineProps<{ collapsed?: boolean }>(), { collapsed: false })
+//
+// `standalone` is for a host OUTSIDE the board page (the repository-host gate), where the
+// page-level dialogs are not mounted. The items that open one are left out there: "Account
+// settings" opens `AccountSettingsPanel` and "Delete board" awaits `ConfirmDialog`, so on the gate
+// both would do nothing and then fire once a board page mounted, the delete against the board that
+// was active when it was asked.
+const props = withDefaults(defineProps<{ collapsed?: boolean; standalone?: boolean }>(), {
+  collapsed: false,
+  standalone: false,
+})
 
 const { t } = useI18n()
 
@@ -65,14 +74,19 @@ const accountItems = computed<DropdownMenuItem[][]>(() => [
     },
     // Account settings: the unified per-account panel (team + roles + invitations + email
     // sender + account-tier fragment library). The panel itself handles personal accounts
-    // (prompting to create an org for the team tab), so this is not gated.
-    {
-      label: t('layout.boardSwitcher.account.settings'),
-      icon: 'i-lucide-settings',
-      onSelect: () => ui.openAccountSettings(),
-    },
+    // (prompting to create an org for the team tab), so this is not gated by role; it is left out
+    // only where the panel is not mounted (`standalone`).
+    ...(props.standalone
+      ? []
+      : [
+          {
+            label: t('layout.boardSwitcher.account.settings'),
+            icon: 'i-lucide-settings',
+            onSelect: () => ui.openAccountSettings(),
+          },
+        ]),
     // Admins can set the account-wide default provider new services inherit.
-    ...(accounts.activeAccount?.roles?.includes('admin')
+    ...(accounts.isActiveAccountAdmin
       ? [
           {
             label: t('layout.boardSwitcher.account.defaultProvider'),
@@ -122,12 +136,17 @@ const boardItems = computed<DropdownMenuItem[][]>(() => [
             icon: 'i-lucide-pencil',
             onSelect: () => openPrompt('rename'),
           },
-          {
-            label: t('layout.boardSwitcher.board.delete'),
-            icon: 'i-lucide-trash-2',
-            color: 'error' as const,
-            onSelect: () => void removeBoard(),
-          },
+          // Delete confirms through the page's `ConfirmDialog`, absent in `standalone`.
+          ...(props.standalone
+            ? []
+            : [
+                {
+                  label: t('layout.boardSwitcher.board.delete'),
+                  icon: 'i-lucide-trash-2',
+                  color: 'error' as const,
+                  onSelect: () => void removeBoard(),
+                },
+              ]),
         ]
       : []),
   ],

package/app/components/layout/DefaultTestEnvBanner.vue

@@ -22,14 +22,17 @@ const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const settingsStore = useWorkspaceSettingsStore()
 const { canManageSettings } = useWorkspaceAccess()
+const uiRole = useUiRoleStore()
 
 // Only prompt someone who can actually answer. A member/viewer cannot write workspace settings
 // (the endpoint is `settings.manage`-gated), so for them this would be an un-actionable nag
-// pointing at a screen that would refuse their save.
+// pointing at a screen that would refuse their save. The designer surface never configures the
+// platform, so it is kept off there too, whatever the grant.
 const show = computed(
   () =>
     workspace.ready &&
     canManageSettings.value &&
+    uiRole.fullSurface &&
     needsDefaultProvisioningChoice(settingsStore.settings) &&
     !ui.defaultProvisionDismissed,
 )

package/app/components/layout/InfraSetupBanner.vue

@@ -6,6 +6,11 @@
 // runtime whose account picked no backend — incl. Cloudflare without an ARTIFACT_BUCKET binding;
 // ephemeral test environments on any runtime that wires the integration).
 //
+// Audience: a card renders only for a caller who can act on its area, per the server-reported
+// owner (`infraSetupOwners`) and `canActOnSetup`. A caller who cannot (a member, a viewer, the
+// designer surface, or anyone when the operator owns the gap) sees one compact line instead, and
+// only for a gap that stops every run (`InfraSetupNotice`).
+//
 // 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
@@ -52,11 +57,14 @@ import {
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { InfraSetupArea, InfraSetupStatus } from '~/types/domain'
 import { infraSetupDismissalKey, type InfraSetupCardKind } from '~/utils/infraSetup'
+import { blockingSetupNotice, canActOnSetup } from '~/utils/setupAudience'
+import InfraSetupNotice from '~/components/layout/InfraSetupNotice.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const auth = useAuthStore()
 const workspace = useWorkspaceStore()
+const { actor } = useSetupActor()
 
 // 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.
@@ -140,6 +148,9 @@ const visible = computed<AreaCard[]>(() => {
   return AREAS.filter((area) => {
     const kind = cardKind(status[area])
     if (!kind) return false
+    // A card is for the people who can act on it. Everyone else hears about a gap only when it
+    // stops their own work, through the one line below (`blockingSetupNotice`).
+    if (!canActOnSetup(workspace.infraSetupOwners?.[area], actor.value)) return false
     // Both dismissals are keyed by the CLAIM, not by the area: silencing "you haven't configured
     // this" must not also silence "you configured it and it is now down". The permanent dismissal
     // only ever covers a setup gap (`dismissPermanently` is offered nowhere else).
@@ -152,6 +163,18 @@ const visible = computed<AreaCard[]>(() => {
   }))
 })
 
+// The one line for a caller who cannot act on a gap that stops every run. It honours BOTH
+// dismissals of the card it stands in for, keyed by the same claim: someone who said "don't
+// notify me again" on the card (before their role changed, say) is not nagged again by the line.
+const notice = computed(() => {
+  const found = blockingSetupNotice(workspace.infraSetup, workspace.infraSetupOwners, actor.value)
+  if (!found) return null
+  if (ui.infraSetupSessionDismissed.includes(infraSetupDismissalKey(found.area, found.kind))) {
+    return null
+  }
+  return found.kind === 'setup' && dismissedForUser.value.includes(found.area) ? null : found
+})
+
 /** Which card an area's status raises, or null when it raises none (`configured`/`not_applicable`). */
 function cardKind(status: InfraSetupStatus): InfraSetupCardKind | null {
   if (isInfraSetupHealthStatus(status)) return 'outage'
@@ -169,7 +192,7 @@ function titleKey(card: AreaCard): string {
  * The dismiss dropdown: the product wants the user asked WHICH kind of dismissal on close. An
  * outage offers the session option ONLY — see the fork note at the top of this file.
  */
-function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
+function dismissMenu(card: Pick<AreaCard, 'area' | 'kind'>): DropdownMenuItem[][] {
   const session = {
     label: t('layout.infraSetupBanner.dismiss.session'),
     icon: 'i-lucide-clock',
@@ -195,11 +218,12 @@ function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
          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"
+      v-if="visible.length > 0 || notice"
       class="flex w-full flex-col items-center gap-2"
       role="status"
       aria-live="polite"
     >
+      <InfraSetupNotice v-if="notice" :notice="notice" :dismiss-menu="dismissMenu(notice)" />
       <!-- An OUTAGE reads red, a setup gap amber: one is something breaking now, the other is
            something never switched on, and a reader has to be able to tell at a glance. -->
       <div

package/app/components/layout/InfraSetupNotice.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// The one line a caller sees for a setup gap they cannot fix from where they are, when it stops
+// their runs. It replaces the full card (and its "Configure" button that would open a screen their
+// save is refused on) with two facts: what does not work, and how it gets fixed. Compact on
+// purpose: the caller has nothing to do here, so it must not cover the board the way an actionable
+// card may.
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { BlockingInfraArea, SetupNotice, SetupRemedy } from '~/utils/setupAudience'
+
+defineProps<{
+  notice: SetupNotice
+  /** The card's own session / permanent choice, built by the banner so both close the same claim. */
+  dismissMenu: DropdownMenuItem[][]
+}>()
+
+const { t } = useI18n()
+
+// Exhaustive over the blocking areas and the remedies, so a new member of either fails typecheck
+// here rather than rendering a raw key.
+const STATE_KEYS: Record<BlockingInfraArea, Record<SetupNotice['kind'], string>> = {
+  agentExecutor: {
+    setup: 'layout.infraSetupNotice.agentExecutor.setup',
+    outage: 'layout.infraSetupNotice.agentExecutor.outage',
+  },
+}
+const REMEDY_KEYS: Record<SetupRemedy, string> = {
+  workspace_admin: 'layout.infraSetupNotice.owner.workspace_admin',
+  account_admin: 'layout.infraSetupNotice.owner.account_admin',
+  operator: 'layout.infraSetupNotice.owner.operator',
+  full_surface: 'layout.infraSetupNotice.fullSurface',
+}
+</script>
+
+<template>
+  <div
+    class="pointer-events-auto flex w-full max-w-3xl items-center gap-3 rounded-xl border px-4 py-2 shadow-lg backdrop-blur"
+    :class="
+      notice.kind === 'outage'
+        ? 'border-app-error-500/50 bg-app-error-950/90'
+        : 'border-app-warning-500/50 bg-app-warning-950/90'
+    "
+    :data-testid="`infra-setup-notice-${notice.area}`"
+    :data-infra-remedy="notice.remedy"
+  >
+    <UIcon
+      :name="notice.kind === 'outage' ? 'i-lucide-plug-zap' : 'i-lucide-server-off'"
+      class="h-5 w-5 shrink-0"
+      :class="notice.kind === 'outage' ? 'text-app-error-400' : 'text-app-warning-400'"
+    />
+    <p
+      class="min-w-0 flex-1 text-sm"
+      :class="notice.kind === 'outage' ? 'text-app-error-100' : 'text-app-warning-100'"
+    >
+      {{ t(STATE_KEYS[notice.area][notice.kind]) }}
+      <span class="opacity-80">{{ t(REMEDY_KEYS[notice.remedy]) }}</span>
+    </p>
+    <UDropdownMenu :items="dismissMenu" :content="{ align: 'end' }">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-x"
+        class="shrink-0"
+        :aria-label="t('common.close')"
+        :data-testid="`infra-setup-notice-dismiss-${notice.area}`"
+      />
+    </UDropdownMenu>
+  </div>
+</template>