From 66b0de0ac29a660a0caa6692dafbde9b654a0d54 Mon Sep 17 00:00:00 2001
From: Viet Tran <viettranx@gmail.com>
Date: Fri, 6 Mar 2026 22:39:25 +0700
Subject: [PATCH] fix(ui): add tooltip explaining predefined-only team members
 (#73)

Add info tooltip on the Members label in team create dialog and team
members tab, explaining that only predefined agents can be added as
team members since open agents lack shared context for collaboration.
---
 ui/web/src/pages/teams/team-create-dialog.tsx | 24 +++++++++++++++++--
 ui/web/src/pages/teams/team-members-tab.tsx   | 24 +++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/ui/web/src/pages/teams/team-create-dialog.tsx b/ui/web/src/pages/teams/team-create-dialog.tsx
index ce3bffc0..40a443da 100644
--- a/ui/web/src/pages/teams/team-create-dialog.tsx
+++ b/ui/web/src/pages/teams/team-create-dialog.tsx
@@ -11,7 +11,13 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Combobox } from "@/components/ui/combobox";
 import { Badge } from "@/components/ui/badge";
-import { X } from "lucide-react";
+import { X, Info } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useAgents } from "@/pages/agents/hooks/use-agents";
 
 interface TeamCreateDialogProps {
@@ -143,7 +149,21 @@ export function TeamCreateDialog({ open, onOpenChange, onCreate }: TeamCreateDia
           </div>
 
           <div className="space-y-2">
-            <Label>Members</Label>
+            <Label className="inline-flex items-center gap-1">
+              Members
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    Only predefined agents can be added as team members.
+                    <br />
+                    Open agents are per-user and lack shared context needed for team collaboration.
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </Label>
             <Combobox
               value={memberSearch}
               onChange={(val) => {
diff --git a/ui/web/src/pages/teams/team-members-tab.tsx b/ui/web/src/pages/teams/team-members-tab.tsx
index 3f120b14..162a4966 100644
--- a/ui/web/src/pages/teams/team-members-tab.tsx
+++ b/ui/web/src/pages/teams/team-members-tab.tsx
@@ -2,7 +2,13 @@ import { useState, useMemo, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Combobox } from "@/components/ui/combobox";
 import { Label } from "@/components/ui/label";
-import { UserPlus } from "lucide-react";
+import { UserPlus, Info } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useAgents } from "@/pages/agents/hooks/use-agents";
 import type { TeamMemberData } from "@/types/team";
 import { MemberList } from "./member-sections";
@@ -50,7 +56,21 @@ export function TeamMembersTab({ members, onAddMember, onRemoveMember }: TeamMem
     <div className="max-w-2xl space-y-6">
       {onAddMember && (
         <div className="space-y-2">
-          <Label>Add Member</Label>
+          <Label className="inline-flex items-center gap-1">
+            Add Member
+            <TooltipProvider delayDuration={200}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  Only predefined agents can be added as team members.
+                  <br />
+                  Open agents are per-user and lack shared context needed for team collaboration.
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </Label>
           <div className="flex gap-2">
             <div className="flex-1">
               <Combobox