Skip to content

Commit 6f2cd3a

Browse files
jahoomajahooma
committed
agent store: updated agent card
1 parent b83dde6 commit 6f2cd3a

File tree

2 files changed

+108
-69
lines changed

2 files changed

+108
-69
lines changed

‎web/src/app/agents/page.tsx‎

Lines changed: 74 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { motion } from 'framer-motion'
66
import {
77
Search,
88
TrendingUp,
9-
Clock,
10-
Star,
119
Users,
1210
ChevronRight,
11+
DollarSign,
12+
Play,
1313
} from 'lucide-react'
1414
import Link from 'next/link'
1515
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -24,6 +24,7 @@ import {
2424
SelectValue,
2525
} from '@/components/ui/select'
2626
import { AnimatedElement } from '@/components/ui/landing/animated-element'
27+
import { formatRelativeTime } from '@/lib/date-utils'
2728

2829
interface AgentData {
2930
id: string
@@ -92,7 +93,8 @@ const AgentStorePage = () => {
9293

9394
const formatCurrency = (amount?: number) => {
9495
if (!amount) return '$0.00'
95-
return `${amount.toFixed(2)}`
96+
if (amount >= 1000) return `$${(amount / 1000).toFixed(1)}k`
97+
return `$${amount.toFixed(2)}`
9698
}
9799

98100
const formatUsageCount = (count?: number) => {
@@ -177,98 +179,101 @@ const AgentStorePage = () => {
177179
>
178180
<Link
179181
href={`/publishers/${agent.publisher.id}/agents/${agent.id}/${agent.version || '1.0.0'}`}
182+
className="block"
180183
>
181-
<Card className="h-full hover:shadow-lg transition-all duration-300 cursor-pointer group border-2 hover:border-gray-300 dark:hover:border-gray-600">
182-
<CardHeader className="pb-3">
184+
<Card className="h-full transition-all duration-300 cursor-pointer group border hover:border-accent/50 bg-card/50 hover:bg-card/80">
185+
{/* Header - Agent ID and Publisher */}
186+
<CardHeader className="pb-4">
183187
<div className="flex items-start justify-between">
184-
<div className="flex-1">
185-
<CardTitle className="text-lg transition-colors">
186-
{agent.name}
187-
</CardTitle>
188+
<div className="flex-1 min-w-0">
189+
<div className="flex items-center gap-2">
190+
<CardTitle className="text-lg font-mono text-primary truncate">
191+
{agent.id}
192+
</CardTitle>
193+
<Badge
194+
variant="outline"
195+
className="text-xs font-mono px-1.5 py-0 shrink-0"
196+
>
197+
v{agent.version}
198+
</Badge>
199+
</div>
188200
<div className="flex items-center gap-2 mt-1">
189-
<span className="text-sm text-muted-foreground">
190-
by @{agent.publisher.id}
201+
<span className="text-sm text-muted-foreground truncate">
202+
@{agent.publisher.id}
191203
</span>
192204
{agent.publisher.verified && (
193205
<Badge
194206
variant="secondary"
195-
className="text-xs px-1.5 py-0"
207+
className="text-xs px-1.5 py-0 shrink-0"
196208
>
197209
✓
198210
</Badge>
199211
)}
200212
</div>
201213
</div>
202-
<ChevronRight className="h-4 w-4 text-muted-foreground transition-colors" />
214+
<div className="flex flex-col items-end gap-3">
215+
<ChevronRight className="h-5 w-5 text-muted-foreground transition-colors group-hover:text-accent shrink-0" />
216+
{agent.last_used && (
217+
<span
218+
className="text-xs text-muted-foreground shrink-0"
219+
title={new Date(
220+
agent.last_used
221+
).toLocaleString()}
222+
>
223+
{formatRelativeTime(agent.last_used)}
224+
</span>
225+
)}
226+
</div>
203227
</div>
204228
</CardHeader>
205-
<CardContent className="pt-0">
206-
<p className="text-sm text-muted-foreground mb-4 line-clamp-2">
207-
{agent.description}
208-
</p>
209229

210-
{/* Primary Metric - Weekly Usage */}
211-
<div className="mb-4 p-3 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 rounded-lg border">
212-
<div className="flex items-center justify-between">
213-
<div className="flex items-center gap-2">
214-
<TrendingUp className="h-4 w-4 text-green-600" />
215-
<span className="text-sm font-medium text-green-700 dark:text-green-400">
216-
Weekly Usage
217-
</span>
218-
</div>
219-
<div className="text-right">
220-
<div className="text-lg font-bold text-green-700 dark:text-green-400">
230+
<CardContent className="pt-4 space-y-3">
231+
{/* Single Row Metrics with Labels */}
232+
<div className="flex items-center justify-between text-sm">
233+
<div className="flex flex-col items-center gap-1">
234+
<div className="flex items-center gap-1">
235+
<TrendingUp className="h-3.5 w-3.5 text-emerald-400" />
236+
<span className="font-medium text-emerald-300">
221237
{formatCurrency(agent.weekly_spent)}
222-
</div>
223-
<div className="text-xs text-green-600 dark:text-green-500">
224-
{formatUsageCount(agent.usage_count)} runs
225-
</div>
238+
</span>
226239
</div>
227-
</div>
228-
</div>
229-
230-
{/* Secondary Stats */}
231-
<div className="grid grid-cols-2 gap-3 mb-4 text-xs">
232-
<div className="flex items-center gap-1">
233-
<Clock className="h-3 w-3 text-orange-500" />
234-
<span className="font-medium">
235-
{formatCurrency(agent.avg_cost_per_invocation)}
236-
</span>
237-
<span className="text-muted-foreground">
238-
avg cost
240+
<span className="text-xs text-muted-foreground">
241+
Weekly
239242
</span>
240243
</div>
241-
<div className="flex items-center gap-1">
242-
<Star className="h-3 w-3 text-purple-500" />
243-
<span className="font-medium">
244-
{formatCurrency(agent.total_spent)}
244+
<div className="flex flex-col items-center gap-1">
245+
<div className="flex items-center gap-1">
246+
<Play className="h-3.5 w-3.5 text-muted-foreground" />
247+
<span>{formatUsageCount(agent.usage_count)}</span>
248+
</div>
249+
<span className="text-xs text-muted-foreground">
250+
Runs
245251
</span>
246-
<span className="text-muted-foreground">total</span>
247252
</div>
248-
<div className="flex items-center gap-1">
249-
<Users className="h-3 w-3 text-blue-500" />
250-
<span className="font-medium">
251-
{agent.unique_users || 0}
253+
<div className="flex flex-col items-center gap-1">
254+
<div className="flex items-center gap-1">
255+
<DollarSign className="h-3.5 w-3.5 text-muted-foreground" />
256+
<span>
257+
{formatCurrency(
258+
agent.avg_cost_per_invocation
259+
).replace('$', '')}
260+
</span>
261+
</div>
262+
<span className="text-xs text-muted-foreground">
263+
Per run
252264
</span>
253-
<span className="text-muted-foreground">users</span>
254-
</div>
255-
<div className="flex items-center gap-1">
256-
<Badge
257-
variant="outline"
258-
className="text-xs px-1.5 py-0"
259-
>
260-
v{agent.version}
261-
</Badge>
262265
</div>
263-
{agent.last_used && (
264-
<div className="flex items-center gap-1 col-span-2">
265-
<span className="text-xs text-muted-foreground">
266-
Last:{' '}
267-
{new Date(agent.last_used).toLocaleDateString()}
268-
</span>
266+
<div className="flex flex-col items-center gap-1">
267+
<div className="flex items-center gap-1">
268+
<Users className="h-3.5 w-3.5 text-muted-foreground" />
269+
<span>{agent.unique_users || 0}</span>
269270
</div>
270-
)}
271+
<span className="text-xs text-muted-foreground">
272+
Users
273+
</span>
274+
</div>
271275
</div>
276+
272277
{/* Tags */}
273278
{agent.tags && agent.tags.length > 0 && (
274279
<div className="flex flex-wrap gap-1">

‎web/src/lib/date-utils.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export function formatRelativeTime(date: string | Date): string {
2+
const now = new Date()
3+
const target = new Date(date)
4+
const diffMs = now.getTime() - target.getTime()
5+
6+
// Handle future dates (negative diff) by treating them as recent
7+
if (diffMs < 0) {
8+
return 'just now'
9+
}
10+
11+
const diffSeconds = Math.floor(diffMs / 1000)
12+
const diffMinutes = Math.floor(diffSeconds / 60)
13+
const diffHours = Math.floor(diffMinutes / 60)
14+
const diffDays = Math.floor(diffHours / 24)
15+
const diffWeeks = Math.floor(diffDays / 7)
16+
const diffMonths = Math.floor(diffDays / 30)
17+
const diffYears = Math.floor(diffDays / 365)
18+
19+
if (diffSeconds < 60) {
20+
return diffSeconds <= 1 ? 'just now' : `${diffSeconds}s ago`
21+
} else if (diffMinutes < 60) {
22+
return diffMinutes === 1 ? '1 min ago' : `${diffMinutes} min ago`
23+
} else if (diffHours < 24) {
24+
return diffHours === 1 ? '1 hour ago' : `${diffHours} hours ago`
25+
} else if (diffDays < 7) {
26+
return diffDays === 1 ? '1 day ago' : `${diffDays} days ago`
27+
} else if (diffWeeks < 4) {
28+
return diffWeeks === 1 ? '1 week ago' : `${diffWeeks} weeks ago`
29+
} else if (diffMonths < 12) {
30+
return diffMonths === 1 ? '1 month ago' : `${diffMonths} months ago`
31+
} else {
32+
return diffYears === 1 ? '1 year ago' : `${diffYears} years ago`
33+
}
34+
}

0 commit comments

Comments
 (0)