@promptbook/cli 0.103.0-10 → 0.103.0-100

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

@@ -0,0 +1,38 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+type PortalProps = {
+    children: ReactNode;
+    /**
+     * Optional container id. Defaults to "portal-root".
+     * This allows reusing the Portal component for different layers if needed.
+     */
+    containerId?: string;
+};
+
+/**
+ * Generic portal component that renders children into a DOM node
+ * outside of the normal React tree (by default #portal-root).
+ *
+ * This is useful for modals/popups that should visually overlay the
+ * whole app, independent of where the triggering component lives.
+ */
+export function Portal(props: PortalProps) {
+    const { children, containerId = 'portal-root' } = props;
+    const [container, setContainer] = useState<Element | null>(null);
+
+    useEffect(() => {
+        const element = document.getElementById(containerId);
+        setContainer(element);
+    }, [containerId]);
+
+    if (!container) {
+        // In SSR or before the DOM node exists, render nothing.
+        return null;
+    }
+
+    return createPortal(children, container);
+}

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

@@ -0,0 +1,18 @@
+'use client';
+
+import { OpenMojiIcon } from '../OpenMojiIcon/OpenMojiIcon';
+
+export function PrintButton() {
+    return (
+        <button
+            onClick={() => window.print()}
+            className="fixed bottom-8 right-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 shadow-lg transition-all hover:scale-105 print:hidden z-50 flex items-center justify-center gap-2 group"
+            title="Print documentation"
+        >
+            <OpenMojiIcon icon="🖨️" className="text-2xl" />
+            <span className="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-300 ease-in-out whitespace-nowrap">
+                Print
+            </span>
+        </button>
+    );
+}

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

