feat: Refactor AgentCard and AgentGrid components for improved layout and accessibility

client/src/components/Agents/AgentCard.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { Label } from '@librechat/client';
 import type t from 'librechat-data-provider';
-import useLocalize from '~/hooks/useLocalize';
 import { cn, renderAgentAvatar, getContactDisplayName } from '~/utils';
+import { useLocalize } from '~/hooks';
 
 interface AgentCardProps {
   agent: t.Agent; // The agent data to display
@@ -18,10 +19,10 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
   return (
     <div
       className={cn(
-        'group relative flex overflow-hidden rounded-2xl',
-        'cursor-pointer transition-colors duration-200',
-        'aspect-[5/2.5] w-full',
-        'bg-surface-tertiary hover:bg-surface-hover-alt',
+        'group relative h-40 overflow-hidden rounded-xl border border-border-light',
+        'cursor-pointer shadow-sm transition-all duration-200 hover:border-border-medium hover:shadow-lg',
+        'bg-surface-tertiary hover:bg-surface-hover',
+        'space-y-3 p-4',
         className,
       )}
       onClick={onClick}
@@ -39,50 +40,57 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
         }
       }}
     >
-      <div className="flex h-full gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
-        {/* Agent avatar section - left side, responsive */}
-        <div className="flex flex-shrink-0 items-center">
-          {renderAgentAvatar(agent, { size: 'md' })}
+      {/* Two column layout */}
+      <div className="flex h-full items-start gap-3">
+        {/* Left column: Avatar and Category */}
+        <div className="flex h-full flex-shrink-0 flex-col justify-between space-y-4">
+          <div className="flex-shrink-0">{renderAgentAvatar(agent, { size: 'sm' })}</div>
+
+          {/* Category tag */}
+          <div className="inline-flex items-center rounded-md border-border-xheavy bg-surface-active-alt px-2 py-1 text-xs font-medium">
+            {agent.category && (
+              <Label className="line-clamp-1 font-normal">
+                {agent.category.charAt(0).toUpperCase() + agent.category.slice(1)}
+              </Label>
+            )}
+          </div>
         </div>
 
-        {/* Agent info section - right side, responsive */}
-        <div className="flex min-w-0 flex-1 flex-col justify-center">
-          {/* Agent name - responsive text sizing */}
-          <h3 className="mb-1 line-clamp-1 text-base font-bold text-text-primary sm:mb-2 sm:text-lg">
-            {agent.name}
-          </h3>
+        {/* Right column: Name, description, and other content */}
+        <div className="min-w-0 flex-1 space-y-1">
+          <div className="flex items-center justify-between">
+            {/* Agent name */}
+            <Label className="mb-1 line-clamp-1 text-xl font-semibold text-text-primary">
+              {agent.name}
+            </Label>
 
-          {/* Agent description - responsive text sizing and spacing */}
+            {/* Owner info */}
+            {(() => {
+              const displayName = getContactDisplayName(agent);
+              if (displayName) {
+                return (
+                  <div className="flex items-center text-sm text-text-secondary">
+                    <Label className="mr-1">🔹</Label>
+                    <Label>{displayName}</Label>
+                  </div>
+                );
+              }
+              return null;
+            })()}
+          </div>
+
+          {/* Agent description */}
           <p
             id={`agent-${agent.id}-description`}
-            className={cn(
-              'mb-1 line-clamp-2 text-xs leading-relaxed text-text-secondary',
-              'sm:mb-2 sm:text-sm',
-            )}
+            className="line-clamp-3 text-sm leading-relaxed text-text-primary"
             aria-label={`Description: ${agent.description || localize('com_agents_no_description')}`}
           >
             {agent.description || (
-              <span className="italic text-text-secondary">
+              <Label className="font-normal italic text-text-primary">
                 {localize('com_agents_no_description')}
-              </span>
+              </Label>
             )}
           </p>
-
-          {/* Owner info - responsive text sizing */}
-          {(() => {
-            const displayName = getContactDisplayName(agent);
-
-            if (displayName) {
-              return (
-                <div className="flex items-center text-xs text-text-tertiary sm:text-sm">
-                  <span className="font-light">{localize('com_agents_created_by')}</span>
-                  <span className="ml-1 font-bold">{displayName}</span>
-                </div>
-              );
-            }
-
-            return null;
-          })()}
         </div>
       </div>
     </div>

client/src/components/Agents/AgentGrid.tsx

@@ -179,19 +179,6 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
       aria-live="polite"
       aria-busy={isLoading && !hasData}
     >
