@promptbook/cli 0.103.0-51 → 0.103.0-53

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

@@ -0,0 +1,58 @@
+// 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 { AddAgentButton } from '../../app/AddAgentButton';
+import { AgentCard } from './AgentCard';
+import { Section } from './Section';
+
+import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+
+type AgentsListProps = {
+    agents: AgentBasicInformation[];
+    isAdmin: boolean;
+};
+
+export function AgentsList({ agents: initialAgents, isAdmin }: AgentsListProps) {
+    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 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]);
+    };
+
+    return (
+        <Section title={`Agents (${agents.length})`}>
+            {agents.map((agent) => (
+                <AgentCard
+                    key={agent.agentName}
+                    agent={agent}
+                    href={`/${agent.agentName}`}
+                    isAdmin={isAdmin}
+                    onDelete={handleDelete}
+                    onClone={handleClone}
+                />
+            ))}
+            {isAdmin && <AddAgentButton />}
+            {isAdmin && (
+                <Link
+                    href="/recycle-bin"
+                    className="flex items-center gap-2 px-4 py-2 mt-4 text-gray-600 hover:text-red-600 transition-colors"
+                >
+                    <TrashIcon className="w-4 h-4" />
+                    Open Recycle Bin
+                </Link>
+            )}
+        </Section>
+    );
+}

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