@@ -0,0 +1,18 @@
+export function PrintHeader({ title }: { title?: string }) {
+    return (
+        <div className="hidden print:block mb-8 border-b-2 border-blue-600 pb-4">
+            <div className="flex justify-between items-end">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900 font-poppins">Agents Server</h1>
+                    <div className="text-sm text-gray-500 mt-1 flex items-center gap-1">
+                        Powered by <span className="font-semibold text-blue-600">Promptbook</span>
+                    </div>
+                </div>
+                {title && <h2 className="text-xl font-semibold text-gray-700">{title}</h2>}
+            </div>
+            <div className="text-xs text-gray-400 mt-2 text-right">
+                {new Date().toLocaleDateString()}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,141 @@
+'use client';
+
+import { FormEvent, useState } from 'react';
+import { Card } from '../Homepage/Card';
+import { Section } from '../Homepage/Section';
+import { useUsersAdmin } from './useUsersAdmin';
+
+type UsersListProps = {
+    /**
+     * Whether the UI should allow creating new users.
+     *
+     * On the main `/` page this should be `false` so that users
+     * can only be created from the `/admin/users` page.
+     */
+    allowCreate?: boolean;
+};
+
+export function UsersList({ allowCreate = true }: UsersListProps) {
+    const { users, loading, error, createUser, deleteUser, toggleAdmin } = useUsersAdmin();
+
+    const [newUsername, setNewUsername] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [newIsAdmin, setNewIsAdmin] = useState(false);
+
+    const handleCreateUser = async (e: FormEvent) => {
+        e.preventDefault();
+
+        try {
+            await createUser({
+                username: newUsername,
+                password: newPassword,
+                isAdmin: newIsAdmin,
+            });
+
+            setNewUsername('');
+            setNewPassword('');
+            setNewIsAdmin(false);
+        } catch {
+            // Error is already handled and exposed via `error` state from the hook
+        }
+    };
+
+    const handleDeleteUser = async (username: string) => {
+        await deleteUser(username);
+    };
+
+    const handleToggleAdmin = async (username: string, currentIsAdmin: boolean) => {
+        await toggleAdmin(username, currentIsAdmin);
+    };
+
+    if (loading) return <div>Loading users...</div>;
+
+    return (
+        <div className="space-y-6">
+            {error && <div className="bg-red-100 text-red-700 p-3 rounded">{error}</div>}
+
+            <Section title={`Users (${users.length})`}>
+                {users.map((user) => (
+                    <Card key={user.id}>
+                        <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>
+                    </Card>
+                ))}
+
+                {allowCreate && (
+                    <div
+                        id="create-user"
+                        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>
+                )}
+            </Section>
+        </div>
+    );
+}

package/apps/agents-server/src/components/UsersList/useUsersAdmin.ts

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type AdminUser = {
+    id: number;
+    username: string;
+    createdAt: string;
+    updatedAt: string;
+    isAdmin: boolean;
+};
+
+type CreateUserPayload = {
+    username: string;
+    password: string;
+    isAdmin: boolean;
+};
+
+/**
+ * Admin users management hook
+ *
+ * Centralizes fetching and mutating users so it can be reused
+ * from multiple places (homepage, admin pages, header menu, etc.).
+ */
+export function useUsersAdmin() {
+    const [users, setUsers] = useState<AdminUser[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchUsers = useCallback(async () => {
+        try {
+            setLoading(true);
+            setError(null);
+
+            const response = await fetch('/api/users');
+            if (!response.ok) {
+                if (response.status === 401) {
+                    // Not authorized, maybe session expired or non-admin user
+                    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();
+    }, [fetchUsers]);
+
+    const createUser = useCallback(
+        async ({ username, password, isAdmin }: CreateUserPayload) => {
+            setError(null);
+
+            try {
+                const response = await fetch('/api/users', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        username,
+                        password,
+                        isAdmin,
+                    }),
+                });
+
+                if (!response.ok) {
+                    const data = await response.json().catch(() => ({}));
+                    throw new Error(data.error || 'Failed to create user');
+                }
+
+                await fetchUsers();
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'An error occurred');
+                throw err;
+            }
+        },
+        [fetchUsers],
+    );
+
+    const deleteUser = useCallback(
+        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().catch(() => ({}));
+                    throw new Error(data.error || 'Failed to delete user');
+                }
+
+                await fetchUsers();
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'An error occurred');
+                throw err;
+            }
+        },
+        [fetchUsers],
+    );
+
+    const toggleAdmin = useCallback(
+        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().catch(() => ({}));
+                    throw new Error(data.error || 'Failed to update user');
+                }
+
+                await fetchUsers();
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'An error occurred');
+                throw err;
+            }
+        },
+        [fetchUsers],
+    );
+
+    return {
+        users,
+        loading,
+        error,
+        fetchUsers,
+        createUser,
+        deleteUser,
+        toggleAdmin,
+    };
+}

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

@@ -0,0 +1,55 @@
+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 { TechInfoCard } from '../Homepage/TechInfoCard';
+
+/**
+ * [♐️] Expose Vercel environment variables to indentify the deployment
+ */
+export default function VercelDeploymentCard() {
+    return (
+        <TechInfoCard title="Vercel Deployment">
+            <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>
+        </TechInfoCard>
+    );
+}

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

@@ -0,0 +1,29 @@
+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
+ *
+ * Note: The client is cached, so it's safe to call this function multiple times
+ *
+ * @returns instance of supabase client
+ */
+export function $provideSupabase(): SupabaseClient<AgentsServerDatabase> {
+    if ($isRunningInNode()) {
+        return $provideSupabaseForServer();
+    } else if ($isRunningInBrowser()) {
+        return $provideSupabaseForBrowser();
+    } else if ($isRunningInWebWorker()) {
+        return $provideSupabaseForWorker();
+    } else {
+        throw new Error('Unknown environment, cannot determine how to get Supabase client');
+    }
+}
+
+/**
+ * Note: [🎇] Promptbook Agents Server is not using Supabase in Browser so maybe remove this file
+ */

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

