@cat-factory/app 0.310.3 → 0.311.1

package/app/components/panels/OperatorDashboardPanel.vue

@@ -7,6 +7,7 @@ import { formatMs } from '~/utils/observability'
 import { FAILURE_KIND_KEYS, isAgentFailureKind } from '~/utils/failureKinds'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // Deployment-level (platform-operator) observability dashboard: the aggregate health of the
 // active account's runs — outcome totals + success rate, a time-bucketed outcome trend, the
@@ -122,24 +123,29 @@ watch(
     <Transition name="obs-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-[60] flex flex-col bg-app-950/96 backdrop-blur-sm"
+        class="z-[60] flex-col bg-app-950/96 backdrop-blur-sm"
+        :class="FULL_BLEED_TAKEOVER_CLASS"
         role="dialog"
         aria-modal="true"
         data-testid="operator-dashboard"
       >
-        <header class="flex items-center gap-3 border-b border-default px-6 py-4">
+        <header class="flex flex-wrap items-center gap-3 border-b border-default px-6 py-4">
           <div
             class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-app-info-500/15"
           >
             <UIcon name="i-lucide-gauge" class="h-5 w-5 text-app-info-400" />
           </div>
-          <div class="min-w-0">
+          <div class="min-w-0 flex-1">
             <h1 class="truncate text-base font-semibold text-highlighted">
               {{ t('platformObservability.title') }}
             </h1>
             <p v-if="accountName" class="truncate text-xs text-dimmed">{{ accountName }}</p>
           </div>
-          <div class="ms-auto flex items-center gap-1.5">
+          <!-- Below lg the window tabs take their own row, so refresh and close stay on screen.
+               The row scrolls sideways when the tabs are wider than the phone. -->
+          <div
+            class="order-last flex w-full min-w-0 items-center gap-1.5 overflow-x-auto lg:order-none lg:w-auto"
+          >
             <UTabs
               :model-value="platform.window"
               :items="WINDOWS"
@@ -154,31 +160,33 @@ watch(
                 <span :data-testid="`operator-window-${item.value}`">{{ item.label }}</span>
               </template>
             </UTabs>
-            <IconButton
-              color="neutral"
-              variant="ghost"
-              icon="i-lucide-refresh-cw"
-              :label="t('platformObservability.refresh')"
-              :ui="{
-                base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
-                leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
-              }"
-              data-testid="operator-refresh"
-              @click="refresh"
-            />
-            <IconButton
-              color="neutral"
-              variant="ghost"
-              icon="i-lucide-x"
-              :label="t('platformObservability.close')"
-              :ui="{
-                base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
-                leadingIcon: 'h-4 w-4',
-              }"
-              data-testid="operator-close"
-              @click="close"
-            />
           </div>
+          <IconButton
+            class="lg:-ms-1.5"
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-refresh-cw"
+            :label="t('platformObservability.refresh')"
+            :ui="{
+              base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
+              leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
+            }"
+            data-testid="operator-refresh"
+            @click="refresh"
+          />
+          <IconButton
+            class="-ms-1.5"
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-x"
+            :label="t('platformObservability.close')"
+            :ui="{
+              base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
+              leadingIcon: 'h-4 w-4',
+            }"
+            data-testid="operator-close"
+            @click="close"
+          />
         </header>
 
         <div class="flex-1 overflow-y-auto px-6 py-5">

package/app/components/panels/ReportsPanel.vue