-      {/* Grid title - only show for search results */}
-      {searchQuery && (
-        <div className="mb-4">
-          <h2
-            className="text-xl font-bold text-text-primary"
-            id={`category-heading-${category}`}
-            aria-label={`${getGridTitle()}, ${currentAgents.length || 0} agents available`}
-          >
-            {getGridTitle()}
-          </h2>
-        </div>
-      )}
-
       {/* Handle empty results with enhanced accessibility */}
       {(!currentAgents || currentAgents.length === 0) && !isLoading && !isFetching ? (
         <div
@@ -204,16 +191,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
               : localize('com_agents_empty_state_heading')
           }
         >
-          <h3 className="mb-2 text-lg font-medium">
-            {searchQuery
-              ? localize('com_agents_search_empty_heading')
-              : localize('com_agents_empty_state_heading')}
-          </h3>
-          <p className="text-sm">
-            {searchQuery
-              ? localize('com_agents_no_results')
-              : localize('com_agents_none_in_category')}
-          </p>
+          <h3 className="mb-2 text-lg font-medium">{localize('com_agents_empty_state_heading')}</h3>
         </div>
       ) : (
         <>

client/src/components/Agents/CategoryTabs.tsx

@@ -132,10 +132,10 @@ const CategoryTabs: React.FC<CategoryTabsProps> = ({
             onClick={() => onChange(category.value)}
             onKeyDown={(e) => handleKeyDown(e, category.value)}
             className={cn(
-              'relative cursor-pointer select-none whitespace-nowrap rounded-lg px-3 py-2 transition-colors',
+              'relative cursor-pointer select-none whitespace-nowrap px-3 py-2 transition-colors',
               activeTab === category.value
-                ? 'bg-surface-hover text-text-primary'
-                : 'bg-surface-secondary text-text-secondary hover:bg-surface-hover hover:text-text-primary',
+                ? 'rounded-t-lg bg-surface-hover text-text-primary'
+                : 'rounded-lg bg-surface-secondary text-text-secondary hover:bg-surface-hover hover:text-text-primary',
             )}
             role="tab"
             aria-selected={activeTab === category.value}

client/src/components/Agents/SearchBar.tsx

@@ -73,7 +73,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ value, onSearch, className = '' }
         value={searchTerm}
         onChange={handleChange}
         placeholder={localize('com_agents_search_placeholder')}
-        className="h-14 rounded-2xl border-border-medium bg-transparent pl-12 pr-12 text-lg text-text-primary shadow-md transition-[border-color,box-shadow] duration-200 placeholder:text-text-tertiary focus:border-border-heavy focus:shadow-lg focus:ring-0"
+        className="h-14 rounded-2xl border-border-medium bg-transparent pl-12 pr-12 text-lg text-text-primary shadow-md transition-[border-color,box-shadow] duration-200 placeholder:text-text-secondary focus:border-border-heavy focus:shadow-lg focus:ring-0"
         aria-label={localize('com_agents_search_aria')}
         aria-describedby="search-instructions search-results-count"
         autoComplete="off"

client/src/components/Agents/tests/AgentGrid.integration.spec.tsx

@@ -33,8 +33,6 @@ jest.mock('~/hooks/useLocalize', () => () => (key: string, options?: any) => {
     com_agents_see_more: 'See more',
     com_agents_error_loading: 'Error loading agents',
     com_agents_error_searching: 'Error searching agents',
-    com_agents_no_results: 'No agents found. Try another search term.',
-    com_agents_none_in_category: 'No agents found in this category',
     com_agents_search_empty_heading: 'No results found',
     com_agents_empty_state_heading: 'No agents available',
     com_agents_loading: 'Loading...',

client/src/locales/en/translation.json

@@ -1238,8 +1238,6 @@
   "com_agents_empty_state_heading": "No agents found",
   "com_agents_search_empty_heading": "No search results",
   "com_agents_no_description": "No description available",
-  "com_agents_none_in_category": "No agents found in this category",
-  "com_agents_no_results": "No agents found. Try another search term.",
   "com_agents_results_for": "Results for '{{query}}'",
   "com_agents_marketplace_subtitle": "Discover and use powerful AI agents to enhance your workflows and productivity",
   "com_ui_agent_name_is_required": "Agent name is required",

client/src/utils/agents.tsx

@@ -60,7 +60,7 @@ export const renderAgentAvatar = (
     xl: 'h-20 w-20',
   };
 
-  const borderClasses = showBorder ? 'border-2 border-white dark:border-gray-800' : '';
+  const borderClasses = showBorder ? 'border-1 border-border-medium' : '';
 
   if (avatarUrl) {
     return (
@@ -79,14 +79,11 @@ export const renderAgentAvatar = (
   return (
     <div className={`relative flex items-center justify-center ${sizeClasses[size]} ${className}`}>
       {/* Subtle minimalistic placeholder */}
-      <div className="absolute inset-0 rounded-full border border-gray-300 bg-gray-200 dark:border-gray-600 dark:bg-gray-700"></div>
+      <div className="absolute inset-0 rounded-full border border-border-medium bg-surface-secondary"></div>
       <div
-        className={`relative flex items-center justify-center rounded-full bg-gray-300 dark:bg-gray-600 ${placeholderSizeClasses[size]}`}
+        className={`relative flex items-center justify-center rounded-full ${placeholderSizeClasses[size]}`}
       >
-        <Bot
-          className={`text-gray-500 dark:text-gray-400 ${iconSizeClasses[size]}`}
-          strokeWidth={1.5}
-        />
+        <Bot className={`text-text-primary ${iconSizeClasses[size]}`} strokeWidth={1.5} />
       </div>
     </div>
   );