@promptbook/cli 0.104.0-6 → 0.104.0-8

package/apps/agents-server/config.ts

@@ -29,9 +29,7 @@ const config = ConfigChecker.from({
  *
  * Note: When `SERVERS` are used, this URL will be overridden by the server URL.
  */
-export const NEXT_PUBLIC_SITE_URL = config
-    .get('NEXT_PUBLIC_SITE_URL')
-    .url()./* <- TODO: !!!! Is it ok not to be required().*/ value;
+export const NEXT_PUBLIC_SITE_URL = config.get('NEXT_PUBLIC_SITE_URL').url().value;
 
 /**
  * [♐️] Vercel environment: "development" | "preview" | "production"

package/apps/agents-server/src/app/admin/browser-test/BrowserTestClient.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+
+export function BrowserTestClient() {
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (imageUrl) {
+                URL.revokeObjectURL(imageUrl);
+            }
+        };
+    }, [imageUrl]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleTakeScreenshot = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await fetch('/api/browser-test/screenshot');
+            if (!response.ok) {
+                const text = await response.text();
+                let errorMessage;
+                try {
+                    const json = JSON.parse(text);
+                    errorMessage = json.error || response.statusText;
+                } catch {
+                    errorMessage = text || response.statusText;
+                }
+                throw new Error(`Error: ${response.status} ${errorMessage}`);
+            }
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            setImageUrl(url);
+        } catch (err) {
+            setError(String(err));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl text-gray-900 font-light">Browser Test</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Launch a browser instance and take a screenshot to verify functionality.
+                    </p>
+                </div>
+            </div>
+
+            <Card>
+                <div className="mb-4">
+                    <p className="mb-2">Click the button below to launch a browser instance (if not running), navigate to ptbk.io, and take a screenshot.</p>
+                    <button
+                        onClick={handleTakeScreenshot}
+                        disabled={isLoading}
+                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                    >
+                        {isLoading ? 'Taking Screenshot...' : 'Take Screenshot'}
+                    </button>
+                </div>
+
+                {error && (
+                    <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
+                        <strong className="font-bold">Error: </strong>
+                        <span className="block sm:inline">{error}</span>
+                    </div>
+                )}
+
+                {imageUrl && (
+                    <div className="border rounded shadow-lg overflow-hidden">
+                        <h2 className="text-xl font-semibold p-2 bg-gray-100">Screenshot</h2>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={imageUrl} alt="Screenshot of ptbk.io" className="w-full h-auto" />
+                    </div>
+                )}
+            </Card>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/browser-test/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { BrowserTestClient } from './BrowserTestClient';
+
+export default async function BrowserTestPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <BrowserTestClient />;
+}

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

@@ -5,19 +5,57 @@ import { AgentProfile } from '../../../components/AgentProfile/AgentProfile';
 import { AgentOptionsMenu } from './AgentOptionsMenu';
 
 type AgentProfileWrapperProps = {
-    agent: AgentBasicInformation;
-    agentUrl: string;
-    agentEmail: string;
-    agentName: string_agent_name;
-    brandColorHex: string;
-    isAdmin: boolean;
-    isHeadless: boolean;
-    actions: React.ReactNode;
-    children: React.ReactNode;
+    /***
+     * @@@
+     */
+    readonly agent: AgentBasicInformation;
+
+    /***
+     * @@@
+     */
+    readonly agentUrl: string;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
+    /***
+     * @@@
+     */
+    readonly agentEmail: string;
+
+    /***
+     * @@@
+     */
+    readonly agentName: string_agent_name;
+
+    /***
+     * @@@
+     */
+    readonly brandColorHex: string;
+
+    /***
+     * @@@
+     */
+    readonly isAdmin: boolean;
+
+    /***
+     * @@@
+     */
+    readonly isHeadless: boolean;
+
+    readonly actions: React.ReactNode;
+
+    /***
+     * @@@
+     */
+    readonly children: React.ReactNode;
 };
 
 export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
-    const { agent, agentUrl, agentEmail, agentName, brandColorHex, isAdmin, isHeadless, actions, children } = props;
+    const { agent, agentUrl, publicUrl, agentEmail, agentName, brandColorHex, isAdmin, isHeadless, actions, children } =
+        props;
 
     // Derived agentName from agent data
     const derivedAgentName = agent.agentName;
@@ -27,6 +65,7 @@ export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
         <AgentProfile
             agent={agent}
             agentUrl={agentUrl}
+            publicUrl={publicUrl}
             permanentId={permanentId || agentName}
             agentEmail={agentEmail}
             isHeadless={isHeadless}

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

@@ -14,9 +14,6 @@ export async function getAgentProfile(agentName: string) {
     const collection = await $provideAgentCollectionForServer();
     const agentSource = await collection.getAgentSource(agentName);
     const agentProfile = parseAgentSource(agentSource);
-
-    console.log('!!!!', { agentSource, agentProfile });
-
     return agentProfile;
 }
 

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import Editor from '@monaco-editor/react';
 import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
 import { AgentBasicInformation } from '@promptbook-local/types';
@@ -120,8 +121,10 @@ export default function AgentCodePage({ params }: { params: Promise<{ agentName:
                     <img
                         src={
                             agentProfile.meta.image ||
-                            agentProfile.permanentId ||
-                            generatePlaceholderAgentProfileImageUrl(agentName)
+                            generatePlaceholderAgentProfileImageUrl(
+                                agentProfile.permanentId || agentName,
+                                NEXT_PUBLIC_SITE_URL, // <- TODO: !!!! Use here `const { publicUrl } = await $provideServer();`
+                            )
                         }
                         alt={agentProfile.meta.fullname || agentName}
                         className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"

package/apps/agents-server/src/app/agents/[agentName]/images/default-avatar.png/getAgentDefaultAvatarPrompt.ts

@@ -0,0 +1,31 @@
+import { AgentBasicInformation } from '@promptbook-local/types';
+import spaceTrim from 'spacetrim';
+import { string_prompt_image } from '../../../../../../../../src/types/typeAliases';
+
+export function getAgentDefaultAvatarPrompt(agent: AgentBasicInformation): string_prompt_image {
+    const {
+        agentName,
+        personaDescription,
+        meta: { fullname, color },
+    } = agent;
+
+    return spaceTrim(
+        (block) => `
+            Professional corporate headshot of ${fullname || agentName}
+            
+            ${block(personaDescription || '')}
+            
+            - Professional business portrait photograph
+            - Photorealistic, studio quality lighting
+            - Shot with 85mm lens, shallow depth of field
+            - Neutral gray or soft gradient background
+            - Subject wearing professional attire with accent colors: ${color}
+            - Confident, approachable expression with slight smile
+            - Eye-level camera angle, centered composition
+            - Soft diffused lighting, subtle rim light
+            - Sharp focus on eyes, cinematic color grading
+            - 8K resolution, ultra detailed
+            
+        `,
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/images/default-avatar.png/route.ts

@@ -4,12 +4,13 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 import { $provideCdnForServer } from '@/src/tools/$provideCdnForServer';
 import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
 import { parseAgentSource } from '@promptbook-local/core';
-import { serializeError } from '@promptbook-local/utils';
+import { computeHash, serializeError } from '@promptbook-local/utils';
 import { NextRequest, NextResponse } from 'next/server';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
-import { getSingleLlmExecutionTools } from '../../../../../../../../src/llm-providers/_multiple/getSingleLlmExecutionTools';
 import type { LlmExecutionTools } from '../../../../../../../../src/execution/LlmExecutionTools';
+import { getSingleLlmExecutionTools } from '../../../../../../../../src/llm-providers/_multiple/getSingleLlmExecutionTools';
 import type { string_url } from '../../../../../../../../src/types/typeAliases';
+import { getAgentDefaultAvatarPrompt } from './getAgentDefaultAvatarPrompt';
 
 export async function GET(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
     try {
@@ -20,13 +21,28 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             return NextResponse.json({ error: 'Agent name is required' }, { status: 400 });
         }
 
-        // Define a unique filename/key for this agent's default avatar
-        // This is used for DB lookup and CDN storage, distinct from generic images
-        const internalFilename = `agent-${agentName}-default-avatar.png`;
+        // 1. Fetch agent data first to construct the prompt
+        const collection = await $provideAgentCollectionForServer();
+        let agentSource;
+        try {
+            agentSource = await collection.getAgentSource(agentName);
+        } catch (error) {
+            // If agent not found, redirect to pravatar with the agent name as unique identifier
+            const pravaratUrl = `https://i.pravatar.cc/1024?u=${encodeURIComponent(agentName)}`;
+            return NextResponse.redirect(pravaratUrl);
+        }
+
+        const agentProfile = parseAgentSource(agentSource);
+
+        const prompt = getAgentDefaultAvatarPrompt(agentProfile);
+
+        // Use hash of the prompt as cache key - this ensures regeneration when prompt changes
+        const promptHash = computeHash(prompt);
+        const internalFilename = `agent-avatar-${promptHash}.png`;
 
         const supabase = $provideSupabaseForServer();
 
-        // Check if image already exists in database
+        // Check if image with this prompt hash already exists in database
         const { data: existingImage, error: selectError } = await supabase
             .from(await $getTableName(`Image`))
             .select('cdnUrl')
@@ -39,35 +55,24 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         }
 
         if (existingImage) {
-            // Image exists, redirect to CDN
-            return NextResponse.redirect(existingImage.cdnUrl as string_url);
+            // Image exists, fetch from CDN and return directly
+            const imageResponse = await fetch(existingImage.cdnUrl as string_url);
+            if (!imageResponse.ok) {
+                console.warn(`Failed to fetch image from CDN: ${imageResponse.status}`);
+                return NextResponse.redirect(existingImage.cdnUrl);
+            }
+            const imageBuffer = await imageResponse.arrayBuffer();
+            return new NextResponse(imageBuffer, {
+                status: 200,
+                headers: {
+                    'Content-Type': 'image/png',
+                    'Cache-Control': 'public, max-age=31536000, immutable',
+                },
+            });
         }
 
         // Image doesn't exist, generate it
 
-        // 1. Fetch agent data
-        const collection = await $provideAgentCollectionForServer();
-        let agentSource;
-        try {
-             agentSource = await collection.getAgentSource(agentName);
-        } catch (error) {
-            // If agent not found, return 404 or default generic image?
-            // User said: "Use the ... instead of Gravatar for agents that do not have custom uploaded avatar"
-            // If agent doesn't exist, we probably can't generate a specific avatar.
-            return NextResponse.json({ error: 'Agent not found' }, { status: 404 });
-        }
-
-        const agentProfile = parseAgentSource(agentSource);
-
-        // Extract required fields
-        const name = agentProfile.meta?.title || agentProfile.agentName || agentName;
-        const persona = agentProfile.personaDescription || 'an AI agent';
-        const color = agentProfile.meta?.color || 'blue';
-
-        // Construct prompt
-        // "Image of {agent.name}, {agent.persona}, portrait, use color ${agent.meta.color}, detailed, high quality"
-        const prompt = `Image of ${name}, ${persona}, portrait, use color ${color}, detailed, high quality`;
-
         // 2. Generate image
         const executionTools = await $provideExecutionToolsForServer();
         const llmTools = getSingleLlmExecutionTools(executionTools.llm) as LlmExecutionTools;
@@ -79,12 +84,14 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         const imageResult = await llmTools.callImageGenerationModel({
             title: `Generate default avatar for ${agentName}`,
             content: prompt,
-            parameters: {
-                size: '1024x1792', // Vertical orientation
-            },
+            parameters: {},
             modelRequirements: {
                 modelVariant: 'IMAGE_GENERATION',
-                modelName: 'dall-e-3', 
+                modelName: 'dall-e-3',
+                size: '1024x1792', // <- Vertical orientation
+                // <- TODO: [🤐] DRY
+                quality: 'hd',
+                style: 'natural',
             },
         });
 
@@ -125,9 +132,20 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             throw insertError;
         }
 
-        // Redirect to the newly created image
-        return NextResponse.redirect(cdnUrl.href as string_url);
-
+        // Return the newly created image directly
+        const finalImageResponse = await fetch(cdnUrl.href);
+        if (!finalImageResponse.ok) {
+            console.warn(`Failed to fetch newly created image from CDN: ${finalImageResponse.status}`);
+            return NextResponse.redirect(cdnUrl.href);
+        }
+        const finalImageBuffer = await finalImageResponse.arrayBuffer();
+        return new NextResponse(finalImageBuffer, {
+            status: 200,
+            headers: {
+                'Content-Type': 'image/png',
+                'Cache-Control': 'public, max-age=31536000, immutable',
+            },
+        });
     } catch (error) {
         assertsError(error);
         console.error('Error serving default avatar:', error);

package/apps/agents-server/src/app/agents/[agentName]/images/icon-256.png/route.tsx

@@ -1,3 +1,4 @@
+import { $provideServer } from '@/src/tools/$provideServer';
 import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
@@ -18,6 +19,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentName = await getAgentName(params);
         const agentProfile = await getAgentProfile(agentName);
         const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+        const { publicUrl } = await $provideServer();
 
         return new ImageResponse(
             (
@@ -30,6 +32,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                         alignItems: 'center',
                         justifyContent: 'center',
                         borderRadius: '50%',
+                        aspectRatio: '1 / 1',
                         overflow: 'hidden',
                     }}
                 >
@@ -46,7 +49,13 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                         {/* Note: `next/image` is not working propperly with `next/og` */}
                         {/* eslint-disable-next-line @next/next/no-img-element */}
                         <img
-                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName)}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt="Agent Icon"
                         />
                     </div>

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

@@ -0,0 +1,200 @@
+'use server';
+
+import { saturate } from '@promptbook-local/color';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import Link from 'next/link';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { getAgentName, getAgentProfile } from '../_utils';
+
+/**
+ * Available image types for agents with their descriptions and sizes
+ */
+const AGENT_IMAGES = [
+    {
+        name: 'default-avatar.png',
+        title: 'Default Avatar',
+        description: 'AI-generated avatar image based on the agent profile. Vertical orientation (1024x1792).',
+        size: '1024×1792',
+    },
+    {
+        name: 'icon-256.png',
+        title: 'Icon (256×256)',
+        description: 'Small circular icon suitable for profile pictures and thumbnails.',
+        size: '256×256',
+    },
+    {
+        name: 'screenshot-fullhd.png',
+        title: 'Screenshot Full HD',
+        description: 'Landscape screenshot showing the agent with name. Suitable for desktop previews.',
+        size: '1920×1080',
+    },
+    {
+        name: 'screenshot-phone.png',
+        title: 'Screenshot Phone',
+        description: 'Portrait screenshot optimized for mobile devices.',
+        size: '1080×1920',
+    },
+] as const;
+
+export default async function AgentImagesPage({ params }: { params: Promise<{ agentName: string }> }) {
+    const agentName = await getAgentName(params);
+    const agentProfile = await getAgentProfile(agentName);
+
+    const brandColor = Color.fromSafe(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const brandColorHex = brandColor.then(saturate(-0.5)).toHex();
+
+    const fullname = (agentProfile.meta.fullname || agentProfile.agentName || 'Agent') as string;
+
+    return (
+        <div
+            style={{
+                minHeight: '100vh',
+                backgroundColor: '#f5f5f5',
+                padding: '2rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: '1200px',
+                    margin: '0 auto',
+                }}
+            >
+                <header
+                    style={{
+                        marginBottom: '2rem',
+                        padding: '1.5rem',
+                        backgroundColor: brandColorHex,
+                        borderRadius: '12px',
+                        color: 'white',
+                    }}
+                >
+                    <h1 style={{ margin: 0, fontSize: '2rem' }}>
+                        Images for <strong>{fullname}</strong>
+                    </h1>
+                    <p style={{ margin: '0.5rem 0 0', opacity: 0.9 }}>
+                        All available image assets for agent{' '}
+                        <code
+                            style={{
+                                backgroundColor: 'rgba(255,255,255,0.2)',
+                                padding: '2px 6px',
+                                borderRadius: '4px',
+                            }}
+                        >
+                            {agentName}
+                        </code>
+                    </p>
+                </header>
+
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+                        gap: '1.5rem',
+                    }}
+                >
+                    {AGENT_IMAGES.map((image) => {
+                        const imageUrl = `/agents/${encodeURIComponent(agentName)}/images/${image.name}`;
+                        return (
+                            <div
+                                key={image.name}
+                                style={{
+                                    backgroundColor: 'white',
+                                    borderRadius: '12px',
+                                    overflow: 'hidden',
+                                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        aspectRatio: '16/9',
+                                        backgroundColor: '#e0e0e0',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        overflow: 'hidden',
+                                    }}
+                                >
+                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img
+                                        src={imageUrl}
+                                        alt={image.title}
+                                        style={{
+                                            maxWidth: '100%',
+                                            maxHeight: '100%',
+                                            objectFit: 'contain',
+                                        }}
+                                    />
+                                </div>
+                                <div style={{ padding: '1rem' }}>
+                                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.25rem' }}>{image.title}</h2>
+                                    <p style={{ margin: '0 0 0.5rem', color: '#666', fontSize: '0.9rem' }}>
+                                        {image.description}
+                                    </p>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            marginTop: '1rem',
+                                        }}
+                                    >
+                                        <span
+                                            style={{
+                                                backgroundColor: '#f0f0f0',
+                                                padding: '4px 8px',
+                                                borderRadius: '4px',
+                                                fontSize: '0.85rem',
+                                                color: '#555',
+                                            }}
+                                        >
+                                            {image.size}
+                                        </span>
+                                        <Link
+                                            href={imageUrl}
+                                            target="_blank"
+                                            style={{
+                                                backgroundColor: brandColorHex,
+                                                color: 'white',
+                                                padding: '8px 16px',
+                                                borderRadius: '6px',
+                                                textDecoration: 'none',
+                                                fontSize: '0.9rem',
+                                            }}
+                                        >
+                                            Open Image
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <footer
+                    style={{
+                        marginTop: '2rem',
+                        padding: '1rem',
+                        backgroundColor: 'white',
+                        borderRadius: '12px',
+                        textAlign: 'center',
+                        color: '#666',
+                    }}
+                >
+                    <p style={{ margin: 0 }}>
+                        <Link
+                            href={`/agents/${encodeURIComponent(agentName)}`}
+                            style={{ color: brandColorHex, textDecoration: 'none' }}
+                        >
+                            ← Back to {fullname}
+                        </Link>
+                    </p>
+                </footer>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * TODO: [🦚] Add download button functionality
+ * TODO: [🦚] Add image regeneration option for default-avatar
+ */

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-fullhd.png/route.tsx

@@ -1,4 +1,5 @@
-import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
@@ -21,6 +22,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentProfile = await getAgentProfile(agentName);
         const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
         const backgroundColor = agentColor.then(grayscale(0.5));
+        const { publicUrl } = await $provideServer();
 
         return new ImageResponse(
             (
@@ -48,10 +50,9 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                         <img
                             style={{
                                 width: '80%',
-                                backgroundColor: agentColor.toHex(),
-                                borderRadius: '50%',
+                                // backgroundColor: agentColor.toHex(),
                             }}
-                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName)}
+                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
                             alt="Agent Icon"
                         />
                     </div>