@@ -21,6 +21,7 @@ import {
 import ReportsSpendBreakdown from '~/components/panels/ReportsSpendBreakdown.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // Reports: cross-cutting usage analytics for the active account — where the spend and the
 // work actually go. Spend per model and agent kind, spend + run activity per workspace /
@@ -196,7 +197,8 @@ watch(
     <Transition name="reports-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-[60] flex flex-col bg-app-950/96 backdrop-blur-sm"
+        class="z-[60] flex-col bg-app-950/96 backdrop-blur-sm"
+        :class="FULL_BLEED_TAKEOVER_CLASS"
         role="dialog"
         aria-modal="true"
         data-testid="reports-panel"

package/app/components/panels/ResultWindowShell.logic.ts

@@ -11,10 +11,10 @@ export type ResultWindowWidth = '3xl' | '4xl' | '5xl' | 'full'
 
 /**
  * The bucket → cap mapping. `full` is deliberately `max-w-none` rather than a bigger number:
- * the panel's `w-full` then spans the backdrop, which the variant insets by one gutter (`m-4`
- * stretched, `p-4` centered), so the window fills the screen and still reads as a window rather
- * than a repaint of the app. A `Record` over the union, so a new bucket fails to compile until
- * it is mapped.
+ * the panel's `w-full` then spans the backdrop, which insets it by one gutter
+ * (`WINDOWED_OVERLAY_CLASS`, `utils/safeArea.ts`), so the window fills the screen and still reads
+ * as a window rather than a repaint of the app. A `Record` over the union, so a new bucket fails to
+ * compile until it is mapped.
  */
 export const RESULT_WINDOW_WIDTH_CLASS: Record<ResultWindowWidth, string> = {
   '3xl': 'max-w-3xl',

package/app/components/panels/ResultWindowShell.vue

@@ -40,6 +40,7 @@ import {
   RESULT_WINDOW_WIDTH_CLASS,
   type ResultWindowWidth,
 } from '~/components/panels/ResultWindowShell.logic'
+import { WINDOWED_OVERLAY_CLASS } from '~/utils/safeArea'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 
 /** A pipeline step reference — passed by step-result windows to surface the shared
@@ -255,13 +256,17 @@ const chipClass = computed(() =>
 )
 
 const backdropClass = computed(() => [
-  'fixed inset-0 z-50 flex max-h-[100dvh] justify-center bg-app-950/70 backdrop-blur-sm',
-  props.variant === 'centered' ? 'items-center p-4' : 'items-stretch',
+  WINDOWED_OVERLAY_CLASS,
+  'z-50 justify-center bg-app-950/70 backdrop-blur-sm',
+  props.variant === 'centered' ? 'items-center' : 'items-stretch',
 ])
+// The centered cap is the smaller of 90dvh and the backdrop's padded box: with a large inset (a
+// Dynamic Island in standalone mode) the gutter alone can exceed 10% of the height, and a window
+// sized to 90dvh would then push its top edge back under the status bar.
 const panelClass = computed(() => [
   'flex w-full flex-col overflow-hidden rounded-2xl border border-default bg-default shadow-2xl',
   RESULT_WINDOW_WIDTH_CLASS[props.width],
-  props.variant === 'centered' ? 'max-h-[90dvh]' : 'm-4',
+  props.variant === 'centered' && 'max-h-[min(90dvh,100%)]',
 ])
 </script>
 

package/app/components/providers/AiProviderOnboardingModal.vue

@@ -9,6 +9,7 @@ import { computed } from 'vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
+const { canManageSecrets } = useWorkspaceAccess()
 
 const open = computed({
   get: () => ui.aiProviderSetupOpen,
@@ -49,7 +50,12 @@ const routes = computed<Route[]>(() => [
     title: t('providers.onboarding.routes.keys.title'),
     body: t('providers.onboarding.routes.keys.body'),
     cta: t('providers.onboarding.routes.keys.cta'),
-    onSelect: () => go(ui.openVendorCredentials),
+    // The default tab is the workspace's pooled subscriptions, a `secrets.manage` write. Anyone else
+    // lands on the direct keys, which open on their own "My keys" scope (see ApiKeysSection).
+    onSelect: () =>
+      go(() =>
+        canManageSecrets.value ? ui.openVendorCredentials() : ui.openVendorCredentials('direct'),
+      ),
   },
   {
     icon: 'i-lucide-route',

package/app/components/providers/ApiKeysSection.vue

@@ -37,8 +37,27 @@ const { confirmAction, toastDone } = useConfirmAction()
 /** Account-wide mode (single account scope) vs the default workspace/user toggle. */
 const isAccount = computed(() => !!props.accountId)
 
-/** Which store the form writes to: the shared workspace keys or the user's own. */
-const scope = ref<'workspace' | 'user'>('workspace')
+/**
+ * Which store the form writes to: the shared workspace keys or the user's own. The DEFAULT follows
+ * the caller's grant on the active board: the workspace for whoever may write it (`secrets.manage`)
+ * and "My keys" for everyone else, so a first save lands instead of being refused. It is derived,
+ * not captured once, because this section stays mounted while the board (and so the grant)
+ * changes. A scope the user picks by hand wins until they move to another board.
+ */
+const { canManageSecrets } = useWorkspaceAccess()
+const pickedScope = ref<'workspace' | 'user' | null>(null)
+const scope = computed<'workspace' | 'user'>({
+  get: () => pickedScope.value ?? (canManageSecrets.value ? 'workspace' : 'user'),
+  set: (value) => {
+    pickedScope.value = value
+  },
+})
+watch(
+  () => workspace.workspaceId,
+  () => {
+    pickedScope.value = null
+  },
+)
 
 // "My keys" (user scope) are stored per-user, so they need a signed-in user. Block just
 // that scope when there's none (a deployment without sign-in); workspace/account keys are

package/app/components/settings/ModelConfigurationPanel.vue

@@ -24,6 +24,7 @@ import ProviderPreferenceEditor from '~/components/settings/ProviderPreferenceEd
 import { showOverrideField } from '~/utils/uiMode'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -300,7 +301,8 @@ async function save() {
     <Transition name="reader-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-50 flex max-h-[100dvh] flex-col bg-app-950/96 backdrop-blur-sm"
+        class="z-50 flex-col bg-app-950/96 backdrop-blur-sm"
+        :class="FULL_BLEED_TAKEOVER_CLASS"
         role="dialog"
         aria-modal="true"
       >

package/app/components/vcs/VcsConnectSurfaces.vue

@@ -27,6 +27,12 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const github = useGitHubStore()
+const { canManageIntegrations } = useWorkspaceAccess()
+
+// Connecting is an `integrations.manage` write, and the connect-options read is gated the same way,
+// so for anyone else the options come back empty. That empty list says nothing about the
+// deployment: name the board admin instead of telling a member the operator configured nothing.
+const adminRequired = computed(() => !canManageIntegrations.value)
 
 // Whether the deployment serves neither surface. Rendered as a statement rather than an empty
 // box: "nothing is configured" and "we couldn't read what is configured" both land here, and a
@@ -36,23 +42,33 @@ const nothingConfigured = computed(() => !github.canConnectGitHubApp && !github.
 
 <template>
   <div class="space-y-3">
-    <template v-if="github.canConnectGitHubApp">
-      <p v-if="props.appIntro" class="text-sm text-muted">{{ props.appIntro }}</p>
-      <GitHubConnect />
-    </template>
-
-    <USeparator
-      v-if="github.canConnectGitHubApp && github.canConnectGitLabPat"
-      :label="t('vcs.connect.or')"
-    />
-
-    <GitLabConnect v-if="github.canConnectGitLabPat" />
-
     <p
-      v-if="nothingConfigured"
+      v-if="adminRequired"
       class="rounded-md border border-dashed border-default px-3 py-3 text-sm text-muted"
+      data-testid="vcs-connect-admin-required"
     >
-      {{ t('vcs.connect.noneConfigured') }}
+      {{ t('vcs.connect.adminRequired') }}
     </p>
+
+    <template v-else>
+      <template v-if="github.canConnectGitHubApp">
+        <p v-if="props.appIntro" class="text-sm text-muted">{{ props.appIntro }}</p>
+        <GitHubConnect />
+      </template>
+
+      <USeparator
+        v-if="github.canConnectGitHubApp && github.canConnectGitLabPat"
+        :label="t('vcs.connect.or')"
+      />
+
+      <GitLabConnect v-if="github.canConnectGitLabPat" />
+
+      <p
+        v-if="nothingConfigured"
+        class="rounded-md border border-dashed border-default px-3 py-3 text-sm text-muted"
+      >
+        {{ t('vcs.connect.noneConfigured') }}
+      </p>
+    </template>
   </div>
 </template>

package/app/composables/useSetupActor.ts

@@ -0,0 +1,25 @@
+import { computed } from 'vue'
+import type { SetupActor } from '~/utils/setupAudience'
+
+/**
+ * The caller as a setup prompt sees them: which app surface they chose, and the board and account
+ * grants that decide whether a "configure this" button would let them save. Every input is read
+ * from the source the nav gates read too (the role store, `useWorkspaceAccess`, and the accounts
+ * store's `isActiveAccountAdmin`), so a setup prompt and the sidebar cannot disagree about who the
+ * caller is.
+ */
+export function useSetupActor() {
+  const access = useWorkspaceAccess()
+  const uiRole = useUiRoleStore()
+  const accounts = useAccountsStore()
+
+  const actor = computed<SetupActor>(() => ({
+    fullSurface: uiRole.fullSurface,
+    canManageIntegrations: access.canManageIntegrations.value,
+    canExecuteRuns: access.canExecuteRuns.value,
+    isAccountAdmin: accounts.isActiveAccountAdmin,
+    accountsEnabled: accounts.enabled,
+  }))
+
+  return { actor }
+}

package/app/composables/useWorkspaceAccess.ts

@@ -16,7 +16,7 @@ import type { WorkspacePermission, WorkspaceRole } from '~/types/domain'
  * SPA never hides an affordance the backend would have permitted.
  *
  * This is deliberately distinct from the ACCOUNT-scoped admin checks
- * (`accounts.activeAccount?.roles?.includes('admin')`), which stay account-scoped: this
+ * (`accounts.isActiveAccountAdmin`), which stay account-scoped: this
  * composable answers "what can you do inside THIS board", the account check answers "what
  * can you do to the tenant".
  */

package/app/modular/nav-gates.ts

@@ -75,7 +75,6 @@ export function createNavGates(): NavGates {
       providerConnections.isAvailable('runner-pool') ||
       providerConnections.isAvailable('environment'),
   )
-  const isAccountAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
 
   return {
     get canWriteBoard() {
@@ -105,7 +104,7 @@ export function createNavGates(): NavGates {
       return accounts.enabled
     },
     get isAccountAdmin() {
-      return isAccountAdmin.value
+      return accounts.isActiveAccountAdmin
     },
     get advancedMode() {
       return uiMode.isAdvanced

package/app/stores/accounts.ts

@@ -35,6 +35,13 @@ export const useAccountsStore = defineStore(
     )
     /** Whether accounts exist (auth on); gates the switcher UI. */
     const enabled = computed(() => accounts.value.length > 0)
+    /**
+     * Whether the caller is an admin of the ACTIVE account. The one reading of it, so the nav gates,
+     * the setup prompts and the account panels cannot disagree about who the account admin is.
+     */
+    const isActiveAccountAdmin = computed(
+      () => activeAccount.value?.roles?.includes('admin') ?? false,
+    )
 
     /** Load the user's accounts and resolve the active one (persisted or first). */
     async function load() {
@@ -209,6 +216,7 @@ export const useAccountsStore = defineStore(
       activeAccountId,
       activeAccount,
       enabled,
+      isActiveAccountAdmin,
       ready,
       members,
       invitations,

package/app/stores/workspace/infraSetup.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { applyInfraSetupTransition, isInfraSetupHealthStatus } from '@cat-factory/contracts'
-import type { InfraSetup, InfraSetupArea, InfraSetupStatus } from '~/types/domain'
+import type { InfraSetup, InfraSetupArea, InfraSetupOwners, InfraSetupStatus } from '~/types/domain'
 
 // The workspace store's infra-setup slice: the per-area setup/health projection the setup banner
 // renders, and the live `infraSetup` event patch the reachability watcher pushes into it. Its own
@@ -32,8 +32,16 @@ export function createInfraSetupState() {
    */
   const infraSetupDetails = ref<Partial<Record<InfraSetupArea, string>>>({})
 
-  function hydrate(next: InfraSetup | null | undefined) {
+  /**
+   * Who can close each area's gap (workspace admin, account admin or the operator), from the
+   * snapshot. Static for the life of a deployment, so the live event never touches it. Null on an
+   * older backend, which the banner reads as "owner unknown".
+   */
+  const infraSetupOwners = ref<InfraSetupOwners | null>(null)
+
+  function hydrate(next: InfraSetup | null | undefined, owners?: InfraSetupOwners | null) {
     infraSetup.value = next ?? null
+    infraSetupOwners.value = owners ?? null
     // The reasons belong to the live pushes this session observed, so an authoritative snapshot
     // supersedes them: keeping one would caption a freshly-read status with a stale probe.
     infraSetupDetails.value = {}
@@ -73,5 +81,5 @@ export function createInfraSetupState() {
     if (!isInfraSetupHealthStatus(status)) useUiStore().clearInfraSetupSessionDismissal(area)
   }
 
-  return { infraSetup, infraSetupDetails, hydrate, patchInfraSetup }
+  return { infraSetup, infraSetupDetails, infraSetupOwners, hydrate, patchInfraSetup }
 }

package/app/stores/workspace.ts

@@ -59,6 +59,7 @@ export const useWorkspaceStore = defineStore(
     const {
       infraSetup,
       infraSetupDetails,
+      infraSetupOwners,
       hydrate: hydrateInfraSetup,
       patchInfraSetup,
     } = createInfraSetupState()
@@ -98,7 +99,7 @@ export const useWorkspaceStore = defineStore(
       accountSpend.value = snapshot.accountSpend ?? null
       userSpend.value = snapshot.userSpend ?? null
       budgetCaps.value = snapshot.budgetCaps ?? null
-      hydrateInfraSetup(snapshot.infraSetup)
+      hydrateInfraSetup(snapshot.infraSetup, snapshot.infraSetupOwners)
       access.value = snapshot.access ?? null
       // Keep the board list in step (e.g. a freshly created board, or a rename). The
       // snapshot's `workspace` carries no `viewerRole` (that's a `GET /workspaces` list
@@ -241,6 +242,7 @@ export const useWorkspaceStore = defineStore(
       budgetCaps,
       infraSetup,
       infraSetupDetails,
+      infraSetupOwners,
       patchInfraSetup,
       access,
       init,

package/app/types/domain.ts

@@ -108,6 +108,8 @@ export type {
   InfraSetup,
   InfraSetupStatus,
   InfraSetupArea,
+  InfraSetupOwner,
+  InfraSetupOwners,
   ServiceFragmentDefaults,
   KaizenGradingStatus,
   KaizenGrading,

package/app/utils/safeArea.spec.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { FULL_BLEED_TAKEOVER_CLASS, WINDOWED_OVERLAY_CLASS } from '~/utils/safeArea'
+
+// A missing or misspelled side is silent on every screen without a notch, so the exact spellings
+// are pinned here. That every full-screen surface binds one of these is
+// `scripts/check-frontend-safe-area.mjs`'s job.
+describe('full-screen overlay root classes', () => {
+  it('gives a takeover only the inset, so it stays edge to edge without one', () => {
+    expect(FULL_BLEED_TAKEOVER_CLASS.split(' ')).toEqual([
+      'fixed',
+      'inset-0',
+      'flex',
+      'max-h-[100dvh]',
+      'pt-[env(safe-area-inset-top)]',
+      'pr-[env(safe-area-inset-right)]',
+      'pb-[env(safe-area-inset-bottom)]',
+      'pl-[env(safe-area-inset-left)]',
+    ])
+  })
+
+  it('gives a windowed backdrop 1rem or the inset, whichever is larger, on every side', () => {
+    expect(WINDOWED_OVERLAY_CLASS.split(' ')).toEqual([
+      'fixed',
+      'inset-0',
+      'flex',
+      'max-h-[100dvh]',
+      'pt-[max(1rem,env(safe-area-inset-top))]',
+      'pr-[max(1rem,env(safe-area-inset-right))]',
+      'pb-[max(1rem,env(safe-area-inset-bottom))]',
+      'pl-[max(1rem,env(safe-area-inset-left))]',
+    ])
+  })
+})

package/app/utils/safeArea.ts

@@ -0,0 +1,41 @@
+/**
+ * The root classes of the full-screen overlays, with the safe-area padding built in, so a phone's
+ * notch, rounded corners and home indicator never cover a header, a close button or an edge. The
+ * insets are physical, so the sides are too. They resolve to 0 unless the viewport meta carries
+ * `viewport-fit=cover` (`nuxt.config.ts`).
+ *
+ * A full-screen overlay binds one of these two constants on its root instead of spelling
+ * `fixed inset-0` itself, so it cannot drop the padding or the `100dvh` cap. The site adds only its
+ * stacking, direction and backdrop. `scripts/check-frontend-safe-area.mjs` refuses a full-screen
+ * `fixed` surface written anywhere else.
+ *
+ * Every class is spelled out literally: Tailwind generates only the class names it finds in the
+ * source text, so a name assembled at runtime would compile to nothing.
+ */
+
+const FULL_SCREEN = 'fixed inset-0 flex max-h-[100dvh]'
+
+/**
+ * A full-bleed takeover (`AgentStepDetail`, the model configuration takeover, the panels and the
+ * lightbox): only the inset, so on a screen without one the layout is exactly the edge-to-edge one
+ * it was designed as.
+ */
+export const FULL_BLEED_TAKEOVER_CLASS = [
+  FULL_SCREEN,
+  'pt-[env(safe-area-inset-top)]',
+  'pr-[env(safe-area-inset-right)]',
+  'pb-[env(safe-area-inset-bottom)]',
+  'pl-[env(safe-area-inset-left)]',
+].join(' ')
+
+/**
+ * A windowed overlay's backdrop (`ResultWindowShell`): 1rem, or the inset on that side when it is
+ * larger, so the window always floats clear of the screen edge and of the notch.
+ */
+export const WINDOWED_OVERLAY_CLASS = [
+  FULL_SCREEN,
+  'pt-[max(1rem,env(safe-area-inset-top))]',
+  'pr-[max(1rem,env(safe-area-inset-right))]',
+  'pb-[max(1rem,env(safe-area-inset-bottom))]',
+  'pl-[max(1rem,env(safe-area-inset-left))]',
+].join(' ')

package/app/utils/setupAudience.spec.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest'
+import type { InfraSetup, InfraSetupOwners } from '~/types/domain'
+import { blockingSetupNotice, canActOnSetup, type SetupActor } from './setupAudience'
+
+const admin: SetupActor = {
+  fullSurface: true,
+  canManageIntegrations: true,
+  canExecuteRuns: true,
+  isAccountAdmin: false,
+  accountsEnabled: true,
+}
+const member: SetupActor = { ...admin, canManageIntegrations: false }
+const viewer: SetupActor = { ...member, canExecuteRuns: false }
+const designerAdmin: SetupActor = { ...admin, fullSurface: false }
+const designerMember: SetupActor = { ...member, fullSurface: false }
+
+const owners: InfraSetupOwners = {
+  agentExecutor: 'workspace_admin',
+  ephemeralEnvironments: 'workspace_admin',
+  binaryStorage: 'account_admin',
+}
+
+function status(patch: Partial<InfraSetup>): InfraSetup {
+  return {
+    agentExecutor: 'configured',
+    ephemeralEnvironments: 'configured',
+    binaryStorage: 'configured',
+    ...patch,
+  }
+}
+
+const noRunner = status({ agentExecutor: 'not_defined' })
+
+describe('canActOnSetup', () => {
+  it('lets a workspace admin act on the workspace areas, and not a member', () => {
+    expect(canActOnSetup('workspace_admin', admin)).toBe(true)
+    expect(canActOnSetup('workspace_admin', member)).toBe(false)
+  })
+
+  it('keeps every prompt off the designer surface, whatever the permissions', () => {
+    expect(canActOnSetup('workspace_admin', designerAdmin)).toBe(false)
+    expect(canActOnSetup('account_admin', { ...designerAdmin, isAccountAdmin: true })).toBe(false)
+  })
+
+  it('gives an account-owned gap to the account admin, not to a workspace admin', () => {
+    expect(canActOnSetup('account_admin', admin)).toBe(false)
+    expect(canActOnSetup('account_admin', { ...member, isAccountAdmin: true })).toBe(true)
+  })
+
+  it('lets the single user act on an account-owned gap when there are no accounts', () => {
+    expect(canActOnSetup('account_admin', { ...admin, accountsEnabled: false })).toBe(true)
+  })
+
+  it('lets nobody act on an operator-owned gap', () => {
+    expect(canActOnSetup('operator', { ...admin, isAccountAdmin: true })).toBe(false)
+  })
+
+  it('falls back to the workspace admin for an absent owner or one this build does not know', () => {
+    // An older backend sends nothing; a newer one may send a value past the compiled union. Both
+    // read as the workspace admin, and neither throws inside the banner's render.
+    for (const owner of [undefined, 'board_owner']) {
+      expect(canActOnSetup(owner, admin)).toBe(true)
+      expect(canActOnSetup(owner, member)).toBe(false)
+    }
+  })
+})
+
+describe('blockingSetupNotice', () => {
+  it('tells a member that agents cannot run, and who can fix it', () => {
+    expect(blockingSetupNotice(noRunner, owners, member)).toEqual({
+      area: 'agentExecutor',
+      kind: 'setup',
+      remedy: 'workspace_admin',
+    })
+  })
+
+  it('reports an executor outage as an outage', () => {
+    expect(
+      blockingSetupNotice(status({ agentExecutor: 'unreachable' }), owners, member)?.kind,
+    ).toBe('outage')
+  })
+
+  it('says nothing to the admin, who gets the full card instead', () => {
+    expect(blockingSetupNotice(noRunner, owners, admin)).toBeNull()
+  })
+
+  it('says nothing to a viewer, whose work the gap does not stop', () => {
+    expect(blockingSetupNotice(noRunner, owners, viewer)).toBeNull()
+  })
+
+  it('tells an admin on the designer surface to switch surface, not to find an admin', () => {
+    expect(blockingSetupNotice(noRunner, owners, designerAdmin)?.remedy).toBe('full_surface')
+    // A designer without the grant is still pointed at the owner.
+    expect(blockingSetupNotice(noRunner, owners, designerMember)?.remedy).toBe('workspace_admin')
+  })
+
+  it('says nothing about gaps that only degrade some runs', () => {
+    const optional = status({ ephemeralEnvironments: 'not_defined', binaryStorage: 'not_defined' })
+    expect(blockingSetupNotice(optional, owners, member)).toBeNull()
+  })
+
+  it('says nothing when the executor is configured or not used here', () => {
+    expect(blockingSetupNotice(status({}), owners, member)).toBeNull()
+    expect(
+      blockingSetupNotice(status({ agentExecutor: 'not_applicable' }), owners, member),
+    ).toBeNull()
+    expect(blockingSetupNotice(null, owners, member)).toBeNull()
+  })
+
+  it('names the workspace admin when the backend reports no owner, or one it does not know', () => {
+    expect(blockingSetupNotice(noRunner, null, member)?.remedy).toBe('workspace_admin')
+    const unknown = { ...owners, agentExecutor: 'board_owner' } as unknown as InfraSetupOwners
+    expect(blockingSetupNotice(noRunner, unknown, member)?.remedy).toBe('workspace_admin')
+  })
+})