@promptbook/cli 0.104.0-7 → 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

@@ -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]/images/default-avatar.png/route.ts

@@ -58,7 +58,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 +89,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 +135,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"

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/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/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',