Add team seat mismatch UX

Author: AnthonyRonning

frontend/src/app.tsx

@@ -15,6 +15,7 @@ import { NotificationProvider } from "./contexts/NotificationContext";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { ProxyEventListener } from "./components/ProxyEventListener";
 import { UpdateEventListener } from "./components/UpdateEventListener";
+import { TeamSeatMismatchAlert } from "./components/team/TeamSeatMismatchAlert";
 import { TTSProvider } from "./services/tts/TTSContext";
 
 const DEFAULT_OPEN_SECRET_CLIENT_ID = "ba5a14b5-d915-47b1-b7b1-afda52bc5fc6";
@@ -108,6 +109,7 @@ export default function App() {
                       <ProxyEventListener />
                       <UpdateEventListener />
                       <DeepLinkHandler />
+                      <TeamSeatMismatchAlert />
                       <InnerApp />
                     </BillingServiceProvider>
                   </TTSProvider>

frontend/src/billing/billingPortal.ts

@@ -0,0 +1,8 @@
+import { getBillingService } from "@/billing/billingService";
+import { openExternalUrl } from "@/utils/openUrl";
+
+export async function openBillingPortal(): Promise<void> {
+  const billingService = getBillingService();
+  const url = await billingService.getPortalUrl();
+  await openExternalUrl(url);
+}

frontend/src/components/AccountMenu.tsx

@@ -51,6 +51,7 @@ import type { TeamStatus } from "@/types/team";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { TeamManagementDialog } from "@/components/team/TeamManagementDialog";
 import { ApiKeyManagementDialog } from "@/components/apikeys/ApiKeyManagementDialog";
+import { getTeamSeatMismatch } from "@/utils/teamSeats";
 import packageJson from "../../package.json";
 import { SIDEBAR_ACCOUNT_MENU_WIDTH_CLASS, SIDEBAR_LAYOUT_STYLE } from "@/constants/layout";
 
@@ -114,7 +115,7 @@ export function AccountMenu() {
   const [showAboutMenu, setShowAboutMenu] = useState(false);
   const [portalError, setPortalError] = useState<string | null>(null);
 
-  const hasStripeAccount = billingStatus?.stripe_customer_id !== null;
+  const hasStripeAccount = !!billingStatus?.stripe_customer_id;
   const productName = billingStatus?.product_name || "";
   const isPro = productName.toLowerCase().includes("pro");
   const isMax = productName.toLowerCase().includes("max");
@@ -157,6 +158,8 @@ export function AccountMenu() {
   // Show alert badge if user has team plan but hasn't created team yet
   const showTeamSetupAlert =
     isTeamPlan && teamStatus?.has_team_subscription && !teamStatus?.team_created;
+  const teamSeatMismatch = getTeamSeatMismatch(teamStatus);
+  const showTeamAttentionAlert = showTeamSetupAlert || !!teamSeatMismatch;
 
   // Determine if API Management should be shown
   // On desktop/web/Android: always show
@@ -301,8 +304,12 @@ export function AccountMenu() {
                     className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--sidebar-chrome))] text-[hsl(var(--on-sidebar-chrome))] shadow-none ring-0 transition-colors hover:bg-[hsl(var(--sidebar-chrome-hover))]"
                   >
                     <User className="h-4 w-4" />
-                    {showTeamSetupAlert && (
-                      <AlertCircle className="absolute -right-1 -top-1 h-4 w-4 rounded-full bg-background text-maple-warning" />
+                    {showTeamAttentionAlert && (
+                      <AlertCircle
+                        className={`absolute -right-1 -top-1 h-4 w-4 rounded-full bg-background ${
+                          teamSeatMismatch ? "text-destructive" : "text-maple-warning"
+                        }`}
+                      />
                     )}
                   </button>
                 </DropdownMenuTrigger>
@@ -362,14 +369,21 @@ export function AccountMenu() {
                             <Users className="mr-2 h-4 w-4" />
                             <span>Manage Team</span>
                           </div>
-                          {showTeamSetupAlert && (
+                          {teamSeatMismatch ? (
+                            <Badge
+                              variant="secondary"
+                              className="bg-destructive py-0 px-1.5 text-xs font-medium text-destructive-onFilled"
+                            >
+                              Paused
+                            </Badge>
+                          ) : showTeamSetupAlert ? (
                             <Badge
                               variant="secondary"
                               className="bg-maple-warning py-0 px-1.5 text-xs font-medium text-maple-onWarning"
                             >
                               Setup Required
                             </Badge>
-                          )}
+                          ) : null}
                         </div>
                       </DropdownMenuItem>
                     )}

frontend/src/components/team/TeamDashboard.tsx

@@ -1,12 +1,30 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
-import { UserPlus, AlertTriangle, Crown, User, Pencil, Check, X, Loader2 } from "lucide-react";
+import {
+  UserPlus,
+  AlertTriangle,
+  Crown,
+  User,
+  Pencil,
+  Check,
+  X,
+  Loader2,
+  CreditCard,
+  Users
+} from "lucide-react";
 import { TeamInviteDialog } from "./TeamInviteDialog";
 import { TeamMembersList } from "./TeamMembersList";
 import { getBillingService } from "@/billing/billingService";
+import { openBillingPortal } from "@/billing/billingPortal";
+import { useLocalState } from "@/state/useLocalState";
+import {
+  formatTeamSeatMismatchMessage,
+  getTeamSeatCounts,
+  getTeamSeatMismatch
+} from "@/utils/teamSeats";
 import { useQueryClient } from "@tanstack/react-query";
 import type { TeamStatus } from "@/types/team";
 
@@ -20,7 +38,11 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
   const [editedName, setEditedName] = useState("");
   const [isSavingName, setIsSavingName] = useState(false);
   const [nameError, setNameError] = useState<string | null>(null);
+  const [isPortalLoading, setIsPortalLoading] = useState(false);
+  const [portalError, setPortalError] = useState<string | null>(null);
+  const membersSectionRef = useRef<HTMLDivElement>(null);
   const queryClient = useQueryClient();
+  const { billingStatus } = useLocalState();
 
   if (!teamStatus) {
     return (
@@ -33,10 +55,15 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
     );
   }
 
-  const seatsUsed = teamStatus.seats_used || 0;
-  const seatsPurchased = teamStatus.seats_purchased || 0;
+  const seatCounts = getTeamSeatCounts(teamStatus);
+  const seatMismatch = getTeamSeatMismatch(teamStatus);
+  const seatsUsed = seatCounts.memberCount ?? 0;
+  const seatsPurchased = seatCounts.billedSeatCount ?? 0;
   const isAdmin = teamStatus.role === "admin" || teamStatus.is_team_admin === true;
   const seatUsagePercentage = seatsPurchased > 0 ? (seatsUsed / seatsPurchased) * 100 : 0;
+  const canOpenBillingPortal = billingStatus
+    ? !!billingStatus.stripe_customer_id
+    : !!teamStatus.has_team_subscription;
 
   const handleStartEdit = () => {
     setEditedName(teamStatus.team_name || "");
@@ -90,6 +117,29 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
     }
   };
 
+  const handleOpenBilling = async () => {
+    if (!canOpenBillingPortal) return;
+
+    try {
+      setPortalError(null);
+      setIsPortalLoading(true);
+      await openBillingPortal();
+      await queryClient.invalidateQueries({ queryKey: ["billingStatus"] });
+      await queryClient.invalidateQueries({ queryKey: ["teamStatus"] });
+    } catch (error) {
+      console.error("Failed to open billing portal:", error);
+      setPortalError(
+        "Unable to open subscription management. Please try again or contact support@trymaple.ai."
+      );
+    } finally {
+      setIsPortalLoading(false);
+    }
+  };
+
+  const handleReviewMembers = () => {
+    membersSectionRef.current?.scrollIntoView({ block: "nearest" });
+  };
+
   // Simplified view for non-admin members
   if (!isAdmin) {
     return (
@@ -99,6 +149,20 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
         </DialogHeader>
 
         <div className="mt-3 space-y-3 overflow-hidden">
+          {seatMismatch && (
+            <div className="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-destructive">
+              <div className="flex items-start gap-2">
+                <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">Team usage is paused</p>
+                  <p className="text-xs leading-relaxed">
+                    {formatTeamSeatMismatchMessage(seatMismatch, "member")}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Compact team info */}
           <div className="bg-muted/50 rounded-lg p-3">
             <div className="flex items-center justify-between gap-2">
@@ -137,11 +201,45 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
       </DialogHeader>
 
       <div className="mt-3 space-y-3 overflow-hidden">
-        {/* Seat limit exceeded warning */}
-        {teamStatus.seat_limit_exceeded && (
-          <div className="rounded-md bg-destructive/10 p-2.5 text-destructive text-xs flex items-start gap-2">
-            <AlertTriangle className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
-            <span>Seat limit exceeded. Remove members or purchase additional seats.</span>
+        {seatMismatch && (
+          <div className="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-destructive">
+            <div className="flex items-start gap-2">
+              <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div>
+                  <p className="text-sm font-medium">Team usage is paused</p>
+                  <p className="mt-1 text-xs leading-relaxed">
+                    {formatTeamSeatMismatchMessage(seatMismatch, "admin")}
+                  </p>
+                </div>
+                <div className="flex flex-col gap-2 sm:flex-row">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-8 border-destructive/30 text-destructive hover:text-destructive"
+                    onClick={handleReviewMembers}
+                  >
+                    <Users className="mr-1.5 h-3.5 w-3.5" />
+                    Manage Members
+                  </Button>
+                  {canOpenBillingPortal && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="h-8 border-destructive/30 text-destructive hover:text-destructive"
+                      onClick={handleOpenBilling}
+                      disabled={isPortalLoading}
+                    >
+                      <CreditCard className="mr-1.5 h-3.5 w-3.5" />
+                      {isPortalLoading ? "Opening..." : "Add Seats"}
+                    </Button>
+                  )}
+                </div>
+                {portalError && <p className="text-xs leading-relaxed">{portalError}</p>}
+              </div>
+            </div>
           </div>
         )}
 
@@ -233,7 +331,11 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
             </div>
             <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
               <div
-                className="h-full transition-all bg-emerald-500"
+                className={
+                  seatMismatch
+                    ? "h-full bg-destructive transition-all"
+                    : "h-full bg-emerald-500 transition-all"
+                }
                 style={{
                   width: `${Math.min(seatUsagePercentage, 100)}%`
                 }}
@@ -246,7 +348,7 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
         {isAdmin && (
           <Button
             onClick={() => setIsInviteDialogOpen(true)}
-            disabled={teamStatus.seat_limit_exceeded}
+            disabled={!!seatMismatch}
             size="sm"
             className="w-full"
           >
@@ -256,7 +358,9 @@ export function TeamDashboard({ teamStatus }: TeamDashboardProps) {
         )}
 
         {/* Members list */}
-        <TeamMembersList teamStatus={teamStatus} />
+        <div ref={membersSectionRef}>
+          <TeamMembersList teamStatus={teamStatus} />
+        </div>
       </div>
 
       {/* Invite dialog */}

frontend/src/components/team/TeamInviteDialog.tsx

@@ -14,8 +14,8 @@ import { Textarea } from "@/components/ui/textarea";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Loader2, AlertCircle, UserPlus, Info, CreditCard } from "lucide-react";
 import { getBillingService } from "@/billing/billingService";
+import { openBillingPortal } from "@/billing/billingPortal";
 import { useLocalState } from "@/state/useLocalState";
-import { isTauri } from "@/utils/platform";
 import type { TeamStatus } from "@/types/team";
 
 interface TeamInviteDialogProps {
@@ -32,43 +32,20 @@ export function TeamInviteDialog({ open, onOpenChange, teamStatus }: TeamInviteD
   const [isPortalLoading, setIsPortalLoading] = useState(false);
   const queryClient = useQueryClient();
   const { billingStatus } = useLocalState();
-  const seatsAvailable = teamStatus?.seats_available || 0;
-  const hasStripeAccount = billingStatus?.stripe_customer_id !== null;
+  const seatsAvailable = Math.max(0, teamStatus?.seats_available || 0);
+  const canOpenBillingPortal = billingStatus
+    ? !!billingStatus.stripe_customer_id
+    : !!teamStatus?.has_team_subscription;
 
   const handleManageSubscription = async () => {
-    if (!hasStripeAccount) return;
+    if (!canOpenBillingPortal) return;
 
     try {
       setError(null);
       setIsPortalLoading(true);
-      const billingService = getBillingService();
-      const url = await billingService.getPortalUrl();
-
-      // Use external browser for all Tauri platforms (mobile and desktop)
-      if (isTauri()) {
-        try {
-          // Dynamic import to avoid issues in web environments
-          const { invoke } = await import("@tauri-apps/api/core");
-          await invoke("plugin:opener|open_url", { url })
-            .then(() => {
-              console.log("[TeamInvite] Successfully opened URL in external browser");
-            })
-            .catch((error: Error) => {
-              console.error("[TeamInvite] Failed to open external browser:", error);
-              // Fall back to window.open if opener plugin fails
-              window.open(url, "_blank", "noopener,noreferrer");
-            });
-          return;
-        } catch (importError) {
-          console.error("[TeamInvite] Failed to import Tauri APIs:", importError);
-          // Fall back to web approach if dynamic import fails
-          window.open(url, "_blank", "noopener,noreferrer");
-          return;
-        }
-      }
-
-      // Web flow
-      window.open(url, "_blank", "noopener,noreferrer");
+      await openBillingPortal();
+      await queryClient.invalidateQueries({ queryKey: ["billingStatus"] });
+      await queryClient.invalidateQueries({ queryKey: ["teamStatus"] });
     } catch (error) {
       console.error("Failed to open billing portal:", error);
       setError(
@@ -207,7 +184,7 @@ or comma-separated: john@example.com, jane@example.com`}
                     before inviting new ones.
                   </AlertDescription>
                 </Alert>
-                {hasStripeAccount && (
+                {canOpenBillingPortal && (
                   <Button
                     variant="outline"
                     size="sm"