@promptbook/cli 0.104.0-1 → 0.104.0-10

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

@@ -0,0 +1,223 @@
+'use client';
+
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
+import Editor from '@monaco-editor/react';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { ArrowLeftIcon, ChevronDownIcon, CodeIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+
+type Transpiler = {
+    name: string;
+    title: string;
+};
+
+type TranspilationResult = {
+    code: string;
+    transpiler: Transpiler;
+};
+
+function getLanguageFromTranspiler(transpilerName?: string): string {
+    if (!transpilerName) return 'plaintext';
+
+    // Map transpiler names to Monaco language identifiers
+    if (transpilerName.includes('openai-sdk')) return 'javascript';
+    if (transpilerName.includes('langchain') || transpilerName.includes('python')) return 'python';
+    if (transpilerName.includes('markdown')) return 'markdown';
+
+    // Default to plaintext for unknown transpilers
+    return 'plaintext';
+}
+
+export default function AgentCodePage({ params }: { params: Promise<{ agentName: string }> }) {
+    const [agentName, setAgentName] = useState<string>('');
+    const [agentProfile, setAgentProfile] = useState<AgentBasicInformation | null>(null);
+    const [transpilers, setTranspilers] = useState<Transpiler[]>([]);
+    const [selectedTranspiler, setSelectedTranspiler] = useState<Transpiler | null>(null);
+    const [transpiledCode, setTranspiledCode] = useState<string>('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        params.then((p) => setAgentName(p.agentName));
+    }, [params]);
+
+    useEffect(() => {
+        if (!agentName) return;
+
+        // Fetch agent profile
+        fetch(`/api/agents/${encodeURIComponent(agentName)}`)
+            .then((res) => res.json())
+            .then((data) => setAgentProfile(data))
+            .catch((err) => console.error('Error fetching agent profile:', err));
+
+        // Fetch available transpilers
+        fetch(`/agents/${encodeURIComponent(agentName)}/code/api`)
+            .then((res) => res.json())
+            .then((data) => {
+                setTranspilers(data.transpilers || []);
+                if (data.transpilers && data.transpilers.length > 0) {
+                    setSelectedTranspiler(data.transpilers[0]);
+                }
+            })
+            .catch((err) => console.error('Error fetching transpilers:', err));
+    }, [agentName]);
+
+    const transpileCode = useCallback(
+        async (transpilerName: string) => {
+            setLoading(true);
+            setError('');
+
+            try {
+                const response = await fetch(`/agents/${encodeURIComponent(agentName)}/code/api`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ transpilerName }),
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Failed to transpile code');
+                }
+
+                const result: TranspilationResult = await response.json();
+                setTranspiledCode(result.code);
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to transpile code');
+                setTranspiledCode('');
+            } finally {
+                setLoading(false);
+            }
+        },
+        [agentName],
+    );
+
+    useEffect(() => {
+        if (selectedTranspiler && agentName) {
+            transpileCode(selectedTranspiler.name);
+        }
+    }, [selectedTranspiler, agentName, transpileCode]);
+
+    if (!agentProfile) {
+        return (
+            <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
+                <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 p-12">
+                    <div className="text-center">Loading...</div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
+            <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                {/* Header */}
+                <div className="p-6 border-b border-gray-200 flex items-center gap-4">
+                    {/* eslint-disable @typescript-eslint/no-explicit-any, @next/next/no-img-element */}
+
+                    <img
+                        src={
+                            agentProfile.meta.image ||
+                            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"
+                    />
+
+                    <div className="flex-1">
+                        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                        <h1 className="text-2xl font-bold text-gray-900">
+                            {(agentProfile as any)?.meta?.fullname || agentName}
+                        </h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <CodeIcon className="w-4 h-4" />
+                            Generated Code
+                        </p>
+                    </div>
+                    <Link
+                        href={`/agents/${encodeURIComponent(agentName)}`}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="p-6">
+                    {/* Transpiler Selector */}
+                    <div className="mb-6">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">Select Transpiler</label>
+                        <div className="relative">
+                            <select
+                                value={selectedTranspiler?.name || ''}
+                                onChange={(e) => {
+                                    const transpiler = transpilers.find((t) => t.name === e.target.value);
+                                    if (transpiler) setSelectedTranspiler(transpiler);
+                                }}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            >
+                                {transpilers.map((transpiler) => (
+                                    <option key={transpiler.name} value={transpiler.name}>
+                                        {transpiler.title}
+                                    </option>
+                                ))}
+                            </select>
+                            <ChevronDownIcon className="absolute right-3 top-3 w-4 h-4 text-gray-400 pointer-events-none" />
+                        </div>
+                    </div>
+
+                    {/* Code Display */}
+                    <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
+                        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+                            <h2 className="text-lg font-semibold text-gray-900">
+                                {selectedTranspiler?.title || 'Generated Code'}
+                            </h2>
+                            {loading && <div className="text-sm text-gray-500">Generating...</div>}
+                        </div>
+                        <div className="p-4">
+                            {error && (
+                                <div className="text-red-600 text-sm mb-4 p-3 bg-red-50 rounded border border-red-200">
+                                    {error}
+                                </div>
+                            )}
+                            {transpiledCode ? (
+                                <div className="h-96 border border-gray-200 rounded">
+                                    <Editor
+                                        value={transpiledCode}
+                                        language={getLanguageFromTranspiler(selectedTranspiler?.name)}
+                                        options={{
+                                            readOnly: true,
+                                            minimap: { enabled: false },
+                                            fontSize: 14,
+                                            lineNumbers: 'on',
+                                            scrollBeyondLastLine: false,
+                                            automaticLayout: true,
+                                            wordWrap: 'on',
+                                        }}
+                                        loading={
+                                            <div className="flex items-center justify-center h-full text-gray-500">
+                                                Loading editor...
+                                            </div>
+                                        }
+                                    />
+                                </div>
+                            ) : loading ? (
+                                <div className="text-gray-500 text-center py-8">Generating code...</div>
+                            ) : (
+                                <div className="text-gray-500 text-center py-8">
+                                    Select a transpiler to generate code
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -15,6 +15,8 @@ export async function generateAgentMetadata({ params }: { params: Promise<{ agen
         // Use the agent's icon-256.png as the favicon
         const iconUrl = `/agents/${encodeURIComponent(agentName)}/images/icon-256.png`;
 
+        const canonicalUrl = `/agents/${encodeURIComponent(agentProfile.permanentId || agentName)}`;
+
         const metadata = {
             metadataBase: publicUrl,
             title,
@@ -24,6 +26,9 @@ export async function generateAgentMetadata({ params }: { params: Promise<{ agen
                 shortcut: iconUrl,
                 apple: iconUrl,
             },
+            alternates: {
+                canonical: canonicalUrl,
+            },
             openGraph: {
                 title,
                 description,

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

@@ -5,8 +5,8 @@ import { revalidatePath } from 'next/cache';
 
 export async function restoreAgentVersion(agentName: string, historyId: number) {
     const collection = await $provideAgentCollectionForServer();
-    await collection.restoreAgent(historyId);
-    
+    await collection.restoreAgentFromHistory(historyId);
+
     revalidatePath(`/agents/${agentName}`);
     revalidatePath(`/agents/${agentName}/history`);
 }

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/getAgentDefaultAvatarPrompt.ts

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

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

@@ -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>
             ),