@promptbook/cli 0.103.0-10 → 0.103.0-100

package/apps/agents-server/src/app/manifest.ts

@@ -0,0 +1,109 @@
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { MetadataRoute } from 'next';
+import { headers } from 'next/headers';
+import { Color } from '../../../../src/utils/color/Color';
+import { getMetadata } from '../database/getMetadata';
+import { $provideServer } from '../tools/$provideServer';
+import { getAgentProfile } from './agents/[agentName]/_utils';
+
+export default async function manifest(): Promise<MetadataRoute.Manifest> {
+    const { publicUrl } = await $provideServer();
+    const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
+    const serverDescription = (await getMetadata('SERVER_DESCRIPTION')) || 'Agents server powered by Promptbook';
+
+    const referer = (await headers()).get('referer') || '';
+    const isAgentManifest = referer.includes('/agents/');
+
+    if (!isAgentManifest) {
+        return {
+            name: serverName,
+            short_name: serverName,
+            description: serverDescription,
+            start_url: publicUrl.href,
+            display_override: ['fullscreen', 'minimal-ui'],
+            display: 'standalone',
+            background_color: PROMPTBOOK_COLOR.toHex(),
+            theme_color: PROMPTBOOK_COLOR.toHex(),
+            icons: [
+                // TODO: Create icons for the server homepage
+            ],
+            scope: publicUrl.href,
+        } satisfies MetadataRoute.Manifest;
+    }
+
+    const agentName = decodeURIComponent(referer.split('/agents/')[1]?.split('/')[0]);
+
+    try {
+        const agentProfile = await getAgentProfile(agentName);
+
+        const name = agentProfile.meta.fullname || agentProfile.agentName;
+        const short_name = agentProfile.agentName;
+        const description = agentProfile.meta.description || agentProfile.personaDescription || `Agent ${name}`;
+
+        // Extract brand color from meta
+        const brandColor = Color.fromSafe(agentProfile.meta.color || PROMPTBOOK_COLOR);
+        const theme_color = brandColor.toHex();
+        const background_color = '#ffffff';
+
+        const agentUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+
+        const icons: MetadataRoute.Manifest['icons'] = [
+            {
+                src: `${agentUrl}/images/icon-256.png`,
+                sizes: '256x256',
+                type: 'image/png',
+                purpose: 'any',
+            },
+            {
+                src: `${agentUrl}/images/icon-256.png`,
+                sizes: '256x256',
+                type: 'image/png',
+                purpose: 'maskable',
+            },
+        ];
+
+        const screenshots: MetadataRoute.Manifest['screenshots'] = [
+            {
+                src: `${agentUrl}/images/screenshot-fullhd.png`,
+                sizes: '1920x1080',
+                type: 'image/png',
+                form_factor: 'wide',
+                label: 'Full HD Screenshot',
+            },
+            {
+                src: `${agentUrl}/images/screenshot-phone.png`,
+                sizes: '1080x1920',
+                type: 'image/png',
+                form_factor: 'narrow',
+                label: 'Phone Screenshot',
+            },
+        ];
+
+        return {
+            id: agentUrl,
+            name,
+            short_name,
+            description,
+            start_url: `${agentUrl}/chat`,
+            scope: agentUrl,
+            display_override: ['fullscreen', 'minimal-ui'],
+            display: 'standalone',
+            background_color,
+            theme_color,
+            icons,
+            screenshots,
+        } satisfies MetadataRoute.Manifest;
+    } catch (error) {
+        console.warn(`Failed to generate manifest for agent ${agentName}`, error);
+        return {
+            name: agentName,
+            short_name: agentName,
+            start_url: `${publicUrl.href}agents/${encodeURIComponent(agentName)}/chat`,
+            display_override: ['fullscreen', 'minimal-ui'],
+            display: 'standalone',
+            background_color: '#ffffff',
+            theme_color: PROMPTBOOK_COLOR.toHex(),
+            icons: [],
+        } satisfies MetadataRoute.Manifest;
+    }
+}

package/apps/agents-server/src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { NotFoundPage } from '../components/NotFoundPage/NotFoundPage';
+
+export default function NotFound() {
+    return <NotFoundPage />;
+}

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

