@promptbook/cli 0.103.0-48 → 0.103.0-50

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

@@ -1,17 +1,23 @@
 'use server';
 
-import logoImage from '@/public/logo-blue-white-256.png';
 import { getSingleLlmExecutionTools } from '@promptbook-local/core';
 import moment from 'moment';
 import { headers } from 'next/headers';
-import Image from 'next/image';
 import Link from 'next/link';
 import { AvatarProfile } from '../../../../src/book-components/AvatarProfile/AvatarProfile/AvatarProfile';
 import { AboutPromptbookInformation } from '../../../../src/utils/misc/xAboutPromptbookInformation';
 import { $sideEffect } from '../../../../src/utils/organization/$sideEffect';
+import { AuthControls } from '../components/Auth/AuthControls';
+import { UsersList } from '../components/UsersList/UsersList';
+import VercelDeploymentCard from '../components/VercelDeploymentCard/VercelDeploymentCard';
+import { getMetadata } from '../database/getMetadata';
 import { getLongRunningTask } from '../deamons/longRunningTask';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
 import { $provideExecutionToolsForServer } from '../tools/$provideExecutionToolsForServer';
+import { $provideServer } from '../tools/$provideServer';
+import { getFederatedAgents } from '../utils/getFederatedAgents';
+import { getCurrentUser } from '../utils/getCurrentUser';
+import { isUserAdmin } from '../utils/isUserAdmin';
 import { AddAgentButton } from './AddAgentButton';
 
 // Add calendar formats that include seconds
