@cat-factory/app 0.129.0 → 0.131.0

package/app/components/panels/InspectorPanel.vue

@@ -35,6 +35,7 @@ const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
 const recurring = useRecurringPipelinesStore()
 const requirements = useRequirementsStore()
+const access = useWorkspaceAccess()
 const { t } = useI18n()
 
 // When the selected task block backs a recurring pipeline, the inspector shows the
@@ -105,15 +106,20 @@ const runnable = computed(() => (block.value ? board.isRunnable(block.value.id)
 const unmetDepTitles = computed(() =>
   block.value && isTask.value ? board.unmetDeps(block.value.id).map((b) => b.title) : [],
 )
-const runBlockedReason = computed(() =>
-  unmetDepTitles.value.length
+const runBlockedReason = computed(() => {
+  // A read-only viewer can inspect a task but never start/re-run it — surface WHY on the
+  // locked trigger, exactly like an unmet-dependency lock (the backend rejects it anyway).
+  if (!access.canExecuteRuns.value) return t('access.noRunExecute')
+  return unmetDepTitles.value.length
     ? t(
         'panels.inspector.runBlocked',
         { count: unmetDepTitles.value.length, names: unmetDepTitles.value.join(', ') },
         unmetDepTitles.value.length,
       )
-    : null,
-)
+    : null
+})
+// The Run trigger is enabled only when the task is runnable AND the caller may execute runs.
+const canRun = computed(() => runnable.value && access.canExecuteRuns.value)
 
 // The delete control names what it removes, so selecting a task and deleting it
 // reads as "Delete task" rather than ambiguously removing the whole service.
@@ -564,15 +570,16 @@ const showOriginalDescription = ref(false)
 
       <!-- actions -->
       <div class="flex items-center gap-2">
-        <UDropdownMenu v-if="isTask" :items="runMenu">
+        <UDropdownMenu v-if="isTask" :items="runMenu" :disabled="!canRun">
           <UButton
-            :color="runnable ? 'primary' : 'neutral'"
+            :color="canRun ? 'primary' : 'neutral'"
             variant="soft"
             size="sm"
-            :icon="runnable ? 'i-lucide-play' : 'i-lucide-lock'"
+            :icon="canRun ? 'i-lucide-play' : 'i-lucide-lock'"
             trailing-icon="i-lucide-chevron-down"
-            :disabled="!runnable"
+            :disabled="!canRun"
             :title="runBlockedReason ?? undefined"
+            data-testid="run-start"
           >
             {{ instance ? t('panels.inspector.reRun') : t('panels.inspector.run') }}
           </UButton>
@@ -595,7 +602,12 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-archive"
           :class="isServiceFrame ? 'ms-auto' : ''"
           data-testid="inspector-archive"
-          :title="t('panels.inspector.archiveService')"
+          :disabled="!access.canWriteBoard.value"
+          :title="
+            access.canWriteBoard.value
+              ? t('panels.inspector.archiveService')
+              : t('access.noBoardWrite')
+          "
           @click="archive"
         >
           {{ t('panels.inspector.archiveService') }}
@@ -607,7 +619,8 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-trash-2"
           :class="isServiceFrame ? '' : 'ms-auto'"
           data-testid="inspector-delete"
-          :title="deleteLabel"
+          :disabled="!access.canWriteBoard.value"
+          :title="access.canWriteBoard.value ? deleteLabel : t('access.noBoardWrite')"
           @click="remove"
         >
           {{ deleteLabel }}

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

@@ -21,6 +21,7 @@ const agentRuns = useAgentRunsStore()
 const ui = useUiStore()
 const models = useModelsStore()
 const reviews = useReviewStage()
+const access = useWorkspaceAccess()
 const { t, te } = useI18n()
 const { confirm } = useConfirm()
 
@@ -232,8 +233,12 @@ async function mergePr() {
             variant="ghost"
             size="xs"
             :loading="stopping"
-            :disabled="resetting"
-            :title="t('inspector.execution.stopTooltip')"
+            :disabled="resetting || !access.canExecuteRuns.value"
+            :title="
+              access.canExecuteRuns.value
+                ? t('inspector.execution.stopTooltip')
+                : t('access.noRunExecute')
+            "
             data-testid="run-stop"
             @click="stopRun"
           >
@@ -246,8 +251,12 @@ async function mergePr() {
             variant="ghost"
             size="xs"
             :loading="resetting"
-            :disabled="stopping"
-            :title="t('inspector.execution.resetTooltip')"
+            :disabled="stopping || !access.canExecuteRuns.value"
+            :title="
+              access.canExecuteRuns.value
+                ? t('inspector.execution.resetTooltip')
+                : t('access.noRunExecute')
+            "
             data-testid="run-reset"
             @click="resetRun"
           >

package/app/components/prReview/PrReviewWindow.vue

@@ -22,6 +22,7 @@ import type {
 const execution = useExecutionStore()
 const board = useBoardStore()
 const prReview = usePrReviewStore()
+const access = useWorkspaceAccess()
 
 const { t } = useI18n()
 
@@ -305,7 +306,8 @@ async function onResolve(action: PrReviewResolution): Promise<void> {
           <UButton
             color="neutral"
             variant="ghost"
-            :disabled="!canResolve"
+            :disabled="!canResolve || !access.canExecuteRuns.value"
+            :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
             data-testid="pr-review-finish"
             @click="onResolve('finish')"
           >
@@ -314,7 +316,8 @@ async function onResolve(action: PrReviewResolution): Promise<void> {
           <UButton
             color="neutral"
             variant="soft"
-            :disabled="!canResolve || !hasSelection"
+            :disabled="!canResolve || !hasSelection || !access.canExecuteRuns.value"
+            :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
             data-testid="pr-review-post"
             @click="onResolve('post')"
           >
@@ -323,7 +326,8 @@ async function onResolve(action: PrReviewResolution): Promise<void> {
           <UButton
             color="primary"
             :loading="prReview.resolving"
-            :disabled="!canResolve || !hasSelection"
+            :disabled="!canResolve || !hasSelection || !access.canExecuteRuns.value"
+            :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
             data-testid="pr-review-fix"
             @click="onResolve('fix')"
           >

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -25,6 +25,7 @@ const requirements = useRequirementsStore()
 const models = useModelsStore()
 const toast = useToast()
 const { t } = useI18n()
+const access = useWorkspaceAccess()
 
 // Draft replies, keyed by item id, so editing one item doesn't disturb others.
 const drafts = ref<Record<string, string>>({})
@@ -837,7 +838,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                                   variant="soft"
                                   size="xs"
                                   icon="i-lucide-check"
-                                  :disabled="frozen"
+                                  :disabled="frozen || !access.canExecuteRuns.value"
+                                  :title="
+                                    access.canExecuteRuns.value
+                                      ? undefined
+                                      : t('access.noRunExecute')
+                                  "
                                   @click="acceptRecommendation(rec)"
                                 >
                                   {{ t('requirements.accept') }}
@@ -847,7 +853,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                                   variant="ghost"
                                   size="xs"
                                   icon="i-lucide-x"
-                                  :disabled="frozen"
+                                  :disabled="frozen || !access.canExecuteRuns.value"
+                                  :title="
+                                    access.canExecuteRuns.value
+                                      ? undefined
+                                      : t('access.noRunExecute')
+                                  "
                                   @click="rejectRecommendation(rec)"
                                 >
                                   {{ t('requirements.reject') }}
@@ -869,7 +880,16 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                                   size="xs"
                                   icon="i-lucide-rotate-cw"
                                   :loading="recommending"
-                                  :disabled="!(reRequestNotes[rec.id] ?? '').trim() || frozen"
+                                  :disabled="
+                                    !(reRequestNotes[rec.id] ?? '').trim() ||
+                                    frozen ||
+                                    !access.canExecuteRuns.value
+                                  "
+                                  :title="
+                                    access.canExecuteRuns.value
+                                      ? undefined
+                                      : t('access.noRunExecute')
+                                  "
                                   @click="reRequestRecommendation(rec)"
                                 >
                                   {{ t('requirements.reRequest') }}
@@ -1025,6 +1045,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   block
                   icon="i-lucide-wand-2"
                   :loading="recommending"
+                  :disabled="!access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="requestRecommendations"
                 >
                   {{
@@ -1050,6 +1072,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   icon="i-lucide-arrow-right"
                   :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
                   :loading="acting"
+                  :disabled="!access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="proceed"
                 >
                   {{ t('requirements.actions.proceedNothing') }}
@@ -1061,7 +1085,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   block
                   icon="i-lucide-wand-sparkles"
                   :loading="reworking"
-                  :disabled="!canIncorporate"
+                  :disabled="!canIncorporate || !access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="incorporate()"
                 >
                   {{ t('requirements.actions.incorporateAnswers') }}
@@ -1085,6 +1110,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   block
                   icon="i-lucide-sparkles"
                   :loading="busy"
+                  :disabled="!access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="reReview"
                 >
                   {{
@@ -1123,7 +1150,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     block
                     icon="i-lucide-wand-sparkles"
                     :loading="reworking"
-                    :disabled="!redoComment.trim()"
+                    :disabled="!redoComment.trim() || !access.canExecuteRuns.value"
+                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                     @click="incorporate(redoComment.trim())"
                   >
                     {{ t('requirements.actions.redoWithDirection') }}

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -14,11 +14,14 @@ import IssueTrackerPanel from '~/components/settings/IssueTrackerPanel.vue'
 import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
 import BudgetSettings from '~/components/settings/BudgetSettings.vue'
 import UsageSettings from '~/components/settings/UsageSettings.vue'
+import WorkspaceMembersSettings from '~/components/layout/WorkspaceMembersSettings.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const { t, te } = useI18n()
 const ui = useUiStore()
 const store = useWorkspaceSettingsStore()
+const workspace = useWorkspaceStore()
+const access = useWorkspaceAccess()
 const toast = useToast()
 
 const open = computed({
@@ -71,6 +74,18 @@ const tabs = computed(() => [
     icon: 'i-lucide-book-open-check',
     slot: 'fragments',
   },
+  // Roster + access-mode management is `members.manage` (workspace admins only). Hidden
+  // for everyone else — the backend 403s the writes and the tab has nothing to read.
+  ...(access.canManageMembers.value
+    ? [
+        {
+          value: 'members',
+          label: t('settings.workspaceSettings.tabs.members'),
+          icon: 'i-lucide-users',
+          slot: 'members',
+        },
+      ]
+    : []),
 ])
 
 // Tab strip styling: the labels must always fit (never truncate) and the strip must never
@@ -359,6 +374,11 @@ async function save() {
         <template #fragments>
           <ServiceFragmentDefaultsPanel />
         </template>
+
+        <!-- Members (workspace RBAC roster + access mode; admins only) -->
+        <template v-if="access.canManageMembers.value && workspace.workspaceId" #members>
+          <WorkspaceMembersSettings :workspace-id="workspace.workspaceId" />
+        </template>
       </UTabs>
     </template>
   </UModal>

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -19,6 +19,7 @@ const board = useBoardStore()
 const execution = useExecutionStore()
 const visualConfirm = useVisualConfirmStore()
 const { t } = useI18n()
+const access = useWorkspaceAccess()
 
 // Per-window blob cache; release the cached screenshot/reference object URLs when the window
 // goes away, so the (potentially large) blob bytes don't linger for the rest of the session.
@@ -351,7 +352,8 @@ const canApprove = computed(
                   color="warning"
                   icon="i-lucide-wrench"
                   :loading="busy"
-                  :disabled="busy || !hasFindings"
+                  :disabled="busy || !hasFindings || !access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="submitFix"
                 >
                   {{ t('visualConfirm.requestFix.send') }}
@@ -430,7 +432,8 @@ const canApprove = computed(
               color="neutral"
               icon="i-lucide-refresh-cw"
               :loading="busy"
-              :disabled="busy || !awaitingHuman"
+              :disabled="busy || !awaitingHuman || !access.canExecuteRuns.value"
+              :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
               @click="recapture"
             >
               {{ t('visualConfirm.recapture') }}
@@ -439,7 +442,8 @@ const canApprove = computed(
               color="primary"
               icon="i-lucide-circle-check"
               :loading="busy"
-              :disabled="!canApprove"
+              :disabled="!canApprove || !access.canExecuteRuns.value"
+              :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
               @click="approve"
             >
               {{ t('visualConfirm.approve') }}

package/app/composables/api/workspaces.ts

@@ -1,13 +1,22 @@
 import {
+  addWorkspaceMemberContract,
   createWorkspaceContract,
   deleteWorkspaceContract,
   getWorkspaceContract,
   getWorkspaceSettingsContract,
+  listWorkspaceMembersContract,
   listWorkspacesContract,
+  removeWorkspaceMemberContract,
+  setWorkspaceAccessModeContract,
+  setWorkspaceMemberRoleContract,
   updateWorkspaceContract,
   updateWorkspaceSettingsContract,
 } from '@cat-factory/contracts'
-import type { UpdateWorkspaceSettingsInput } from '~/types/domain'
+import type {
+  UpdateWorkspaceSettingsInput,
+  WorkspaceAccessMode,
+  WorkspaceRole,
+} from '~/types/domain'
 import type { ApiContext } from './context'
 
 /** Workspace CRUD + the full snapshot read. */
@@ -38,5 +47,26 @@ export function workspacesApi({ send, ws }: ApiContext) {
 
     updateWorkspaceSettings: (workspaceId: string, body: UpdateWorkspaceSettingsInput) =>
       send(updateWorkspaceSettingsContract, { pathPrefix: ws(workspaceId), body }),
+
+    // ---- workspace membership (RBAC roster + access-mode) -----------------
+    // The roster read is open to any resolved role; every write requires `members.manage`
+    // (the backend gates it — the SPA only shows this surface to workspace admins).
+    listWorkspaceMembers: (workspaceId: string) =>
+      send(listWorkspaceMembersContract, { pathParams: { workspaceId } }),
+
+    addWorkspaceMember: (workspaceId: string, userId: string, role: WorkspaceRole) =>
+      send(addWorkspaceMemberContract, { pathParams: { workspaceId }, body: { userId, role } }),
+
+    setWorkspaceMemberRole: (workspaceId: string, userId: string, role: WorkspaceRole) =>
+      send(setWorkspaceMemberRoleContract, {
+        pathParams: { workspaceId, userId },
+        body: { role },
+      }),
+
+    removeWorkspaceMember: (workspaceId: string, userId: string) =>
+      send(removeWorkspaceMemberContract, { pathParams: { workspaceId, userId } }),
+
+    setWorkspaceAccessMode: (workspaceId: string, accessMode: WorkspaceAccessMode) =>
+      send(setWorkspaceAccessModeContract, { pathParams: { workspaceId }, body: { accessMode } }),
   }
 }

package/app/composables/useBlockDeletion.ts

@@ -18,6 +18,7 @@ export function useBlockDeletion() {
   const toast = useToast()
   const { confirm } = useConfirm()
   const { t } = useI18n()
+  const access = useWorkspaceAccess()
 
   /** A service is any top-level frame; only services are archivable. */
   function isService(block: Block): boolean {
@@ -37,6 +38,9 @@ export function useBlockDeletion() {
    */
   async function archiveBlock(block: Block | undefined | null): Promise<boolean> {
     if (!block || !isService(block)) return false
+    // Archiving is a `board.write` mutation — a read-only viewer's keyboard/inspector path
+    // no-ops (the inspector button is disabled for them; this guards the shortcut too).
+    if (!access.canWriteBoard.value) return false
     const ok = await confirm({
       title: t('panels.inspector.confirmArchive.title'),
       description: t('panels.inspector.confirmArchive.body', { name: block.title }),
@@ -94,6 +98,9 @@ export function useBlockDeletion() {
 
   async function deleteBlock(block: Block | undefined | null): Promise<boolean> {
     if (!block) return false
+    // Deletion is a `board.write` mutation — no-op for a read-only viewer (guards both the
+    // inspector Delete button and the global Delete-key shortcut, which share this path).
+    if (!access.canWriteBoard.value) return false
     // A service with unfinished work can't be deleted (the backend rejects it) — archive it
     // instead. Route straight to the archive flow so the user is never handed a dead-end error.
     if (isService(block) && unfinishedTaskCount(block) > 0) return archiveBlock(block)

package/app/composables/useBlockDrag.ts

@@ -18,6 +18,7 @@ const draggingId = ref<string | null>(null)
 export function useBlockDrag() {
   const board = useBoardStore()
   const ui = useUiStore()
+  const access = useWorkspaceAccess()
 
   function startDrag(
     block: Block,
@@ -25,6 +26,10 @@ export function useBlockDrag() {
     opts: { reparent?: boolean; clamp?: boolean } = {},
   ) {
     if (e.button !== 0) return
+    // Read-only viewers can pan/inspect but never move or reparent a block — the drag
+    // is a `board.write` mutation, so it no-ops for them (the SPA mirror of the backend
+    // member floor; the affordance itself is hidden/disabled at the button level too).
+    if (!access.canWriteBoard.value) return
     e.preventDefault()
     e.stopPropagation()
     const startX = e.clientX

package/app/composables/useFrameResize.ts

@@ -12,6 +12,7 @@ import type { Block } from '~/types/domain'
 export function useFrameResize() {
   const board = useBoardStore()
   const ui = useUiStore()
+  const access = useWorkspaceAccess()
   /** Id of the frame currently being resized, for cursor/handle styling. */
   const resizingId = ref<string | null>(null)
 
@@ -21,6 +22,9 @@ export function useFrameResize() {
    */
   function startResize(block: Block, e: PointerEvent, edge: 'e' | 's' | 'se') {
     if (e.button !== 0) return
+    // Resizing a frame persists its size — a `board.write` mutation, so a read-only
+    // viewer's resize no-ops (the grips are hidden for them at the component level).
+    if (!access.canWriteBoard.value) return
     e.preventDefault()
     e.stopPropagation()
     const startX = e.clientX

package/app/composables/useWorkspaceAccess.spec.ts

@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { WorkspaceAccess } from '~/types/domain'
+import { useWorkspaceStore } from '~/stores/workspace'
+import { useWorkspaceAccess } from '~/composables/useWorkspaceAccess'
+
+// `useWorkspaceAccess` reads the active board's resolved `{ role, permissions }` off the
+// workspace store and answers "can the caller do X here". The store is real (a fresh Pinia
+// per test via test/setup.ts); the composable calls it through the Nuxt auto-import, so
+// expose it as a global. No API/i18n is touched by the composable.
+beforeEach(() => {
+  vi.stubGlobal('useWorkspaceStore', useWorkspaceStore)
+})
+
+/** Set the active board's access on the store, then build the composable over it. */
+function withAccess(access: WorkspaceAccess | null) {
+  useWorkspaceStore().access = access
+  return useWorkspaceAccess()
+}
+
+describe('useWorkspaceAccess', () => {
+  it('dev-open (no access resolved) allows everything — backend parity', () => {
+    const a = withAccess(null)
+    expect(a.role.value).toBeNull()
+    expect(a.permissions.value).toBeNull()
+    expect(a.can('board.write')).toBe(true)
+    expect(a.can('members.manage')).toBe(true)
+    expect(a.canWriteBoard.value).toBe(true)
+    expect(a.canExecuteRuns.value).toBe(true)
+    expect(a.canManageSettings.value).toBe(true)
+    // dev-open is NOT a viewer — it sees all, so isViewer is false and isMember/isAdmin true.
+    expect(a.isViewer.value).toBe(false)
+    expect(a.isMember.value).toBe(true)
+    expect(a.isAdmin.value).toBe(true)
+  })
+
+  it('viewer can only read', () => {
+    const a = withAccess({ role: 'viewer', permissions: ['workspace.read'] })
+    expect(a.role.value).toBe('viewer')
+    expect(a.can('workspace.read')).toBe(true)
+    expect(a.can('board.write')).toBe(false)
+    expect(a.can('runs.execute')).toBe(false)
+    expect(a.canWriteBoard.value).toBe(false)
+    expect(a.canExecuteRuns.value).toBe(false)
+    expect(a.isViewer.value).toBe(true)
+    expect(a.isMember.value).toBe(false)
+    expect(a.isAdmin.value).toBe(false)
+  })
+
+  it('member can write the board and execute runs but not manage', () => {
+    const a = withAccess({
+      role: 'member',
+      permissions: ['workspace.read', 'board.write', 'runs.execute'],
+    })
+    expect(a.canWriteBoard.value).toBe(true)
+    expect(a.canExecuteRuns.value).toBe(true)
+    expect(a.canManageSettings.value).toBe(false)
+    expect(a.canManageIntegrations.value).toBe(false)
+    expect(a.canManageSecrets.value).toBe(false)
+    expect(a.canManageMembers.value).toBe(false)
+    expect(a.isViewer.value).toBe(false)
+    expect(a.isMember.value).toBe(true)
+    expect(a.isAdmin.value).toBe(false)
+  })
+
+  it('admin holds every permission', () => {
+    const a = withAccess({
+      role: 'admin',
+      permissions: [
+        'workspace.read',
+        'board.write',
+        'runs.execute',
+        'settings.manage',
+        'integrations.manage',
+        'secrets.manage',
+        'members.manage',
+      ],
+    })
+    expect(a.canManageSettings.value).toBe(true)
+    expect(a.canManageIntegrations.value).toBe(true)
+    expect(a.canManageSecrets.value).toBe(true)
+    expect(a.canManageMembers.value).toBe(true)
+    expect(a.isAdmin.value).toBe(true)
+  })
+
+  it('can() reads the granted permission SET, not the role name', () => {
+    // A future upgrade-overlay/custom grant could carry a permission beyond the role's
+    // default set; `can()` must honour the array the backend actually sent.
+    const a = withAccess({ role: 'member', permissions: ['workspace.read', 'runs.execute'] })
+    expect(a.can('board.write')).toBe(false)
+    expect(a.can('runs.execute')).toBe(true)
+  })
+
+  it('reacts to a live access change (board switch / snapshot refresh)', () => {
+    const a = withAccess({ role: 'viewer', permissions: ['workspace.read'] })
+    expect(a.canWriteBoard.value).toBe(false)
+    useWorkspaceStore().access = {
+      role: 'member',
+      permissions: ['workspace.read', 'board.write', 'runs.execute'],
+    }
+    expect(a.canWriteBoard.value).toBe(true)
+  })
+})

package/app/composables/useWorkspaceAccess.ts

@@ -0,0 +1,84 @@
+import { computed } from 'vue'
+import type { WorkspacePermission, WorkspaceRole } from '~/types/domain'
+
+/**
+ * The signed-in caller's resolved workspace-RBAC access to the ACTIVE board — the
+ * central helper for gating _workspace-scoped_ affordances in the SPA (board editing,
+ * run controls, HITL actions, admin settings panels). It reads the `access` the auth
+ * gate resolved server-side and attached to the workspace snapshot (`{ role, permissions }`),
+ * so the frontend never re-derives the permission math — it consumes the same source of
+ * truth the backend enforces against.
+ *
+ * **Dev-open parity.** When auth is disabled the backend attaches no `access` (it resolves
+ * no access object and allows everything), so an absent snapshot access here means dev-open
+ * ⇒ `can()` returns `true` for every permission and `role` is `null`. This mirrors the
+ * backend's `requirePermission` "absent access with no user ⇒ allow" branch exactly, so the
+ * 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
+ * composable answers "what can you do inside THIS board", the account check answers "what
+ * can you do to the tenant".
+ */
+export function useWorkspaceAccess() {
+  const workspace = useWorkspaceStore()
+
+  /** The caller's effective role on the active board, or `null` in dev-open (auth off). */
+  const role = computed<WorkspaceRole | null>(() => workspace.access?.role ?? null)
+
+  /**
+   * The permission set the backend granted the caller, or `null` in dev-open. `can()`
+   * short-circuits to allow-all when this is null, so a null set is never a "deny".
+   */
+  const permissions = computed<ReadonlySet<WorkspacePermission> | null>(() =>
+    workspace.access ? new Set(workspace.access.permissions) : null,
+  )
+
+  /**
+   * Whether the caller holds `permission` on the active board. Absent access (dev-open)
+   * ⇒ `true` (backend-parity). Use this — never a raw role comparison — so a future
+   * custom-role model or an escape-hatch grant is honoured automatically.
+   */
+  function can(permission: WorkspacePermission): boolean {
+    const set = permissions.value
+    return set === null || set.has(permission)
+  }
+
+  /** Board mutation (blocks CRUD/move/reparent/archive, epics, initiatives, pipelines). */
+  const canWriteBoard = computed(() => can('board.write'))
+  /** Run lifecycle + all HITL windows (start/stop/merge, retry, decision approvals). */
+  const canExecuteRuns = computed(() => can('runs.execute'))
+  /** Board configuration (workspace settings, presets, risk/merge policies, observability). */
+  const canManageSettings = computed(() => can('settings.manage'))
+  /** Integration connections (GitHub/Slack/environments/runner-pool/sources, bootstrap). */
+  const canManageIntegrations = computed(() => can('integrations.manage'))
+  /** Secrets (vendor credentials, workspace + public API keys, test secrets). */
+  const canManageSecrets = computed(() => can('secrets.manage'))
+  /** Roster + access-mode flip (workspace member CRUD). */
+  const canManageMembers = computed(() => can('members.manage'))
+
+  /**
+   * A read-only viewer (resolved a role, but not `>= member`). Distinct from dev-open:
+   * `isViewer` is `false` when there is no access object at all, since dev-open sees all.
+   */
+  const isViewer = computed(() => role.value === 'viewer')
+  /** Resolved at least the member tier (or dev-open). */
+  const isMember = computed(() => role.value === null || role.value !== 'viewer')
+  /** A workspace admin (or dev-open). */
+  const isAdmin = computed(() => role.value === null || role.value === 'admin')
+
+  return {
+    role,
+    permissions,
+    can,
+    canWriteBoard,
+    canExecuteRuns,
+    canManageSettings,
+    canManageIntegrations,
+    canManageSecrets,
+    canManageMembers,
+    isViewer,
+    isMember,
+    isAdmin,
+  }
+}

package/app/stores/workspace.spec.ts

@@ -216,4 +216,23 @@ describe('workspace store cold-open speculative snapshot', () => {
     expect(getWorkspace).toHaveBeenCalledWith('ws3')
     expect(useBoardStore().getBlock('f3')).toBeDefined()
   })
+
+  // Slice 8 (workspace-RBAC frontend): the resolved `access` the auth gate attaches to the
+  // snapshot must land on the store so `useWorkspaceAccess()` can gate affordances.
+  it('hydrates the resolved workspace access from the snapshot', async () => {
+    const snap = snapshot('ws1', [block('f1')]) as WorkspaceSnapshot
+    snap.access = { role: 'viewer', permissions: ['workspace.read'] }
+    const getWorkspace = vi.fn().mockResolvedValue(snap)
+    vi.stubGlobal('useApi', () => ({ getWorkspace }))
+
+    const ws = useWorkspaceStore()
+    await ws.switchTo('ws1')
+    expect(ws.access).toEqual({ role: 'viewer', permissions: ['workspace.read'] })
+
+    // A subsequent snapshot WITHOUT access (older backend / dev-open) clears it back to null.
+    const snap2 = snapshot('ws1', [block('f1')]) as WorkspaceSnapshot
+    getWorkspace.mockResolvedValue(snap2)
+    await ws.refresh()
+    expect(ws.access).toBeNull()
+  })
 })