⭐️ Add Agent Space categories logo

Author: Phinease

frontend/app/[locale]/market/MarketContent.tsx

@@ -262,12 +262,7 @@ export default function MarketContent({
     },
     ...categories.map((cat) => ({
       key: cat.name,
-      label: (
-        <span className="flex items-center gap-2">
-          <span>{cat.icon}</span>
-          <span>{isZh ? cat.display_name_zh : cat.display_name}</span>
-        </span>
-      ),
+      label: isZh ? cat.display_name_zh : cat.display_name,
     })),
   ];
 

frontend/app/[locale]/market/components/AgentMarketCard.tsx

@@ -6,6 +6,7 @@ import { Download, Tag, Wrench } from "lucide-react";
 import { MarketAgentListItem } from "@/types/market";
 import { useTranslation } from "react-i18next";
 import { getGenericLabel } from "@/lib/agentLabelMapper";
+import { getCategoryIcon } from "@/const/marketConfig";
 
 interface AgentMarketCardProps {
   agent: MarketAgentListItem;
@@ -34,6 +35,11 @@ export function AgentMarketCard({
     onViewDetails(agent);
   };
 
+  // Get category icon: prefer API icon, then fallback to default mapping by name
+  const categoryIcon = agent.category
+    ? agent.category.icon || getCategoryIcon(agent.category.name)
+    : "📦";
+
   return (
     <motion.div
       whileHover={{ y: -4 }}
@@ -45,7 +51,7 @@ export function AgentMarketCard({
         <div className="flex items-center justify-between mb-2">
           <div className="flex items-center gap-2">
             <span className="text-2xl">
-              {agent.category?.icon || "📦"}
+              {categoryIcon}
             </span>
             <span className="text-xs font-medium text-purple-600 dark:text-purple-400">
               {agent.category

frontend/app/[locale]/market/components/MarketAgentDetailModal.tsx

@@ -13,6 +13,7 @@ import {
 } from "lucide-react";
 import { MarketAgentDetail } from "@/types/market";
 import { getToolSourceLabel, getGenericLabel } from "@/lib/agentLabelMapper";
+import { getCategoryIcon } from "@/const/marketConfig";
 
 interface MarketAgentDetailModalProps {
   visible: boolean;
@@ -97,7 +98,10 @@ export default function MarketAgentDetailModal({
             >
               {agentDetails?.category ? (
                 <Tag color="purple" className="inline-flex items-center gap-1">
-                  <span>{agentDetails.category.icon || "📦"}</span>
+                  <span>
+                    {agentDetails.category.icon ||
+                      getCategoryIcon(agentDetails.category.name)}
+                  </span>
                   <span>
                     {isZh
                       ? agentDetails.category.display_name_zh

frontend/const/marketConfig.ts

@@ -0,0 +1,36 @@
+// ========== Market Configuration Constants ==========
+
+/**
+ * Default icons for market agent categories
+ * Maps category name field to their corresponding icons
+ */
+export const MARKET_CATEGORY_ICONS: Record<string, string> = {
+  research: "🔬",
+  content: "✍️",
+  development: "💻",
+  business: "📈",
+  automation: "⚙️",
+  education: "📚",
+  communication: "💬",
+  data: "📊",
+  creative: "🎨",
+  other: "📦",
+} as const;
+
+/**
+ * Get icon for a category by name field
+ * @param categoryName - Category name field (e.g., "research", "content")
+ * @param fallbackIcon - Fallback icon if category not found (default: 📦)
+ * @returns Icon emoji string
+ */
+export function getCategoryIcon(
+  categoryName: string | null | undefined,
+  fallbackIcon: string = "📦"
+): string {
+  if (!categoryName) {
+    return fallbackIcon;
+  }
+  
+  return MARKET_CATEGORY_ICONS[categoryName] || fallbackIcon;
+}
+