Show cloud switcher and option to add a team when logged in (#8291)

Author: mrubens

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -89,7 +89,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			clineMessages,
 			commands,
 			cloudUserInfo,
-			cloudOrganizations,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration.
@@ -1238,9 +1237,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					<div
 						className={cn(
 							"flex flex-shrink-0 items-center gap-0.5",
-							!isEditMode && cloudOrganizations && cloudOrganizations.length > 0 && cloudUserInfo
-								? ""
-								: "pr-2",
+							!isEditMode && cloudUserInfo ? "" : "pr-2",
 						)}>
 						{isTtsPlaying && (
 							<StandardTooltip content={t("chat:stopTts")}>
@@ -1263,9 +1260,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							</StandardTooltip>
 						)}
 						{!isEditMode ? <IndexingStatusBadge /> : null}
-						{!isEditMode && cloudOrganizations && cloudOrganizations.length > 0 && cloudUserInfo && (
-							<CloudAccountSwitcher />
-						)}
+						{!isEditMode && cloudUserInfo && <CloudAccountSwitcher />}
 					</div>
 				</div>
 			</div>

webview-ui/src/components/cloud/CloudAccountSwitcher.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react"
-import { Building2 } from "lucide-react"
+import { Building2, Plus } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectSeparator } from "@/components/ui/select"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { vscode } from "@src/utils/vscode"
@@ -8,7 +8,7 @@ import { cn } from "@src/lib/utils"
 
 export const CloudAccountSwitcher = () => {
 	const { t } = useAppTranslation()
-	const { cloudUserInfo, cloudOrganizations = [] } = useExtensionState()
+	const { cloudUserInfo, cloudOrganizations = [], cloudApiUrl } = useExtensionState()
 	const [selectedOrgId, setSelectedOrgId] = useState<string | null>(cloudUserInfo?.organizationId || null)
 	const [isLoading, setIsLoading] = useState(false)
 
@@ -17,12 +17,21 @@ export const CloudAccountSwitcher = () => {
 		setSelectedOrgId(cloudUserInfo?.organizationId || null)
 	}, [cloudUserInfo?.organizationId])
 
-	// Don't show the switcher if user has no organizations
-	if (!cloudOrganizations || cloudOrganizations.length === 0 || !cloudUserInfo) {
+	// Show the switcher whenever user is authenticated
+	if (!cloudUserInfo) {
 		return null
 	}
 
 	const handleOrganizationChange = async (value: string) => {
+		// Handle "Create Team Account" option
+		if (value === "create-team") {
+			if (cloudApiUrl) {
+				const billingUrl = `${cloudApiUrl}/billing`
+				vscode.postMessage({ type: "openExternal", url: billingUrl })
+			}
+			return
+		}
+
 		const newOrgId = value === "personal" ? null : value
 
 		// Don't do anything if selecting the same organization
@@ -139,6 +148,19 @@ export const CloudAccountSwitcher = () => {
 							</div>
 						</SelectItem>
 					))}
+
+					{/* Only show Create Team Account if user has no organizations */}
+					{cloudOrganizations.length === 0 && (
+						<>
+							<SelectSeparator />
+							<SelectItem value="create-team">
+								<div className="flex items-center gap-2">
+									<Plus className="w-4.5 h-4.5" />
+									<span>{t("cloud:createTeamAccount")}</span>
+								</div>
+							</SelectItem>
+						</>
+					)}
 				</SelectContent>
 			</Select>
 		</div>

webview-ui/src/components/cloud/CloudView.tsx

@@ -190,11 +190,13 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
 								)}
 
 								{/* Organization Switcher - moved below email */}
-								{organizations && organizations.length > 0 && (
-									<div className="w-full max-w-60 mt-4">
-										<OrganizationSwitcher userInfo={userInfo} organizations={organizations} />
-									</div>
-								)}
+								<div className="w-full max-w-60 mt-4">
+									<OrganizationSwitcher
+										userInfo={userInfo}
+										organizations={organizations}
+										cloudApiUrl={cloudApiUrl}
+									/>
+								</div>
 							</div>
 						)}
 

webview-ui/src/components/cloud/OrganizationSwitcher.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react"
-import { Building2, User } from "lucide-react"
+import { Building2, User, Plus } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectSeparator } from "@/components/ui/select"
 import { type CloudUserInfo, type CloudOrganizationMembership } from "@roo-code/types"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
@@ -10,9 +10,15 @@ type OrganizationSwitcherProps = {
 	userInfo: CloudUserInfo
 	organizations: CloudOrganizationMembership[]
 	onOrganizationChange?: (organizationId: string | null) => void
+	cloudApiUrl?: string
 }
 
-export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationChange }: OrganizationSwitcherProps) => {
+export const OrganizationSwitcher = ({
+	userInfo,
+	organizations,
+	onOrganizationChange,
+	cloudApiUrl,
+}: OrganizationSwitcherProps) => {
 	const { t } = useAppTranslation()
 	const [selectedOrgId, setSelectedOrgId] = useState<string | null>(userInfo.organizationId || null)
 	const [isLoading, setIsLoading] = useState(false)
@@ -45,6 +51,15 @@ export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationCh
 	}, [userInfo.organizationId])
 
 	const handleOrganizationChange = async (value: string) => {
+		// Handle "Create Team Account" option
+		if (value === "create-team") {
+			if (cloudApiUrl) {
+				const billingUrl = `${cloudApiUrl}/billing`
+				vscode.postMessage({ type: "openExternal", url: billingUrl })
+			}
+			return
+		}
+
 		const newOrgId = value === "personal" ? null : value
 
 		// Don't do anything if selecting the same organization
@@ -69,10 +84,7 @@ export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationCh
 		}
 	}
 
-	// If user has no organizations, don't show the switcher
-	if (!organizations || organizations.length === 0) {
-		return null
-	}
+	// Always show the switcher when user is authenticated
 
 	const currentValue = selectedOrgId || "personal"
 
@@ -139,6 +151,19 @@ export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationCh
 							</div>
 						</SelectItem>
 					))}
+
+					{/* Only show Create Team Account if user has no organizations */}
+					{organizations.length === 0 && (
+						<>
+							<SelectSeparator />
+							<SelectItem value="create-team">
+								<div className="flex items-center gap-2">
+									<Plus className="w-4.5 h-4.5" />
+									<span>{t("cloud:createTeamAccount")}</span>
+								</div>
+							</SelectItem>
+						</>
+					)}
 				</SelectContent>
 			</Select>
 		</div>

webview-ui/src/i18n/locales/ca/cloud.json

@@ -25,6 +25,7 @@
 	"startOver": "Start over",
 	"personalAccount": "Personal Account",
 	"switchAccount": "Switch Roo Code Cloud Account",
+	"createTeamAccount": "Create Team Account",
 	"upsell": {
 		"autoApprovePowerUser": "Giving Roo some independence? Control it from anywhere with Roo Code Cloud. <learnMoreLink>Learn more</learnMoreLink>.",
 		"longRunningTask": "This might take a while. Continue from anywhere with Cloud.",