@promptbook/cli 0.104.0-7 → 0.104.0-9

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/AddAgentButton.tsx

@@ -1,41 +1,67 @@
 'use client';
 
+import { string_book } from '@promptbook-local/types';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { Card } from '../components/Homepage/Card';
-import { $createAgentAction } from './actions';
+import { NewAgentDialog } from '../components/NewAgentDialog/NewAgentDialog';
+import { $createAgentFromBookAction, $generateAgentBoilerplateAction } from './actions';
 
 export function AddAgentButton() {
     const router = useRouter();
     const [isLoading, setIsLoading] = useState(false);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [agentSource, setAgentSource] = useState<string_book>('' as string_book);
 
     const handleAddAgent = async () => {
         setIsLoading(true);
-        const { /*agentName,*/ permanentId } = await $createAgentAction();
-        // TODO: Add proper error handling and UI feedback
+        try {
+            const boilerplate = await $generateAgentBoilerplateAction();
+            setAgentSource(boilerplate);
+            setIsDialogOpen(true);
+        } catch (error) {
+            console.error('Failed to generate agent boilerplate', error);
+            // TODO: Add proper error handling and UI feedback
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCreate = async (source: string_book) => {
+        // Note: [🧠] Logic for creation is now handled inside the dialog (waiting for promise), here we just handle navigation
+        const { permanentId } = await $createAgentFromBookAction(source);
+
         if (permanentId) {
             router.push(`/agents/${permanentId}`);
         } else {
             router.refresh();
-            setIsLoading(false);
         }
     };
 
     return (
-        <div
-            onClick={isLoading ? undefined : handleAddAgent}
-            className={`cursor-pointer h-full group ${isLoading ? 'pointer-events-none' : ''}`}
-        >
-            <Card className="flex items-center justify-center text-lg font-medium text-gray-500 group-hover:text-blue-500 group-hover:border-blue-400 border-dashed border-2">
-                {isLoading ? (
-                    <>
-                        <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
-                        Creating agent...
-                    </>
-                ) : (
-                    '+ Add New Agent'
-                )}
-            </Card>
-        </div>
+        <>
+            <div
+                onClick={isLoading ? undefined : handleAddAgent}
+                className={`cursor-pointer h-full group ${isLoading ? 'pointer-events-none' : ''}`}
+            >
+                <Card className="flex items-center justify-center text-lg font-medium text-gray-500 group-hover:text-blue-500 group-hover:border-blue-400 border-dashed border-2">
+                    {isLoading ? (
+                        <>
+                            <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+                            Preparing...
+                        </>
+                    ) : (
+                        '+ Add New Agent'
+                    )}
+                </Card>
+            </div>
+
+            <NewAgentDialog
+                isOpen={isDialogOpen}
+                onClose={() => setIsDialogOpen(false)}
+                initialAgentSource={agentSource}
+                onCreate={handleCreate}
+            />
+        </>
     );
 }

package/apps/agents-server/src/app/actions.ts

@@ -25,6 +25,11 @@ export async function $createAgentAction(): Promise<{ agentName: string_agent_na
     return { agentName, permanentId };
 }
 
+export async function $generateAgentBoilerplateAction(): Promise<string_book> {
+    const namePool = (await getMetadata('NAME_POOL')) || 'ENGLISH';
+    return $generateBookBoilerplate({ namePool });
+}
+
 export async function $createAgentFromBookAction(bookContent: string_book): Promise<{ agentName: string_agent_name; permanentId: string_agent_permanent_id }> {
     // TODO: [👹] Check permissions here
     if (!(await isUserAdmin())) {

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+
+export function BrowserTestClient() {
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [facebookStreamUrl, setFacebookStreamUrl] = 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 () => {
+        setFacebookStreamUrl(null);
+        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);
+        }
+    };
+
+    const handleScrollFacebook = () => {
+        setImageUrl(null);
+        setError(null);
+        setFacebookStreamUrl(`/api/browser-test/scroll-facebook?t=${Date.now()}`);
+    };
+
+    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>
+                    <button
+                        onClick={handleScrollFacebook}
+                        disabled={isLoading}
+                        className="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                    >
+                        Scroll Facebook
+                    </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>
+                )}
+
+                {facebookStreamUrl && (
+                    <div className="border rounded shadow-lg overflow-hidden">
+                        <h2 className="text-xl font-semibold p-2 bg-gray-100">Facebook Scroll Stream</h2>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={facebookStreamUrl} alt="Live stream of Facebook scrolling" 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

@@ -12,11 +12,9 @@ export async function getAgentName(params: Promise<{ agentName: string }>) {
 
 export async function getAgentProfile(agentName: string) {
     const collection = await $provideAgentCollectionForServer();
-    const agentSource = await collection.getAgentSource(agentName);
+    const agentId = await collection.getAgentPermanentId(agentName);
+    const agentSource = await collection.getAgentSource(agentId);
     const agentProfile = parseAgentSource(agentSource);
-
-    console.log('!!!!', { agentSource, agentProfile });
-
     return agentProfile;
 }
 

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

@@ -13,7 +13,8 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
 
     try {
         const collection = await $provideAgentCollectionForServer();
-        const agentSource = await collection.getAgentSource(agentName);
+        const agentId = await collection.getAgentPermanentId(agentName);
+        const agentSource = await collection.getAgentSource(agentId);
         const effectiveAgentSource = await resolveInheritedAgentSource(agentSource, collection);
 
         return new Response(effectiveAgentSource, {
@@ -52,7 +53,8 @@ export async function PUT(request: Request, { params }: { params: Promise<{ agen
         let agentSource = validateBook(agentSourceUnchecked);
         agentSource = padBook(agentSource);
 
-        await collection.updateAgentSource(agentName, agentSource);
+        const agentId = await collection.getAgentPermanentId(agentName);
+        await collection.updateAgentSource(agentId, agentSource);
         // <- TODO: [🐱‍🚀] Properly type as string_book
 
         return new Response(

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

@@ -121,8 +121,10 @@ export default function AgentCodePage({ params }: { params: Promise<{ agentName:
                     <img
                         src={
                             agentProfile.meta.image ||
-                            agentProfile.permanentId ||
-                            generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)
+                            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]/history/page.tsx

@@ -10,7 +10,8 @@ export const metadata = {
 export default async function AgentHistoryPage({ params }: { params: Promise<{ agentName: string }> }) {
     const { agentName } = await params;
     const collection = await $provideAgentCollectionForServer();
-    const history = await collection.listAgentHistory(agentName);
+    const agentId = await collection.getAgentPermanentId(agentName);
+    const history = await collection.listAgentHistory(agentId);
 
     return (
         <div className="container mx-auto p-6 max-w-4xl">
@@ -21,7 +22,10 @@ export default async function AgentHistoryPage({ params }: { params: Promise<{ a
                 <div>
                     <h1 className="text-3xl font-bold text-gray-900">History: {agentName}</h1>
                     <p className="text-gray-600">
-                        Previous versions of this agent. <Link href={`/agents/${agentName}`} className="text-blue-600 hover:underline">Back to agent</Link>
+                        Previous versions of this agent.{' '}
+                        <Link href={`/agents/${agentName}`} className="text-blue-600 hover:underline">
+                            Back to agent
+                        </Link>
                     </p>
                 </div>
             </header>
@@ -47,7 +51,10 @@ export default async function AgentHistoryPage({ params }: { params: Promise<{ a
                                             Version {history.length - index}
                                         </h3>
                                         <p className="text-sm text-gray-500">
-                                            Hash: <code className="bg-gray-100 px-1 rounded">{item.agentHash.substring(0, 8)}</code>
+                                            Hash:{' '}
+                                            <code className="bg-gray-100 px-1 rounded">
+                                                {item.agentHash.substring(0, 8)}
+                                            </code>
                                         </p>
                                     </div>
                                     <RestoreVersionButton agentName={agentName} historyId={item.id} />

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

@@ -27,9 +27,13 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         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);
+            assertsError(error);
+
+            return NextResponse.json({ error: serializeError(error) }, { status: 500 });
+
+            //> // 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);
@@ -58,7 +62,8 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             // Image exists, fetch from CDN and return directly
             const imageResponse = await fetch(existingImage.cdnUrl as string_url);
             if (!imageResponse.ok) {
-                throw new Error(`Failed to fetch image from CDN: ${imageResponse.status}`);
+                console.warn(`Failed to fetch image from CDN: ${imageResponse.status}`);
+                return NextResponse.redirect(existingImage.cdnUrl);
             }
             const imageBuffer = await imageResponse.arrayBuffer();
             return new NextResponse(imageBuffer, {
@@ -88,6 +93,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
                 modelVariant: 'IMAGE_GENERATION',
                 modelName: 'dall-e-3',
                 size: '1024x1792', // <- Vertical orientation
+                // <- TODO: [🤐] DRY
                 quality: 'hd',
                 style: 'natural',
             },
@@ -133,7 +139,8 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         // Return the newly created image directly
         const finalImageResponse = await fetch(cdnUrl.href);
         if (!finalImageResponse.ok) {
-            throw new Error(`Failed to fetch newly created image from CDN: ${finalImageResponse.status}`);
+            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, {

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';
@@ -5,7 +6,6 @@ import { assertsError } from '../../../../../../../../src/errors/assertsError';
 import { Color } from '../../../../../../../../src/utils/color/Color';
 import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
 import { getAgentName, getAgentProfile } from '../../_utils';
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 const size = {
     width: 256,
@@ -19,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(
             (
@@ -31,6 +32,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                         alignItems: 'center',
                         justifyContent: 'center',
                         borderRadius: '50%',
+                        aspectRatio: '1 / 1',
                         overflow: 'hidden',
                     }}
                 >
@@ -47,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, NEXT_PUBLIC_SITE_URL)}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt="Agent Icon"
                         />
                     </div>

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';
@@ -7,7 +8,6 @@ import { textColor } from '../../../../../../../../src/utils/color/operators/fur
 import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
 import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
 import { getAgentName, getAgentProfile } from '../../_utils';
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 const size = {
     width: 1920,
@@ -22,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(
             (
@@ -49,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, NEXT_PUBLIC_SITE_URL)}
+                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
                             alt="Agent Icon"
                         />
                     </div>

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-phone.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';
@@ -7,7 +8,6 @@ import { textColor } from '../../../../../../../../src/utils/color/operators/fur
 import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
 import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
 import { getAgentName, getAgentProfile } from '../../_utils';
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 const size = {
     width: 1080,
@@ -22,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(
             (
@@ -49,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, NEXT_PUBLIC_SITE_URL)}
+                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
                             alt="Agent Icon"
                         />
                     </div>

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

@@ -20,12 +20,12 @@ import { CopyField } from '../CopyField';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 import { SdkCodeTabs } from './SdkCodeTabs';
 import { WebsiteIntegrationTabs } from './WebsiteIntegrationTabs';
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentIntegrationPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
     const agentName = await getAgentName(params);
     const isAdmin = await isUserAdmin();
 
@@ -188,7 +188,13 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
                     {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"
                             style={{ borderColor: primaryColor }}

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

@@ -13,12 +13,12 @@ import { getAgentName, getAgentProfile } from '../_utils';
 import { getAgentExternalLinks, getAgentLinks } from '../agentLinks';
 import { CopyField } from '../CopyField';
 import { generateAgentMetadata } from '../generateAgentMetadata';
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentLinksPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
     const agentName = await getAgentName(params);
 
     let agentProfile;
@@ -57,7 +57,13 @@ export default async function AgentLinksPage({ params }: { params: Promise<{ age
                     {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"
                             style={{ borderColor: primaryColor }}

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

@@ -1,4 +1,4 @@
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
+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';
@@ -25,6 +25,7 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
         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(
             (
@@ -54,13 +55,13 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
                                 width: '80%',
                                 backgroundColor: agentColor.toHex(),
                                 borderRadius: '50%',
+                                aspectRatio: '1 / 1',
                             }}
                             src={
                                 agentProfile.meta.image ||
-                                agentProfile.permanentId ||
                                 generatePlaceholderAgentProfileImageUrl(
                                     agentProfile.permanentId || agentName,
-                                    NEXT_PUBLIC_SITE_URL,
+                                    publicUrl,
                                 )
                             }
                             alt="Agent Icon"