@promptbook/cli 0.104.0-1 → 0.104.0-11

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

@@ -0,0 +1,194 @@
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabaseForServer } from '@/src/database/$provideSupabaseForServer';
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideCdnForServer } from '@/src/tools/$provideCdnForServer';
+import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
+import { parseAgentSource } from '@promptbook-local/core';
+import { computeHash, serializeError } from '@promptbook-local/utils';
+import { NextRequest, NextResponse } from 'next/server';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+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 {
+        let { agentName } = await params;
+        agentName = decodeURIComponent(agentName);
+
+        if (!agentName) {
+            return NextResponse.json({ error: 'Agent name is required' }, { status: 400 });
+        }
+
+        // 1. Fetch agent data first to construct the prompt
+        const collection = await $provideAgentCollectionForServer();
+        let agentSource;
+        try {
+            agentSource = await collection.getAgentSource(agentName);
+        } catch (error) {
+            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);
+
+        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();
+        const lockKey = `agent-avatar-${promptHash}`;
+
+        // Loop to acquire lock or wait for image
+        // We try for 60 seconds
+        for (let attempt = 0; attempt < 60; attempt++) {
+            // 1. Check if image with this prompt hash already exists in database
+            const { data: existingImage, error: selectError } = await supabase
+                .from(await $getTableName(`Image`))
+                .select('cdnUrl')
+                .eq('filename', internalFilename)
+                .single();
+
+            if (selectError && selectError.code !== 'PGRST116') {
+                // PGRST116 is "not found"
+                throw selectError;
+            }
+
+            if (existingImage) {
+                // 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',
+                    },
+                });
+            }
+
+            // 2. Try to acquire lock to generate it
+            const { error: lockError } = await supabase.from(await $getTableName('GenerationLock')).insert({
+                lockKey,
+                expiresAt: new Date(Date.now() + 1000 * 60 * 5).toISOString(), // 5 minutes
+            });
+
+            if (!lockError) {
+                // Lock acquired!
+                try {
+                    // 2. Generate image
+                    const executionTools = await $provideExecutionToolsForServer();
+                    const llmTools = getSingleLlmExecutionTools(executionTools.llm) as LlmExecutionTools;
+
+                    if (!llmTools.callImageGenerationModel) {
+                        throw new Error('Image generation is not supported by the current LLM configuration');
+                    }
+
+                    const imageResult = await llmTools.callImageGenerationModel({
+                        title: `Generate default avatar for ${agentName}`,
+                        content: prompt,
+                        parameters: {},
+                        modelRequirements: {
+                            modelVariant: 'IMAGE_GENERATION',
+                            modelName: 'dall-e-3',
+                            size: '1024x1792', // <- Vertical orientation
+                            // <- TODO: [🤐] DRY
+                            quality: 'hd',
+                            style: 'natural',
+                        },
+                    });
+
+                    if (!imageResult.content) {
+                        throw new Error('Failed to generate image: no content returned');
+                    }
+
+                    // 3. Download and Upload to CDN
+                    const imageResponse = await fetch(imageResult.content);
+                    if (!imageResponse.ok) {
+                        throw new Error(`Failed to download generated image: ${imageResponse.status}`);
+                    }
+
+                    const imageBuffer = await imageResponse.arrayBuffer();
+                    const buffer = Buffer.from(imageBuffer);
+
+                    const cdn = $provideCdnForServer();
+                    const cdnKey = `generated-images/${internalFilename}`;
+                    await cdn.setItem(cdnKey, {
+                        type: 'image/png',
+                        data: buffer,
+                    });
+
+                    const cdnUrl = cdn.getItemUrl(cdnKey);
+
+                    // 4. Save to database
+                    const { error: insertError } = await supabase.from(await $getTableName(`Image`)).insert({
+                        filename: internalFilename,
+                        prompt,
+                        cdnUrl: cdnUrl.href,
+                        cdnKey,
+                    });
+
+                    if (insertError) {
+                        throw insertError;
+                    }
+
+                    // 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',
+                        },
+                    });
+                } finally {
+                    // Release lock
+                    await supabase.from(await $getTableName('GenerationLock')).delete().eq('lockKey', lockKey);
+                }
+            }
+
+            // Lock failed, someone else is generating
+            // Check if expired
+            const { data: lockData } = await supabase
+                .from(await $getTableName('GenerationLock'))
+                .select('expiresAt')
+                .eq('lockKey', lockKey)
+                .single();
+
+            if (lockData && new Date(lockData.expiresAt) < new Date()) {
+                // Expired, delete and retry loop immediately
+                await supabase.from(await $getTableName('GenerationLock')).delete().eq('lockKey', lockKey);
+                continue;
+            }
+
+            // Wait and retry
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+
+        throw new Error('Timeout waiting for image generation');
+    } catch (error) {
+        assertsError(error);
+        console.error('Error serving default avatar:', error);
+        return new Response(JSON.stringify(serializeError(error), null, 4), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+}

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

@@ -1,4 +1,5 @@
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+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';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
@@ -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',
                     }}
                 >
