@promptbook/cli 0.103.0-9 → 0.103.0

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { PromptbookQrCode } from '@promptbook-local/components';
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { useState } from 'react';
+import spaceTrim from 'spacetrim';
+
+type AgentQrCodeProps = Pick<AgentBasicInformation, 'agentName' | 'personaDescription' | 'meta'> & {
+    agentUrl: string;
+    agentEmail: string;
+
+    isJustVcardShown?: boolean;
+};
+
+export function AgentQrCode(props: AgentQrCodeProps) {
+    const { agentName, agentUrl, agentEmail, personaDescription, meta, isJustVcardShown } = props;
+    const [mode, setMode] = useState<'contact' | 'link'>('contact');
+
+    // TODO: [🧠] Should we include more info in VCARD?
+    const vcard = spaceTrim(`
+        BEGIN:VCARD
+        VERSION:3.0
+        FN:${meta.fullname || agentName}
+        URL:${agentUrl}
+        EMAIL:${agentEmail}
+        NOTE:${personaDescription}
+        END:VCARD
+    `);
+
+    const qrValue = mode === 'contact' ? vcard : agentUrl;
+    const label = mode === 'contact' ? 'Scan to add contact' : 'Scan to open agent';
+
+    if (isJustVcardShown) {
+        return <PromptbookQrCode value={vcard} className="" size={250} />;
+    }
+
+    return (
+        <div className="flex flex-col items-center">
+            <div className="flex bg-gray-100 p-1 rounded-lg mb-4">
+                <button
+                    onClick={() => setMode('contact')}
+                    className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${
+                        mode === 'contact' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                    }`}
+                >
+                    Contact
+                </button>
+                <button
+                    onClick={() => setMode('link')}
+                    className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${
+                        mode === 'link' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                    }`}
+                >
+                    Link
+                </button>
+            </div>
+
+            <PromptbookQrCode value={qrValue} className="" size={250} />
+            <span className="mt-2 text-xs text-gray-500">{label}</span>
+        </div>
+    );
+}

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

