fix(app): add @ prefix when constructing scope:team for npm operations

npm team/access operations require `@scope:team` format but the frontend was sending `scope:team`
without the `@` prefix.

This was obscured by the fact that the admin operations aren't quite functional yet for most orgs as
OTP isn't supported, and by the fact that `listTeamUsers` only fails with this incorrect format when
it goes through the CLI, which is only the case for the authenticated user's own orgs.

Author: serhalp

app/components/OrgMembersPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NewOperation } from '~/composables/useConnector'
+import { buildScopeTeam } from '~/utils/npm'
 
 const props = defineProps<{
   orgName: string
@@ -144,10 +145,10 @@ async function loadTeamMemberships() {
   try {
     const teamsResult = await listOrgTeams(props.orgName)
     if (teamsResult) {
-      // Teams come as "org:team" format
+      // Teams come as "org:team" format from npm, need @scope:team for API calls
       const teamPromises = teamsResult.map(async (fullTeamName: string) => {
         const teamName = fullTeamName.replace(`${props.orgName}:`, '')
-        const membersResult = await listTeamUsers(fullTeamName)
+        const membersResult = await listTeamUsers(buildScopeTeam(props.orgName, teamName))
         if (membersResult) {
           teamMembers.value[teamName] = membersResult
         }
@@ -183,7 +184,7 @@ async function handleAddMember() {
     // Second operation: add user to team (if a team is selected)
     // This depends on the org operation completing first
     if (newTeam.value && addedOrgOp) {
-      const scopeTeam = `${props.orgName}:${newTeam.value}`
+      const scopeTeam = buildScopeTeam(props.orgName, newTeam.value)
       const teamOperation: NewOperation = {
         type: 'team:add-user',
         params: {

app/components/OrgTeamsPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NewOperation } from '~/composables/useConnector'
+import { buildScopeTeam } from '~/utils/npm'
 
 const props = defineProps<{
   orgName: string
@@ -103,7 +104,7 @@ async function loadTeamUsers(teamName: string) {
   isLoadingUsers.value[teamName] = true
 
   try {
-    const scopeTeam = `${props.orgName}:${teamName}`
+    const scopeTeam = buildScopeTeam(props.orgName, teamName)
     const result = await listTeamUsers(scopeTeam)
     if (result) {
       teamUsers.value[teamName] = result
@@ -135,7 +136,7 @@ async function handleCreateTeam() {
   isCreatingTeam.value = true
   try {
     const teamName = newTeamName.value.trim()
-    const scopeTeam = `${props.orgName}:${teamName}`
+    const scopeTeam = buildScopeTeam(props.orgName, teamName)
     const operation: NewOperation = {
       type: 'team:create',
       params: { scopeTeam },
@@ -153,7 +154,7 @@ async function handleCreateTeam() {
 
 // Destroy team
 async function handleDestroyTeam(teamName: string) {
-  const scopeTeam = `${props.orgName}:${teamName}`
+  const scopeTeam = buildScopeTeam(props.orgName, teamName)
   const operation: NewOperation = {
     type: 'team:destroy',
     params: { scopeTeam },
@@ -171,7 +172,7 @@ async function handleAddUser(teamName: string) {
   isAddingUser.value = true
   try {
     const username = newUserUsername.value.trim().replace(/^@/, '')
-    const scopeTeam = `${props.orgName}:${teamName}`
+    const scopeTeam = buildScopeTeam(props.orgName, teamName)
 
     let dependsOnId: string | undefined
 
@@ -213,7 +214,7 @@ async function handleAddUser(teamName: string) {
 
 // Remove user from team
 async function handleRemoveUser(teamName: string, username: string) {
-  const scopeTeam = `${props.orgName}:${teamName}`
+  const scopeTeam = buildScopeTeam(props.orgName, teamName)
   const operation: NewOperation = {
     type: 'team:rm-user',
     params: { scopeTeam, user: username },

app/components/PackageAccessControls.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NewOperation } from '~/composables/useConnector'
+import { buildScopeTeam } from '~/utils/npm'
 
 const props = defineProps<{
   packageName: string
@@ -96,7 +97,7 @@ async function handleGrantAccess() {
 
   isGranting.value = true
   try {
-    const scopeTeam = `${orgName.value}:${selectedTeam.value}`
+    const scopeTeam = buildScopeTeam(orgName.value, selectedTeam.value)
     const operation: NewOperation = {
       type: 'access:grant',
       params: {

app/utils/npm.ts

@@ -0,0 +1,11 @@
+/**
+ * Constructs a scope:team string in the format expected by npm.
+ * npm operations require the format @scope:team (with @ prefix).
+ *
+ * @param orgName - The organization name (without @)
+ * @param teamName - The team name
+ * @returns The scope:team string in @scope:team format
+ */
+export function buildScopeTeam(orgName: string, teamName: string): string {
+  return `@${orgName}:${teamName}`
+}

test/unit/npm-utils.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildScopeTeam } from '../../app/utils/npm'
+import { validateScopeTeam } from '../../cli/src/npm-client'
+
+describe('buildScopeTeam', () => {
+  it('constructs scope:team with @ prefix', () => {
+    expect(buildScopeTeam('netlify', 'developers')).toBe('@netlify:developers')
+    expect(buildScopeTeam('nuxt', 'core')).toBe('@nuxt:core')
+  })
+
+  it('produces format accepted by validateScopeTeam', () => {
+    expect(() => validateScopeTeam(buildScopeTeam('netlify', 'developers'))).not.toThrow()
+    expect(() => validateScopeTeam(buildScopeTeam('nuxt', 'core'))).not.toThrow()
+    expect(() => validateScopeTeam(buildScopeTeam('my-org', 'my-team'))).not.toThrow()
+  })
+})