@promptbook/cli 0.104.0-7 → 0.104.0-9

package/apps/agents-server/src/app/agents/[agentName]/page.tsx

@@ -1,6 +1,5 @@
 'use server';
 
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import { $provideServer } from '@/src/tools/$provideServer';
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
 import { saturate } from '@promptbook-local/color';
@@ -28,6 +27,7 @@ export default async function AgentPage({
     const isAdmin = await isUserAdmin();
     const { headless: headlessParam } = await searchParams;
     const isHeadless = headlessParam !== undefined;
+    const { publicUrl } = await $provideServer();
 
     let agentProfile;
     try {
@@ -45,8 +45,6 @@ export default async function AgentPage({
         throw error;
     }
 
-    const { publicUrl } = await $provideServer();
-
     // Build agent page URL for QR and copy
     const agentUrl = `${publicUrl.href}${encodeURIComponent(agentName)}`;
     // <- TODO: [🐱‍🚀] Better
@@ -65,6 +63,7 @@ export default async function AgentPage({
             <AgentProfileWrapper
                 agent={agentProfile}
                 agentUrl={agentUrl}
+                publicUrl={publicUrl}
                 agentEmail={agentEmail}
                 agentName={agentName}
                 brandColorHex={brandColorHex}
@@ -98,8 +97,7 @@ export default async function AgentPage({
                     brandColorHex={brandColorHex}
                     avatarSrc={
                         agentProfile.meta.image ||
-                        agentProfile.permanentId ||
-                        generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)
+                        generatePlaceholderAgentProfileImageUrl(agentProfile.permanentId || agentName, publicUrl)
                     }
                     isDeleted={isDeleted}
                 />

package/apps/agents-server/src/app/agents/[agentName]/system-message/page.tsx

@@ -1,6 +1,8 @@
 'use server';
 
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
 import { ArrowLeftIcon, FileTextIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import Link from 'next/link';
@@ -8,13 +10,14 @@ import { notFound } from 'next/navigation';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
 import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
-import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentSystemMessagePage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
+    const { publicUrl } = await $provideServer();
+
     const agentName = await getAgentName(params);
 
     let agentProfile;
@@ -46,7 +49,13 @@ export default async function AgentSystemMessagePage({ params }: { params: Promi
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
                         />
@@ -78,7 +87,9 @@ export default async function AgentSystemMessagePage({ params }: { params: Promi
                     <div className="mt-6 bg-blue-50 rounded-lg p-4 border border-blue-200">
                         <h3 className="text-md font-semibold text-blue-900 mb-2">Model Requirements</h3>
                         <div className="text-sm text-blue-800">
-                            <p><strong>Model Variant:</strong> CHAT</p>
+                            <p>
+                                <strong>Model Variant:</strong> CHAT
+                            </p>
                             {/* TODO: [🧠] Add more model requirements if available */}
                         </div>
                     </div>

package/apps/agents-server/src/app/api/agents/[agentName]/clone/route.ts

@@ -8,7 +8,8 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
     const collection = await $provideAgentCollectionForServer();
 
     try {
-        const source = await collection.getAgentSource(agentName);
+        const agentId = await collection.getAgentPermanentId(agentName);
+        const source = await collection.getAgentSource(agentId);
 
         // Generate new name
         // TODO: [🧠] Better naming strategy, maybe check for collisions
@@ -18,7 +19,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
         // eslint-disable-next-line no-constant-condition
         while (true) {
             try {
-                await collection.getAgentSource(newAgentName);
+                await collection.getAgentPermanentId(newAgentName);
                 // If success, it means it exists, so we try next one
                 counter++;
                 newAgentName = `${agentName} (Copy ${counter})`;

package/apps/agents-server/src/app/api/agents/[agentName]/restore/route.ts

@@ -8,7 +8,8 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
     const collection = await $provideAgentCollectionForServer();
 
     try {
-        await collection.restoreAgent(agentName);
+        const agentId = await collection.getAgentPermanentId(agentName);
+        await collection.restoreAgent(agentId);
         return NextResponse.json({ success: true });
     } catch (error) {
         return NextResponse.json(

package/apps/agents-server/src/app/api/agents/[agentName]/route.ts

@@ -49,7 +49,8 @@ export async function DELETE(request: Request, { params }: { params: Promise<{ a
     const collection = await $provideAgentCollectionForServer();
 
     try {
-        await collection.deleteAgent(agentName);
+        const agentId = await collection.getAgentPermanentId(agentName);
+        await collection.deleteAgent(agentId);
         return NextResponse.json({ success: true });
     } catch (error) {
         return NextResponse.json(

package/apps/agents-server/src/app/api/browser-test/screenshot/route.ts

@@ -0,0 +1,30 @@
+import { $provideBrowserForServer } from '@/src/tools/$provideBrowserForServer';
+import { serializeError } from '@promptbook-local/utils';
+import { NextResponse } from 'next/server';
+import { assertsError } from '../../../../../../../src/errors/assertsError';
+
+export async function GET() {
+    try {
+        const browserContext = await $provideBrowserForServer();
+
+        const page = await browserContext.newPage();
+
+        await page.goto('https://ptbk.io');
+        const screenshotBuffer = await page.screenshot();
+
+        // await page.close();
+        // Do not close browser
+        // <- TODO: !!!! Fix
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return new NextResponse(new Blob([screenshotBuffer as any]), {
+            headers: {
+                'Content-Type': 'image/png',
+            },
+        });
+    } catch (error) {
+        assertsError(error);
+        console.error('Error taking screenshot:', error);
+        return NextResponse.json({ error: serializeError(error) }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/browser-test/scroll-facebook/route.ts

@@ -0,0 +1,62 @@
+import { $provideBrowserForServer } from '@/src/tools/$provideBrowserForServer';
+import { NextResponse } from 'next/server';
+import { just } from '../../../../../../../src/utils/organization/just';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            try {
+                console.log('Starting Facebook scroll session');
+                const browserContext = await $provideBrowserForServer();
+                const page = await browserContext.newPage();
+
+                await page.goto('https://www.facebook.com/');
+                console.log('Navigated to Facebook');
+
+                // Loop for streaming
+                while (just(true)) {
+                    // Check for login (simple check for now)
+                    // Facebook uses role="banner" for the top navigation bar when logged in
+                    const isLoggedIn = await page.$('div[role="banner"]');
+
+                    if (isLoggedIn) {
+                        // Scroll down
+                        await page.evaluate(() => window.scrollBy(0, 500));
+                        // console.log('Scrolled');
+                    } else {
+                        // console.log('Waiting for login...');
+                    }
+
+                    const buffer = await page.screenshot({ type: 'jpeg', quality: 50 });
+
+                    const boundary = '--myboundary';
+                    const header = `\r\n${boundary}\r\nContent-Type: image/jpeg\r\nContent-Length: ${buffer.length}\r\n\r\n`;
+
+                    controller.enqueue(encoder.encode(header));
+                    controller.enqueue(buffer);
+
+                    // Short delay
+                    await new Promise((r) => setTimeout(r, 200));
+                }
+            } catch (error) {
+                console.error('Stream error:', error);
+                try {
+                    controller.close();
+                } catch (e) {
+                    // Ignore error if controller is already closed
+                }
+            }
+        },
+    });
+
+    return new NextResponse(stream, {
+        headers: {
+            'Content-Type': 'multipart/x-mixed-replace; boundary=myboundary',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+        },
+    });
+}

package/apps/agents-server/src/app/humans.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateHumansTxt();
+    const txt = await generateHumansTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/page.tsx

@@ -34,6 +34,8 @@ const calendarWithSeconds = {
 export default async function HomePage() {
     $sideEffect(/* Note: [🐶] This will ensure dynamic rendering of page and avoid Next.js pre-render */ headers());
 
+    const { publicUrl } = await $provideServer();
+
     const currentUser = await getCurrentUser();
     const isAdmin = await isUserAdmin(); /* <- TODO: [👹] Here should be user permissions */
 
@@ -94,9 +96,9 @@ export default async function HomePage() {
     return (
         <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
             <div className="container mx-auto px-4 py-16">
-                <AgentsList agents={[...agents]} isAdmin={isAdmin} />
+                <AgentsList agents={[...agents]} isAdmin={isAdmin} publicUrl={publicUrl} />
 
-                <ExternalAgentsSectionClient />
+                <ExternalAgentsSectionClient publicUrl={publicUrl} />
 
                 {isAdmin && <UsersList allowCreate={false} />}
 

package/apps/agents-server/src/app/recycle-bin/page.tsx

@@ -1,4 +1,5 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { TrashIcon } from 'lucide-react';
 import Link from 'next/link';
 import { DeletedAgentsList } from '../../components/Homepage/DeletedAgentsList';
@@ -9,6 +10,7 @@ export const metadata = {
 };
 
 export default async function RecycleBinPage() {
+    const { publicUrl } = await $provideServer();
     const collection = await $provideAgentCollectionForServer();
     const deletedAgents = await collection.listDeletedAgents();
     const isAdmin = await isUserAdmin();
@@ -34,7 +36,7 @@ export default async function RecycleBinPage() {
                         </Link>
                     </div>
                 ) : (
-                    <DeletedAgentsList agents={deletedAgents} isAdmin={isAdmin} />
+                    <DeletedAgentsList agents={deletedAgents} isAdmin={isAdmin} publicUrl={publicUrl} />
                 )}
             </div>
         </div>

package/apps/agents-server/src/app/robots.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateRobotsTxt();
+    const txt = await generateRobotsTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/security.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateSecurityTxt();
+    const txt = await generateSecurityTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/sitemap.xml/route.ts

@@ -1,25 +1,24 @@
 // Dynamic sitemap.xml for Agents Server
 
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { spaceTrim } from '@promptbook-local/utils';
 import { NextResponse } from 'next/server';
 
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
+    const { publicUrl } = await $provideServer();
+
     const collection = await $provideAgentCollectionForServer();
 
     // Assume collection.listAgents() returns an array of agent names
     const agents = await collection.listAgents();
 
-    // Get base URL from environment or config
-    const baseUrl = NEXT_PUBLIC_SITE_URL?.href || process.env.PUBLIC_URL || 'https://ptbk.io';
-
     const urls = agents
         .map(
             ({ permanentId, agentName }) =>
-                `<url><loc>${baseUrl}agents/${encodeURIComponent(permanentId || agentName)}</loc></url>`,
+                `<url><loc>${publicUrl.href}agents/${encodeURIComponent(permanentId || agentName)}</loc></url>`,
         )
         .join('\n');
 

package/apps/agents-server/src/components/AgentProfile/AgentProfile.tsx

@@ -1,13 +1,14 @@
 'use client';
 
+import { colorToDataUrl } from '@promptbook-local/color';
 import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
 import { AgentBasicInformation, string_agent_permanent_id } from '@promptbook-local/types';
 import { RepeatIcon } from 'lucide-react';
 import { useState } from 'react';
+import { AgentProfileImage } from './AgentProfileImage';
 import { AgentQrCode } from './AgentQrCode';
 import { QrCodeModal } from './QrCodeModal';
 import { useAgentBackground } from './useAgentBackground';
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 type AgentProfileProps = {
     /**
@@ -27,6 +28,11 @@ type AgentProfileProps = {
      */
     readonly agentUrl?: string;
 
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
     /**
      * Email of the agent
      */
@@ -65,6 +71,7 @@ export function AgentProfile(props: AgentProfileProps) {
         agent,
         agentUrl = '',
         agentEmail = '',
+        publicUrl,
         permanentId,
         renderMenu,
         children,
@@ -72,11 +79,11 @@ export function AgentProfile(props: AgentProfileProps) {
         isHeadless = false,
         className,
     } = props;
-    console.log('!!!!', { agent });
+
     const { meta, agentName } = agent;
     const fullname = (meta.fullname as string) || agentName || 'Agent';
     const personaDescription = agent.personaDescription || '';
-    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(permanentId, NEXT_PUBLIC_SITE_URL);
+    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(permanentId, publicUrl);
 
     const [isQrModalOpen, setIsQrModalOpen] = useState(false);
     const [isFlipped, setIsFlipped] = useState(false);
@@ -126,14 +133,14 @@ export function AgentProfile(props: AgentProfileProps) {
                 )}
 
                 {/* Main profile content */}
-                <div className="relative z-10 grid grid-cols-[auto_1fr] gap-x-6 gap-y-4 md:gap-12 max-w-5xl w-full items-start">
+                <div className="relative z-10 flex flex-col md:grid md:grid-cols-[auto_1fr] gap-y-6 md:gap-y-4 md:gap-x-12 max-w-5xl w-full items-center md:items-start">
                     {/* Agent image card (Flippable) */}
                     <div
-                        className="flex-shrink-0 perspective-1000 group row-start-1 col-start-1 md:row-span-3"
+                        className="flex-shrink-0 perspective-1000 group w-full md:w-auto md:row-start-1 md:col-start-1 md:row-span-3"
                         style={{ perspective: '1000px' }}
                     >
                         <div
-                            className="relative w-24 md:w-80 transition-all duration-700 transform-style-3d cursor-pointer"
+                            className="relative w-full md:w-80 transition-all duration-700 transform-style-3d cursor-pointer max-w-sm mx-auto md:max-w-none md:mx-0"
                             style={{
                                 aspectRatio: '1 / 1.618', // Golden Ratio
                                 transformStyle: 'preserve-3d',
@@ -154,17 +161,15 @@ export function AgentProfile(props: AgentProfileProps) {
                                     // ['cornerShape' as really_any /* <- Note: `cornerShape` is non standard CSS property */]: 'squircle ',
                                 }}
                             >
-                                {imageUrl ? (
-                                    // eslint-disable-next-line @next/next/no-img-element
-                                    <img src={imageUrl} alt={fullname} className="w-full h-full object-cover" />
-                                ) : (
-                                    <div
-                                        className="w-full h-full flex items-center justify-center text-3xl md:text-8xl font-bold text-white/80"
-                                        style={{ backgroundColor: brandColorDarkHex }}
-                                    >
-                                        {fullname.charAt(0).toUpperCase()}
-                                    </div>
-                                )}
+                                <AgentProfileImage
+                                    src={imageUrl}
+                                    alt={fullname}
+                                    className="w-full h-full object-cover"
+                                    style={{
+                                        objectFit: 'cover',
+                                        backgroundImage: `url(${colorToDataUrl(brandColorLightHex)})`,
+                                    }}
+                                />
 
                                 {/* Flip hint icon */}
                                 <div className="absolute bottom-2 md:bottom-4 right-2 md:right-4 bg-black/30 p-1 md:p-2 rounded-full text-white/80 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity">
@@ -202,7 +207,7 @@ export function AgentProfile(props: AgentProfileProps) {
                     </div>
 
                     {/* Agent info - Header Area */}
-                    <div className="row-start-1 col-start-2 flex flex-col justify-center md:justify-start h-full md:h-auto gap-1 md:gap-6">
+                    <div className="w-full md:w-auto md:row-start-1 md:col-start-2 flex flex-col justify-center md:justify-start items-center md:items-start h-auto gap-4 md:gap-6 text-center md:text-left">
                         {/* Agent name with custom font */}
                         <h1
                             className="text-2xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight leading-tight"
@@ -220,11 +225,11 @@ export function AgentProfile(props: AgentProfileProps) {
                     </div>
 
                     {/* Chat Area */}
-                    <div className="col-span-2 md:col-span-1 md:col-start-2 w-full mt-2 md:mt-0">{children}</div>
+                    <div className="w-full md:col-span-1 md:col-start-2 mt-4 md:mt-0">{children}</div>
 
                     {/* Secondary Actions */}
                     {!isHeadless && (
-                        <div className="col-span-2 md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-2">
+                        <div className="w-full md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-4 md:mt-2">
                             {actions}
                         </div>
                     )}

package/apps/agents-server/src/components/AgentProfile/AgentProfileImage.tsx

@@ -0,0 +1,79 @@
+import { Loader2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type AgentProfileImageProps = {
+    readonly src: string;
+    readonly alt: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+};
+
+export function AgentProfileImage({ src, alt, className, style }: AgentProfileImageProps) {
+    const [imageSrc, setImageSrc] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        let isMounted = true;
+        let timeoutId: NodeJS.Timeout;
+        let objectUrl: string | null = null;
+
+        const fetchImage = async () => {
+            try {
+                const response = await fetch(src);
+                if (response.ok) {
+                    const blob = await response.blob();
+                    if (!isMounted) {
+                        return;
+                    }
+
+                    objectUrl = URL.createObjectURL(blob);
+                    setImageSrc(objectUrl);
+                    setIsLoading(false);
+                } else {
+                    // Retry on non-200
+                    if (isMounted) {
+                        timeoutId = setTimeout(fetchImage, 2000);
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to fetch image, retrying...', error);
+                if (isMounted) {
+                    timeoutId = setTimeout(fetchImage, 2000);
+                }
+            }
+        };
+
+        setIsLoading(true);
+        fetchImage();
+
+        return () => {
+            isMounted = false;
+            clearTimeout(timeoutId);
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
+    }, [src]);
+
+    return (
+        <div className={`relative ${className}`} style={style}>
+            {/* Note: We apply style to the container, so backgroundImage works here */}
+
+            {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <Loader2 className="w-8 h-8 animate-spin text-white/50" />
+                </div>
+            )}
+
+            {imageSrc && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                    src={imageSrc}
+                    alt={alt}
+                    className="w-full h-full object-cover"
+                    // We don't pass style here because it is applied to container
+                />
+            )}
+        </div>
+    );
+}

package/apps/agents-server/src/components/Header/Header.tsx

@@ -305,6 +305,10 @@ export function Header(props: HeaderProps) {
                               label: 'Chat feedback',
                               href: '/admin/chat-feedback',
                           },
+                          {
+                              label: 'Browser',
+                              href: '/admin/browser-test',
+                          },
                       ],
                   },
                   {

package/apps/agents-server/src/components/Homepage/AgentCard.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
 import { really_any } from '@promptbook-local/types';
 import { EyeIcon, EyeOffIcon, RotateCcwIcon } from 'lucide-react';
@@ -9,14 +8,50 @@ import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/
 import { useAgentBackground } from '../AgentProfile/useAgentBackground';
 
 type AgentCardProps = {
-    agent: AgentBasicInformation;
-    href: string;
-    isAdmin?: boolean;
-    onDelete?: (agentIdentifier: string) => void;
-    onClone?: (agentIdentifier: string) => void;
-    onToggleVisibility?: (agentIdentifier: string) => void;
-    onRestore?: (agentIdentifier: string) => void;
-    visibility?: 'PUBLIC' | 'PRIVATE';
+    /**
+     * @@@
+     */
+    readonly agent: AgentBasicInformation;
+
+    /**
+     * @@@
+     */
+    readonly href: string;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
+    /**
+     * @@@
+     */
+    readonly isAdmin?: boolean;
+
+    /**
+     * @@@
+     */
+    readonly onDelete?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly onClone?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly onToggleVisibility?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly onRestore?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly visibility?: 'PUBLIC' | 'PRIVATE';
 };
 
 const ACTION_BUTTON_CLASSES =
@@ -26,6 +61,7 @@ export function AgentCard({
     agent,
     href,
     isAdmin,
+    publicUrl,
     onDelete,
     onClone,
     onToggleVisibility,
@@ -34,7 +70,7 @@ export function AgentCard({
 }: AgentCardProps) {
     const { meta, agentName } = agent;
     const fullname = (meta.fullname as string) || agentName || 'Agent';
-    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL);
+    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(agentName, publicUrl);
     const personaDescription = agent.personaDescription || '';
 
     const { brandColorLightHex, brandColorDarkHex, backgroundImage } = useAgentBackground(meta.color);