@@ -9,7 +9,7 @@ type CardProps = {
 export function Card({ children, className = '', style }: CardProps) {
     return (
         <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 ${className}`}
+            className={`block h-full p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400 ${className}`}
             style={style}
         >
             {children}

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

@@ -0,0 +1,21 @@
+import type { AgentsByServer } from '../../utils/getFederatedAgents';
+import { AgentCard } from './AgentCard';
+import { Section } from './Section';
+
+type ExternalAgentsSectionProps = {
+    agentsByServer: AgentsByServer[];
+};
+
+export function ExternalAgentsSection({ agentsByServer }: ExternalAgentsSectionProps) {
+    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} />
+                    ))}
+                </Section>
+            ))}
+        </>
+    );
+}

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

@@ -0,0 +1,183 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { AgentsByServer } from '../../utils/getFederatedAgents';
+import { AgentCard } from './AgentCard';
+import { Section } from './Section';
+
+type FederatedServersResponse = {
+    federatedServers: string[];
+};
+
+type ServerState = {
+    status: 'loading' | 'success' | 'error';
+    agents: AgentsByServer['agents'];
+    error?: string;
+};
+
+export function ExternalAgentsSectionClient() {
+    const [servers, setServers] = useState<Record<string, ServerState>>({});
+    const [initialLoading, setInitialLoading] = useState(true);
+
+    useEffect(() => {
+        let isCancelled = false;
+
+        const fetchServers = async () => {
+            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 => {
+                    initialServerState[serverUrl] = { status: 'loading', agents: [] };
+                });
+                
+                setServers(initialServerState);
+                setInitialLoading(false);
+
+                // Fetch agents for each server independently
+                data.federatedServers.forEach(serverUrl => {
+                    fetchAgentsForServer(serverUrl);
+                });
+
+            } catch (error) {
+                console.error('Failed to load federated servers list', error);
+                if (!isCancelled) setInitialLoading(false);
+            }
+        };
+
+        const fetchAgentsForServer = async (serverUrl: string) => {
+            const normalizedUrl = serverUrl.replace(/\/$/, '');
+
+            try {
+                // 1. Try direct connection
+                const response = await fetch(`${normalizedUrl}/api/agents`);
+
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch agents from ${serverUrl} (Status: ${response.status})`);
+                }
+
+                const data = await response.json();
+
+                if (isCancelled) return;
+
+                setServers((prev) => ({
+                    ...prev,
+                    [serverUrl]: {
+                        status: 'success',
+                        agents: data.agents || [],
+                    },
+                }));
+            } catch (directError) {
+                // 2. Try proxy through our server
+                try {
+                    // Note: We are using encodeURIComponent to ensure the URL is passed correctly as a parameter
+                    const proxyUrl = `/agents/${encodeURIComponent(normalizedUrl)}/api/agents`;
+                    const response = await fetch(proxyUrl);
+
+                    if (!response.ok) {
+                        throw new Error(`Failed to fetch agents from ${serverUrl} via proxy (Status: ${response.status})`);
+                    }
+
+                    const data = await response.json();
+
+                    if (isCancelled) return;
+
+                    setServers((prev) => ({
+                        ...prev,
+                        [serverUrl]: {
+                            status: 'success',
+                            agents: data.agents || [],
+                        },
+                    }));
+                } catch (proxyError) {
+                    if (isCancelled) return;
+                    console.warn(`Failed to load agents from ${serverUrl} (Direct & Proxy)`, directError, proxyError);
+
+                    setServers((prev) => ({
+                        ...prev,
+                        [serverUrl]: {
+                            status: 'error',
+                            agents: [],
+                            error: proxyError instanceof Error ? proxyError.message : 'Unknown error',
+                        },
+                    }));
+                }
+            }
+        };
+
+        fetchServers();
+
+        return () => {
+            isCancelled = true;
+        };
+    }, []);
+
+    if (initialLoading) {
+        return (
+            <div className="mt-8 flex items-center justify-center py-8 text-sm text-gray-500">
+                <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+                Loading federated agents…
+            </div>
+        );
+    }
+
+    const serverUrls = Object.keys(servers);
+
+    if (serverUrls.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            {serverUrls.map(serverUrl => {
+                const state = servers[serverUrl];
+                const hostname = (() => {
+                    try {
+                        return new URL(serverUrl).hostname;
+                    } catch {
+                        return serverUrl;
+                    }
+                })();
+
+                if (state.status === 'loading') {
+                    return (
+                        <Section key={serverUrl} title={`Agents from ${hostname} (...)`}>
+                            <div className="flex items-center justify-center py-8 text-sm text-gray-500">
+                                <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+                                Loading...
+                            </div>
+                        </Section>
+                    );
+                }
+
+                if (state.status === 'error') {
+                    return (
+                        <Section key={serverUrl} title={`Agents from ${hostname} (Error)`}>
+                            <div className="py-4 text-sm text-red-500 text-center">
+                                Failed to load agents from this server.
+                            </div>
+                        </Section>
+                    );
+                }
+
+                if (state.status === 'success' && state.agents.length > 0) {
+                    return (
+                        <Section key={serverUrl} title={`Agents from ${hostname} (${state.agents.length})`}>
+                            {state.agents.map((agent) => (
+                                <AgentCard key={agent.url} agent={agent} href={agent.url} />
+                            ))}
+                        </Section>
+                    );
+                }
+
+                // Hide sections with no agents if successfully loaded
+                return null;
+            })}
+        </>
+    );
+}

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