@@ -0,0 +1,90 @@
+'use client';
+
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { XIcon } from 'lucide-react';
+import { useEffect } from 'react';
+import { AgentQrCode } from './AgentQrCode';
+
+type QrCodeModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    agentName: string;
+    meta: AgentBasicInformation['meta'];
+    personaDescription: string;
+    agentUrl: string;
+    agentEmail: string;
+    brandColorHex: string;
+};
+
+export function QrCodeModal({
+    isOpen,
+    onClose,
+    agentName,
+    meta,
+    personaDescription,
+    agentUrl,
+    agentEmail,
+    brandColorHex,
+}: QrCodeModalProps) {
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+
+    useEffect(() => {
+        function handleEscape(event: KeyboardEvent) {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+            onClick={onClose}
+        >
+            <div
+                className="relative bg-white rounded-2xl shadow-2xl p-8 max-w-sm w-full mx-4 animate-in zoom-in-95 duration-200"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <button
+                    onClick={onClose}
+                    className="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition-colors"
+                    aria-label="Close"
+                >
+                    <XIcon className="w-5 h-5 text-gray-500" />
+                </button>
+
+                <h3 className="text-xl font-semibold text-gray-900 mb-6 text-center">Scan to Chat</h3>
+
+                <div className="flex justify-center">
+                    <AgentQrCode
+                        agentName={agentName}
+                        meta={meta}
+                        personaDescription={personaDescription}
+                        agentUrl={agentUrl}
+                        agentEmail={agentEmail}
+                    />
+                </div>
+
+                <p className="mt-6 text-sm text-gray-500 text-center">
+                    Scan this QR code to start chatting with {(meta.fullname as string) || agentName}
+                </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>
+    );
+}

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

@@ -0,0 +1,159 @@
+'use client';
+
+import { Loader2, Lock } from 'lucide-react';
+import { useState } from 'react';
+
+type ChangePasswordFormProps = {
+    onSuccess?: () => void;
+    className?: string;
+};
+
+export function ChangePasswordForm(props: ChangePasswordFormProps) {
+    const { onSuccess, className } = props;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        setSuccessMessage(null);
+
+        const formData = new FormData(event.currentTarget);
+        const currentPassword = formData.get('currentPassword') as string;
+        const newPassword = formData.get('newPassword') as string;
+        const confirmNewPassword = formData.get('confirmNewPassword') as string;
+
+        if (newPassword !== confirmNewPassword) {
+            setError('New passwords do not match');
+            setIsLoading(false);
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/auth/change-password', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ currentPassword, newPassword }),
+            });
+
+            const result = await response.json();
+
+            if (response.ok) {
+                setSuccessMessage('Password changed successfully');
+                // Reset form
+                event.currentTarget.reset();
+                if (onSuccess) {
+                    setTimeout(onSuccess, 1500);
+                }
+            } else {
+                setError(result.error || 'An error occurred');
+            }
+        } catch (error) {
+            setError('An unexpected error occurred');
+            console.error(error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className={`space-y-4 ${className || ''}`}>
+            <div className="space-y-2">
+                <label
+                    htmlFor="currentPassword"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    Current Password
+                </label>
+                <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                        <Lock className="w-4 h-4" />
+                    </div>
+                    <input
+                        id="currentPassword"
+                        name="currentPassword"
+                        type="password"
+                        required
+                        className="block w-full pl-10 h-10 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:border-transparent disabled:opacity-50"
+                        placeholder="Enter current password"
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <label
+                    htmlFor="newPassword"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    New Password
+                </label>
+                <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                        <Lock className="w-4 h-4" />
+                    </div>
+                    <input
+                        id="newPassword"
+                        name="newPassword"
+                        type="password"
+                        required
+                        className="block w-full pl-10 h-10 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:border-transparent disabled:opacity-50"
+                        placeholder="Enter new password"
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <label
+                    htmlFor="confirmNewPassword"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    Confirm New Password
+                </label>
+                <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                        <Lock className="w-4 h-4" />
+                    </div>
+                    <input
+                        id="confirmNewPassword"
+                        name="confirmNewPassword"
+                        type="password"
+                        required
+                        className="block w-full pl-10 h-10 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:border-transparent disabled:opacity-50"
+                        placeholder="Confirm new password"
+                    />
+                </div>
+            </div>
+
+            {error && (
+                <div className="p-3 text-sm text-red-500 bg-red-50 border border-red-200 rounded-md">
+                    {error}
+                </div>
+            )}
+
+            {successMessage && (
+                <div className="p-3 text-sm text-green-500 bg-green-50 border border-green-200 rounded-md">
+                    {successMessage}
+                </div>
+            )}
+
+            <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-promptbook-blue-dark text-white hover:bg-promptbook-blue-dark/90 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none transition-colors"
+            >
+                {isLoading ? (
+                    <>
+                        <Loader2 className="mr-2 w-4 h-4 animate-spin" />
+                        Changing Password...
+                    </>
+                ) : (
+                    'Change Password'
+                )}
+            </button>
+        </form>
+    );
+}

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

@@ -0,0 +1,88 @@
+import { MarkdownContent } from '@promptbook-local/components';
+import { OpenMojiIcon } from '../OpenMojiIcon/OpenMojiIcon';
+
+type DocumentationContentProps = {
+    primary: {
+        type: string;
+        icon: string;
+        description?: string;
+        documentation: string;
+    };
+    aliases?: string[];
+    isPrintOnly?: boolean;
+};
+
+export function DocumentationContent({ primary, aliases = [], isPrintOnly = false }: DocumentationContentProps) {
+    return (
+        <div
+            className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden ${
+                isPrintOnly ? 'shadow-none border-none' : ''
+            }`}
+        >
+            <div
+                className={`p-8 border-b border-gray-100 bg-gray-50/50 ${
+                    isPrintOnly ? 'border-none bg-white p-0 mb-4' : ''
+                }`}
+            >
+                <div className="flex items-center gap-4 mb-4">
+                    <h1 className="text-4xl font-bold text-gray-900 tracking-tight">
+                        <OpenMojiIcon icon={primary.icon} className="mr-3" />
+                        {primary.type}
+                        {aliases.length > 0 && (
+                            <span className="text-gray-400 font-normal ml-4 text-2xl">/ {aliases.join(' / ')}</span>
+                        )}
+                    </h1>
+                    {!isPrintOnly && (
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                            Commitment
+                        </span>
+                    )}
+                </div>
+                {primary.description && (
+                    <p className="text-xl text-gray-600 leading-relaxed max-w-3xl">{primary.description}</p>
+                )}
+            </div>
+
+            <div className={`p-8 ${isPrintOnly ? 'p-0' : ''}`}>
+                <article className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-gray-900 prose-h1:text-4xl prose-h1:mb-8 prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6 prose-h2:pb-2 prose-h2:border-b prose-h2:border-gray-200 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h3:text-gray-800 prose-p:text-gray-600 prose-p:leading-relaxed prose-p:mb-6 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:text-blue-700 hover:prose-a:underline prose-a:transition-colors prose-strong:font-bold prose-strong:text-gray-900 prose-code:text-blue-600 prose-code:bg-blue-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-code:font-medium prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:shadow-lg prose-pre:rounded-xl prose-pre:p-6 prose-ul:list-disc prose-ul:pl-6 prose-li:marker:text-gray-400 prose-li:mb-2 prose-ol:list-decimal prose-ol:pl-6 prose-li:mb-2 prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:bg-blue-50/50 prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-blockquote:my-8 prose-img:rounded-xl prose-img:shadow-md prose-img:my-8 prose-hr:border-gray-200 prose-hr:my-10 prose-table:w-full prose-th:text-left prose-th:py-2 prose-th:px-3 prose-th:bg-gray-100 prose-th:font-semibold prose-th:text-gray-900 prose-td:py-2 prose-td:px-3 prose-td:border-b prose-td:border-gray-200 prose-tr:hover:bg-gray-50">
+                    <MarkdownContent
+                        content={primary.documentation}
+                        /* TODO: !!!!
+                        components={{
+                            code(props) {
+                                const { children, className, node, ...rest } = props;
+                                const match = /language-(\w+)/.exec(className || '');
+                                if (match && match[1] === 'book') {
+                                    const value = String(children).replace(/\n$/, '');
+                                    // Estimate height: lines * 30px + padding
+                                    const lineCount = value.split('\n').length;
+                                    const height = lineCount * 30 + 40; // 30px per line + 40px buffer
+
+                                    return (
+                                        <div className="not-prose my-6 rounded-lg overflow-hidden border border-gray-200 shadow-sm print:border-gray-300">
+                                            <BookEditor
+                                                value={value as string_book}
+                                                isReadonly={true}
+                                                isVerbose={false}
+                                                height={`${height}px`}
+                                                isDownloadButtonShown={false}
+                                                isAboutButtonShown={false}
+                                                isFullscreenButtonShown={true}
+                                            />
+                                        </div>
+                                    );
+                                }
+                                return (
+                                    <code className={className} {...rest}>
+                                        {children}
+                                    </code>
+                                );
+                            },
+                        }}
+                        */
+                    />
+                </article>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+type ErrorPageProps = {
+    /**
+     * The title of the error page (e.g. "404 Not Found")
+     */
+    title: string;
+
+    /**
+     * The message to display to the user
+     */
+    message: string;
+
+    /**
+     * Optional children to display below the message (e.g. a button or form)
+     */
+    children?: ReactNode;
+};
+
+/**
+ * A standard layout for error pages (404, 403, 500, etc.)
+ */
+export function ErrorPage({ title, message, children }: ErrorPageProps) {
+    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">{title}</h1>
+                <p className="text-gray-700 mb-6 text-center">{message}</p>
+                {children}
+            </div>
+        </div>
+    );
+}