@promptbook/cli 0.103.0-9 → 0.103.0

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

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+import React from 'react';
+import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+import { AvatarProfile } from '../../../../../src/book-components/AvatarProfile/AvatarProfile/AvatarProfile';
+import { Card } from './Card';
+
+type AgentCardProps = {
+    agent: AgentBasicInformation;
+    href: string;
+    isAdmin?: boolean;
+    onDelete?: (agentName: string) => void;
+    onClone?: (agentName: string) => void;
+};
+
+const ACTION_BUTTON_CLASSES =
+    'text-white px-3 py-1 rounded shadow text-xs font-medium transition-colors uppercase tracking-wider opacity-80 hover:opacity-100';
+
+export function AgentCard({ agent, href, isAdmin, onDelete, onClone }: AgentCardProps) {
+    return (
+        <div className="relative h-full group">
+            <Link href={href} className="block h-full">
+                <Card
+                    style={
+                        !agent.meta.color
+                            ? {}
+                            : {
+                                  backgroundColor: `${agent.meta.color}22`,
+                              }
+                    }
+                >
+                    <AvatarProfile agent={agent} />
+                </Card>
+            </Link>
+            {isAdmin && (
+                <div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                    <button
+                        className={`bg-blue-500 hover:bg-blue-600 ${ACTION_BUTTON_CLASSES}`}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            onClone?.(agent.agentName);
+                        }}
+                        title="Clone agent"
+                    >
+                        Clone
+                    </button>
+                    <button
+                        className={`bg-red-500 hover:bg-red-600 ${ACTION_BUTTON_CLASSES}`}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            onDelete?.(agent.agentName);
+                        }}
+                        title="Delete agent"
+                    >
+                        Delete
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+type CardProps = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+export function Card({ children, className = '', style }: CardProps) {
+    return (
+        <div
+            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}
+        </div>
+    );
+}

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/ModelCard.tsx

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import React from 'react';
+import { Card } from './Card';
+
+type ModelCardProps = {
+    modelName: string;
+    modelTitle: string;
+    modelDescription?: string;
+};
+
+export function ModelCard({ modelName, modelTitle, modelDescription }: ModelCardProps) {
+    return (
+        <Link href={`#[🐱‍🚀]`}>
+            <Card className="h-full flex flex-col">
+                <div className="flex justify-between items-start mb-2">
+                    <h2 className="text-xl font-bold text-gray-900">{modelTitle}</h2>
+                    <span className="inline-block bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded font-mono">
+                        {modelName}
+                    </span>
+                </div>
+                {modelDescription && (
+                    <p className="text-gray-600 text-sm mt-2 flex-grow leading-relaxed">
+                        {modelDescription}
+                    </p>
+                )}
+            </Card>
+        </Link>
+    );
+}

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/Homepage/Section.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+type SectionProps = {
+    title: string;
+    children: React.ReactNode;
+};
+
+export function Section({ title, children }: SectionProps) {
+    return (
+        <section className="mt-16 first:mt-4 mb-4">
+            <h2 className="text-3xl text-gray-900 mb-6 font-light">{title}</h2>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                {children}
+            </div>
+        </section>
+    );
+}

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

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import React from 'react';
+import { Card } from './Card';
+
+type TechInfoCardProps = {
+    title: string;
+    children: React.ReactNode;
+    href?: string;
+};
+
+export function TechInfoCard({ title, children, href = '#' }: TechInfoCardProps) {
+    return (
+        <Link href={href}>
+            <Card>
+                <h2 className="text-2xl font-semibold text-gray-900 mb-2">{title}</h2>
+                {children}
+            </Card>
+        </Link>
+    );
+}

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { usePathname, useSearchParams } 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>;
+    federatedServers: Array<{ url: string; title: string }>;
+};
+
+export function LayoutWrapper({
+    children,
+    isAdmin,
+    currentUser,
+    serverName,
+    serverLogoUrl,
+    agents,
+    isFooterShown,
+    footerLinks,
+    federatedServers,
+}: LayoutWrapperProps) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const isHeadless = searchParams.has('headless');
+    // const isAdminChatPage = pathname?.startsWith('/admin/chat-history') || pathname?.startsWith('/admin/chat-feedback');
+    const isHeaderHidden = false; // pathname?.includes('/chat') && !isAdminChatPage;
+    const isFooterHiddenOnPage = pathname ? /^\/agents\/[^/]+\/(book|chat|book\+chat)$/.test(pathname) : false;
+
+    if (isHeaderHidden || isHeadless) {
+        return <main className={`pt-0`}>{children}</main>;
+    }
+
+    return (
+        <>
+            <Header
+                isAdmin={isAdmin}
+                currentUser={currentUser}
+                serverName={serverName}
+                serverLogoUrl={serverLogoUrl}
+                agents={agents}
+                federatedServers={federatedServers}
+            />
+            <main className={`pt-[60px]`}>{children}</main>
+            {isFooterShown && !isFooterHiddenOnPage && <Footer extraLinks={footerLinks} />}
+        </>
+    );
+}

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

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