@@ -27,27 +33,39 @@ const calendarWithSeconds = {
 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 currentUser = await getCurrentUser();
+
     const collection = await $provideAgentCollectionForServer();
     const agents = await collection.listAgents();
 
+    const federatedServersString = (await getMetadata('FEDERATED_SERVERS')) || '';
+    const federatedServers = federatedServersString
+        .split(',')
+        .map((s) => s.trim())
+        .filter((s) => s !== '');
+
+    const externalAgents = await getFederatedAgents(federatedServers);
+
     const longRunningTask = getLongRunningTask();
 
     const executionTools = await $provideExecutionToolsForServer();
     const models = await getSingleLlmExecutionTools(executionTools.llm).listModels();
 
+    const host = (await headers()).get('host');
+
     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">
-                <h1 className="text-4xl font-bold text-gray-900 mb-4">
-                    <Image src={logoImage} alt="Promptbook Logo" height={50} className="inline-block mr-4" />
-                    Promptbook Agents Server
-                </h1>
+                <div className="flex justify-end mb-4">
+                    <AuthControls initialUser={currentUser} />
+                </div>
 
                 <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">Agents ({agents.length})</h2>
+                    <h2 className="text-3xl text-gray-900 mt-4 mb-4">Agents ({agents.length})</h2>
                     <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                         {agents.map((agent) => (
-                            <Link key={agent.agentName} href={`/agents/${agent.agentName}`}>
+                            <Link key={agent.agentName} href={`/${agent.agentName}`}>
                                 <AvatarProfile
                                     {...{ agent }}
                                     style={
@@ -61,50 +79,103 @@ export default async function HomePage() {
                                 />
                             </Link>
                         ))}
-                        <AddAgentButton />
+                        {isAdmin && <AddAgentButton />}
                     </div>
                 </>
 
-                <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">Models ({models.length})</h2>
-                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                        {models.map(({ modelName, modelTitle, modelDescription }) => (
-                            <Link key={modelName} href={`#!!!`}>
-                                <div className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400">
-                                    <h2 className="text-2xl font-semibold text-gray-900 mb-2">{modelTitle}</h2>
-                                    <code>{modelName}</code>
-                                    <p className="text-gray-600">{modelDescription}</p>
-                                </div>
+                {externalAgents.length > 0 && (
+                    <>
+                        <h2 className="text-3xl text-gray-900 mt-16 mb-4">External Agents ({externalAgents.length})</h2>
+                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                            {externalAgents.map((agent) => (
+                                <Link key={agent.url} href={agent.url}>
+                                    <AvatarProfile
+                                        {...{ agent }}
+                                        style={
+                                            !agent.meta.color
+                                                ? {}
+                                                : {
+                                                      backgroundColor: `${agent.meta.color}22`, // <- TODO: Use Color object here
+                                                  }
+                                        }
+                                        className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
+                                    />
+                                </Link>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {isAdmin && <UsersList />}
+
+                {isAdmin && (
+                    <>
+                        <h2 className="text-3xl text-gray-900 mt-16 mb-4">Models ({models.length})</h2>
+                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                            {models.map(({ modelName, modelTitle, modelDescription }) => (
+                                <Link key={modelName} href={`#[🐱‍🚀]`}>
+                                    <div className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400">
+                                        <h2 className="text-2xl font-semibold text-gray-900 mb-2">{modelTitle}</h2>
+                                        <code>{modelName}</code>
+                                        <p className="text-gray-600">{modelDescription}</p>
+                                    </div>
+                                </Link>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {isAdmin && (
+                    <>
+                        {/* Note: Shown in <AboutPromptbookInformation />: <h2 className="text-3xl text-gray-900 mt-16 mb-4">About Promptbook</h2> */}
+                        <AboutPromptbookInformation />
+                    </>
+                )}
+
+                {isAdmin && (
+                    <>
+                        <h2 className="text-3xl text-gray-900 mt-16 mb-4">Technical Information</h2>
+                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                            <Link
+                                href={'#'}
+                                className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
+                            >
+                                <h2 className="text-2xl font-semibold text-gray-900 mb-2">
+                                    Long running task {longRunningTask.taskId}
+                                </h2>
+                                <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>
                             </Link>
-                        ))}
-                    </div>
-                </>
 
-                <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">About</h2>
-                    <AboutPromptbookInformation />
-                </>
+                            <VercelDeploymentCard />
 
-                <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">Technical Information</h2>
-                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                        <Link
-                            href={'#'}
-                            className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
-                        >
-                            <h2 className="text-2xl font-semibold text-gray-900 mb-2">
-                                Long running task {longRunningTask.taskId}
-                            </h2>
-                            <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>
-                        </Link>
-                    </div>
-                </>
+                            <Link
+                                href={'#'}
+                                className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
+                            >
+                                <h2 className="text-2xl font-semibold text-gray-900 mb-2">HTTP Information</h2>
+
+                                <p className="text-gray-600">Host: {host}</p>
+                            </Link>
+
+                            <Link
+                                href={'#'}
+                                className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
+                            >
+                                <h2 className="text-2xl font-semibold text-gray-900 mb-2">Server</h2>
+
+                                <pre>{JSON.stringify(await $provideServer(), null, 2)}</pre>
+                            </Link>
+                        </div>
+                    </>
+                )}
             </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/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>
+    );
+}

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ErrorPage } from '../ErrorPage/ErrorPage';
+import { LoginForm } from '../LoginForm/LoginForm';
+
+export function ForbiddenPage() {
+    const router = useRouter();
+
+    return (
+        <ErrorPage title="403 Forbidden" message="You do not have permission to access this page.">
+            <LoginForm onSuccess={() => router.refresh()} />
+        </ErrorPage>
+    );
+}

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

@@ -0,0 +1,146 @@
+'use client';
+
+import promptbookLogoBlueTransparent from '@/public/logo-blue-white-256.png';
+import { logoutAction } from '@/src/app/actions';
+import { ArrowRight, LogIn, LogOut, Menu, X } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import { just } from '../../../../../src/utils/organization/just';
+import { LoginDialog } from '../LoginDialog/LoginDialog';
+
+type HeaderProps = {
+    /**
+     * Is the user an admin
+     */
+    isAdmin?: boolean;
+
+    /**
+     * The name of the server
+     */
+    serverName: string;
+
+    /**
+     * The URL of the logo displayed in the heading bar
+     */
+    serverLogoUrl: string | null;
+};
+
+/* TODO: [🐱‍🚀] Make this Agents server native  */
+
+export function Header(props: HeaderProps) {
+    const { isAdmin = false, serverName, serverLogoUrl } = props;
+
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isLoginOpen, setIsLoginOpen] = useState(false);
+
+    const handleLogout = async () => {
+        await logoutAction();
+    };
+
+    return (
+        <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200 h-[60px]">
+            <LoginDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
+            <div className="container mx-auto px-4">
+                <div className="flex items-center justify-between h-16">
+                    {/* Logo <- TODO: This should be <h1>*/}
+                    <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
+                        <Image
+                            src={serverLogoUrl || promptbookLogoBlueTransparent}
+                            alt={serverName}
+                            width={32}
+                            height={32}
+                            className="w-8 h-8 object-contain"
+                        />
+                        <span className="text-xl text-gray-900">{serverName}</span>
+                    </Link>
+
+                    {/* Desktop Navigation */}
+                    {/* Desktop Navigation */}
+                    <nav className="hidden md:flex items-center gap-8">
+                        {isAdmin && (
+                            <Link
+                                href="/metadata"
+                                className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                            >
+                                Metadata
+                            </Link>
+                        )}
+
+                        {just(false /* TODO: [🧠] Figure out what to do with theese links */) && (
+                            <Link
+                                href="https://ptbk.io/#try-it-yourself"
+                                target="_blank"
+                                className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                            >
+                                Try it yourself
+                            </Link>
+                        )}
+                    </nav>
+
+                    {/* CTA Button & Mobile Menu Toggle */}
+                    <div className="flex items-center gap-4">
+                        {just(false /* TODO: [🧠] Figure out what to do with call to action */) && (
+                            <Link href="https://ptbk.io/?modal=get-started" target="_blank" className="hidden md:block">
+                                <button className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-promptbook-blue-dark text-white hover:bg-promptbook-blue-dark/90">
+                                    Get Started
+                                    <ArrowRight className="ml-2 w-4 h-4" />
+                                </button>
+                            </Link>
+                        )}
+
+                        {!isAdmin ? (
+                            <button
+                                onClick={() => {
+                                    setIsLoginOpen(true);
+                                    setIsMenuOpen(false);
+                                }}
+                                className="w-full inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium h-10 px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+                            >
+                                Log in
+                                <LogIn className="ml-2 w-4 h-4" />
+                            </button>
+                        ) : (
+                            <button
+                                onClick={() => {
+                                    handleLogout();
+                                    setIsMenuOpen(false);
+                                }}
+                                className="w-full inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium h-10 px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+                            >
+                                Log out
+                                <LogOut className="ml-2 w-4 h-4" />
+                            </button>
+                        )}
+
+                        {/* Mobile Menu Toggle */}
+                        {just(false /* TODO: [🧠] Figure out whether we want a menu */) && (
+                            <button
+                                className="md:hidden p-2 text-gray-600 hover:text-gray-900"
+                                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                            >
+                                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                {/* Mobile Navigation */}
+                {just(false /* TODO: [🧠] Figure out whether we want a menu */) && isMenuOpen && (
+                    <div className="md:hidden py-4 border-t border-gray-100 animate-in slide-in-from-top-2">
+                        <nav className="flex flex-col gap-4">
+                            <Link
+                                href="https://ptbk.io/#try-it-yourself"
+                                target="_blank"
+                                className="text-gray-600 hover:text-gray-900 transition-colors py-2"
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                Try it yourself
+                            </Link>
+                        </nav>
+                    </div>
+                )}
+            </div>
+        </header>
+    );
+}

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Header } from '../Header/Header';
+
+type LayoutWrapperProps = {
+    children: React.ReactNode;
+    isAdmin: boolean;
+    serverName: string;
+    serverLogoUrl: string | null;
+};
+
+export function LayoutWrapper({ children, isAdmin, serverName, serverLogoUrl }: LayoutWrapperProps) {
+    const pathname = usePathname();
+    const isHeaderHidden = pathname?.includes('/chat');
+
+    if (isHeaderHidden) {
+        return <main className={`pt-0`}>{children}</main>;
+    }
+
+    return (
+        <>
+            <Header isAdmin={isAdmin} serverName={serverName} serverLogoUrl={serverLogoUrl} />
+            <main className={`pt-[60px]`}>{children}</main>
+        </>
+    );
+}

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

@@ -0,0 +1,40 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { LoginForm } from '../LoginForm/LoginForm';
+
+type LoginDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export function LoginDialog(props: LoginDialogProps) {
+    const { isOpen, onClose } = props;
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <div className="fixed inset-0 z-50 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">Log in</h2>
+                    <p className="text-sm text-gray-500 mt-1">
+                        Enter your credentials to access the admin area
+                    </p>
+                </div>
+
+                <LoginForm onSuccess={onClose} />
+            </div>
+        </div>
+    );
+}