@cat-factory/app 0.129.0 → 0.131.0

package/app/components/layout/SideBar.vue

@@ -23,11 +23,30 @@ const accounts = useAccountsStore()
 const auth = useAuthStore()
 const providerConnections = useProviderConnectionsStore()
 const ui = useUiStore()
+const access = useWorkspaceAccess()
 
 // The operator dashboard (deployment-level run health) is sensitive cross-workspace data,
 // so it's shown only to an admin of the active account (matching the backend admin gate).
 const isAccountAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
 
+// Workspace-RBAC nav gating: each management destination is shown only when the caller
+// holds the permission its writes require (the SPA mirror of the admin-tier controller
+// middleware — a member/viewer who'd only get a 403 never sees the entry). Board authoring
+// (create/repos) needs `board.write`; connections/infra/sandbox/bootstrap need
+// `integrations.manage`; workspace + model configuration and the fragment library need
+// `settings.manage`. Kaizen and account settings are reads / account-scoped and stay.
+// Absent access (dev-open) ⇒ every `can*` is true, so nothing is hidden.
+const showCreate = computed(() => access.canWriteBoard.value)
+const showAddFromRepo = computed(() => github.available && access.canWriteBoard.value)
+const showBootstrap = computed(() => access.canManageIntegrations.value)
+const showRepositories = computed(() => showAddFromRepo.value || showBootstrap.value)
+const showIntegrationsHub = computed(() => access.canManageIntegrations.value)
+const showSandbox = computed(() => access.canManageIntegrations.value)
+// The Configuration section carries workspace/model settings (`settings.manage`) AND the
+// account-scoped account-settings / operator-dashboard entries, so it shows when the caller
+// can manage settings OR accounts are enabled (the account entries have their own gates).
+const showConfiguration = computed(() => access.canManageSettings.value || accounts.enabled)
+
 // The Infrastructure menu (agent-container execution + test environments) shows whenever the
 // deployment reports its infrastructure capability — every facade populates `auth.infrastructure`
 // (it drives the execution-backend selector), so there is always an execution + test-env backend
@@ -36,12 +55,18 @@ const isAccountAdmin = computed(() => accounts.activeAccount?.roles?.includes('a
 // (somehow) omits the descriptor.
 const showInfrastructure = computed(
   () =>
-    auth.infrastructure != null ||
-    auth.localMode?.enabled === true ||
-    providerConnections.isAvailable('runner-pool') ||
-    providerConnections.isAvailable('environment'),
+    // Provisioning/managing infrastructure is `integrations.manage`, so a member/viewer
+    // never sees the section (they'd only 403 on the writes inside it).
+    access.canManageIntegrations.value &&
+    (auth.infrastructure != null ||
+      auth.localMode?.enabled === true ||
+      providerConnections.isAvailable('runner-pool') ||
+      providerConnections.isAvailable('environment')),
 )
 
+// The prompt-fragment library is a `settings.manage` authoring surface.
+const showWorkspaceContext = computed(() => library.available && access.canManageSettings.value)
+
 // `isCompact` (< lg) is the breakpoint at which the navbar is an off-canvas drawer;
 // above it the aside is static and the drawer flag is inert.
 const { isCompact } = useViewport()
@@ -166,57 +191,65 @@ watch(
         <UKbd value="⌘K" />
       </button>
 
-      <section>
-        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('nav.create') }}
-        </h2>
-        <div class="space-y-1.5">
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-workflow"
-            class="justify-start"
-            @click="ui.openBuilder()"
-          >
-            {{ t('nav.buildPipeline') }}
-          </UButton>
-        </div>
-      </section>
-
-      <USeparator />
+      <template v-if="showCreate">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('nav.create') }}
+          </h2>
+          <div class="space-y-1.5">
+            <UButton
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-workflow"
+              class="justify-start"
+              data-testid="nav-build-pipeline"
+              @click="ui.openBuilder()"
+            >
+              {{ t('nav.buildPipeline') }}
+            </UButton>
+          </div>
+        </section>
+      </template>
 
