+ {/* Simplified header for agents marketplace - only show nav controls when needed */} +
+
+ {!navVisible && } + {!navVisible && ( + + + + } + /> + )} +
+
+
+ {/* Hero Section - ChatGPT Style */} +
+

+ {localize('com_agents_marketplace')} +

+

+ {localize('com_agents_marketplace_subtitle')} +

+ + {/* Search bar */} +
+ +
+
+ + {/* Category tabs */} + + + {/* Category header - only show when not searching */} + {!searchQuery && ( +
+ {(() => { + // Get category data for display + const getCategoryData = () => { + if (activeTab === 'promoted') { + return { + name: localize('com_agents_top_picks'), + description: localize('com_agents_recommended'), + }; + } + if (activeTab === 'all') { + return { + name: 'All Agents', + description: 'Browse all shared agents across all categories', + }; + } + + // Find the category in the API data + const categoryData = categoriesQuery.data?.find( + (cat) => cat.value === activeTab, + ); + if (categoryData) { + return { + name: categoryData.label, + description: categoryData.description || '', + }; + } + + // Fallback for unknown categories + return { + name: activeTab.charAt(0).toUpperCase() + activeTab.slice(1), + description: '', + }; + }; + + const { name, description } = getCategoryData(); + + return ( +
+

{name}

+ {description && ( +

{description}

+ )} +
+ ); + })()} +
+ )} + + {/* Agent grid */} + +
+ + {/* Agent detail dialog */} + {isDetailOpen && selectedAgent && ( + + )} +