@@ -0,0 +1,41 @@
+import { AgentsDatabaseSchema } from '@promptbook-local/types';
+import { $isRunningInBrowser } from '@promptbook-local/utils';
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+
+/**
+ * Internal cache for `$provideSupabaseForBrowser`
+ *
+ * @private
+ * @singleton
+ */
+let supabase: SupabaseClient<AgentsDatabaseSchema>;
+
+/**
+ * Get supabase client
+ *
+ * Note: The client is cached, so it's safe to call this function multiple times
+ * Note: This function is available ONLY in browser, use $provideSupabaseForServer in node
+ *
+ * @returns instance of supabase client
+ */
+export function $provideSupabaseForBrowser(): typeof supabase {
+    if (!$isRunningInBrowser()) {
+        throw new Error(
+            'Function `$provideSupabaseForBrowser` can not be used on server or worker, use `$provideSupabaseForServer` or `$provideSupabaseForWorker` instead.',
+        );
+    }
+
+    if (!supabase) {
+        // Create a single supabase client for interacting with your database
+        supabase = createClient<AgentsDatabaseSchema>(
+            process.env.NEXT_PUBLIC_SUPABASE_URL!,
+            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+        );
+    }
+
+    return supabase;
+}
+
+/**
+ * Note: [🎇] Promptbook Agents Server is not using Supabase in Browser so maybe remove this file
+ */

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

@@ -0,0 +1,48 @@
+import { $isRunningInNode } from '@promptbook-local/utils';
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import { AgentsServerDatabase } from './schema';
+
+/**
+ * Internal cache for `$provideSupabaseForServer`
+ *
+ * @private
+ * @singleton
+ */
+let supabase: SupabaseClient<AgentsServerDatabase>;
+
+/**
+ * Get supabase client
+ *
+ * Note: The client is cached, so it's safe to call this function multiple times
+ * Note: This function is available ONLY on server/node, use $provideSupabaseForClient in browser
+ *
+ * @returns instance of supabase client
+ */
+export function $provideSupabaseForServer(): typeof supabase {
+    if (!$isRunningInNode()) {
+        throw new Error(
+            'Function `$provideSupabaseForServer` can not be used in browser, use `$provideSupabaseForBrowser` instead.',
+        );
+    }
+
+    if (!supabase) {
+        // Create a single supabase client for interacting with your database
+        supabase = createClient<AgentsServerDatabase>(
+            process.env.NEXT_PUBLIC_SUPABASE_URL!,
+            process.env.SUPABASE_SERVICE_ROLE_KEY!,
+            {
+                auth: {
+                    autoRefreshToken: false,
+                    persistSession: false,
+                },
+            },
+        );
+    }
+
+    /*
+    // Access auth admin api
+    const adminAuthClient = supabase.auth.admin;
+    */
+
+    return supabase;
+}

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

@@ -0,0 +1,43 @@
+import { AgentsDatabaseSchema } from '@promptbook-local/types';
+import { $isRunningInWebWorker } from '@promptbook-local/utils';
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+
+/**
+ * Internal cache for `$provideSupabaseForWorker`
+ *
+ * @private
+ * @singleton
+ */
+let supabase: SupabaseClient<AgentsDatabaseSchema>;
+
+/**
+ * Get supabase client
+ *
+ * Note: The client is cached, so it's safe to call this function multiple times
+ * Note: This function is available ONLY in worker, use $provideSupabaseForBrowser for main thread
+ *
+ * @returns instance of supabase client
+ */
+export function $provideSupabaseForWorker(): typeof supabase {
+    if (!$isRunningInWebWorker) {
+        throw new Error(
+            'Function `$provideSupabaseForWorker` can not be used in browser, use `$provideSupabaseForBrowser` instead.',
+        );
+    }
+
+    if (!supabase) {
+        // Create a single supabase client for interacting with your database
+        supabase = createClient<AgentsDatabaseSchema>(
+            process.env.NEXT_PUBLIC_SUPABASE_URL!,
+            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+        );
+    }
+
+    return supabase;
+}
+
+/**
+ * Note: [🎇] Promptbook Agents Server is not using Supabase in Browser so maybe remove this file
+ * TODO: Fix> No storage option exists to persist the session, which may result in unexpected behavior when using auth.
+              If you want to set persistSession to true, please provide a storage option or you may set persistSession to false to disable this warning.
+ */

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