feat(agent/version): improve UX by surfacing per-version usage with a badge and metrics; refine Run/Save button icons and prompts for clarity.\n\n🤖 Generated with Codebuff\nCo-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

bun.lock

@@ -240,13 +240,21 @@ For all commands and options, run 'codebuff' and then type 'help'.
   )
   const initialInput = isCommand ? '' : filteredArgs.join(' ')
 
+  // Handle --agent flag by prefilling user input instead of directly invoking
+  let finalInitialInput = initialInput
+  if (options.agent && !initialInput) {
+    finalInitialInput = `@${options.agent}`
+  } else if (options.agent && initialInput) {
+    finalInitialInput = `@${options.agent} ${initialInput}`
+  }
+
   codebuff({
-    initialInput,
+    initialInput: finalInitialInput,
     git,
     costMode,
     runInitFlow: options.init,
     model: options.model,
-    agent: options.agent,
+    agent: undefined, // Don't pass agent to CLI - use prefilled input instead
     params: parsedAgentParams,
     print: options.print,
     cwd: options.cwd,

npm-app/src/index.ts

@@ -16,6 +16,7 @@ import { AgentUsageMetrics } from './agent-usage-metrics'
 import { RunAgentButton } from './run-agent-button'
 import { CopyIdButton } from './copy-id-button'
 import { SaveAgentButton } from './save-agent-button'
+import { VersionUsageBadge } from './version-usage-badge'
 import { Button } from '@/components/ui/button'
 
 interface AgentDetailPageProps {
@@ -200,12 +201,6 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
             </div>
           </CardHeader>
         </Card>
-        {/* Usage Metrics */}
-        <AgentUsageMetrics
-          publisherId={params.id}
-          agentId={params.agentId}
-          version={params.version}
-        />
         <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
           {/* Version Navigation */}
           <div className="lg:col-span-1">
@@ -236,9 +231,16 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
                           className="w-full justify-start group transition-colors"
                         >
                           <div className="flex items-center justify-between w-full">
-                            <span className="font-mono">
-                              v{version.version}
-                            </span>
+                            <div className="flex items-center">
+                              <span className="font-mono">
+                                v{version.version}
+                              </span>
+                              <VersionUsageBadge
+                                publisherId={params.id}
+                                agentId={params.agentId}
+                                version={version.version}
+                              />
+                            </div>
                             {index === 0 && (
                               <Badge
                                 className={cn(
@@ -262,6 +264,12 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
 
           {/* Agent Definition */}
           <div className="lg:col-span-3">
+            {/* Usage Metrics */}
+            <AgentUsageMetrics
+              publisherId={params.id}
+              agentId={params.agentId}
+              version={params.version}
+            />
             <Card>
               <CardHeader>
                 <CardTitle className="text-lg">Agent Definition</CardTitle>

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { Copy } from 'lucide-react'
+import { Play } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 
@@ -12,7 +12,7 @@ export function RunAgentButton({ agentId }: RunAgentButtonProps) {
   const handleCopy = () => {
     navigator.clipboard.writeText(`codebuff --agent ${agentId}`)
     toast({
-      description: `Command copied to clipboard: "codebuff --agent ${agentId}"`,
+      description: `Command copied! Go to your terminal and paste to run this agent.`,
     })
   }
 
@@ -23,7 +23,7 @@ export function RunAgentButton({ agentId }: RunAgentButtonProps) {
       onClick={handleCopy}
       className="flex items-center gap-2"
     >
-      <Copy className="h-4 w-4" />
+      <Play className="h-4 w-4" />
       Run this agent
     </Button>
   )

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { Copy } from 'lucide-react'
+import { Bookmark } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 
@@ -12,7 +12,7 @@ export function SaveAgentButton({ agentId }: SaveAgentButtonProps) {
   const handleCopy = () => {
     navigator.clipboard.writeText(`codebuff save-agent ${agentId}`)
     toast({
-      description: `Command copied to clipboard: "codebuff save-agent ${agentId}"`,
+      description: `Command copied! Go to your terminal and paste to save this agent to your project.`,
     })
   }
 
@@ -23,7 +23,7 @@ export function SaveAgentButton({ agentId }: SaveAgentButtonProps) {
       onClick={handleCopy}
       className="flex items-center gap-2"
     >
-      <Copy className="h-4 w-4" />
+      <Bookmark className="h-4 w-4" />
       Save this agent
     </Button>
   )