@promptbook/cli 0.104.0-0 → 0.104.0-10

package/apps/agents-server/src/components/Homepage/AgentsList.tsx

@@ -1,46 +1,124 @@
 // Client Component for rendering and deleting agents
 'use client';
 
-import React, { useState } from 'react';
 import { TrashIcon } from 'lucide-react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { AddAgentButton } from '../../app/AddAgentButton';
 import { AgentCard } from './AgentCard';
 import { Section } from './Section';
 
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
 
+type AgentWithVisibility = AgentBasicInformation & {
+    visibility?: 'PUBLIC' | 'PRIVATE';
+};
+
 type AgentsListProps = {
-    agents: AgentBasicInformation[];
-    isAdmin: boolean;
+    /**
+     * @@@
+     */
+    readonly agents: AgentWithVisibility[];
+
+    /**
+     * @@@
+     */
+    readonly isAdmin: boolean;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
 };
 
-export function AgentsList({ agents: initialAgents, isAdmin }: AgentsListProps) {
+export function AgentsList(props: AgentsListProps) {
+    const { agents: initialAgents, isAdmin, publicUrl } = props;
+    const router = useRouter();
     const [agents, setAgents] = useState(Array.from(initialAgents));
 
-    const handleDelete = async (agentName: string) => {
-        if (!window.confirm(`Delete agent "${agentName}"? It will be moved to Recycle Bin.`)) return;
-        await fetch(`/api/agents/${encodeURIComponent(agentName)}`, { method: 'DELETE' });
-        setAgents(agents.filter((a) => a.agentName !== agentName));
+    const handleDelete = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+        if (!window.confirm(`Delete agent "${agent.agentName}"? It will be moved to Recycle Bin.`)) return;
+
+        try {
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}`, { method: 'DELETE' });
+            if (response.ok) {
+                // Update local state immediately
+                setAgents(agents.filter((a) => a.permanentId !== agent.permanentId && a.agentName !== agent.agentName));
+                // Note: router.refresh() is not needed here as the local state update is sufficient
+                // and prevents the brief empty list issue during refresh
+            } else {
+                alert('Failed to delete agent');
+            }
+        } catch (error) {
+            alert('Failed to delete agent');
+        }
     };
 
-    const handleClone = async (agentName: string) => {
-        if (!window.confirm(`Clone agent "${agentName}"?`)) return;
-        const response = await fetch(`/api/agents/${encodeURIComponent(agentName)}/clone`, { method: 'POST' });
-        const newAgent = await response.json();
-        setAgents([...agents, newAgent]);
+    const handleClone = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+        if (!window.confirm(`Clone agent "${agent.agentName}"?`)) return;
+
+        try {
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}/clone`, {
+                method: 'POST',
+            });
+            if (response.ok) {
+                const newAgent = await response.json();
+                setAgents([...agents, newAgent]);
+                router.refresh(); // Refresh server data to ensure consistency
+            } else {
+                alert('Failed to clone agent');
+            }
+        } catch (error) {
+            alert('Failed to clone agent');
+        }
+    };
+
+    const handleToggleVisibility = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+
+        const newVisibility = agent.visibility === 'PUBLIC' ? 'PRIVATE' : 'PUBLIC';
+        if (!window.confirm(`Make agent "${agent.agentName}" ${newVisibility.toLowerCase()}?`)) return;
+
+        const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ visibility: newVisibility }),
+        });
+
+        if (response.ok) {
+            // Update the local state
+            setAgents(
+                agents.map((a) =>
+                    a.permanentId === agent.permanentId || a.agentName === agent.agentName
+                        ? { ...a, visibility: newVisibility }
+                        : a,
+                ),
+            );
+            router.refresh(); // Refresh server data to ensure consistency
+        } else {
+            alert('Failed to update agent visibility');
+        }
     };
 
     return (
         <Section title={`Agents (${agents.length})`}>
             {agents.map((agent) => (
                 <AgentCard
-                    key={agent.agentName}
+                    key={agent.permanentId || agent.agentName}
                     agent={agent}
-                    href={`/${agent.agentName}`}
+                    publicUrl={publicUrl}
+                    href={`/agents/${encodeURIComponent(agent.permanentId || agent.agentName)}`}
                     isAdmin={isAdmin}
                     onDelete={handleDelete}
                     onClone={handleClone}
+                    onToggleVisibility={handleToggleVisibility}
+                    visibility={agent.visibility}
                 />
             ))}
             {isAdmin && <AddAgentButton />}

package/apps/agents-server/src/components/Homepage/DeletedAgentsList.tsx

@@ -0,0 +1,66 @@
+// Client Component for rendering deleted agents
+'use client';
+
+import { useState } from 'react';
+import { AgentCard } from './AgentCard';
+
+import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+
+type DeletedAgentsListProps = {
+    /**
+     * @@@
+     */
+    readonly agents: readonly AgentBasicInformation[];
+
+    /**
+     * @@@
+     */
+    readonly isAdmin: boolean;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+};
+
+export function DeletedAgentsList(props: DeletedAgentsListProps) {
+    const { agents: initialAgents, isAdmin, publicUrl } = props;
+    const [agents, setAgents] = useState(Array.from(initialAgents));
+
+    const handleRestore = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+        if (!window.confirm(`Restore agent "${agent.agentName}"?`)) return;
+
+        try {
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}/restore`, {
+                method: 'POST',
+            });
+            if (response.ok) {
+                // Update local state immediately
+                setAgents(agents.filter((a) => a.permanentId !== agent.permanentId && a.agentName !== agent.agentName));
+                // Note: router.refresh() is not needed here as the local state update is sufficient
+                // and prevents the brief empty list issue during refresh
+            } else {
+                alert('Failed to restore agent');
+            }
+        } catch (error) {
+            alert('Failed to restore agent');
+        }
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {agents.map((agent) => (
+                <AgentCard
+                    key={agent.permanentId || agent.agentName}
+                    agent={agent}
+                    publicUrl={publicUrl}
+                    href={`/agents/${encodeURIComponent(agent.permanentId || agent.agentName)}`}
+                    isAdmin={isAdmin}
+                    onRestore={handleRestore}
+                />
+            ))}
+        </div>
+    );
+}

package/apps/agents-server/src/components/Homepage/ExternalAgentsSection.tsx

@@ -3,16 +3,25 @@ import { AgentCard } from './AgentCard';
 import { Section } from './Section';
 
 type ExternalAgentsSectionProps = {
-    agentsByServer: AgentsByServer[];
+    /**
+     * @@@
+     */
+    readonly agentsByServer: AgentsByServer[];
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
 };
 
-export function ExternalAgentsSection({ agentsByServer }: ExternalAgentsSectionProps) {
+export function ExternalAgentsSection(props: ExternalAgentsSectionProps) {
+    const { agentsByServer, publicUrl } = props;
     return (
         <>
             {agentsByServer.map(({ serverUrl, agents }) => (
                 <Section key={serverUrl} title={`Agents from ${new URL(serverUrl).hostname} (${agents.length})`}>
                     {agents.map((agent) => (
-                        <AgentCard key={agent.url} agent={agent} href={agent.url} />
+                        <AgentCard key={agent.url} agent={agent} href={agent.url} publicUrl={publicUrl} />
                     ))}
                 </Section>
             ))}

package/apps/agents-server/src/components/Homepage/ExternalAgentsSectionClient.tsx

@@ -15,7 +15,15 @@ type ServerState = {
     error?: string;
 };
 
-export function ExternalAgentsSectionClient() {
+type ExternalAgentsSectionClientProps = {
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+};
+
+export function ExternalAgentsSectionClient(props: ExternalAgentsSectionClientProps) {
+    const { publicUrl } = props;
     const [servers, setServers] = useState<Record<string, ServerState>>({});
     const [initialLoading, setInitialLoading] = useState(true);
 
@@ -26,24 +34,23 @@ export function ExternalAgentsSectionClient() {
             try {
                 const response = await fetch('/api/federated-agents');
                 if (!response.ok) throw new Error('Failed to fetch federated servers');
-                
+
                 const data: FederatedServersResponse = await response.json();
-                
+
                 if (isCancelled) return;
 
                 const initialServerState: Record<string, ServerState> = {};
-                data.federatedServers.forEach(serverUrl => {
+                data.federatedServers.forEach((serverUrl) => {
                     initialServerState[serverUrl] = { status: 'loading', agents: [] };
                 });
-                
+
                 setServers(initialServerState);
                 setInitialLoading(false);
 
                 // Fetch agents for each server independently
-                data.federatedServers.forEach(serverUrl => {
+                data.federatedServers.forEach((serverUrl) => {
                     fetchAgentsForServer(serverUrl);
                 });
-
             } catch (error) {
                 console.error('Failed to load federated servers list', error);
                 if (!isCancelled) setInitialLoading(false);
@@ -80,7 +87,9 @@ export function ExternalAgentsSectionClient() {
                     const response = await fetch(proxyUrl);
 
                     if (!response.ok) {
-                        throw new Error(`Failed to fetch agents from ${serverUrl} via proxy (Status: ${response.status})`);
+                        throw new Error(
+                            `Failed to fetch agents from ${serverUrl} via proxy (Status: ${response.status})`,
+                        );
                     }
 
                     const data = await response.json();
@@ -134,7 +143,7 @@ export function ExternalAgentsSectionClient() {
 
     return (
         <>
-            {serverUrls.map(serverUrl => {
+            {serverUrls.map((serverUrl) => {
                 const state = servers[serverUrl];
                 const hostname = (() => {
                     try {
@@ -169,7 +178,7 @@ export function ExternalAgentsSectionClient() {
                     return (
                         <Section key={serverUrl} title={`Agents from ${hostname} (${state.agents.length})`}>
                             {state.agents.map((agent) => (
-                                <AgentCard key={agent.url} agent={agent} href={agent.url} />
+                                <AgentCard key={agent.url} agent={agent} href={agent.url} publicUrl={publicUrl} />
                             ))}
                         </Section>
                     );

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

@@ -2,6 +2,7 @@
 
 import { usePathname, useSearchParams } from 'next/navigation';
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+import { MenuHoistingProvider } from '../../../../../src/book-components/_common/MenuHoisting/MenuHoistingContext';
 import type { UserInfo } from '../../utils/getCurrentUser';
 import { Footer, type FooterLink } from '../Footer/Footer';
 import { Header } from '../Header/Header';
@@ -41,7 +42,7 @@ export function LayoutWrapper({
     }
 
     return (
-        <>
+        <MenuHoistingProvider>
             <Header
                 isAdmin={isAdmin}
                 currentUser={currentUser}
@@ -52,6 +53,6 @@ export function LayoutWrapper({
             />
             <main className={`pt-[60px]`}>{children}</main>
             {isFooterShown && !isFooterHiddenOnPage && <Footer extraLinks={footerLinks} />}
-        </>
+        </MenuHoistingProvider>
     );
 }

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

@@ -1,8 +1,10 @@
 'use client';
 
 import { loginAction } from '@/src/app/actions';
+import { ForgottenPasswordDialog } from '../ForgottenPasswordDialog/ForgottenPasswordDialog';
+import { RegisterUserDialog } from '../RegisterUserDialog/RegisterUserDialog';
 import { Loader2, Lock, User } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type LoginFormProps = {
     onSuccess?: () => void;
@@ -13,6 +15,24 @@ export function LoginForm(props: LoginFormProps) {
     const { onSuccess, className } = props;
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [adminEmail, setAdminEmail] = useState<string>('support@ptbk.io');
+    const [isForgottenPasswordOpen, setIsForgottenPasswordOpen] = useState(false);
+    const [isRegisterUserOpen, setIsRegisterUserOpen] = useState(false);
+
+    useEffect(() => {
+        // Fetch admin email on component mount
+        fetch('/api/admin-email')
+            .then(response => response.json())
+            .then(data => {
+                if (data.adminEmail) {
+                    setAdminEmail(data.adminEmail);
+                }
+            })
+            .catch(error => {
+                console.error('Failed to fetch admin email:', error);
+                // Keep default value
+            });
+    }, []);
 
     const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -104,6 +124,35 @@ export function LoginForm(props: LoginFormProps) {
                     'Log in'
                 )}
             </button>
+
+            <div className="flex justify-between text-sm">
+                <button
+                    type="button"
+                    onClick={() => setIsForgottenPasswordOpen(true)}
+                    className="text-promptbook-blue hover:text-promptbook-blue-dark underline focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:ring-offset-2 rounded-sm"
+                >
+                    Forgotten password?
+                </button>
+                <button
+                    type="button"
+                    onClick={() => setIsRegisterUserOpen(true)}
+                    className="text-promptbook-blue hover:text-promptbook-blue-dark underline focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:ring-offset-2 rounded-sm"
+                >
+                    Register new user
+                </button>
+            </div>
+
+            <ForgottenPasswordDialog
+                isOpen={isForgottenPasswordOpen}
+                onClose={() => setIsForgottenPasswordOpen(false)}
+                adminEmail={adminEmail}
+            />
+
+            <RegisterUserDialog
+                isOpen={isRegisterUserOpen}
+                onClose={() => setIsRegisterUserOpen(false)}
+                adminEmail={adminEmail}
+            />
         </form>
     );
 }

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

@@ -0,0 +1,88 @@
+'use client';
+
+import { string_book } from '@promptbook-local/types';
+import { X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { BookEditor } from '../../../../../src/book-components/BookEditor/BookEditor';
+import { Portal } from '../Portal/Portal';
+
+type NewAgentDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    initialAgentSource: string_book;
+    onCreate: (agentSource: string_book) => Promise<void>;
+};
+
+export function NewAgentDialog(props: NewAgentDialogProps) {
+    const { isOpen, onClose, initialAgentSource, onCreate } = props;
+    const [agentSource, setAgentSource] = useState(initialAgentSource);
+    const [isCreating, setIsCreating] = useState(false);
+
+    useEffect(() => {
+        setAgentSource(initialAgentSource);
+    }, [initialAgentSource]);
+
+    if (!isOpen) {
+        return null;
+    }
+
+    const handleCreate = async () => {
+        setIsCreating(true);
+        try {
+            await onCreate(agentSource);
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    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-4xl h-[80vh] bg-white rounded-lg shadow-lg border border-gray-200 flex flex-col animate-in zoom-in-95 duration-200">
+                    <div className="flex items-center justify-between p-4 border-b border-gray-200">
+                        <h2 className="text-xl font-semibold text-gray-900">Create New Agent</h2>
+                        <button
+                            onClick={onClose}
+                            className="text-gray-400 hover:text-gray-500 transition-colors"
+                        >
+                            <X className="w-5 h-5" />
+                            <span className="sr-only">Close</span>
+                        </button>
+                    </div>
+
+                    <div className="flex-1 overflow-hidden p-4">
+                        <BookEditor
+                            agentSource={agentSource}
+                            onChange={(source) => setAgentSource(source)}
+                            height="100%"
+                            isVerbose={false}
+                        />
+                    </div>
+
+                    <div className="flex items-center justify-end gap-3 p-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
+                        <button
+                            onClick={onClose}
+                            className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            onClick={handleCreate}
+                            disabled={isCreating}
+                            className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                        >
+                            {isCreating ? (
+                                <>
+                                    <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                                    Creating...
+                                </>
+                            ) : (
+                                'Create Agent'
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Portal>
+    );
+}

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

@@ -1,15 +1,20 @@
+import { HomeIcon } from 'lucide-react';
 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.">
+        <ErrorPage
+            title="Agent Not Found :("
+            message="The agent you are looking for does not exist, but you can create your own!"
+        >
             <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
+                    <HomeIcon className="inline w-5 h-5 mr-2" />
+                    Home
                 </Link>
             </div>
         </ErrorPage>

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

@@ -1,19 +1,28 @@
+import { string_char_emoji } from '@promptbook-local/types';
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 type OpenMojiIconProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    icon: string;
+    /**
+     * The OpenMoji character to display
+     */
+    icon: string_char_emoji | string;
+
+    /**
+     * @default 'black'
+     */
+    variant?: 'black' | 'color';
 };
 
 /**
  * Renders an emoji using the OpenMoji black and white font
  */
-export function OpenMojiIcon({ icon, className, style, ...rest }: OpenMojiIconProps) {
+export function OpenMojiIcon(props: OpenMojiIconProps) {
+    const { icon, variant = 'black', className, style, ...rest } = props;
+
+    const fontFamily = variant === 'black' ? '"OpenMojiBlack", sans-serif' : '"OpenMojiColor", sans-serif';
+
     return (
-        <span
-            className={className}
-            style={{ ...style, fontFamily: '"OpenMojiBlack", sans-serif' }}
-            {...rest}
-        >
+        <span className={className} style={{ ...style, fontFamily }} {...rest}>
             {icon}
         </span>
     );

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

@@ -1,16 +1,16 @@
 export function PrintHeader({ title }: { title?: string }) {
     return (
-        <div className="hidden print:block mb-8 border-b-2 border-blue-600 pb-4">
+        <div className="hidden print:block mb-6 border-b-2 border-blue-600 pb-2">
             <div className="flex justify-between items-end">
                 <div>
-                    <h1 className="text-3xl font-bold text-gray-900 font-poppins">Agents Server</h1>
+                    <h1 className="text-2xl 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>}
+                {title && <h2 className="text-lg font-semibold text-gray-700">{title}</h2>}
             </div>
-            <div className="text-xs text-gray-400 mt-2 text-right">
+            <div className="text-xs text-gray-400 mt-1 text-right">
                 {new Date().toLocaleDateString()}
             </div>
         </div>

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { Portal } from '../Portal/Portal';
+
+type RegisterUserDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    adminEmail: string;
+};
+
+export function RegisterUserDialog(props: RegisterUserDialogProps) {
+    const { isOpen, onClose, adminEmail } = 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">Register New User</h2>
+                        <p className="text-sm text-gray-500 mt-1">Create a new user account</p>
+                    </div>
+
+                    <div className="space-y-4">
+                        <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
+                            <p className="text-sm text-blue-800">
+                                This Promptbook server has no email capability. Please contact the administrator at{' '}
+                                <a
+                                    href={`mailto:${adminEmail}`}
+                                    className="font-medium text-blue-900 underline hover:text-blue-800"
+                                >
+                                    {adminEmail}
+                                </a>{' '}
+                                to register new user.
+                            </p>
+                        </div>
+
+                        <button
+                            onClick={onClose}
+                            className="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-gray-100 text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                        >
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Portal>
+    );
+}

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

@@ -1,4 +1,5 @@
 import {
+    NEXT_PUBLIC_SITE_URL,
     NEXT_PUBLIC_VERCEL_BRANCH_URL,
     NEXT_PUBLIC_VERCEL_ENV,
     NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_LOGIN,
@@ -24,6 +25,7 @@ import { TechInfoCard } from '../Homepage/TechInfoCard';
 export default function VercelDeploymentCard() {
     return (
         <TechInfoCard title="Vercel Deployment">
+            <p className="text-gray-600">NEXT_PUBLIC_SITE_URL: {NEXT_PUBLIC_SITE_URL?.href || 'undefined'}</p>
             <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>