@promptbook/cli 0.104.0-10 → 0.104.0-11

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 />;
+}

package/apps/agents-server/src/app/admin/search-engine-test/SearchEngineTestClient.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+import { SearchResult } from '../../../../../../src/search-engines/SearchResult';
+import { search } from './actions';
+
+export function SearchEngineTestClient() {
+    const [query, setQuery] = useState('');
+    const [provider, setProvider] = useState('dummy');
+    const [results, setResults] = useState<SearchResult[] | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSearch = async () => {
+        if (!query) return;
+
+        setIsLoading(true);
+        setError(null);
+        setResults(null);
+
+        try {
+            const results = await search(query, provider);
+            setResults(results);
+        } catch (err) {
+            setError(String(err));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+             <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl text-gray-900 font-light">Search Engine Test</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Test the search engine capabilities by providing a query.
+                    </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">Query</label>
+                        <input
+                            type="text"
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                            placeholder="e.g., Cat"
+                            className="w-full p-2 border border-gray-300 rounded"
+                            disabled={isLoading}
+                             onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleSearch();
+                                }
+                            }}
+                        />
+                    </div>
+                     <div className="space-y-2">
+                        <label className="block text-sm font-medium text-gray-700">Provider</label>
+                        <select
+                            value={provider}
+                            onChange={(e) => setProvider(e.target.value)}
+                            className="w-full p-2 border border-gray-300 rounded"
+                            disabled={isLoading}
+                        >
+                            <option value="dummy">Dummy</option>
+                            <option value="bing">Bing</option>
+                        </select>
+                    </div>
+
+                    <div className="flex justify-end">
+                        <button
+                            onClick={handleSearch}
+                            disabled={isLoading || !query}
+                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                        >
+                            {isLoading ? 'Searching...' : 'Search'}
+                        </button>
+                    </div>
+                </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>
+                )}
+
+                {results && (
+                     <div className="space-y-4">
+                        <h2 className="text-xl font-semibold">Results</h2>
+                        {results.map((result, index) => (
+                            <div key={index} className="border p-4 rounded bg-gray-50">
+                                <a href={result.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 font-bold hover:underline">
+                                    {result.title}
+                                </a>
+                                <div className="text-sm text-green-700">{result.url}</div>
+                                <p className="text-gray-700">{result.snippet}</p>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </Card>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/search-engine-test/actions.ts

@@ -0,0 +1,17 @@
+'use server';
+
+import { BingSearchEngine } from '../../../../../../src/search-engines/bing/BingSearchEngine';
+import { DummySearchEngine } from '../../../../../../src/search-engines/dummy/DummySearchEngine';
+import { SearchResult } from '../../../../../../src/search-engines/SearchResult';
+
+export async function search(query: string, provider: string): Promise<SearchResult[]> {
+    if (provider === 'dummy') {
+        const searchEngine = new DummySearchEngine();
+        return searchEngine.search(query);
+    } else if (provider === 'bing') {
+        const searchEngine = new BingSearchEngine();
+        await searchEngine.checkConfiguration();
+        return searchEngine.search(query);
+    }
+    throw new Error(`Unknown provider: ${provider}`);
+}

package/apps/agents-server/src/app/admin/search-engine-test/page.tsx

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

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

@@ -13,6 +13,9 @@ import { filenameToPrompt } from '../../../../utils/normalization/filenameToProm
 export async function GET(request: NextRequest, { params }: { params: Promise<{ filename: string }> }) {
     try {
         const { filename } = await params;
+        const searchParams = request.nextUrl.searchParams;
+        const modelName = searchParams.get('modelName');
+        const isRaw = searchParams.get('raw') === 'true';
 
         if (!filename) {
             return NextResponse.json({ error: 'Filename is required' }, { status: 400 });
@@ -33,6 +36,13 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         }
 
         if (existingImage) {
+            if (isRaw) {
+                return NextResponse.json({
+                    source: 'cache',
+                    filename,
+                    cdnUrl: existingImage.cdnUrl,
+                });
+            }
             // Image exists, redirect to CDN
             return NextResponse.redirect(existingImage.cdnUrl as string_url);
         }
@@ -53,7 +63,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             parameters: {},
             modelRequirements: {
                 modelVariant: 'IMAGE_GENERATION',
-                modelName: 'dall-e-3', // Use DALL-E 3 for high quality
+                modelName: modelName || 'dall-e-3', // Use DALL-E 3 for high quality
             },
         });
 
@@ -92,6 +102,17 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             throw insertError;
         }
 
+        if (isRaw) {
+            return NextResponse.json({
+                source: 'generated',
+                filename,
+                prompt,
+                modelName: modelName || 'dall-e-3',
+                cdnUrl: cdnUrl.href,
+                imageResult,
+            });
+        }
+
         // Redirect to the newly created image
         return NextResponse.redirect(cdnUrl.href as string_url);
     } catch (error) {

package/apps/agents-server/src/components/AgentProfile/AgentCapabilityChips.tsx

@@ -0,0 +1,38 @@
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { Book, FileText, Globe, Search } from 'lucide-react';
+
+type AgentCapabilityChipsProps = {
+    readonly agent: AgentBasicInformation;
+    readonly className?: string;
+};
+
+export function AgentCapabilityChips({ agent, className }: AgentCapabilityChipsProps) {
+    if (!agent.capabilities || agent.capabilities.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={`flex flex-wrap gap-2 ${className || ''}`}>
+            {agent.capabilities.map((capability, i) => {
+                const Icon =
+                    {
+                        Globe,
+                        Search,
+                        Book,
+                        FileText,
+                    }[capability.iconName] || Book;
+
+                return (
+                    <div
+                        key={i}
+                        className="flex items-center gap-1.5 bg-white/50 backdrop-blur-sm px-2.5 py-1 rounded-full text-xs font-semibold text-gray-800 border border-white/20 shadow-sm"
+                        title={capability.label}
+                    >
+                        <Icon className="w-3.5 h-3.5 opacity-70" />
+                        <span className="truncate max-w-[150px]">{capability.label}</span>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/apps/agents-server/src/components/AgentProfile/AgentProfile.tsx

@@ -5,6 +5,7 @@ import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core'
 import { AgentBasicInformation, string_agent_permanent_id } from '@promptbook-local/types';
 import { RepeatIcon } from 'lucide-react';
 import { useState } from 'react';
+import { AgentCapabilityChips } from './AgentCapabilityChips';
 import { AgentProfileImage } from './AgentProfileImage';
 import { AgentQrCode } from './AgentQrCode';
 import { QrCodeModal } from './QrCodeModal';
@@ -222,6 +223,8 @@ export function AgentProfile(props: AgentProfileProps) {
                         <p className="text-sm md:text-xl text-gray-700 max-w-lg leading-relaxed font-medium line-clamp-3 md:line-clamp-none">
                             {personaDescription}
                         </p>
+
+                        <AgentCapabilityChips agent={agent} />
                     </div>
 
                     {/* Chat Area */}

package/apps/agents-server/src/components/Header/Header.tsx

@@ -309,6 +309,22 @@ export function Header(props: HeaderProps) {
                               label: 'Browser',
                               href: '/admin/browser-test',
                           },
+                          {
+                              label: 'Image Generator Test',
+                              href: '/admin/image-generator-test',
+                          },
+                          {
+                              label: 'Search Engine Test',
+                              href: '/admin/search-engine-test',
+                          },
+                          {
+                              label: 'Images gallery',
+                              href: '/admin/images',
+                          },
+                          {
+                              label: 'Files',
+                              href: '/admin/files',
+                          },
                       ],
                   },
                   {