@@ -0,0 +1,96 @@
+'use server';
+
+import { getSingleLlmExecutionTools } from '@promptbook-local/core';
+import moment from 'moment';
+import { headers } from 'next/headers';
+import { AboutPromptbookInformation } from '../../../../src/utils/misc/xAboutPromptbookInformation';
+import { $sideEffect } from '../../../../src/utils/organization/$sideEffect';
+import { AgentsList } from '../components/Homepage/AgentsList';
+import { ExternalAgentsSectionClient } from '../components/Homepage/ExternalAgentsSectionClient';
+import { ModelsSection } from '../components/Homepage/ModelsSection';
+import { Section } from '../components/Homepage/Section';
+import { TechInfoCard } from '../components/Homepage/TechInfoCard';
+import { UsersList } from '../components/UsersList/UsersList';
+import VercelDeploymentCard from '../components/VercelDeploymentCard/VercelDeploymentCard';
+import { getLongRunningTask } from '../deamons/longRunningTask';
+import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
+import { $provideExecutionToolsForServer } from '../tools/$provideExecutionToolsForServer';
+import { $provideServer } from '../tools/$provideServer';
+import { isUserAdmin } from '../utils/isUserAdmin';
+
+// Add calendar formats that include seconds
+const calendarWithSeconds = {
+    sameDay: '[Today at] LTS',
+    nextDay: '[Tomorrow at] LTS',
+    nextWeek: 'dddd [at] LTS',
+    lastDay: '[Yesterday at] LTS',
+    lastWeek: '[Last] dddd [at] LTS',
+    sameElse: 'L [at] LTS',
+};
+
+export default async function HomePage() {
+    $sideEffect(/* Note: [🐶] This will ensure dynamic rendering of page and avoid Next.js pre-render */ headers());
+
+    const isAdmin = await isUserAdmin(); /* <- TODO: [👹] Here should be user permissions */
+
+    const collection = await $provideAgentCollectionForServer();
+    const agents = await collection.listAgents();
+
+    const longRunningTask = getLongRunningTask();
+
+    const executionTools = await $provideExecutionToolsForServer();
+    const models = await getSingleLlmExecutionTools(executionTools.llm).listModels();
+
+    const host = (await headers()).get('host') || 'unknown';
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+            <div className="container mx-auto px-4 py-16">
+                <AgentsList agents={[...agents]} isAdmin={isAdmin} />
+
+                <ExternalAgentsSectionClient />
+
+                {isAdmin && <UsersList allowCreate={false} />}
+
+                {isAdmin && (
+                    <ModelsSection models={models} maxVisible={11} showViewAllLink />
+                )}
+
+                {isAdmin && (
+                    <>
+                        {/* Note: Shown in <AboutPromptbookInformation />: <h2 className="text-3xl text-gray-900 mt-16 mb-4">About Promptbook</h2> */}
+                        <AboutPromptbookInformation />
+                    </>
+                )}
+
+                {isAdmin && (
+                    <Section title="Technical Information">
+                        <TechInfoCard title={`Long running task ${longRunningTask.taskId}`}>
+                            <p className="text-gray-600">Tick: {longRunningTask.tick}</p>
+                            <p className="text-gray-600">
+                                Created At: {moment(longRunningTask.createdAt).calendar(undefined, calendarWithSeconds)}
+                            </p>
+                            <p className="text-gray-600">
+                                Updated At: {moment(longRunningTask.updatedAt).calendar(undefined, calendarWithSeconds)}
+                            </p>
+                        </TechInfoCard>
+
+                        <VercelDeploymentCard />
+
+                        <TechInfoCard title="HTTP Information">
+                            <p className="text-gray-600">Host: {host}</p>
+                        </TechInfoCard>
+
+                        <TechInfoCard title="Server">
+                            <pre>{JSON.stringify(await $provideServer(), null, 2)}</pre>
+                        </TechInfoCard>
+                    </Section>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * TODO: [🕋] Use here `AboutPromptbookInformation`
+ */

package/apps/agents-server/src/app/recycle-bin/RestoreAgentButton.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { RefreshCcwIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { restoreDeletedAgent } from './actions';
+
+type RestoreAgentButtonProps = {
+    agentName: string;
+};
+
+export function RestoreAgentButton({ agentName }: RestoreAgentButtonProps) {
+    const router = useRouter();
+    const [isRestoring, setIsRestoring] = useState(false);
+
+    const handleRestore = async () => {
+        try {
+            setIsRestoring(true);
+            await restoreDeletedAgent(agentName);
+            router.refresh();
+        } catch (error) {
+            console.error('Failed to restore agent:', error);
+            alert('Failed to restore agent');
+        } finally {
+            setIsRestoring(false);
+        }
+    };
+
+    return (
+        <button
+            onClick={handleRestore}
+            disabled={isRestoring}
+            className="flex items-center gap-2 px-3 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 text-gray-700 disabled:opacity-50"
+            title="Restore agent"
+        >
+            <RefreshCcwIcon className={`w-4 h-4 ${isRestoring ? 'animate-spin' : ''}`} />
+            {isRestoring ? 'Restoring...' : 'Restore'}
+        </button>
+    );
+}

package/apps/agents-server/src/app/recycle-bin/actions.ts

@@ -0,0 +1,27 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { revalidatePath } from 'next/cache';
+
+export async function restoreDeletedAgent(agentName: string) {
+    const collection = await $provideAgentCollectionForServer();
+    
+    // Find the latest history item for this agent
+    const history = await collection.listAgentHistory(agentName);
+    
+    if (history.length === 0) {
+        throw new Error(`No history found for agent ${agentName}`);
+    }
+    
+    const latestVersion = history[0];
+    
+    if (!latestVersion) {
+         throw new Error(`No history found for agent ${agentName}`);
+    }
+
+    await collection.restoreAgent(latestVersion.id);
+    
+    revalidatePath('/recycle-bin');
+    revalidatePath(`/agents/${agentName}`);
+    revalidatePath('/');
+}

package/apps/agents-server/src/app/recycle-bin/page.tsx

@@ -0,0 +1,58 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { TrashIcon } from 'lucide-react';
+import Link from 'next/link';
+import { RestoreAgentButton } from './RestoreAgentButton';
+
+export const metadata = {
+    title: 'Recycle Bin',
+};
+
+export default async function RecycleBinPage() {
+    const collection = await $provideAgentCollectionForServer();
+    const deletedAgents = await collection.listDeletedAgents();
+
+    return (
+        <div className="container mx-auto p-6 max-w-4xl">
+            <header className="flex items-center gap-4 mb-8">
+                <div className="bg-red-100 p-3 rounded-full">
+                    <TrashIcon className="w-8 h-8 text-red-600" />
+                </div>
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Recycle Bin</h1>
+                    <p className="text-gray-600">Restore deleted agents from here.</p>
+                </div>
+            </header>
+
+            {deletedAgents.length === 0 ? (
+                <div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                    <p className="text-gray-500 text-lg">Recycle bin is empty</p>
+                    <Link href="/" className="text-blue-600 hover:underline mt-2 inline-block">
+                        Go back to agents
+                    </Link>
+                </div>
+            ) : (
+                <div className="grid gap-4">
+                    {deletedAgents.map((agentName) => (
+                        <div
+                            key={agentName}
+                            className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-center justify-between hover:shadow-md transition-shadow"
+                        >
+                            <div className="flex items-center gap-3">
+                                <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 font-bold text-lg">
+                                    {agentName.charAt(0).toUpperCase()}
+                                </div>
+                                <div>
+                                    <h3 className="font-semibold text-lg text-gray-900">{agentName}</h3>
+                                    <p className="text-sm text-gray-500">Deleted agent</p>
+                                </div>
+                            </div>
+                            <div className="flex gap-2">
+                                <RestoreAgentButton agentName={agentName} />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,33 @@
+import { ShieldAlert } from 'lucide-react';
+import Link from 'next/link';
+
+export default function RestrictedPage() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] p-4 text-center">
+            <div className="bg-red-50 p-6 rounded-full mb-6">
+                <ShieldAlert className="w-12 h-12 text-red-600" />
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">Access Restricted</h1>
+            <p className="text-gray-600 max-w-md mb-8">
+                This server is restricted to authorized users or specific IP addresses. 
+                Please log in to continue or contact the administrator if you believe this is an error.
+            </p>
+            
+            {/* The Login button in the header is available, so we can just point to it or instruct the user */}
+            <div className="p-4 bg-blue-50 text-blue-800 rounded-lg max-w-md text-sm">
+                <p>
+                    <strong>Tip:</strong> Use the <strong>Log in</strong> button in the top right corner to access your account.
+                </p>
+            </div>
+
+            <div className="mt-8 flex gap-4">
+                <Link 
+                    href="/"
+                    className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
+                >
+                    Go Home
+                </Link>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/test/og-image/README.md

@@ -0,0 +1 @@
+In this folder we are testing miscellaneous things related to Promptbook Agents Server

package/apps/agents-server/src/app/test/og-image/opengraph-image.tsx

@@ -0,0 +1,37 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'Agent Profile';
+export const size = {
+    width: 1200,
+    height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+    return new ImageResponse(
+        (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'white',
+                }}
+            >
+                <h1>Hello</h1>
+            </div>
+        ),
+        {
+            ...size,
+            emoji: 'openmoji',
+        },
+    );
+}
+
+/**
+ * TODO:  [webpack.cache.PackFileCacheStrategy] Serializing big strings (126kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
+ */

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

@@ -0,0 +1,22 @@
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    metadataBase: NEXT_PUBLIC_SITE_URL,
+    title: 'Test OG Image',
+    description: 'Testing og-image',
+};
+
+export default function TestPage() {
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-100">
+            <div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full">
+                <h1 className="text-3xl font-bold text-red-600 mb-4 text-center">Test page</h1>
+                <p className="text-gray-700 mb-6 text-center">Testing og-image</p>
+                <p className="text-gray-600 text-sm text-center mt-4">
+                    View page source or share this URL to see the OG image in action
+                </p>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/components/Auth/AuthControls.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+type AuthControlsProps = {
+    initialUser: { username: string; isAdmin: boolean } | null;
+};
+
+export function AuthControls({ initialUser }: AuthControlsProps) {
+    const router = useRouter();
+    const [user, setUser] = useState(initialUser);
+    const [isLoginOpen, setIsLoginOpen] = useState(false);
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState<string | null>(null);
+
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        try {
+            const response = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password }),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Login failed');
+            }
+
+            // Reload page to reflect state
+            window.location.reload();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        }
+    };
+
+    const handleLogout = async () => {
+        try {
+            await fetch('/api/auth/logout', { method: 'POST' });
+            window.location.reload();
+        } catch (err) {
+            console.error('Logout failed', err);
+        }
+    };
+
+    if (user) {
+        return (
+            <div className="flex items-center space-x-4">
+                <span className="text-gray-600">
+                    Logged in as <strong>{user.username}</strong>
+                    {user.isAdmin && <span className="ml-2 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Admin</span>}
+                </span>
+                <button
+                    onClick={handleLogout}
+                    className="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 transition-colors"
+                >
+                    Logout
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            {!isLoginOpen ? (
+                <button
+                    onClick={() => setIsLoginOpen(true)}
+                    className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
+                >
+                    Login
+                </button>
+            ) : (
+                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                    <div className="bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
+                        <h2 className="text-2xl font-bold mb-4">Login</h2>
+                        {error && <div className="bg-red-100 text-red-700 p-3 rounded mb-4">{error}</div>}
+                        <form onSubmit={handleLogin} className="space-y-4">
+                            <div>
+                                <label className="block text-gray-700 mb-1">Username</label>
+                                <input
+                                    type="text"
+                                    value={username}
+                                    onChange={(e) => setUsername(e.target.value)}
+                                    className="w-full p-2 border border-gray-300 rounded"
+                                    required
+                                />
+                            </div>
+                            <div>
+                                <label className="block text-gray-700 mb-1">Password</label>
+                                <input
+                                    type="password"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    className="w-full p-2 border border-gray-300 rounded"
+                                    required
+                                />
+                            </div>
+                            <div className="flex justify-end space-x-2">
+                                <button
+                                    type="button"
+                                    onClick={() => setIsLoginOpen(false)}
+                                    className="px-4 py-2 text-gray-600 hover:text-gray-800"
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    type="submit"
+                                    className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                                >
+                                    Login
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { ChangePasswordForm } from '../ChangePasswordForm/ChangePasswordForm';
+import { Portal } from '../Portal/Portal';
+
+type ChangePasswordDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export function ChangePasswordDialog(props: ChangePasswordDialogProps) {
+    const { isOpen, onClose } = props;
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Portal>
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
+                <div className="relative w-full max-w-md bg-white rounded-lg shadow-lg border border-gray-200 p-6 animate-in zoom-in-95 duration-200">
+                    <button
+                        onClick={onClose}
+                        className="absolute top-4 right-4 text-gray-400 hover:text-gray-500 transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                        <span className="sr-only">Close</span>
+                    </button>
+
+                    <div className="mb-6">
+                        <h2 className="text-xl font-semibold text-gray-900">Change Password</h2>
+                        <p className="text-sm text-gray-500 mt-1">Update your password to keep your account secure</p>
+                    </div>
+
+                    <ChangePasswordForm onSuccess={onClose} />
+                </div>
+            </div>
+        </Portal>
+    );
+}