AgentStore: Add publisher avatar

Author: jahooma

bun.lock

@@ -41,6 +41,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.2.4",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",

web/package.json

@@ -24,6 +24,7 @@ export async function GET() {
           id: schema.publisher.id,
           name: schema.publisher.name,
           verified: schema.publisher.verified,
+          avatar_url: schema.publisher.avatar_url,
         },
       })
       .from(schema.agentConfig)

web/src/app/api/agents/route.ts

@@ -8,6 +8,7 @@ import { notFound } from 'next/navigation'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { JsonViewer } from '@/components/agent/json-viewer'
 import { EnhancedCopyButton } from '@/components/ui/enhanced-copy-button'
 import { cn } from '@/lib/utils'
@@ -146,9 +147,17 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
                     v{params.version}
                   </Badge>
                 </div>
-                <p className="text-muted-foreground mb-2">
-                  by @{publisherData.id}
-                </p>
+                <div className="flex items-center gap-2 mb-2">
+                  <Avatar className="h-6 w-6">
+                    <AvatarImage src={publisherData.avatar_url || undefined} />
+                    <AvatarFallback className="text-xs">
+                      {publisherData.name[0]?.toUpperCase() || publisherData.id[0]?.toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span className="text-muted-foreground">
+                    @{publisherData.id}
+                  </span>
+                </div>
                 {agentData.description && (
                   <p className="text-sm mb-4">{agentData.description}</p>
                 )}

web/src/app/publishers/[id]/agents/[agentId]/[version]/page.tsx

@@ -21,6 +21,7 @@ import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import {
   Select,
   SelectContent,
@@ -41,6 +42,7 @@ interface AgentData {
     id: string
     name: string
     verified: boolean
+    avatar_url?: string | null
   }
   version: string
   created_at: string
@@ -242,6 +244,12 @@ const AgentStorePage = () => {
           </div>
           <div className="flex justify-between gap-2">
             <div className="flex items-center gap-2">
+              <Avatar className="h-5 w-5 shrink-0">
+                <AvatarImage src={agent.publisher.avatar_url || undefined} />
+                <AvatarFallback className="text-xs">
+                  {agent.publisher.name[0]?.toUpperCase() || agent.publisher.id[0]?.toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
               <span className="text-sm text-muted-foreground truncate">
                 @{agent.publisher.id}
               </span>

web/src/app/store/page.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }