@promptbook/cli 0.104.0-1 → 0.104.0-11

package/apps/agents-server/src/app/admin/image-generator-test/ImageGeneratorTestClient.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+
+export function ImageGeneratorTestClient() {
+    const [prompt, setPrompt] = useState<string>('');
+    const [modelName, setModelName] = useState<string>('dall-e-3');
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [rawResult, setRawResult] = useState<unknown | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [generatedFilename, setGeneratedFilename] = useState<string | null>(null);
+
+    const handleGenerateImage = () => {
+        if (!prompt) return;
+
+        setIsLoading(true);
+        setError(null);
+        setImageUrl(null);
+        setRawResult(null);
+        setGeneratedFilename(null);
+
+        try {
+            // detailed-painting-of-a-cute-cat.png
+            const filename = prompt
+                .trim()
+                .toLowerCase()
+                .replace(/[^a-z0-9]+/g, '-')
+                .replace(/^-+|-+$/g, '') + '.png';
+            
+            setGeneratedFilename(filename);
+
+            const queryParams = new URLSearchParams();
+            if (modelName) queryParams.set('modelName', modelName);
+            queryParams.set('raw', 'true');
+
+            fetch(`/api/images/${filename}?${queryParams.toString()}`)
+                .then(async (response) => {
+                    const contentType = response.headers.get('content-type');
+                    
+                    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}`);
+                    }
+                    
+                    if (contentType && contentType.includes('application/json')) {
+                        const data = await response.json();
+                        setRawResult(data);
+                        if (data.cdnUrl) {
+                            setImageUrl(data.cdnUrl);
+                        }
+                    } else {
+                        // Fallback if it returns blob/image directly (shouldn't with raw=true)
+                        const blob = await response.blob();
+                        const url = URL.createObjectURL(blob);
+                        setImageUrl(url);
+                    }
+                })
+                .catch((err) => {
+                    setError(String(err));
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+
+        } catch (err) {
+            setError(String(err));
+            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">Image Generator Test</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Test the image generation capabilities by providing a prompt.
+                    </p>
+                </div>
+            </div>
+
+            <Card>
+                <div className="mb-4 space-y-4">
+                    <div className="space-y-2">
+                        <label className="block text-sm font-medium text-gray-700">Image Prompt</label>
+                        <input
+                            type="text"
+                            value={prompt}
+                            onChange={(e) => setPrompt(e.target.value)}
+                            placeholder="e.g., A futuristic city with flying cars"
+                            className="w-full p-2 border border-gray-300 rounded"
+                            disabled={isLoading}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleGenerateImage();
+                                }
+                            }}
+                        />
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="block text-sm font-medium text-gray-700">Model Name</label>
+                        <input
+                            type="text"
+                            value={modelName}
+                            onChange={(e) => setModelName(e.target.value)}
+                            placeholder="e.g., dall-e-3"
+                            className="w-full p-2 border border-gray-300 rounded"
+                            disabled={isLoading}
+                        />
+                         <p className="text-xs text-gray-500">
+                            Available models depend on the configured LLM provider. Common options: dall-e-3, dall-e-2, midjourney
+                        </p>
+                    </div>
+
+                    <div className="flex justify-end">
+                        <button
+                            onClick={handleGenerateImage}
+                            disabled={isLoading || !prompt}
+                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                        >
+                            {isLoading ? 'Generating...' : 'Generate Image'}
+                        </button>
+                    </div>
+
+                    {generatedFilename && (
+                        <p className="text-xs text-gray-500">
+                            Generated filename: <code className="bg-gray-100 px-1 rounded">{generatedFilename}</code>
+                        </p>
+                    )}
+                </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="mb-6 border rounded shadow-lg overflow-hidden bg-gray-50 flex justify-center items-center min-h-[200px]">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={imageUrl} alt={prompt} className="max-w-full h-auto" />
+                    </div>
+                )}
+
+                {rawResult !== null && (
+                    <div className="border rounded-md overflow-hidden">
+                        <div className="bg-gray-100 px-4 py-2 border-b">
+                            <h3 className="text-sm font-semibold text-gray-700">Raw Result</h3>
+                        </div>
+                        <pre className="p-4 bg-gray-50 text-xs overflow-auto max-h-[500px]">
+                            {JSON.stringify(rawResult, null, 2)}
+                        </pre>
+                    </div>
+                )}
+            </Card>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/image-generator-test/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { ImageGeneratorTestClient } from './ImageGeneratorTestClient';
+
+export default async function ImageGeneratorTestPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <ImageGeneratorTestClient />;
+}

package/apps/agents-server/src/app/admin/images/ImagesGalleryClient.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { ChevronLeft, ChevronRight, Grid, LayoutList, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { ImageWithAgent, listImages } from './actions';
+
+type ViewMode = 'TABLE' | 'GRID';
+
+export function ImagesGalleryClient() {
+    const [viewMode, setViewMode] = useState<ViewMode>('GRID');
+    const [images, setImages] = useState<ImageWithAgent[]>([]);
+    const [total, setTotal] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [page, setPage] = useState(1);
+    const [limit] = useState(20);
+    const [hasMore, setHasMore] = useState(true);
+
+    const loadImages = async (pageNum: number, isNewView: boolean) => {
+        setIsLoading(true);
+        try {
+            const result = await listImages({ page: pageNum, limit });
+            if (isNewView) {
+                setImages(result.images);
+            } else {
+                setImages((prev) => [...prev, ...result.images]);
+            }
+            setTotal(result.total);
+            setHasMore(result.images.length === limit);
+        } catch (error) {
+            console.error(error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadImages(1, true);
+        setPage(1);
+        setHasMore(true);
+    }, [viewMode]);
+
+    const handleLoadMore = () => {
+        if (!isLoading && hasMore) {
+            const nextPage = page + 1;
+            setPage(nextPage);
+            loadImages(nextPage, false);
+        }
+    };
+
+    // Table view pagination
+    const handlePageChange = (newPage: number) => {
+        setPage(newPage);
+        loadImages(newPage, true);
+    };
+
+    const observerTarget = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting && hasMore && !isLoading && viewMode === 'GRID') {
+                    handleLoadMore();
+                }
+            },
+            { threshold: 0.1 }
+        );
+
+        if (observerTarget.current) {
+            observer.observe(observerTarget.current);
+        }
+
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            if (observerTarget.current) {
+                observer.unobserve(observerTarget.current);
+            }
+        };
+    }, [hasMore, isLoading, viewMode, page]);
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <div className="flex justify-between items-center mt-20 mb-4">
+                <h1 className="text-3xl text-gray-900 font-light">Images Gallery</h1>
+                <div className="flex items-center gap-2 bg-gray-100 p-1 rounded-lg">
+                    <button
+                        onClick={() => setViewMode('TABLE')}
+                        className={`p-2 rounded-md transition-colors ${
+                            viewMode === 'TABLE' ? 'bg-white shadow-sm text-blue-600' : 'text-gray-500 hover:text-gray-900'
+                        }`}
+                        title="Table View"
+                    >
+                        <LayoutList className="w-5 h-5" />
+                    </button>
+                    <button
+                        onClick={() => setViewMode('GRID')}
+                        className={`p-2 rounded-md transition-colors ${
+                            viewMode === 'GRID' ? 'bg-white shadow-sm text-blue-600' : 'text-gray-500 hover:text-gray-900'
+                        }`}
+                        title="Grid View"
+                    >
+                        <Grid className="w-5 h-5" />
+                    </button>
+                </div>
+            </div>
+
+            {viewMode === 'TABLE' ? (
+                <div className="bg-white border rounded-lg overflow-hidden shadow-sm">
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm text-left text-gray-500">
+                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 border-b">
+                                <tr>
+                                    <th className="px-6 py-3 w-32">Image</th>
+                                    <th className="px-6 py-3">Prompt</th>
+                                    <th className="px-6 py-3">Agent</th>
+                                    <th className="px-6 py-3">Purpose</th>
+                                    <th className="px-6 py-3">Created At</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {images.map((image) => (
+                                    <tr key={image.id} className="bg-white border-b hover:bg-gray-50">
+                                        <td className="px-6 py-4">
+                                            <a href={image.cdnUrl} target="_blank" rel="noopener noreferrer" className="block w-20 h-20 relative rounded overflow-hidden border bg-gray-100">
+                                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                <img src={image.cdnUrl} alt={image.prompt} className="object-cover w-full h-full" />
+                                            </a>
+                                        </td>
+                                        <td className="px-6 py-4">
+                                            <div className="max-w-md truncate" title={image.prompt}>
+                                                {image.prompt}
+                                            </div>
+                                            <div className="text-xs text-gray-400 mt-1">{image.filename}</div>
+                                        </td>
+                                        <td className="px-6 py-4">
+                                            {image.agent ? (
+                                                <Link href={`/${image.agent.agentName}`} className="text-blue-600 hover:underline">
+                                                    {image.agent.agentName}
+                                                </Link>
+                                            ) : (
+                                                <span className="text-gray-400">-</span>
+                                            )}
+                                        </td>
+                                        <td className="px-6 py-4">
+                                            {image.purpose ? (
+                                                <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                                                    image.purpose === 'AVATAR' ? 'bg-purple-100 text-purple-800' : 'bg-yellow-100 text-yellow-800'
+                                                }`}>
+                                                    {image.purpose}
+                                                </span>
+                                            ) : (
+                                                <span className="text-gray-400">-</span>
+                                            )}
+                                        </td>
+                                        <td className="px-6 py-4 whitespace-nowrap">
+                                            {new Date(image.createdAt).toLocaleString()}
+                                        </td>
+                                    </tr>
+                                ))}
+                                {images.length === 0 && !isLoading && (
+                                    <tr>
+                                        <td colSpan={5} className="px-6 py-4 text-center text-gray-500">
+                                            No images found.
+                                        </td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                    {/* Pagination for Table */}
+                    <div className="flex items-center justify-between px-6 py-4 border-t bg-gray-50">
+                        <span className="text-sm text-gray-700">
+                            Showing <span className="font-medium">{(page - 1) * limit + 1}</span> to <span className="font-medium">{Math.min(page * limit, total)}</span> of <span className="font-medium">{total}</span> results
+                        </span>
+                        <div className="flex gap-2">
+                            <button
+                                onClick={() => handlePageChange(page - 1)}
+                                disabled={page === 1 || isLoading}
+                                className="p-2 border rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                <ChevronLeft className="w-4 h-4" />
+                            </button>
+                            <button
+                                onClick={() => handlePageChange(page + 1)}
+                                disabled={page * limit >= total || isLoading}
+                                className="p-2 border rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                <ChevronRight className="w-4 h-4" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <>
+                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+                        {images.map((image) => (
+                            <div key={image.id} className="group relative border rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow">
+                                <a href={image.cdnUrl} target="_blank" rel="noopener noreferrer" className="block aspect-square relative bg-gray-100 overflow-hidden">
+                                     {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img 
+                                        src={image.cdnUrl} 
+                                        alt={image.prompt} 
+                                        className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105" 
+                                        loading="lazy"
+                                    />
+                                    {image.purpose && (
+                                        <div className="absolute top-2 right-2">
+                                            <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold shadow-sm ${
+                                                image.purpose === 'AVATAR' ? 'bg-purple-100 text-purple-800' : 'bg-yellow-100 text-yellow-800'
+                                            }`}>
+                                                {image.purpose}
+                                            </span>
+                                        </div>
+                                    )}
+                                </a>
+                                <div className="p-3">
+                                    <div className="flex items-center justify-between gap-2 mb-1">
+                                        {image.agent ? (
+                                            <Link href={`/${image.agent.agentName}`} className="text-xs font-medium text-blue-600 hover:underline truncate">
+                                                {image.agent.agentName}
+                                            </Link>
+                                        ) : (
+                                             <span className="text-xs text-gray-400">No agent</span>
+                                        )}
+                                        <span className="text-[10px] text-gray-400 whitespace-nowrap">
+                                            {new Date(image.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+                                        </span>
+                                    </div>
+                                    <p className="text-xs text-gray-600 line-clamp-2" title={image.prompt}>
+                                        {image.prompt}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                    
+                    {images.length === 0 && !isLoading && (
+                        <div className="text-center text-gray-500 py-12">
+                            No images found.
+                        </div>
+                    )}
+
+                    {/* Infinite Scroll Loader */}
+                    <div className="py-8 flex justify-center" ref={observerTarget}>
+                        {isLoading && (
+                            <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
+                        )}
+                        {!isLoading && !hasMore && images.length > 0 && (
+                            <p className="text-gray-400 text-sm">No more images</p>
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,60 @@
+'use server';
+
+import { $getTableName } from '@/src/database/$getTableName';
+import { TODO_any } from '@promptbook-local/types';
+import { $provideSupabaseForServer } from '../../../database/$provideSupabaseForServer';
+
+export type ImageWithAgent = {
+    id: number;
+    createdAt: string;
+    updatedAt: string;
+    filename: string;
+    prompt: string;
+    cdnUrl: string;
+    cdnKey: string;
+    agentId: number | null;
+    purpose: 'AVATAR' | 'TESTING' | null;
+    agent: {
+        id: number;
+        agentName: string;
+    } | null;
+};
+
+export async function listImages(options: {
+    page: number;
+    limit: number;
+}): Promise<{ images: ImageWithAgent[]; total: number }> {
+    const { page, limit } = options;
+    const offset = (page - 1) * limit;
+
+    const supabase = $provideSupabaseForServer();
+
+    const {
+        data: images,
+        error,
+        count,
+    } = await supabase
+        .from(await $getTableName('Image'))
+        .select(
+            `
+            *,
+            agent:agentId (
+                id,
+                agentName
+            )
+        `,
+            { count: 'exact' },
+        )
+        .range(offset, offset + limit - 1)
+        .order('createdAt', { ascending: false });
+
+    if (error) {
+        console.error('Error fetching images:', error);
+        throw new Error(error.message);
+    }
+
+    return {
+        images: (images as TODO_any[]) || [],
+        total: count || 0,
+    };
+}

package/apps/agents-server/src/app/admin/images/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { ImagesGalleryClient } from './ImagesGalleryClient';
+
+export default async function ImagesGalleryPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <ImagesGalleryClient />;
+}