@promptbook/cli 0.103.0-9 → 0.104.0-0

package/apps/agents-server/src/app/recycle-bin/actions.ts

@@ -0,0 +1,27 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { revalidatePath } from 'next/cache';
+
+export async function restoreDeletedAgent(agentName: string) {
+    const collection = await $provideAgentCollectionForServer();
+    
+    // Find the latest history item for this agent
+    const history = await collection.listAgentHistory(agentName);
+    
+    if (history.length === 0) {
+        throw new Error(`No history found for agent ${agentName}`);
+    }
+    
+    const latestVersion = history[0];
+    
+    if (!latestVersion) {
+         throw new Error(`No history found for agent ${agentName}`);
+    }
+
+    await collection.restoreAgent(latestVersion.id);
+    
+    revalidatePath('/recycle-bin');
+    revalidatePath(`/agents/${agentName}`);
+    revalidatePath('/');
+}

package/apps/agents-server/src/app/recycle-bin/page.tsx

@@ -0,0 +1,58 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { TrashIcon } from 'lucide-react';
+import Link from 'next/link';
+import { RestoreAgentButton } from './RestoreAgentButton';
+
+export const metadata = {
+    title: 'Recycle Bin',
+};
+
+export default async function RecycleBinPage() {
+    const collection = await $provideAgentCollectionForServer();
+    const deletedAgents = await collection.listDeletedAgents();
+
+    return (
+        <div className="container mx-auto p-6 max-w-4xl">
+            <header className="flex items-center gap-4 mb-8">
+                <div className="bg-red-100 p-3 rounded-full">
+                    <TrashIcon className="w-8 h-8 text-red-600" />
+                </div>
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Recycle Bin</h1>
+                    <p className="text-gray-600">Restore deleted agents from here.</p>
+                </div>
+            </header>
+
+            {deletedAgents.length === 0 ? (
+                <div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                    <p className="text-gray-500 text-lg">Recycle bin is empty</p>
+                    <Link href="/" className="text-blue-600 hover:underline mt-2 inline-block">
+                        Go back to agents
+                    </Link>
+                </div>
+            ) : (
+                <div className="grid gap-4">
+                    {deletedAgents.map((agentName) => (
+                        <div
+                            key={agentName}
+                            className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-center justify-between hover:shadow-md transition-shadow"
+                        >
+                            <div className="flex items-center gap-3">
+                                <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 font-bold text-lg">
+                                    {agentName.charAt(0).toUpperCase()}
+                                </div>
+                                <div>
+                                    <h3 className="font-semibold text-lg text-gray-900">{agentName}</h3>
+                                    <p className="text-sm text-gray-500">Deleted agent</p>
+                                </div>
+                            </div>
+                            <div className="flex gap-2">
+                                <RestoreAgentButton agentName={agentName} />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/agents-server/src/app/restricted/page.tsx

@@ -0,0 +1,33 @@
+import { ShieldAlert } from 'lucide-react';
+import Link from 'next/link';
+
+export default function RestrictedPage() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] p-4 text-center">
+            <div className="bg-red-50 p-6 rounded-full mb-6">
+                <ShieldAlert className="w-12 h-12 text-red-600" />
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">Access Restricted</h1>
+            <p className="text-gray-600 max-w-md mb-8">
+                This server is restricted to authorized users or specific IP addresses. 
+                Please log in to continue or contact the administrator if you believe this is an error.
+            </p>
+            
+            {/* The Login button in the header is available, so we can just point to it or instruct the user */}
+            <div className="p-4 bg-blue-50 text-blue-800 rounded-lg max-w-md text-sm">
+                <p>
+                    <strong>Tip:</strong> Use the <strong>Log in</strong> button in the top right corner to access your account.
+                </p>
+            </div>
+
+            <div className="mt-8 flex gap-4">
+                <Link 
+                    href="/"
+                    className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
+                >
+                    Go Home
+                </Link>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/robots.txt/route.ts

@@ -0,0 +1,15 @@
+// Dynamic robots.txt for Agents Server
+
+import { generateRobotsTxt } from '@/src/components/_utils/generateMetaTxt';
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const txt = generateRobotsTxt();
+    return new NextResponse(txt, {
+        headers: {
+            'Content-Type': 'text/plain',
+        },
+    });
+}

package/apps/agents-server/src/app/security.txt/route.ts

@@ -0,0 +1,15 @@
+// Dynamic security.txt for Agents Server
+
+import { generateSecurityTxt } from '@/src/components/_utils/generateMetaTxt';
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const txt = generateSecurityTxt();
+    return new NextResponse(txt, {
+        headers: {
+            'Content-Type': 'text/plain',
+        },
+    });
+}

package/apps/agents-server/src/app/sitemap.xml/route.ts

@@ -0,0 +1,37 @@
+// Dynamic sitemap.xml for Agents Server
+
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { spaceTrim } from '@promptbook-local/utils';
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const collection = await $provideAgentCollectionForServer();
+
+    // Assume collection.listAgents() returns an array of agent names
+    const agentNames = await collection.listAgents();
+
+    // Get base URL from environment or config
+    const baseUrl = NEXT_PUBLIC_SITE_URL?.href || process.env.PUBLIC_URL || 'https://ptbk.io';
+
+    const urls = agentNames
+        .map(({ agentName }) => `<url><loc>${baseUrl}agents/${encodeURIComponent(agentName)}</loc></url>`)
+        .join('\n');
+
+    const xml = spaceTrim(
+        (block) => `
+            <?xml version="1.0" encoding="UTF-8"?>
+            <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+                ${block(urls)}
+            </urlset>
+        `,
+    );
+
+    return new NextResponse(xml, {
+        headers: {
+            'Content-Type': 'application/xml',
+        },
+    });
+}

package/apps/agents-server/src/app/test/og-image/README.md

@@ -0,0 +1 @@
+In this folder we are testing miscellaneous things related to Promptbook Agents Server

package/apps/agents-server/src/app/test/og-image/opengraph-image.tsx

@@ -0,0 +1,37 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'Agent Profile';
+export const size = {
+    width: 1200,
+    height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+    return new ImageResponse(
+        (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'white',
+                }}
+            >
+                <h1>Hello</h1>
+            </div>
+        ),
+        {
+            ...size,
+            emoji: 'openmoji',
+        },
+    );
+}
+
+/**
+ * TODO:  [webpack.cache.PackFileCacheStrategy] Serializing big strings (126kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
+ */

package/apps/agents-server/src/app/test/og-image/page.tsx

@@ -0,0 +1,22 @@
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    metadataBase: NEXT_PUBLIC_SITE_URL,
+    title: 'Test OG Image',
+    description: 'Testing og-image',
+};
+
+export default function TestPage() {
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-100">
+            <div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full">
+                <h1 className="text-3xl font-bold text-red-600 mb-4 text-center">Test page</h1>
+                <p className="text-gray-700 mb-6 text-center">Testing og-image</p>
+                <p className="text-gray-600 text-sm text-center mt-4">
+                    View page source or share this URL to see the OG image in action
+                </p>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,339 @@
+'use client';
+
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { RepeatIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import spaceTrim from 'spacetrim';
+import { Color } from '../../../../../src/utils/color/Color';
+import { darken } from '../../../../../src/utils/color/operators/darken';
+import { lighten } from '../../../../../src/utils/color/operators/lighten';
+import { AgentQrCode } from './AgentQrCode';
+import { QrCodeModal } from './QrCodeModal';
+
+type AgentProfileProps = {
+    /**
+     * The agent to display
+     */
+    readonly agent: AgentBasicInformation;
+
+    /**
+     * URL of the agent page
+     *
+     * @default undefined - If not provided, some features like QR code for link might be disabled or use generic link
+     */
+    readonly agentUrl?: string;
+
+    /**
+     * Email of the agent
+     */
+    readonly agentEmail?: string;
+
+    /**
+     * Content for the menu (top right)
+     *
+     * @param props.onShowQrCode - Function to open QR code modal
+     */
+    readonly renderMenu?: (props: { onShowQrCode: () => void }) => React.ReactNode;
+
+    /**
+     * Content for the chat area
+     */
+    readonly children?: React.ReactNode;
+
+    /**
+     * Content for the secondary actions (links)
+     */
+    readonly actions?: React.ReactNode;
+
+    /**
+     * If true, hides the menu and actions for fullscreen/embedded view
+     */
+    readonly isHeadless?: boolean;
+
+    /**
+     * CSS class name
+     */
+    readonly className?: string;
+};
+
+export function AgentProfile(props: AgentProfileProps) {
+    const {
+        agent,
+        agentUrl = '',
+        agentEmail = '',
+        renderMenu,
+        children,
+        actions,
+        isHeadless = false,
+        className,
+    } = props;
+    const { meta, agentName } = agent;
+    const fullname = (meta.fullname as string) || agentName || 'Agent';
+    const personaDescription = agent.personaDescription || '';
+    const imageUrl = (meta.image as string) || null;
+
+    const [isQrModalOpen, setIsQrModalOpen] = useState(false);
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    // Dynamic Font Loading
+    const fontString = meta.font;
+    let fontStyle: React.CSSProperties = {};
+
+    if (fontString) {
+        // [🧠] TODO: Properly parse font string to get family name
+        const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
+        fontStyle = {
+            fontFamily: fontString,
+        };
+    }
+
+    // Compute Colors and Background
+    const { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage } = useMemo(() => {
+        // [🧠] Default color should be imported constant, but for now hardcoded fallback
+        const PROMPTBOOK_COLOR_HEX = '#f15b24'; // TODO: Import PROMPTBOOK_COLOR
+        const brandColorString = meta.color || PROMPTBOOK_COLOR_HEX;
+
+        let brandColor;
+        try {
+            brandColor = Color.fromSafe(brandColorString.split(',')[0].trim());
+        } catch {
+            brandColor = Color.fromHex(PROMPTBOOK_COLOR_HEX);
+        }
+
+        const brandColorHex = brandColor.toHex();
+        const brandColorLightHex = brandColor.then(lighten(0.2)).toHex();
+        const brandColorDarkHex = brandColor.then(darken(0.15)).toHex();
+
+        // Generate Noisy SVG Background
+        const color1 = brandColor;
+        // const color2 = brandColors[1] || brandColors[0]!; // Use secondary color if available?
+        // For simplicity using primary color for now or derive second one
+        const color2 = brandColor;
+
+        // [🧠] Make colors much lighter for the background
+        const color1Light = color1.then(lighten(0.3)).toHex();
+        const color1Main = color1.toHex();
+        const color1Dark = color1.then(darken(0.3)).toHex();
+
+        const color2Light = color2.then(lighten(0.3)).toHex();
+        const color2Main = color2.toHex();
+        const color2Dark = color2.then(darken(0.3)).toHex();
+
+        const svgContent = spaceTrim(`
+            <svg xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1920 1080"
+              width="1920" height="1080"
+              preserveAspectRatio="xMidYMid slice">
+              <defs>
+                <!-- Bottom-left -->
+                <radialGradient id="grad1" cx="0%" cy="100%" r="90%">
+                  <stop offset="0%" stop-color="${color1Light}" />
+                  <stop offset="50%" stop-color="${color1Main}" />
+                  <stop offset="100%" stop-color="${color1Dark}" />
+                </radialGradient>
+
+                <!-- Bottom-right -->
+                <radialGradient id="grad2" cx="100%" cy="100%" r="90%">
+                  <stop offset="0%" stop-color="${color2Light}" />
+                  <stop offset="50%" stop-color="${color2Main}" />
+                  <stop offset="100%" stop-color="${color2Dark}" />
+                </radialGradient>
+
+                <!-- White top fade -->
+                <linearGradient id="whiteTopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
+                  <stop offset="100%" stop-color="#ffffff" stop-opacity="0.3" />
+                </linearGradient>
+
+                <!-- Strong grain -->
+                <filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
+                  <feTurbulence type="fractalNoise" baseFrequency="3.5" numOctaves="3" seed="8" result="noise" />
+                  <feComponentTransfer>
+                    <feFuncR type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncG type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncB type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncA type="table" tableValues="0 0.8" />
+                  </feComponentTransfer>
+                </filter>
+              </defs>
+
+              <!-- White base -->
+              <rect width="100%" height="100%" fill="#ffffff" />
+
+              <!-- Gradients -->
+              <rect width="100%" height="100%" fill="url(#grad1)" />
+              <rect width="100%" height="100%" fill="url(#grad2)" style="mix-blend-mode:screen; opacity:0.85" />
+
+              <!-- White fade on top -->
+              <rect width="100%" height="100%" fill="url(#whiteTopGrad)" />
+
+              <!-- Strong visible noise -->
+              <rect width="100%" height="100%" filter="url(#grain)"
+                style="mix-blend-mode:soft-light; opacity:1.2" />
+            </svg>
+        `);
+
+        const backgroundImage = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
+
+        return { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage };
+    }, [meta.color]);
+
+    return (
+        <>
+            {fontString && (
+                <style jsx global>{`
+                    @import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+                        fontString.split(',')[0].trim().replace(/['"]/g, ''),
+                    )}:wght@400;600;700&display=swap');
+                `}</style>
+            )}
+
+            {/* Full-screen background with agent color */}
+            <div
+                className={`w-full flex flex-col items-center justify-center p-6 md:p-12 relative overflow-hidden ${
+                    isHeadless ? 'min-h-screen' : 'min-h-[calc(100vh-60px)]'
+                } ${className || ''}`}
+                style={{
+                    background: `url("${backgroundImage}")`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    ...fontStyle,
+                }}
+            >
+                {/* Options menu in top right */}
+                {!isHeadless && renderMenu && (
+                    <div className="absolute top-4 right-4 z-[9999]">
+                        {renderMenu({ onShowQrCode: () => setIsQrModalOpen(true) })}
+                    </div>
+                )}
+
+                {/* Main profile content */}
+                <div className="relative z-10 grid grid-cols-[auto_1fr] gap-x-6 gap-y-4 md:gap-12 max-w-5xl w-full items-start">
+                    {/* Agent image card (Flippable) */}
+                    <div
+                        className="flex-shrink-0 perspective-1000 group row-start-1 col-start-1 md:row-span-3"
+                        style={{ perspective: '1000px' }}
+                    >
+                        <div
+                            className="relative w-24 md:w-80 transition-all duration-700 transform-style-3d cursor-pointer"
+                            style={{
+                                aspectRatio: '1 / 1.618', // Golden Ratio
+                                transformStyle: 'preserve-3d',
+                                transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
+                            }}
+                            onClick={() => setIsFlipped(!isFlipped)}
+                        >
+                            {/* Front of Card (Image) */}
+                            <div
+                                className="absolute inset-0 w-full h-full backface-hidden rounded-lg md:rounded-3xl shadow-lg md:shadow-2xl overflow-hidden backdrop-blur-sm"
+                                style={{
+                                    backfaceVisibility: 'hidden',
+                                    backgroundColor: brandColorDarkHex,
+                                    boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px ${brandColorLightHex}40`,
+                                }}
+                            >
+                                {imageUrl ? (
+                                    // eslint-disable-next-line @next/next/no-img-element
+                                    <img src={imageUrl} alt={fullname} className="w-full h-full object-cover" />
+                                ) : (
+                                    <div
+                                        className="w-full h-full flex items-center justify-center text-3xl md:text-8xl font-bold text-white/80"
+                                        style={{ backgroundColor: brandColorDarkHex }}
+                                    >
+                                        {fullname.charAt(0).toUpperCase()}
+                                    </div>
+                                )}
+
+                                {/* Flip hint icon */}
+                                <div className="absolute bottom-2 md:bottom-4 right-2 md:right-4 bg-black/30 p-1 md:p-2 rounded-full text-white/80 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <RepeatIcon className="w-3 h-3 md:w-5 md:h-5" />
+                                </div>
+                            </div>
+
+                            {/* Back of Card (QR Code) */}
+                            <div
+                                className="absolute inset-0 w-full h-full backface-hidden rounded-lg md:rounded-3xl shadow-lg md:shadow-2xl overflow-hidden backdrop-blur-sm flex flex-col items-center justify-center p-2 md:p-6"
+                                style={{
+                                    backfaceVisibility: 'hidden',
+                                    transform: 'rotateY(180deg)',
+                                    background: `linear-gradient(135deg, ${brandColorLightHex} 0%, #ffffff 100%)`,
+                                    boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px ${brandColorLightHex}40`,
+                                }}
+                            >
+                                <div className="transform scale-90 md:scale-100">
+                                    <AgentQrCode
+                                        agentName={agentName}
+                                        agentUrl={agentUrl}
+                                        agentEmail={agentEmail}
+                                        personaDescription={personaDescription}
+                                        meta={meta}
+                                        isJustVcardShown
+                                    />
+                                </div>
+
+                                {/* Flip hint icon */}
+                                <div className="absolute bottom-2 md:bottom-4 right-2 md:right-4 bg-black/10 p-1 md:p-2 rounded-full text-black/50 backdrop-blur-md">
+                                    <RepeatIcon className="w-3 h-3 md:w-5 md:h-5" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Agent info - Header Area */}
+                    <div className="row-start-1 col-start-2 flex flex-col justify-center md:justify-start h-full md:h-auto gap-1 md:gap-6">
+                        {/* Agent name with custom font */}
+                        <h1
+                            className="text-2xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight leading-tight"
+                            style={{
+                                textShadow: '0 2px 20px rgba(255, 255, 255, 0.5)',
+                            }}
+                        >
+                            {fullname}
+                        </h1>
+
+                        {/* Short description */}
+                        <p className="text-sm md:text-xl text-gray-700 max-w-lg leading-relaxed font-medium line-clamp-3 md:line-clamp-none">
+                            {personaDescription}
+                        </p>
+                    </div>
+
+                    {/* Chat Area */}
+                    <div className="col-span-2 md:col-span-1 md:col-start-2 w-full mt-2 md:mt-0">
+                        {children}
+                    </div>
+
+                    {/* Secondary Actions */}
+                    {!isHeadless && (
+                        <div className="col-span-2 md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-2">
+                            {actions}
+                        </div>
+                    )}
+                </div>
+
+                {/* Subtle gradient overlay at bottom */}
+                <div
+                    className="absolute bottom-0 left-0 right-0 h-32 pointer-events-none"
+                    style={{
+                        background: `linear-gradient(to top, ${brandColorDarkHex}40, transparent)`,
+                    }}
+                />
+            </div>
+
+            {/* QR Code Modal */}
+            <QrCodeModal
+                isOpen={isQrModalOpen}
+                onClose={() => setIsQrModalOpen(false)}
+                agentName={agentName}
+                meta={meta}
+                personaDescription={personaDescription}
+                agentUrl={agentUrl}
+                agentEmail={agentEmail}
+                brandColorHex={brandColorHex}
+            />
+        </>
+    );
+}
+
+/**
+ * TODO: !!!! Use 3D badge @see https://vercel.com/blog/building-an-interactive-3d-event-badge-with-react-three-fiber
+ */

package/apps/agents-server/src/components/AgentProfile/AgentProfileFromSource.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { string_book } from '@promptbook-local/types';
+import { useMemo } from 'react';
+import { parseAgentSource } from '../../../../../src/book-2.0/agent-source/parseAgentSource';
+import { AgentProfile } from './AgentProfile';
+
+type AgentProfileFromSourceProps = Omit<React.ComponentProps<typeof AgentProfile>, 'agent'> & {
+    /**
+     * Source code of the agent (book)
+     */
+    readonly source: string_book;
+};
+
+export function AgentProfileFromSource(props: AgentProfileFromSourceProps) {
+    const { source, ...rest } = props;
+
+    const agent = useMemo(() => {
+        return parseAgentSource(source);
+    }, [source]);
+
+    return <AgentProfile agent={agent} {...rest} />;
+}