fixed the tools desciption bug (#1079)

fixes(ui): correct tool descriptions and agent card display issues

-Changed server reference comparison from partial name matching to full
reference matching, ensuring tools display their correct descriptions
and prevent adding the same tool multiple times
 -Resolved AgentCard overlay interfering with model name visibility

Fixes incorrect tool descriptions in ToolsSection and SelectToolsDialog
components, and improves AgentCard UI rendering.
Closes issue #1003

---------

Signed-off-by: killjoycircuit <[email protected]>
Signed-off-by: Rutuj Dhawale <[email protected]>

Author: killjoycircuit

ui/src/app/models/new/page.tsx

@@ -45,8 +45,6 @@ interface ModelParam {
   value: string;
 }
 
-// Helper function to process parameters before submission
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const processModelParams = (requiredParams: ModelParam[], optionalParams: ModelParam[]): Record<string, any> => {
   const allParams = [...requiredParams, ...optionalParams]
@@ -254,13 +252,12 @@ function ModelPageContent() {
     };
     fetchModelData();
     return () => { isMounted = false; };
-  }, [isEditMode, modelConfigName, providers, providerModelsData, modelConfigNamespace]);
+  }, [isEditMode, modelConfigName, providers, providerModelsData, modelConfigNamespace, isLoading]);
 
   useEffect(() => {
     if (selectedProvider) {
       const requiredKeys = selectedProvider.requiredParams || [];
       const optionalKeys = selectedProvider.optionalParams || [];
-
       const currentModelRequiresReset = !isEditMode;
 
       if (currentModelRequiresReset) {
@@ -610,3 +607,8 @@ export default function ModelPage() {
     </React.Suspense>
   );
 }
+
+
+
+
+

ui/src/components/AgentCard.tsx

@@ -5,7 +5,7 @@ import { DeleteButton } from "@/components/DeleteAgentButton";
 import KagentLogo from "@/components/kagent-logo";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Pencil, AlertCircle, Clock } from "lucide-react";
+import { Pencil } from "lucide-react";
 import { k8sRefUtils } from "@/lib/k8sUtils";
 import { cn } from "@/lib/utils";
 
@@ -19,6 +19,7 @@ export function AgentCard({ agentResponse: { agent, model, modelProvider, deploy
     agent.metadata.namespace || '',
     agent.metadata.name || ''
   );
+
   const isBYO = agent.spec?.type === "BYO";
   const byoImage = isBYO ? agent.spec?.byo?.deployment?.image : undefined;
   const isReady = deploymentReady && accepted;
@@ -29,6 +30,24 @@ export function AgentCard({ agentResponse: { agent, model, modelProvider, deploy
     router.push(`/agents/new?edit=true&name=${agent.metadata.name}&namespace=${agent.metadata.namespace}`);
   };
 
+  const getStatusInfo = () => {
+    if (!accepted) {
+      return {
+        message: "Agent not Accepted",
+        className:"bg-red-500/10 text-red-600 dark:text-red-500"
+      };
+    }
+    if (!deploymentReady) {
+      return {
+        message: "Agent not Ready",
+        className:"bg-yellow-400/30 text-yellow-800 dark:bg-yellow-500/40 dark:text-yellow-200"
+      };
+    }
+    return null;
+  };
+
+  const statusInfo = getStatusInfo();
+
   const cardContent = (
     <Card className={cn(
       "group relative transition-all duration-200 overflow-hidden min-h-[200px]",
@@ -69,37 +88,12 @@ export function AgentCard({ agentResponse: { agent, model, modelProvider, deploy
           )}
         </div>
       </CardContent>
-
-      {!isReady && (
+      {statusInfo && (
         <div className={cn(
-          "absolute inset-0 rounded-xl flex flex-col items-center justify-center z-20 backdrop-blur-[2px]",
-          !accepted 
-            ? "bg-destructive/90" 
-            : "bg-secondary/90"
+          "absolute bottom-0 left-0 right-0 z-20 py-1.5 px-4 text-right text-xs font-medium rounded-b-xl",
+          statusInfo.className
         )}>
-          <div className="text-center px-6 py-8 max-w-[80%]">
-            <div className="flex justify-center mb-4">
-              {!accepted ? (
-                <AlertCircle className="h-12 w-12 text-destructive-foreground drop-shadow-lg" />
-              ) : (
-                <Clock className="h-12 w-12 text-secondary-foreground drop-shadow-lg" />
-              )}
-            </div>
-            <h3 className={cn(
-              "font-bold text-2xl mb-3 drop-shadow-lg",
-              !accepted ? "text-destructive-foreground" : "text-secondary-foreground"
-            )}>
-              {!accepted ? "Agent not Accepted" : "Agent not Ready"}
-            </h3>
-            <p className={cn(
-              "text-base drop-shadow",
-              !accepted ? "text-destructive-foreground/95" : "text-secondary-foreground/90"
-            )}>
-              {!accepted 
-                ? "Configuration needs review" 
-                : "Still deploying..."}
-            </p>
-          </div>
+          {statusInfo.message}
         </div>
       )}
     </Card>