@promptbook/cli 0.103.0-48 → 0.103.0-50

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

@@ -0,0 +1,109 @@
+'use client';
+
+import { loginAction } from '@/src/app/actions';
+import { Loader2, Lock, User } from 'lucide-react';
+import { useState } from 'react';
+
+type LoginFormProps = {
+    onSuccess?: () => void;
+    className?: string;
+};
+
+export function LoginForm(props: LoginFormProps) {
+    const { onSuccess, className } = props;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            const formData = new FormData(event.currentTarget);
+            const result = await loginAction(formData);
+
+            if (result.success) {
+                if (onSuccess) {
+                    onSuccess();
+                }
+            } else {
+                setError(result.message || '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="username"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    Username
+                </label>
+                <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                        <User className="w-4 h-4" />
+                    </div>
+                    <input
+                        id="username"
+                        name="username"
+                        type="text"
+                        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 your username"
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <label
+                    htmlFor="password"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    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="password"
+                        name="password"
+                        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 your password"
+                    />
+                </div>
+            </div>
+
+            {error && (
+                <div className="p-3 text-sm text-red-500 bg-red-50 border border-red-200 rounded-md">
+                    {error}
+                </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" />
+                        Logging in...
+                    </>
+                ) : (
+                    'Log in'
+                )}
+            </button>
+        </form>
+    );
+}

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

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import { ErrorPage } from '../ErrorPage/ErrorPage';
+
+export function NotFoundPage() {
+    return (
+        <ErrorPage title="404 Not Found" message="The page you are looking for does not exist.">
+            <div className="flex justify-center">
+                <Link
+                    href="/"
+                    className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                >
+                    Go Home
+                </Link>
+            </div>
+        </ErrorPage>
+    );
+}

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

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+type User = {
+    id: number;
+    username: string;
+    createdAt: string;
+    updatedAt: string;
+    isAdmin: boolean;
+};
+
+export function UsersList() {
+    const [users, setUsers] = useState<User[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [newUsername, setNewUsername] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [newIsAdmin, setNewIsAdmin] = useState(false);
+
+    const fetchUsers = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/users');
+            if (!response.ok) {
+                if (response.status === 401) {
+                     // Not authorized, maybe session expired
+                     return;
+                }
+                throw new Error('Failed to fetch users');
+            }
+            const data = await response.json();
+            setUsers(data);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    const handleCreateUser = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        try {
+            const response = await fetch('/api/users', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    username: newUsername,
+                    password: newPassword,
+                    isAdmin: newIsAdmin,
+                }),
+            });
+
+            if (!response.ok) {
+                 const data = await response.json();
+                 throw new Error(data.error || 'Failed to create user');
+            }
+
+            setNewUsername('');
+            setNewPassword('');
+            setNewIsAdmin(false);
+            fetchUsers();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        }
+    };
+
+    const handleDeleteUser = async (username: string) => {
+        if (!confirm(`Are you sure you want to delete user ${username}?`)) return;
+
+        try {
+            const response = await fetch(`/api/users/${username}`, {
+                method: 'DELETE',
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Failed to delete user');
+            }
+            fetchUsers();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        }
+    };
+
+    const handleToggleAdmin = async (username: string, currentIsAdmin: boolean) => {
+         try {
+            const response = await fetch(`/api/users/${username}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ isAdmin: !currentIsAdmin }),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Failed to update user');
+            }
+            fetchUsers();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        }
+    };
+
+    if (loading) return <div>Loading users...</div>;
+
+    return (
+        <div className="space-y-6">
+            <h2 className="text-3xl text-gray-900 mt-16 mb-4">Users ({users.length})</h2>
+            
+            {error && <div className="bg-red-100 text-red-700 p-3 rounded">{error}</div>}
+
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                {users.map((user) => (
+                    <div key={user.id} className="block p-6 bg-white rounded-lg shadow-md border border-gray-200">
+                        <div className="flex justify-between items-start">
+                            <div>
+                                <h3 className="text-xl font-semibold text-gray-900">{user.username}</h3>
+                                {user.isAdmin && <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mt-1">Admin</span>}
+                                <p className="text-gray-500 text-sm mt-2">Created: {new Date(user.createdAt).toLocaleDateString()}</p>
+                            </div>
+                            <div className="space-x-2">
+                                <button 
+                                    onClick={() => handleToggleAdmin(user.username, user.isAdmin)}
+                                    className="text-sm text-blue-600 hover:text-blue-800"
+                                >
+                                    {user.isAdmin ? 'Remove Admin' : 'Make Admin'}
+                                </button>
+                                <button 
+                                    onClick={() => handleDeleteUser(user.username)}
+                                    className="text-sm text-red-600 hover:text-red-800"
+                                >
+                                    Delete
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+                
+                {/* Create User Form */}
+                <div className="block p-6 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                    <h3 className="text-lg font-semibold text-gray-700 mb-4">Add New User</h3>
+                    <form onSubmit={handleCreateUser} className="space-y-3">
+                        <div>
+                            <input
+                                type="text"
+                                placeholder="Username"
+                                value={newUsername}
+                                onChange={(e) => setNewUsername(e.target.value)}
+                                className="w-full p-2 border border-gray-300 rounded"
+                                required
+                            />
+                        </div>
+                        <div>
+                            <input
+                                type="password"
+                                placeholder="Password"
+                                value={newPassword}
+                                onChange={(e) => setNewPassword(e.target.value)}
+                                className="w-full p-2 border border-gray-300 rounded"
+                                required
+                            />
+                        </div>
+                        <div className="flex items-center">
+                            <input
+                                type="checkbox"
+                                id="newIsAdmin"
+                                checked={newIsAdmin}
+                                onChange={(e) => setNewIsAdmin(e.target.checked)}
+                                className="mr-2"
+                            />
+                            <label htmlFor="newIsAdmin" className="text-gray-700">Is Admin</label>
+                        </div>
+                        <button 
+                            type="submit"
+                            className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 transition-colors"
+                        >
+                            Create User
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,60 @@
+import {
+    NEXT_PUBLIC_VERCEL_BRANCH_URL,
+    NEXT_PUBLIC_VERCEL_ENV,
+    NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_LOGIN,
+    NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_NAME,
+    NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE,
+    NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF,
+    NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,
+    NEXT_PUBLIC_VERCEL_GIT_PREVIOUS_SHA,
+    NEXT_PUBLIC_VERCEL_GIT_PROVIDER,
+    NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID,
+    NEXT_PUBLIC_VERCEL_GIT_REPO_ID,
+    NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER,
+    NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG,
+    NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL,
+    NEXT_PUBLIC_VERCEL_TARGET_ENV,
+    NEXT_PUBLIC_VERCEL_URL,
+} from '@/config';
+import Link from 'next/link';
+
+/**
+ * [♐️] Expose Vercel environment variables to indentify the deployment
+ */
+export default function VercelDeploymentCard() {
+    return (
+        <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-4">Vercel Deployment</h2>
+
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_ENV: {NEXT_PUBLIC_VERCEL_ENV}</p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_TARGET_ENV: {NEXT_PUBLIC_VERCEL_TARGET_ENV}</p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_URL: {NEXT_PUBLIC_VERCEL_URL}</p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_BRANCH_URL: {NEXT_PUBLIC_VERCEL_BRANCH_URL}</p>
+            <p className="text-gray-600">
+                NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL: {NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}
+            </p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_GIT_PROVIDER: {NEXT_PUBLIC_VERCEL_GIT_PROVIDER}</p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER: {NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER}</p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG: {NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG}</p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_GIT_REPO_ID: {NEXT_PUBLIC_VERCEL_GIT_REPO_ID}</p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA: {NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA}</p>
+            <p className="text-gray-600">
+                NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE: {NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE}
+            </p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF: {NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF}</p>
+            <p className="text-gray-600">
+                NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_NAME: {NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_NAME}
+            </p>
+            <p className="text-gray-600">
+                NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_LOGIN: {NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_LOGIN}
+            </p>
+            <p className="text-gray-600">NEXT_PUBLIC_VERCEL_GIT_PREVIOUS_SHA: {NEXT_PUBLIC_VERCEL_GIT_PREVIOUS_SHA}</p>
+            <p className="text-gray-600">
+                NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID: {NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID}
+            </p>
+        </Link>
+    );
+}

package/apps/agents-server/src/database/$getTableName.ts

@@ -0,0 +1,18 @@
+import { $provideServer } from '../tools/$provideServer';
+import { AgentsServerDatabase } from './schema';
+
+/**
+ * Type representing the non-prefixed table names in the AgentsServerDatabase public schema
+ */
+type string_table_name = keyof AgentsServerDatabase['public']['Tables'];
+
+/**
+ * Get the Supabase table name with prefix if it is configured
+ *
+ * @param tableName - The original table name
+ * @returns The prefixed table name
+ */
+export async function $getTableName<TTable extends string_table_name>(tableName: TTable): Promise<TTable> {
+    const { tablePrefix } = await $provideServer();
+    return `${tablePrefix}${tableName}` as TTable;
+}

package/apps/agents-server/src/database/$provideSupabase.ts

@@ -1,9 +1,9 @@
-import type { AgentsDatabaseSchema } from '@promptbook-local/types';
 import { $isRunningInBrowser, $isRunningInNode, $isRunningInWebWorker } from '@promptbook-local/utils';
 import type { SupabaseClient } from '@supabase/supabase-js';
 import { $provideSupabaseForBrowser } from './$provideSupabaseForBrowser';
 import { $provideSupabaseForServer } from './$provideSupabaseForServer';
 import { $provideSupabaseForWorker } from './$provideSupabaseForWorker';
+import { AgentsServerDatabase } from './schema';
 
 /**
  * Get supabase client in any environment
@@ -12,7 +12,7 @@ import { $provideSupabaseForWorker } from './$provideSupabaseForWorker';
  *
  * @returns instance of supabase client
  */
-export function $provideSupabase(): SupabaseClient<AgentsDatabaseSchema> {
+export function $provideSupabase(): SupabaseClient<AgentsServerDatabase> {
     if ($isRunningInNode()) {
         return $provideSupabaseForServer();
     } else if ($isRunningInBrowser()) {

package/apps/agents-server/src/database/$provideSupabaseForServer.ts

@@ -1,6 +1,6 @@
-import { AgentsDatabaseSchema } from '@promptbook-local/types';
 import { $isRunningInNode } from '@promptbook-local/utils';
 import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import { AgentsServerDatabase } from './schema';
 
 /**
  * Internal cache for `$provideSupabaseForServer`
@@ -8,7 +8,7 @@ import { createClient, SupabaseClient } from '@supabase/supabase-js';
  * @private
  * @singleton
  */
-let supabase: SupabaseClient<AgentsDatabaseSchema>;
+let supabase: SupabaseClient<AgentsServerDatabase>;
 
 /**
  * Get supabase client
@@ -27,7 +27,7 @@ export function $provideSupabaseForServer(): typeof supabase {
 
     if (!supabase) {
         // Create a single supabase client for interacting with your database
-        supabase = createClient<AgentsDatabaseSchema>(
+        supabase = createClient<AgentsServerDatabase>(
             process.env.NEXT_PUBLIC_SUPABASE_URL!,
             process.env.SUPABASE_SERVICE_ROLE_KEY!,
             {

package/apps/agents-server/src/database/getMetadata.ts

@@ -0,0 +1,31 @@
+import { $getTableName } from './$getTableName';
+import { $provideSupabase } from './$provideSupabase';
+import { metadataDefaults } from './metadataDefaults';
+
+/**
+ * Get metadata value by key
+ *
+ * @param key - The key of the metadata
+ * @returns The value of the metadata or default value if not found
+ */
+export async function getMetadata(key: string): Promise<string | null> {
+    const supabase = $provideSupabase();
+    const table = await $getTableName('Metadata');
+
+    const { data } = await supabase
+        .from(table)
+        .select('value')
+        .eq('key', key)
+        .single();
+
+    if (data) {
+        return data.value;
+    }
+
+    const defaultValue = metadataDefaults.find((m) => m.key === key);
+    if (defaultValue) {
+        return defaultValue.value;
+    }
+
+    return null;
+}

package/apps/agents-server/src/database/metadataDefaults.ts

@@ -0,0 +1,37 @@
+export const metadataDefaults = [
+    {
+        key: 'SERVER_NAME',
+        value: 'Promptbook Agents Server',
+        note: 'The name of the server displayed in the heading bar',
+    },
+    {
+        key: 'SERVER_DESCRIPTION',
+        value: 'Agents server powered by Promptbook',
+        note: 'The description of the server displayed in the search engine results',
+    },
+    {
+        key: 'SERVER_URL',
+        value: 'https://ptbk.io',
+        note: 'The URL of the server',
+    },
+    {
+        key: 'SERVER_LOGO_URL',
+        value: '',
+        note: 'The URL of the logo displayed in the heading bar',
+    },
+    {
+        key: 'SERVER_FAVICON_URL',
+        value: '',
+        note: 'The URL of the favicon',
+    },
+    {
+        key: 'RESTRICT_IP',
+        value: '',
+        note: 'Comma separated list of allowed IPs or CIDR ranges. If set, only clients from these IPs are allowed to access the server.',
+    },
+    {
+        key: 'FEDERATED_SERVERS',
+        value: '',
+        note: 'Comma separated list of federated servers URLs. The server will look to all federated servers and list their agents.',
+    },
+] as const;