Skip to content

Commit 73fcf75

Browse files
brandonkachenbrandonkachen
committed
fix: make store page nicer
1 parent d5e635a commit 73fcf75

File tree

3 files changed

+238
-247
lines changed

3 files changed

+238
-247
lines changed

‎web/src/app/publishers/[id]/agents/[agentId]/[version]/agent-usage-metrics.tsx‎

Lines changed: 58 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { useQuery } from '@tanstack/react-query'
44
import { TrendingUp, Users, DollarSign, Play, Calendar } from 'lucide-react'
5-
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
65
import { Skeleton } from '@/components/ui/skeleton'
76

87
interface AgentUsageMetricsProps {
@@ -89,21 +88,14 @@ export const AgentUsageMetrics = ({
8988

9089
if (isLoading) {
9190
return (
92-
<Card className="mb-6">
93-
<CardHeader>
94-
<CardTitle className="text-lg">Usage Metrics</CardTitle>
95-
</CardHeader>
96-
<CardContent>
97-
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
98-
{Array.from({ length: 4 }).map((_, i) => (
99-
<div key={i} className="flex flex-col items-center gap-2">
100-
<Skeleton className="h-6 w-16" />
101-
<Skeleton className="h-4 w-20" />
102-
</div>
103-
))}
91+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
92+
{Array.from({ length: 4 }).map((_, i) => (
93+
<div key={i} className="flex flex-col items-center gap-2">
94+
<Skeleton className="h-6 w-16" />
95+
<Skeleton className="h-4 w-20" />
10496
</div>
105-
</CardContent>
106-
</Card>
97+
))}
98+
</div>
10799
)
108100
}
109101

@@ -112,68 +104,63 @@ export const AgentUsageMetrics = ({
112104
}
113105

114106
return (
115-
<Card className="mb-6">
116-
<CardHeader>
117-
<CardTitle className="text-lg">Usage Metrics</CardTitle>
118-
</CardHeader>
119-
<CardContent>
120-
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
121-
<div className="flex flex-col items-center gap-2">
122-
<div className="flex items-center gap-2">
123-
<TrendingUp className="h-4 w-4 text-emerald-400" />
124-
<span className="font-medium text-emerald-300">
125-
{formatCurrency(usageMetrics.weekly_spent)}
126-
</span>
127-
</div>
128-
<span className="text-xs text-muted-foreground">Weekly Usage</span>
107+
<div>
108+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
109+
<div className="flex flex-col items-center gap-2">
110+
<div className="flex items-center gap-2">
111+
<TrendingUp className="h-4 w-4 text-emerald-400" />
112+
<span className="font-medium text-emerald-300">
113+
{formatCurrency(usageMetrics.weekly_spent)}
114+
</span>
129115
</div>
130-
<div className="flex flex-col items-center gap-2">
131-
<div className="flex items-center gap-2">
132-
<Play className="h-4 w-4 text-muted-foreground" />
133-
<span>{formatUsageCount(usageMetrics.usage_count)}</span>
134-
</div>
135-
<span className="text-xs text-muted-foreground">Total Runs</span>
116+
<span className="text-xs text-muted-foreground">Weekly Usage</span>
117+
</div>
118+
<div className="flex flex-col items-center gap-2">
119+
<div className="flex items-center gap-2">
120+
<Play className="h-4 w-4 text-muted-foreground" />
121+
<span>{formatUsageCount(usageMetrics.usage_count)}</span>
136122
</div>
137-
<div className="flex flex-col items-center gap-2">
138-
<div className="flex items-center gap-2">
139-
<Users className="h-4 w-4 text-muted-foreground" />
140-
<span>{usageMetrics.unique_users || 0}</span>
141-
</div>
142-
<span className="text-xs text-muted-foreground">Unique Users</span>
123+
<span className="text-xs text-muted-foreground">Total Runs</span>
124+
</div>
125+
<div className="flex flex-col items-center gap-2">
126+
<div className="flex items-center gap-2">
127+
<Users className="h-4 w-4 text-muted-foreground" />
128+
<span>{usageMetrics.unique_users || 0}</span>
143129
</div>
144-
<div className="flex flex-col items-center gap-2">
145-
<div className="flex items-center gap-2">
146-
<DollarSign className="h-4 w-4 text-muted-foreground" />
147-
<span>
148-
{formatCurrency(usageMetrics.avg_cost_per_invocation).replace(
149-
'$',
150-
''
151-
)}
152-
</span>
153-
</div>
154-
<span className="text-xs text-muted-foreground">
155-
Avg Cost per Run
130+
<span className="text-xs text-muted-foreground">Unique Users</span>
131+
</div>
132+
<div className="flex flex-col items-center gap-2">
133+
<div className="flex items-center gap-2">
134+
<DollarSign className="h-4 w-4 text-muted-foreground" />
135+
<span>
136+
{formatCurrency(usageMetrics.avg_cost_per_invocation).replace(
137+
'$',
138+
''
139+
)}
156140
</span>
157141
</div>
142+
<span className="text-xs text-muted-foreground">
143+
Avg Cost per Run
144+
</span>
158145
</div>
159-
{usageMetrics.last_used && (
160-
<div className="mt-4 pt-4 border-t border-border/40">
161-
<div className="flex items-center gap-2 text-sm text-muted-foreground">
162-
<Calendar className="h-4 w-4" />
163-
<span>
164-
Last used:{' '}
165-
{new Date(usageMetrics.last_used).toLocaleDateString('en-US', {
166-
year: 'numeric',
167-
month: 'short',
168-
day: 'numeric',
169-
hour: '2-digit',
170-
minute: '2-digit',
171-
})}
172-
</span>
173-
</div>
146+
</div>
147+
{usageMetrics.last_used && (
148+
<div className="mt-4 pt-4 border-t border-border/40">
149+
<div className="flex items-center gap-2 text-sm text-muted-foreground">
150+
<Calendar className="h-4 w-4" />
151+
<span>
152+
Last used:{' '}
153+
{new Date(usageMetrics.last_used).toLocaleDateString('en-US', {
154+
year: 'numeric',
155+
month: 'short',
156+
day: 'numeric',
157+
hour: '2-digit',
158+
minute: '2-digit',
159+
})}
160+
</span>
174161
</div>
175-
)}
176-
</CardContent>
177-
</Card>
162+
</div>
163+
)}
164+
</div>
178165
)
179166
}

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

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -262,23 +262,30 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
262262
</Card>
263263
</div>
264264

265-
{/* Agent Definition */}
265+
{/* Agent Definition and Usage Stats Combined */}
266266
<div className="lg:col-span-3">
267-
{/* Usage Metrics */}
268-
<AgentUsageMetrics
269-
publisherId={params.id}
270-
agentId={params.agentId}
271-
version={params.version}
272-
/>
273267
<Card>
274-
<CardHeader>
275-
<CardTitle className="text-lg">Agent Definition</CardTitle>
276-
<p className="text-sm text-muted-foreground">
277-
Complete agent data in TypeScript format
278-
</p>
279-
</CardHeader>
280-
<CardContent>
281-
<TypeScriptViewer data={agentData} />
268+
<CardContent className="space-y-6 pt-6">
269+
{/* Usage Metrics for this version */}
270+
<div>
271+
<h3 className="text-base font-semibold mb-3 flex items-center gap-2">
272+
Usage Statistics
273+
<Badge variant="secondary" className="text-xs">
274+
v{params.version}
275+
</Badge>
276+
</h3>
277+
<AgentUsageMetrics
278+
publisherId={params.id}
279+
agentId={params.agentId}
280+
version={params.version}
281+
/>
282+
</div>
283+
284+
{/* Agent Definition */}
285+
<div className="border-t pt-6">
286+
<h3 className="text-base font-semibold mb-3">Definition</h3>
287+
<TypeScriptViewer data={agentData} />
288+
</div>
282289
</CardContent>
283290
</Card>
284291
</div>

0 commit comments

Comments
 (0)