@@ -45,7 +48,16 @@ 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!} alt="Agent Icon" />
+                        <img
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
+                            alt="Agent Icon"
+                        />
                     </div>
                 </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,3 +1,4 @@
+import { $provideServer } from '@/src/tools/$provideServer';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
@@ -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!}
+                            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,3 +1,4 @@
+import { $provideServer } from '@/src/tools/$provideServer';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
@@ -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!}
+                            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

@@ -4,7 +4,7 @@ import { $getTableName } from '@/src/database/$getTableName';
 import { $provideSupabase } from '@/src/database/$provideSupabase';
 import { $provideServer } from '@/src/tools/$provideServer';
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { ArrowLeftIcon, BoxIcon, CodeIcon, GlobeIcon, ServerIcon, TerminalIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import Link from 'next/link';
@@ -25,6 +25,7 @@ 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();
 
@@ -170,7 +171,7 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
         }
     `);
 
-    const agentLinks = getAgentLinks(agentName);
+    const agentLinks = getAgentLinks(agentProfile.permanentId || agentName);
     const chatLink = agentLinks.find((l) => l.title === 'Chat with Agent')!;
     const websiteIntegrationLink = agentLinks.find((l) => l.title === 'Website Integration')!;
 
@@ -187,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 as string}
+                            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

@@ -1,7 +1,7 @@
 'use server';
 
 import { $provideServer } from '@/src/tools/$provideServer';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { ArrowLeftIcon, CodeIcon, HomeIcon, LinkIcon, ShareIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import Link from 'next/link';
@@ -9,15 +9,16 @@ import { notFound } from 'next/navigation';
 import { Color } from '../../../../../../../src/utils/color/Color';
 import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { getAgentName, getAgentProfile } from '../_utils';
 import { getAgentExternalLinks, getAgentLinks } from '../agentLinks';
 import { CopyField } from '../CopyField';
-import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentLinksPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
     const agentName = await getAgentName(params);
 
     let agentProfile;
@@ -56,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 as string}
+                            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 }}
@@ -129,7 +136,7 @@ export default async function AgentLinksPage({ params }: { params: Promise<{ age
                             Agent Resources
                         </h2>
                         <div className="grid md:grid-cols-2 gap-4">
-                            {getAgentLinks(agentName)
+                            {getAgentLinks(agentProfile.permanentId || agentName)
                                 .filter((link) =>
                                     ['Chat with Agent', 'History & Feedback', 'Integration'].includes(link.title),
                                 )

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

@@ -1,4 +1,5 @@
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+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';
 import { assertsError } from '../../../../../../src/errors/assertsError';
@@ -24,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(
             (
@@ -53,8 +55,15 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
                                 width: '80%',
                                 backgroundColor: agentColor.toHex(),
                                 borderRadius: '50%',
+                                aspectRatio: '1 / 1',
                             }}
-                            src={agentProfile.meta.image!}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt="Agent Icon"
                         />
                     </div>