Add some cta to copy run command for agent

Author: jahooma

web/src/app/publishers/[id]/agents/[agentId]/[version]/copy-id-button.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Copy } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+
+interface CopyIdButtonProps {
+  agentId: string
+}
+
+export function CopyIdButton({ agentId }: CopyIdButtonProps) {
+  const handleCopy = () => {
+    navigator.clipboard.writeText(agentId)
+    toast({
+      description: `Agent ID copied to clipboard: "${agentId}"`,
+    })
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleCopy}
+      className="flex items-center gap-2"
+    >
+      <Copy className="h-4 w-4" />
+      Copy ID
+    </Button>
+  )
+}

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

@@ -1,7 +1,7 @@
 import db from '@codebuff/common/db'
 import * as schema from '@codebuff/common/db/schema'
 import { and, eq } from 'drizzle-orm'
-import { ArrowLeft, Calendar, Code, Download, ExternalLink } from 'lucide-react'
+import { Calendar } from 'lucide-react'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
@@ -10,9 +10,11 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { BackButton } from '@/components/ui/back-button'
 import { TypeScriptViewer } from '@/components/agent/typescript-viewer'
-import { EnhancedCopyButton } from '@/components/ui/enhanced-copy-button'
+
 import { cn } from '@/lib/utils'
 import { AgentUsageMetrics } from './agent-usage-metrics'
+import { RunAgentButton } from './run-agent-button'
+import { CopyIdButton } from './copy-id-button'
 import { Button } from '@/components/ui/button'
 
 interface AgentDetailPageProps {
@@ -182,16 +184,9 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
                   </div>
                 </div>
               </div>
-              <div className="flex flex-col items-end space-y-3">
-                <div className="flex items-center space-x-2 text-sm">
-                  <code className="bg-muted/50 px-2 py-1 rounded text-xs font-mono text-muted-foreground">
-                    {publisherData.id}/{params.agentId}@{latestVersion}
-                  </code>
-                  <EnhancedCopyButton
-                    value={fullAgentId}
-                    className="p-1 text-muted-foreground/60 hover:text-muted-foreground"
-                  />
-                </div>
+              <div className="flex items-end space-x-3">
+                <CopyIdButton agentId={fullAgentId} />
+                <RunAgentButton agentId={fullAgentId} />
                 {/*
                 Hide download button for now. (It doesn't do anything)
                 <Button variant="outline" size="sm">

web/src/app/publishers/[id]/agents/[agentId]/[version]/run-agent-button.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Copy } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+
+interface RunAgentButtonProps {
+  agentId: string
+}
+
+export function RunAgentButton({ agentId }: RunAgentButtonProps) {
+  const handleCopy = () => {
+    navigator.clipboard.writeText(`codebuff --agent ${agentId}`)
+    toast({
+      description: `Command copied to clipboard: "codebuff --agent ${agentId}"`,
+    })
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleCopy}
+      className="flex items-center gap-2"
+    >
+      <Copy className="h-4 w-4" />
+      Run this agent
+    </Button>
+  )
+}

web/src/app/store/page.tsx

@@ -14,6 +14,7 @@ import {
   Star,
   Plus,
   User,
+  Copy,
 } from 'lucide-react'
 import Link from 'next/link'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -30,6 +31,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { AnimatedElement } from '@/components/ui/landing/animated-element'
+import { toast } from '@/components/ui/use-toast'
 import { formatRelativeTime } from '@/lib/date-utils'
 import { cn } from '@/lib/utils'
 import type { PublisherProfileResponse } from '@codebuff/common/types/publisher'
@@ -234,6 +236,22 @@ const AgentStorePage = () => {
                 >
                   v{agent.version}
                 </Badge>
+                <div onClick={(e) => e.preventDefault()}>
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(
+                        `codebuff --agent ${agent.id}`
+                      )
+                      toast({
+                        description: `Agent run command copied to clipboard:\n"codebuff --agent ${agent.id}"`,
+                      })
+                    }}
+                    className="p-1 hover:bg-muted/50 rounded transition-colors"
+                    title={`Copy: codebuff --agent ${agent.id}`}
+                  >
+                    <Copy className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                  </button>
+                </div>
               </div>
             </div>
             <div className="flex flex-col items-end gap-3">