@@ -0,0 +1,75 @@
+import Link from 'next/link';
+import React from 'react';
+import { Section } from './Section';
+import { ModelCard } from './ModelCard';
+
+type ModelInfo = {
+    modelName: string;
+    modelTitle?: string;
+    modelDescription?: string;
+};
+
+type ModelsSectionProps = {
+    /**
+     * Full list of models to display.
+     */
+    models: ReadonlyArray<ModelInfo>;
+
+    /**
+     * Optional custom title for the section.
+     * Defaults to `Models (X)` where X is the total number of models.
+     */
+    title?: string;
+
+    /**
+     * Optional maximum number of models to render.
+     * If set and there are more models than this number, only the first `maxVisible`
+     * models are shown.
+     */
+    maxVisible?: number;
+
+    /**
+     * When true and `maxVisible` is set and exceeded, renders a "View all models"
+     * card linking to the admin models page.
+     */
+    showViewAllLink?: boolean;
+};
+
+export function ModelsSection(props: ModelsSectionProps) {
+    const { models, title, maxVisible, showViewAllLink } = props;
+
+    const totalCount = models.length;
+    const visibleModels =
+        typeof maxVisible === 'number'
+            ? models.slice(0, Math.max(0, maxVisible))
+            : models;
+
+    const resolvedTitle = title ?? `Models (${totalCount})`;
+
+    const hasMore =
+        typeof maxVisible === 'number' ? totalCount > maxVisible : false;
+
+    return (
+        <Section title={resolvedTitle}>
+            {visibleModels.map(({ modelName, modelTitle, modelDescription }) => (
+                <ModelCard
+                    key={modelName}
+                    modelName={modelName}
+                    modelTitle={modelTitle || modelName}
+                    modelDescription={modelDescription}
+                />
+            ))}
+
+            {showViewAllLink && hasMore && (
+                <Link href="/admin/models">
+                    <div className="h-full flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 bg-white/60 text-center p-4 hover:border-promptbook-blue-dark hover:bg-white transition-colors cursor-pointer">
+                        <p className="text-sm font-medium text-gray-900">View all models</p>
+                        <p className="text-xs text-gray-500 mt-1">
+                            Showing {visibleModels.length} of {totalCount} models
+                        </p>
+                    </div>
+                </Link>
+            )}
+        </Section>
+    );
+}

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

@@ -1,18 +1,36 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
+import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+import type { UserInfo } from '../../utils/getCurrentUser';
+import { Footer, type FooterLink } from '../Footer/Footer';
 import { Header } from '../Header/Header';
 
 type LayoutWrapperProps = {
     children: React.ReactNode;
     isAdmin: boolean;
+    currentUser: UserInfo | null;
     serverName: string;
     serverLogoUrl: string | null;
+    agents: Array<AgentBasicInformation>;
+    isFooterShown: boolean;
+    footerLinks: Array<FooterLink>;
 };
 
-export function LayoutWrapper({ children, isAdmin, serverName, serverLogoUrl }: LayoutWrapperProps) {
+export function LayoutWrapper({
+    children,
+    isAdmin,
+    currentUser,
+    serverName,
+    serverLogoUrl,
+    agents,
+    isFooterShown,
+    footerLinks,
+}: LayoutWrapperProps) {
     const pathname = usePathname();
-    const isHeaderHidden = pathname?.includes('/chat');
+    const isAdminChatPage =
+        pathname?.startsWith('/admin/chat-history') || pathname?.startsWith('/admin/chat-feedback');
+    const isHeaderHidden = pathname?.includes('/chat') && !isAdminChatPage;
 
     if (isHeaderHidden) {
         return <main className={`pt-0`}>{children}</main>;
@@ -20,8 +38,15 @@ export function LayoutWrapper({ children, isAdmin, serverName, serverLogoUrl }:
 
     return (
         <>
-            <Header isAdmin={isAdmin} serverName={serverName} serverLogoUrl={serverLogoUrl} />
+            <Header
+                isAdmin={isAdmin}
+                currentUser={currentUser}
+                serverName={serverName}
+                serverLogoUrl={serverLogoUrl}
+                agents={agents}
+            />
             <main className={`pt-[60px]`}>{children}</main>
+            {isFooterShown && <Footer extraLinks={footerLinks} />}
         </>
     );
 }

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

@@ -2,6 +2,7 @@
 
 import { X } from 'lucide-react';
 import { LoginForm } from '../LoginForm/LoginForm';
+import { Portal } from '../Portal/Portal';
 
 type LoginDialogProps = {
     isOpen: boolean;
@@ -16,25 +17,25 @@ export function LoginDialog(props: LoginDialogProps) {
     }
 
     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>
+        <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">Log in</h2>
-                    <p className="text-sm text-gray-500 mt-1">
-                        Enter your credentials to access the admin area
-                    </p>
-                </div>
+                    <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} />
+                    <LoginForm onSuccess={onClose} />
+                </div>
             </div>
-        </div>
+        </Portal>
     );
 }

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