-      <section>
-        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('nav.repositories') }}
-        </h2>
-        <div class="space-y-1.5">
-          <UButton
-            v-if="github.available"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-folder-git-2"
-            class="justify-start"
-            @click="ui.openAddService()"
-          >
-            {{ t('nav.addFromRepo') }}
-          </UButton>
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-git-branch-plus"
-            class="justify-start"
-            @click="ui.openBootstrap()"
-          >
-            {{ t('nav.bootstrapRepo') }}
-          </UButton>
-        </div>
-      </section>
+      <template v-if="showRepositories">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('nav.repositories') }}
+          </h2>
+          <div class="space-y-1.5">
+            <UButton
+              v-if="showAddFromRepo"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-folder-git-2"
+              class="justify-start"
+              data-testid="nav-add-from-repo"
+              @click="ui.openAddService()"
+            >
+              {{ t('nav.addFromRepo') }}
+            </UButton>
+            <UButton
+              v-if="showBootstrap"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-git-branch-plus"
+              class="justify-start"
+              data-testid="nav-bootstrap-repo"
+              @click="ui.openBootstrap()"
+            >
+              {{ t('nav.bootstrapRepo') }}
+            </UButton>
+          </div>
+        </section>
+      </template>
 
       <USeparator />
 
@@ -229,12 +262,14 @@ watch(
              this single button — the hub modal lists them grouped (source control,
              communication, documents, trackers, observability, model providers). -->
           <UButton
+            v-if="showIntegrationsHub"
             block
             color="primary"
             variant="soft"
             size="sm"
             icon="i-lucide-blocks"
             class="justify-start"
+            data-testid="nav-integrations"
             @click="ui.openIntegrations()"
           >
             {{ t('nav.integrations') }}
@@ -242,6 +277,7 @@ watch(
           <!-- The Sandbox: try prompt versions/models against graded fixtures, off to the
              side of the board. Opens the on-demand testing window. -->
           <UButton
+            v-if="showSandbox"
             block
             color="primary"
             variant="soft"
@@ -252,7 +288,8 @@ watch(
           >
             {{ t('nav.sandbox') }}
           </UButton>
-          <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. -->
+          <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. A
+             read surface (grading history), so it stays visible to every resolved role. -->
           <UButton
             block
             color="primary"
@@ -307,7 +344,7 @@ watch(
         </section>
       </template>
 
-      <template v-if="library.available">
+      <template v-if="showWorkspaceContext">
         <USeparator />
         <section>
           <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
@@ -327,66 +364,71 @@ watch(
         </section>
       </template>
 
-      <USeparator />
-      <section>
-        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('nav.configuration') }}
-        </h2>
-        <div class="space-y-1.5">
-          <!-- Merge thresholds, issue writeback and default service best practices are
-             now tabs inside Workspace settings. -->
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-sliders-horizontal"
-            class="justify-start"
-            @click="ui.openWorkspaceSettings()"
-          >
-            {{ t('nav.workspaceSettings') }}
-          </UButton>
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-cpu"
-            class="justify-start"
-            @click="ui.openModelConfig()"
-          >
-            {{ t('nav.modelConfiguration') }}
-          </UButton>
-          <!-- Account & team: members + roles, invitations, email sender, account API keys.
+      <template v-if="showConfiguration">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('nav.configuration') }}
+          </h2>
+          <div class="space-y-1.5">
+            <!-- Merge thresholds, issue writeback and default service best practices are
+             now tabs inside Workspace settings. `settings.manage` — hidden for members/viewers. -->
+            <UButton
+              v-if="access.canManageSettings.value"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-sliders-horizontal"
+              class="justify-start"
+              data-testid="nav-workspace-settings"
+              @click="ui.openWorkspaceSettings()"
+            >
+              {{ t('nav.workspaceSettings') }}
+            </UButton>
+            <UButton
+              v-if="access.canManageSettings.value"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-cpu"
+              class="justify-start"
+              @click="ui.openModelConfig()"
+            >
+              {{ t('nav.modelConfiguration') }}
+            </UButton>
+            <!-- Account & team: members + roles, invitations, email sender, account API keys.
              Shown once accounts (auth) are enabled. -->
-          <UButton
-            v-if="accounts.enabled"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-users"
-            class="justify-start"
-            @click="ui.openAccountSettings()"
-          >
-            {{ t('nav.accountSettings') }}
-          </UButton>
-          <!-- Platform observability: deployment-level run health. Admin-only, like the backend gate. -->
-          <UButton
-            v-if="accounts.enabled && isAccountAdmin"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-gauge"
-            class="justify-start"
-            data-testid="nav-operator-dashboard"
-            @click="ui.openOperatorDashboard()"
-          >
-            {{ t('nav.operatorDashboard') }}
-          </UButton>
-        </div>
-      </section>
+            <UButton
+              v-if="accounts.enabled"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-users"
+              class="justify-start"
+              @click="ui.openAccountSettings()"
+            >
+              {{ t('nav.accountSettings') }}
+            </UButton>
+            <!-- Platform observability: deployment-level run health. Admin-only, like the backend gate. -->
+            <UButton
+              v-if="accounts.enabled && isAccountAdmin"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-gauge"
+              class="justify-start"
+              data-testid="nav-operator-dashboard"
+              @click="ui.openOperatorDashboard()"
+            >
+              {{ t('nav.operatorDashboard') }}
+            </UButton>
+          </div>
+        </section>
+      </template>
     </div>
 
     <div class="mt-auto space-y-2">

package/app/components/layout/SpendWarningBanner.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 const { t, n } = useI18n()
 const workspace = useWorkspaceStore()
+const access = useWorkspaceAccess()
 
 const spend = computed(() => workspace.spend)
 /** Show the large warning only once the budget has been reached. */
@@ -80,6 +81,8 @@ async function resume() {
                 variant="solid"
                 icon="i-lucide-play"
                 :loading="resuming"
+                :disabled="!access.canExecuteRuns.value"
+                :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                 @click="resume"
               >
                 {{ t('layout.spendWarningBanner.resume') }}

package/app/components/layout/WorkspaceMembersSettings.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { apiErrorEnvelope } from '~/composables/api/errors'
+import type { WorkspaceAccessMode, WorkspaceRole } from '~/types/domain'
+
+// Workspace-membership management (workspace-rbac initiative, slice 9). The tier BELOW
+// account tenancy: an account admin restricts a board to an explicit member list (with
+// per-member workspace roles), while an unrestricted (`account`) board keeps the legacy
+// "every account member sees it" behaviour. Every mutation here requires `members.manage`
+// server-side, so the hosting Members tab only renders for a workspace admin.
+//
+// The add picker is sourced from the OWNING account's roster — a contractor joins the
+// account first (the account invitation flow), then gets scoped to a board here.
+const props = defineProps<{ workspaceId: string }>()
+
+const workspace = useWorkspaceStore()
+const members = useWorkspaceMembersStore()
+const accounts = useAccountsStore()
+const auth = useAuthStore()
+const toast = useToast()
+const { t } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
+
+const busy = ref(false)
+
+const ROLE_ITEMS = computed<{ label: string; value: WorkspaceRole }[]>(() => [
+  { label: t('layout.workspaceMembers.roles.admin'), value: 'admin' },
+  { label: t('layout.workspaceMembers.roles.member'), value: 'member' },
+  { label: t('layout.workspaceMembers.roles.viewer'), value: 'viewer' },
+])
+
+/** The active board's row (carries `accountId` + `accessMode`). */
+const board = computed(() => workspace.workspaces.find((w) => w.id === props.workspaceId) ?? null)
+/** The owning account id — the source of the add-member picker roster. */
+const accountId = computed(() => board.value?.accountId ?? null)
+/** Whether the board is limited to its explicit roster (vs every account member). */
+const restricted = computed(() => (board.value?.accessMode ?? 'account') === 'restricted')
+/**
+ * True once THIS board's roster is the committed one — the store guards a slow/superseded
+ * load so switching boards never renders the previous board's members. Until then the
+ * roster + picker show a loading state rather than stale rows.
+ */
+const rosterReady = computed(() => members.loadedFor === props.workspaceId)
+
+/**
+ * Account members not already on the board — the add picker's options. The service
+ * rejects a non-account-member, so the picker never offers one; already-scoped members
+ * are filtered out so the list only offers genuine additions.
+ */
+const candidates = computed(() => {
+  const existing = new Set(members.members.map((m) => m.userId))
+  return accounts.members
+    .filter((m) => !existing.has(m.userId))
+    .map((m) => ({ label: m.name || m.email || m.userId, value: m.userId }))
+})
+
+const addUserId = ref<string | undefined>(undefined)
+const addRole = ref<WorkspaceRole>('member')
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: apiErrorEnvelope(e)?.message ?? (e instanceof Error ? e.message : String(e)),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function loadAll(workspaceId: string) {
+  try {
+    const jobs: Promise<unknown>[] = [members.load(workspaceId)]
+    // The picker needs the owning account's roster; a legacy board with no account (the
+    // service auto-heals it on the first write) simply shows no picker candidates.
+    if (accountId.value) jobs.push(accounts.loadRoster(accountId.value))
+    await Promise.all(jobs)
+  } catch (e) {
+    notifyError(t('layout.workspaceMembers.errors.load'), e)
+  }
+}
+
+onMounted(() => void loadAll(props.workspaceId))
+watch(
+  () => props.workspaceId,
+  (id) => {
+    if (id) void loadAll(id)
+  },
+)
+
+async function setAccessMode(next: boolean) {
+  const mode: WorkspaceAccessMode = next ? 'restricted' : 'account'
+  busy.value = true
+  try {
+    await members.setAccessMode(props.workspaceId, mode)
+  } catch (e) {
+    notifyError(t('layout.workspaceMembers.errors.accessMode'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function updateRole(userId: string, role: WorkspaceRole) {
+  busy.value = true
+  try {
+    await members.setRole(props.workspaceId, userId, role)
+  } catch (e) {
+    notifyError(t('layout.workspaceMembers.errors.setRole'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function addMember() {
+  const userId = addUserId.value
+  if (!userId) return
+  busy.value = true
+  try {
+    await members.add(props.workspaceId, userId, addRole.value)
+    addUserId.value = undefined
+    addRole.value = 'member'
+    toast.add({ title: t('layout.workspaceMembers.add.added'), icon: 'i-lucide-user-plus' })
+  } catch (e) {
+    notifyError(t('layout.workspaceMembers.errors.add'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function removeMember(userId: string, name: string) {
+  if (!(await confirmAction('remove', name))) return
+  busy.value = true
+  try {
+    await members.remove(props.workspaceId, userId)
+    toastDone('remove', name)
+  } catch (e) {
+    notifyError(t('layout.workspaceMembers.errors.remove'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+/** Label a member by their display details; badges the signed-in caller as "you". */
+function memberLabel(userId: string, name?: string | null, email?: string | null): string {
+  const base = name || email || userId
+  return userId === auth.user?.id ? t('layout.workspaceMembers.you', { name: base }) : base
+}
+</script>
+
+<template>
+  <div class="space-y-6 text-sm" data-testid="workspace-members-settings">
+    <!-- access mode -->
+    <section class="rounded-md border border-slate-800 bg-slate-800/40 p-4">
+      <div class="flex items-start justify-between gap-4">
+        <div>
+          <h3 class="mb-1 font-semibold text-white">
+            {{ t('layout.workspaceMembers.accessMode.title') }}
+          </h3>
+          <p class="text-slate-400">
+            {{
+              restricted
+                ? t('layout.workspaceMembers.accessMode.restrictedHint')
+                : t('layout.workspaceMembers.accessMode.accountHint')
+            }}
+          </p>
+        </div>
+        <label class="flex shrink-0 items-center gap-2">
+          <USwitch
+            :model-value="restricted"
+            :disabled="busy"
+            size="sm"
+            data-testid="workspace-restrict-toggle"
+            @update:model-value="setAccessMode"
+          />
+          <span class="text-xs text-slate-300">
+            {{ t('layout.workspaceMembers.accessMode.restrictToggle') }}
+          </span>
+        </label>
+      </div>
+    </section>
+
+    <!-- roster -->
+    <section>
+      <h3 class="mb-2 font-semibold text-white">{{ t('layout.workspaceMembers.roster.title') }}</h3>
+      <p v-if="!rosterReady" class="text-slate-500">{{ t('common.loading') }}</p>
+      <ul v-else class="space-y-1" data-testid="workspace-members-roster">
+        <li
+          v-for="m in members.members"
+          :key="m.userId"
+          class="flex items-center justify-between gap-2 rounded-md bg-slate-800/40 px-2 py-1"
+          data-testid="workspace-member-row"
+        >
+          <span class="truncate">{{ memberLabel(m.userId, m.name, m.email) }}</span>
+          <span class="flex shrink-0 items-center gap-2">
+            <USelect
+              :model-value="m.role"
+              :items="ROLE_ITEMS"
+              value-key="value"
+              size="xs"
+              class="w-32"
+              :disabled="busy"
+              data-testid="workspace-member-role"
+              @update:model-value="(r: WorkspaceRole) => updateRole(m.userId, r)"
+            />
+            <UButton
+              size="xs"
+              color="error"
+              variant="ghost"
+              icon="i-lucide-user-minus"
+              :disabled="busy"
+              :aria-label="t('layout.workspaceMembers.roster.remove')"
+              data-testid="workspace-member-remove"
+              @click="removeMember(m.userId, memberLabel(m.userId, m.name, m.email))"
+            />
+          </span>
+        </li>
+        <li v-if="members.members.length === 0" class="text-slate-500">
+          {{ t('layout.workspaceMembers.roster.empty') }}
+        </li>
+      </ul>
+    </section>
+
+    <!-- add member -->
+    <section>
+      <h3 class="mb-2 font-semibold text-white">{{ t('layout.workspaceMembers.add.title') }}</h3>
+      <p v-if="!accountId" class="text-slate-500">
+        {{ t('layout.workspaceMembers.add.noAccount') }}
+      </p>
+      <template v-else>
+        <form class="flex gap-2" @submit.prevent="addMember">
+          <USelect
+            v-model="addUserId"
+            :items="candidates"
+            value-key="value"
+            :placeholder="t('layout.workspaceMembers.add.selectMember')"
+            :disabled="candidates.length === 0"
+            class="flex-1"
+            data-testid="workspace-member-add-select"
+          />
+          <USelect v-model="addRole" :items="ROLE_ITEMS" value-key="value" class="w-32" />
+          <UButton
+            type="submit"
+            color="primary"
+            icon="i-lucide-user-plus"
+            :loading="busy"
+            :disabled="!addUserId"
+            data-testid="workspace-member-add-submit"
+          >
+            {{ t('layout.workspaceMembers.add.submit') }}
+          </UButton>
+        </form>
+        <p v-if="candidates.length === 0" class="mt-2 text-slate-500">
+          {{ t('layout.workspaceMembers.add.allAdded') }}
+        </p>
+      </template>
+    </section>
+  </div>
+</template>