Skip to content

Commit ecc6e34

Browse files
brandonkachenbrandonkachen
committed
tweak: more minor web app fixes
1 parent 267612c commit ecc6e34

File tree

9 files changed

+656
-464
lines changed

9 files changed

+656
-464
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const AgentUsageMetrics = ({
8888

8989
if (isLoading) {
9090
return (
91-
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
91+
<div className="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
9292
{Array.from({ length: 4 }).map((_, i) => (
9393
<div key={i} className="flex flex-col items-center gap-2">
9494
<Skeleton className="h-6 w-16" />
@@ -105,7 +105,7 @@ export const AgentUsageMetrics = ({
105105

106106
return (
107107
<div>
108-
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
108+
<div className="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
109109
<div className="flex flex-col items-center gap-2">
110110
<div className="flex items-center gap-2">
111111
<TrendingUp className="h-4 w-4 text-emerald-400" />

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

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -133,17 +133,22 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
133133
<div className="max-w-4xl mx-auto">
134134
{' '}
135135
{/* Navigation */}
136-
<div className="mb-6">
137-
<BackButton fallbackUrl="/store" />
136+
<div className="mb-3">
137+
<BackButton fallbackUrl="/store">Back to store</BackButton>
138138
</div>
139139
{/* Agent Header */}
140140
<Card className="mb-6">
141141
<CardHeader>
142-
<div className="flex items-start justify-between">
143-
<div>
144-
<div className="flex items-center space-x-3 mb-2">
145-
<CardTitle className="text-2xl">{agentName}</CardTitle>
146-
<Badge variant="outline" className="text-sm">
142+
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
143+
<div className="flex-1 min-w-0">
144+
<div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
145+
<CardTitle className="text-xl sm:text-2xl break-words">
146+
{agentName}
147+
</CardTitle>
148+
<Badge
149+
variant="outline"
150+
className="text-sm self-start sm:self-auto"
151+
>
147152
v{params.version}
148153
</Badge>
149154
</div>
@@ -186,17 +191,19 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
186191
</div>
187192
</div>
188193
</div>
189-
<div className="flex items-end space-x-3">
190-
<CopyIdButton agentId={fullAgentId} />
191-
<SaveAgentButton agentId={fullAgentId} />
192-
<RunAgentButton agentId={fullAgentId} />
193-
{/*
194+
<div className="border-t pt-4 md:border-t-0 md:pt-0">
195+
<div className="flex flex-col space-y-2 sm:flex-row sm:items-end sm:space-y-0 sm:space-x-2 md:space-x-3">
196+
<CopyIdButton agentId={fullAgentId} />
197+
<SaveAgentButton agentId={fullAgentId} />
198+
<RunAgentButton agentId={fullAgentId} />
199+
{/*
194200
Hide download button for now. (It doesn't do anything)
195201
<Button variant="outline" size="sm">
196202
<Download className="h-4 w-4 mr-2" />
197203
Download
198204
</Button>
199205
*/}
206+
</div>
200207
</div>
201208
</div>
202209
</CardHeader>
@@ -209,7 +216,7 @@ const AgentDetailPage = async ({ params }: AgentDetailPageProps) => {
209216
<CardTitle className="text-lg">Versions</CardTitle>
210217
</CardHeader>
211218
<CardContent>
212-
<div className="space-y-1">
219+
<div className="space-y-1 max-h-40 overflow-y-auto lg:max-h-none lg:overflow-y-visible">
213220
{allVersions
214221
.sort(
215222
(a, b) =>

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -135,50 +135,50 @@ const PublisherPage = async ({ params }: PublisherPageProps) => {
135135
{/* Publisher Header */}
136136
<Card className="mb-8">
137137
<CardHeader>
138-
<div className="flex items-start space-x-4">
138+
<div className="flex flex-col sm:flex-row items-start gap-4">
139139
{publisherData.avatar_url ? (
140140
<Image
141141
src={publisherData.avatar_url}
142142
alt={`${publisherData.name} avatar`}
143143
width={80}
144144
height={80}
145-
className="rounded-full"
145+
className="rounded-full flex-shrink-0"
146146
/>
147147
) : (
148-
<div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center">
148+
<div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
149149
<User className="h-10 w-10 text-gray-500" />
150150
</div>
151151
)}
152-
<div className="flex-1">
153-
<div className="flex items-center space-x-2 mb-2">
154-
<CardTitle className="text-2xl">
152+
<div className="flex-1 min-w-0">
153+
<div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
154+
<CardTitle className="text-xl sm:text-2xl break-words">
155155
{publisherData.name}
156156
</CardTitle>
157157
{publisherData.verified && (
158158
<Badge
159159
variant="secondary"
160-
className="flex items-center space-x-1"
160+
className="flex items-center space-x-1 self-start sm:self-auto"
161161
>
162162
<CheckCircle className="h-3 w-3" />
163163
<span>Verified</span>
164164
</Badge>
165165
)}
166166
</div>
167-
<p className="text-muted-foreground mb-2">
167+
<p className="text-muted-foreground mb-2 break-all">
168168
@{publisherData.id}
169169
</p>
170170
{publisherData.bio && (
171171
<p className="text-sm mb-4">{publisherData.bio}</p>
172172
)}
173-
<div className="flex items-center space-x-4 text-sm text-muted-foreground">
173+
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-sm text-muted-foreground">
174174
{publisherData.email && (
175-
<div className="flex items-center space-x-1">
176-
<Mail className="h-4 w-4" />
177-
<span>{publisherData.email}</span>
175+
<div className="flex items-center space-x-1 min-w-0">
176+
<Mail className="h-4 w-4 flex-shrink-0" />
177+
<span className="truncate">{publisherData.email}</span>
178178
</div>
179179
)}
180180
<div className="flex items-center space-x-1">
181-
<Calendar className="h-4 w-4" />
181+
<Calendar className="h-4 w-4 flex-shrink-0" />
182182
<span>
183183
Joined{' '}
184184
{new Date(publisherData.created_at).toLocaleDateString(

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -91,18 +91,18 @@ const PublishersPage = () => {
9191
<div className="container mx-auto py-6 px-4">
9292
<div className="max-w-4xl mx-auto">
9393
{/* Header */}
94-
<div className="flex items-center justify-between mb-8">
94+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-8">
9595
<div className="flex items-center">
96-
<User className="h-8 w-8 text-blue-600 mr-3" />
97-
<div>
98-
<h1 className="text-3xl font-bold">My Publishers</h1>
99-
<p className="text-muted-foreground">
96+
<User className="h-8 w-8 text-blue-600 mr-3 flex-shrink-0" />
97+
<div className="min-w-0">
98+
<h1 className="text-2xl sm:text-3xl font-bold">My Publishers</h1>
99+
<p className="text-sm sm:text-base text-muted-foreground">
100100
Manage your publisher profiles and published agents
101101
</p>
102102
</div>
103103
</div>
104-
<Link href="/publishers/new">
105-
<Button className="flex items-center">
104+
<Link href="/publishers/new" className="w-full sm:w-auto">
105+
<Button className="w-full sm:w-auto flex items-center justify-center">
106106
<Plus className="mr-2 h-4 w-4" />
107107
Create Publisher
108108
</Button>

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -429,22 +429,20 @@ const AgentStorePage = () => {
429429
<div className="container mx-auto py-8 px-4">
430430
<div className="max-w-7xl mx-auto">
431431
{/* Header */}
432-
<div className="text-center mb-12">
432+
<div className="mb-12">
433433
<div className="flex items-center justify-between mb-4">
434-
<div className="flex-1" />
435-
<h1 className="text-4xl font-bold text-white">Agent Store</h1>
436-
<div className="flex-1 flex justify-end">
437-
<AnimatedElement type="slide" delay={0.1}>
438-
{renderPublisherButton()}
439-
</AnimatedElement>
434+
<div>
435+
<h1 className="text-4xl font-bold text-white mb-2">
436+
Agent Store
437+
</h1>
438+
<p className="text-xl text-muted-foreground">
439+
Browse all published AI agents. Run, compose, or fork them.
440+
</p>
440441
</div>
441442
</div>
442-
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
443-
Browse all published AI agents. Run, compose, or fork them.
444-
</p>
445443
</div>
446444

447-
{/* Search and Filters */}
445+
{/* Search, Filters, and Publisher Button */}
448446
<AnimatedElement type="slide" delay={0.1} className="mb-8">
449447
<div className="flex flex-col md:flex-row gap-4 items-stretch md:items-center md:justify-end">
450448
<div className="relative w-full md:flex-1 md:max-w-[200px]">
@@ -470,6 +468,7 @@ const AgentStorePage = () => {
470468
<SelectItem value="name">Name</SelectItem>
471469
</SelectContent>
472470
</Select>
471+
{renderPublisherButton()}
473472
</div>
474473
</div>
475474
</AnimatedElement>

‎web/src/components/login/login-card.tsx‎

Lines changed: 84 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,114 @@
11
'use client'
22

33
import { Suspense } from 'react'
4+
import { useSession, signIn } from 'next-auth/react'
5+
import { useSearchParams } from 'next/navigation'
46

57
import { SignInCardFooter } from '@/components/sign-in/sign-in-card-footer'
68
import {
79
Card,
810
CardHeader,
911
CardTitle,
1012
CardDescription,
13+
CardContent,
14+
CardFooter,
1115
} from '@/components/ui/card'
16+
import { Button } from '@/components/ui/button'
17+
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
1218

1319
export function LoginCard({ authCode }: { authCode?: string | null }) {
20+
const { data: session } = useSession()
21+
const searchParams = useSearchParams()
22+
23+
const handleContinueAsUser = () => {
24+
const referralCode = searchParams.get('referral_code')
25+
let callbackUrl = '/'
26+
27+
if (authCode) {
28+
// CLI flow
29+
callbackUrl = `/onboard?${searchParams.toString()}`
30+
} else if (referralCode) {
31+
// Referral flow
32+
callbackUrl = `/onboard?referral_code=${referralCode}`
33+
}
34+
35+
window.location.href = callbackUrl
36+
}
37+
38+
const handleUseAnotherAccount = () => {
39+
const searchParamsString = searchParams.toString()
40+
const referralCode = searchParams.get('referral_code')
41+
42+
let callbackUrl = '/login'
43+
if (authCode) {
44+
callbackUrl = `/onboard?${searchParamsString}`
45+
} else if (referralCode) {
46+
callbackUrl = `/onboard?referral_code=${referralCode}`
47+
// Store referral code as fallback
48+
localStorage.setItem('referral_code', referralCode)
49+
}
50+
51+
signIn('github', { callbackUrl, prompt: 'login' })
52+
}
53+
1454
return (
1555
<main className="container mx-auto flex flex-col items-center relative z-10">
1656
<div className="w-full sm:w-1/2 md:w-1/3">
1757
<Suspense>
1858
<Card>
1959
<CardHeader>
2060
<CardTitle className="mb-2">
21-
{authCode ? 'Login' : 'Login'}
61+
{authCode ? 'Authenticate' : 'Login'}
2262
</CardTitle>
2363
<CardDescription>
2464
{authCode
2565
? 'Continue to sign in to the Codebuff CLI.'
2666
: 'Increased rate limits, priority support, and more!'}
2767
</CardDescription>
2868
</CardHeader>
29-
<SignInCardFooter />
69+
70+
{session?.user ? (
71+
<>
72+
<CardContent className="space-y-4">
73+
<div className="flex items-center space-x-3">
74+
<Avatar className="h-12 w-12">
75+
<AvatarImage
76+
src={session.user.image || ''}
77+
alt={session.user.name || ''}
78+
/>
79+
<AvatarFallback>
80+
{session.user.name?.charAt(0) ||
81+
session.user.email?.charAt(0) ||
82+
'U'}
83+
</AvatarFallback>
84+
</Avatar>
85+
<div className="flex-1">
86+
<p className="font-medium">{session.user.name}</p>
87+
<p className="text-sm text-muted-foreground">
88+
{session.user.email}
89+
</p>
90+
</div>
91+
</div>
92+
<p className="text-sm text-muted-foreground">
93+
Do you want to use this account or sign in with another?
94+
</p>
95+
</CardContent>
96+
<CardFooter className="flex flex-col space-y-2">
97+
<Button onClick={handleContinueAsUser} className="w-full">
98+
Continue as {session.user.name || session.user.email}
99+
</Button>
100+
<Button
101+
variant="outline"
102+
onClick={handleUseAnotherAccount}
103+
className="w-full"
104+
>
105+
Use another account
106+
</Button>
107+
</CardFooter>
108+
</>
109+
) : (
110+
<SignInCardFooter />
111+
)}
30112
</Card>
31113
</Suspense>
32114
</div>

0 commit comments

Comments
 (0)