@promptbook/cli 0.104.0-0 → 0.104.0-2

package/apps/agents-server/src/app/api/images/[filename]/route.ts

@@ -0,0 +1,107 @@
+import { $getTableName } from '@/src/database/$getTableName';
+import { 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 { string_url } from '../../../../../../../src/types/typeAliases';
+import { $provideSupabaseForServer } from '../../../../database/$provideSupabaseForServer';
+import { $provideCdnForServer } from '../../../../tools/$provideCdnForServer';
+import { $provideExecutionToolsForServer } from '../../../../tools/$provideExecutionToolsForServer';
+import { filenameToPrompt } from '../../../../utils/normalization/filenameToPrompt';
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ filename: string }> }) {
+    try {
+        const { filename } = await params;
+
+        if (!filename) {
+            return NextResponse.json({ error: 'Filename is required' }, { status: 400 });
+        }
+
+        const supabase = $provideSupabaseForServer();
+
+        // Check if image already exists in database
+        const { data: existingImage, error: selectError } = await supabase
+            .from(await $getTableName(`Image`))
+            .select('cdnUrl')
+            .eq('filename', filename)
+            .single();
+
+        if (selectError && selectError.code !== 'PGRST116') {
+            // PGRST116 is "not found"
+            throw selectError;
+        }
+
+        if (existingImage) {
+            // Image exists, redirect to CDN
+            return NextResponse.redirect(existingImage.cdnUrl as string_url);
+        }
+
+        // Image doesn't exist, generate it
+        const prompt = filenameToPrompt(filename);
+
+        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 image for ${filename}`,
+            content: prompt,
+            parameters: {},
+            modelRequirements: {
+                modelVariant: 'IMAGE_GENERATION',
+                modelName: 'dall-e-3', // Use DALL-E 3 for high quality
+            },
+        });
+
+        if (!imageResult.content) {
+            throw new Error('Failed to generate image: no content returned');
+        }
+
+        // Download the generated image
+        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);
+
+        // Upload to CDN
+        const cdn = $provideCdnForServer();
+        const cdnKey = `generated-images/${filename}`;
+        await cdn.setItem(cdnKey, {
+            type: 'image/png', // DALL-E generates PNG
+            data: buffer,
+        });
+
+        const cdnUrl = cdn.getItemUrl(cdnKey);
+
+        // Save to database
+        const { error: insertError } = await supabase.from(await $getTableName(`Image`)).insert({
+            filename,
+            prompt,
+            cdnUrl: cdnUrl.href,
+            cdnKey,
+        });
+
+        if (insertError) {
+            throw insertError;
+        }
+
+        // Redirect to the newly created image
+        return NextResponse.redirect(cdnUrl.href as string_url);
+    } catch (error) {
+        assertsError(error);
+
+        console.error('Error serving image:', error);
+
+        return new Response(JSON.stringify(serializeError(error), null, 4), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+}

package/apps/agents-server/src/app/api/upload/route.ts

@@ -1,70 +1,144 @@
-import { nextRequestToNodeRequest } from '@/src/utils/cdn/utils/nextRequestToNodeRequest';
-import { TODO_any } from '@promptbook-local/types';
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabase } from '@/src/database/$provideSupabase';
 import { serializeError } from '@promptbook-local/utils';
-import formidable from 'formidable';
-import { readFile } from 'fs/promises';
+import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
 import { NextRequest, NextResponse } from 'next/server';
-import { forTime } from 'waitasecond';
 import { assertsError } from '../../../../../../src/errors/assertsError';
-import { string_url } from '../../../../../../src/types/typeAliases';
-import { keepUnused } from '../../../../../../src/utils/organization/keepUnused';
-import { $provideCdnForServer } from '../../../../src/tools/$provideCdnForServer';
-import { getUserFileCdnKey } from '../../../../src/utils/cdn/utils/getUserFileCdnKey';
-import { validateMimeType } from '../../../../src/utils/validators/validateMimeType';
+import { getUserIdFromRequest } from '../../../../src/utils/getUserIdFromRequest';
 import { getMetadata } from '../../../database/getMetadata';
 
 export async function POST(request: NextRequest) {
     try {
-        await forTime(1);
-        // await forTime(5000);
+        const body = (await request.json()) as HandleUploadBody;
+        const userId = await getUserIdFromRequest(request);
+        const supabase = $provideSupabase();
 
-        const nodeRequest = await nextRequestToNodeRequest(request);
-        let maxFileSizeMb = Number((await getMetadata('MAX_FILE_UPLOAD_SIZE_MB')) || '50'); // <- TODO: [🌲] To /config.ts
+        // Handle Vercel Blob client upload protocol
+        const jsonResponse = await handleUpload({
+            body,
+            request,
+            token: process.env.VERCEL_BLOB_READ_WRITE_TOKEN!,
+            onBeforeGenerateToken: async (pathname, clientPayload) => {
+                // Authenticate user and validate upload
 
-        if (Number.isNaN(maxFileSizeMb)) {
-            maxFileSizeMb = 50; // <- TODO: [🌲] To /config.ts
-        }
+                // Parse client payload for additional metadata
+                const payload = clientPayload ? JSON.parse(clientPayload) : {};
+                const { purpose, contentType } = payload;
 
-        const maxFileSize = maxFileSizeMb * 1024 * 1024;
+                let maxFileSizeMb = Number((await getMetadata('MAX_FILE_UPLOAD_SIZE_MB')) || '50'); // <- TODO: [🌲] To /config.ts
+                if (Number.isNaN(maxFileSizeMb)) {
+                    maxFileSizeMb = 50; // <- TODO: [🌲] To /config.ts
+                }
+                const maxFileSize = maxFileSizeMb * 1024 * 1024;
+
+                // Generate the proper path with prefix
+                // Note: With client uploads, we use the original filename provided by the client
+                // The file will be stored at: {pathPrefix}/user/files/{filename}
+                const pathPrefix = process.env.NEXT_PUBLIC_CDN_PATH_PREFIX || '';
 
-        const files = await new Promise<formidable.Files>((resolve, reject) => {
-            const form = formidable({ maxFileSize });
-            form.parse(nodeRequest as TODO_any, (error, fields, files) => {
-                keepUnused(fields);
+                // Create a DB record at the start of the upload to track it
+                const uploadPurpose = purpose || 'GENERIC_UPLOAD';
+                const { data: insertedFile, error: insertError } = await supabase
+                    .from(await $getTableName('File'))
+                    .insert({
+                        userId: userId || null,
+                        fileName: pathname,
+                        fileSize: 0, // <- Will be updated when upload completes
+                        fileType: contentType || 'application/octet-stream',
+                        storageUrl: null, // <- To be updated on completion
+                        shortUrl: null, // <- To be updated on completion
+                        purpose: uploadPurpose,
+                        status: 'UPLOADING',
+                    })
+                    .select('id')
+                    .single();
 
-                if (error) {
-                    return reject(error);
+                if (insertError) {
+                    console.error('🔼 Failed to create file record:', insertError);
                 }
-                resolve(files);
-            });
-        });
 
-        const uploadedFiles = files.file;
+                console.info('🔼 Upload started, tracking file:', {
+                    pathname,
+                    fileId: insertedFile?.id,
+                    purpose: uploadPurpose,
+                });
 
-        if (!uploadedFiles || uploadedFiles.length !== 1) {
-            return NextResponse.json(
-                { message: 'In form data there is not EXACTLY one "file" field' },
-                { status: 400 },
-            );
-        }
+                return {
+                    allowedContentTypes: contentType ? [contentType] : undefined,
+                    maximumSizeInBytes: maxFileSize,
+                    addRandomSuffix: true, // Add random suffix to avoid filename collisions since we can't hash content
+                    tokenPayload: JSON.stringify({
+                        userId: userId || null,
+                        purpose: uploadPurpose,
+                        fileId: insertedFile?.id || null,
+                        uploadPath: pathname,
+                        pathPrefix,
+                    }),
+                };
+            },
+            onUploadCompleted: async ({ blob, tokenPayload }) => {
+                // !!!!
+                // ⚠️ IMPORTANT: This callback is a WEBHOOK called by Vercel's servers AFTER the upload completes
+                // - It runs in a DIFFERENT request context (not the original user request)
+                // - It WON'T work in local development (Vercel can't reach localhost)
+                // - All data must come from tokenPayload (userId, fileId, etc.)
+                // - Need to create a fresh supabase client here
+                console.info('🔼 Upload completed (webhook callback):', { blob, tokenPayload });
 
-        const uploadedFile = uploadedFiles[0]!;
-        const fileBuffer = await readFile(uploadedFile.filepath);
-        const cdn = $provideCdnForServer();
-        const key = getUserFileCdnKey(fileBuffer, uploadedFile.originalFilename || uploadedFile.newFilename);
+                try {
+                    const payload = tokenPayload ? JSON.parse(tokenPayload) : {};
+                    const { fileId, userId: tokenUserId, purpose: tokenPurpose, uploadPath } = payload;
 
-        await cdn.setItem(key, {
-            type: validateMimeType(uploadedFile.mimetype),
-            data: fileBuffer,
-        });
+                    // Create fresh supabase client for this webhook context
+                    const supabase = $provideSupabase();
 
-        const fileUrl = cdn.getItemUrl(key);
+                    if (fileId) {
+                        // Update the existing record by ID
+                        const { error: updateError } = await supabase
+                            .from(await $getTableName('File'))
+                            .update({
+                                userId: tokenUserId || null,
+                                fileSize: 0, // <- !!!!
+                                fileType: blob.contentType,
+                                storageUrl: blob.url,
+                                // <- TODO: !!!! Split between storageUrl and shortUrl
+                                purpose: tokenPurpose || 'GENERIC_UPLOAD',
+                                status: 'COMPLETED',
+                            })
+                            .eq('id', fileId);
+
+                        if (updateError) {
+                            console.error('🔼 Failed to update file record:', updateError);
+                        } else {
+                            console.info('🔼 File record updated successfully:', { fileId, shortUrl: blob.url });
+                        }
+                    } else if (uploadPath) {
+                        // Fallback: Update by uploadPath if fileId is not available
+                        const { error: updateError } = await supabase
+                            .from(await $getTableName('File'))
+                            .update({
+                                fileSize: 0, // <- !!!!
+                                fileType: blob.contentType,
+                                storageUrl: blob.url,
+                                status: 'COMPLETED',
+                            })
+                            .eq('id', fileId);
+
+                        if (updateError) {
+                            console.error('🔼 Failed to update file record by uploadPath:', updateError);
+                        }
+                    }
+                } catch (error) {
+                    console.error('🔼 Error in onUploadCompleted:', error);
+                }
+            },
+        });
 
-        return NextResponse.json({ fileUrl: fileUrl.href as string_url }, { status: 201 });
+        return NextResponse.json(jsonResponse);
     } catch (error) {
         assertsError(error);
 
-        console.error(error);
+        console.error('🔼', error);
 
         return new Response(
             JSON.stringify(

package/apps/agents-server/src/app/docs/[docId]/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation';
 import { BookCommitment } from '../../../../../../src/commitments/_base/BookCommitment';
 import { getVisibleCommitmentDefinitions } from '../../../utils/getVisibleCommitmentDefinitions';
-import { PrintButton } from '../../../components/PrintButton/PrintButton';
+import { DocsToolbar } from '../../../components/DocsToolbar/DocsToolbar';
 import { PrintHeader } from '../../../components/PrintHeader/PrintHeader';
 import { DocumentationContent } from '../../../components/DocumentationContent/DocumentationContent';
 
@@ -27,9 +27,8 @@ export default async function DocPage(props: DocPageProps) {
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
-            <PrintButton />
-            
             <div className="container mx-auto px-4 py-16">
+                <DocsToolbar />
                 <PrintHeader title={primary.type} />
                 
                 <DocumentationContent 

package/apps/agents-server/src/app/docs/page.tsx

@@ -1,20 +1,20 @@
+import { MarkdownContent } from '@promptbook-local/components';
 import Link from 'next/link';
+import { DocsToolbar } from '../../components/DocsToolbar/DocsToolbar';
+import { DocumentationContent } from '../../components/DocumentationContent/DocumentationContent';
 import { Card } from '../../components/Homepage/Card';
 import { Section } from '../../components/Homepage/Section';
 import { OpenMojiIcon } from '../../components/OpenMojiIcon/OpenMojiIcon';
-import { getVisibleCommitmentDefinitions } from '../../utils/getVisibleCommitmentDefinitions';
-import { PrintButton } from '../../components/PrintButton/PrintButton';
 import { PrintHeader } from '../../components/PrintHeader/PrintHeader';
-import { DocumentationContent } from '../../components/DocumentationContent/DocumentationContent';
+import { getVisibleCommitmentDefinitions } from '../../utils/getVisibleCommitmentDefinitions';
 
 export default function DocsPage() {
     const groupedCommitments = getVisibleCommitmentDefinitions();
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
-            <PrintButton />
-            
             <div className="container mx-auto px-4 py-16">
+                <DocsToolbar />
                 <PrintHeader title="Full Documentation" />
 
                 {/* Screen view: Cards */}
@@ -24,7 +24,7 @@ export default function DocsPage() {
                             <Link key={primary.type} href={`/docs/${primary.type}`} className="block h-full group">
                                 <Card className="h-full group-hover:border-blue-500 transition-colors">
                                     <h3 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
-                                        <OpenMojiIcon icon={primary.icon} className="mr-2" />
+                                        <OpenMojiIcon icon={primary.icon} variant="color" className="mr-2" />
                                         {primary.type}
                                         {aliases.length > 0 && (
                                             <span className="text-gray-400 font-normal text-lg">
@@ -33,7 +33,11 @@ export default function DocsPage() {
                                             </span>
                                         )}
                                     </h3>
-                                    {primary.description && <p className="text-gray-600 line-clamp-3">{primary.description}</p>}
+                                    {primary.description && (
+                                        <p className="text-gray-600 line-clamp-3">
+                                            <MarkdownContent content={primary.description} />
+                                        </p>
+                                    )}
                                 </Card>
                             </Link>
                         ))}
@@ -44,11 +48,7 @@ export default function DocsPage() {
                 <div className="hidden print:block space-y-12">
                     {groupedCommitments.map(({ primary, aliases }) => (
                         <div key={primary.type} className="break-inside-avoid page-break-after-always">
-                            <DocumentationContent 
-                                primary={primary} 
-                                aliases={aliases} 
-                                isPrintOnly={true} 
-                            />
+                            <DocumentationContent primary={primary} aliases={aliases} isPrintOnly={true} />
                             <hr className="my-8 border-gray-200" />
                         </div>
                     ))}

package/apps/agents-server/src/app/embed/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Promptbook Agent Embed',
+    description: 'Embedded agent chat widget',
+};
+
+/**
+ * Minimal layout for the embed page - no header, footer, or other UI elements
+ * This layout is completely transparent and only renders the chat widget
+ */
+export default function EmbedLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <body
+                style={{
+                    margin: 0,
+                    padding: 0,
+                    background: 'transparent',
+                    overflow: 'hidden',
+                }}
+            >
+                {children}
+            </body>
+        </html>
+    );
+}

package/apps/agents-server/src/app/embed/page.tsx

@@ -2,23 +2,36 @@
 
 import { PromptbookAgentIntegration } from '@promptbook-local/components';
 import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
 
 export default function EmbedPage() {
     const searchParams = useSearchParams();
     const agentUrl = searchParams.get('agentUrl');
+    const metaParam = searchParams.get('meta');
+
+    const meta = useMemo(() => {
+        if (!metaParam) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(metaParam);
+        } catch (e) {
+            console.error('[🔌] Failed to parse meta parameter:', e);
+            return undefined;
+        }
+    }, [metaParam]);
 
     if (!agentUrl) {
-        return <div className="text-red-500">Missing agentUrl parameter</div>;
+        return <div style={{ color: 'red' }}>Missing agentUrl parameter</div>;
     }
 
     return (
-        <div className="w-full h-full bg-transparent">
-            <PromptbookAgentIntegration
-                agentUrl={agentUrl}
-                onOpenChange={(isOpen) => {
-                    window.parent.postMessage({ type: 'PROMPTBOOK_AGENT_RESIZE', isOpen }, '*');
-                }}
-            />
-        </div>
+        <PromptbookAgentIntegration
+            agentUrl={agentUrl}
+            meta={meta}
+            onOpenChange={(isOpen) => {
+                window.parent.postMessage({ type: 'PROMPTBOOK_AGENT_RESIZE', isOpen }, '*');
+            }}
+        />
     );
 }