@promptbook/cli 0.103.0-66 → 0.103.0-68

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

@@ -4,7 +4,7 @@ import promptbookLogoBlueTransparent from '@/public/logo-blue-white-256.png';
 import { $createAgentAction, logoutAction } from '@/src/app/actions';
 import { ArrowRight, ChevronDown, Lock, LogIn, LogOut, User } from 'lucide-react';
 import Image from 'next/image';
-import Link from 'next/link';
+import { HeadlessLink, useIsHeadless, pushWithHeadless } from '../_utils/headlessParam';
 import { useRouter } from 'next/navigation';
 import { ReactNode, useState } from 'react';
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
@@ -41,6 +41,11 @@ type HeaderProps = {
      * List of agents
      */
     agents: Array<AgentBasicInformation>;
+
+    /**
+     * List of federated servers for navigation dropdown
+     */
+    federatedServers: Array<{ url: string; title: string; logoUrl?: string | null }>;
 };
 
 /* TODO: [🐱‍🚀] Make this Agents server native  */
@@ -70,7 +75,7 @@ type MenuItem =
       };
 
 export function Header(props: HeaderProps) {
-    const { isAdmin = false, currentUser = null, serverName, serverLogoUrl, agents } = props;
+    const { isAdmin = false, currentUser = null, serverName, serverLogoUrl, agents, federatedServers } = props;
 
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isLoginOpen, setIsLoginOpen] = useState(false);
@@ -86,6 +91,7 @@ export function Header(props: HeaderProps) {
     const [isMobileSystemOpen, setIsMobileSystemOpen] = useState(false);
     const [isCreatingAgent, setIsCreatingAgent] = useState(false);
     const router = useRouter();
+    const isHeadless = useIsHeadless();
 
     const { users: adminUsers } = useUsersAdmin();
 
@@ -98,7 +104,7 @@ export function Header(props: HeaderProps) {
         const agentName = await $createAgentAction();
 
         if (agentName) {
-            router.push(`/agents/${agentName}`);
+            pushWithHeadless(router, `/agents/${agentName}`, isHeadless);
             setIsAgentsOpen(false);
             setIsMenuOpen(false);
         } else {
@@ -109,6 +115,37 @@ export function Header(props: HeaderProps) {
         }
     };
 
+    // Federated servers dropdown items (respect logo, only current is not clickable)
+    const [isFederatedOpen, setIsFederatedOpen] = useState(false);
+    const [isMobileFederatedOpen, setIsMobileFederatedOpen] = useState(false);
+
+    const federatedDropdownItems: SubMenuItem[] = federatedServers.map(server => {
+        const isCurrent = server.url === (typeof window !== 'undefined' ? window.location.origin : '');
+        return isCurrent
+            ? {
+                  label: (
+                      <span className="flex items-center gap-2">
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img src={server.logoUrl || serverLogoUrl || promptbookLogoBlueTransparent.src} alt={server.title} width={20} height={20} className="w-5 h-5 object-contain rounded-full" />
+                          <span className="font-semibold">{server.title.replace(/^Federated: /, '')}</span>
+                          <span className="ml-1 text-xs text-blue-600">(current)</span>
+                      </span>
+                  ),
+                  isBold: true,
+                  isBordered: true,
+              }
+            : {
+                  label: (
+                      <span className="flex items-center gap-2">
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img src={server.logoUrl || promptbookLogoBlueTransparent.src} alt={server.title} width={20} height={20} className="w-5 h-5 object-contain rounded-full" />
+                          <span>{server.title.replace(/^Federated: /, '')}</span>
+                      </span>
+                  ),
+                  href: server.url,
+              };
+    });
+
     // Menu items configuration (DRY principle)
     const menuItems: MenuItem[] = [
         {
@@ -257,8 +294,8 @@ export function Header(props: HeaderProps) {
             <ChangePasswordDialog isOpen={isChangePasswordOpen} onClose={() => setIsChangePasswordOpen(false)} />
             <div className="container mx-auto px-4 h-full">
                 <div className="flex items-center justify-between h-full">
-                    {/* Logo */}
-                    <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
+                    {/* Logo and heading */}
+                    <HeadlessLink href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
                         {serverLogoUrl ? (
                             // Note: `next/image` does not load external images well without extra config
                             // eslint-disable-next-line @next/next/no-img-element
@@ -279,20 +316,58 @@ export function Header(props: HeaderProps) {
                             />
                         )}
                         <h1 className="text-xl font-bold tracking-tight text-gray-900">{serverName}</h1>
-                    </Link>
+                    </HeadlessLink>
 
                     {/* Desktop Navigation */}
                     <nav className="hidden lg:flex items-center gap-8">
+                        {/* Federated servers dropdown */}
+                        <div className="relative">
+                            <button
+                                className="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                                onClick={() => setIsFederatedOpen(!isFederatedOpen)}
+                                onBlur={() => setTimeout(() => setIsFederatedOpen(false), 200)}
+                            >
+                                <ChevronDown className="w-4 h-4" />
+                                <span>Switch server</span>
+                            </button>
+                            {isFederatedOpen && (
+                                <div className="absolute top-full left-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-100 py-1 z-50 animate-in fade-in zoom-in-95 duration-200 max-h-[80vh] overflow-y-auto">
+                                    {federatedDropdownItems.map((subItem, subIndex) => {
+                                        const className = `block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 ${
+                                            subItem.isBold ? 'font-medium' : ''
+                                        } ${subItem.isBordered ? 'border-b border-gray-100' : ''}`;
+
+                                        if (subItem.href) {
+                                            return (
+                                                <HeadlessLink
+                                                    key={subIndex}
+                                                    href={subItem.href}
+                                                    className={className}
+                                                    onClick={() => setIsFederatedOpen(false)}
+                                                >
+                                                    {subItem.label}
+                                                </HeadlessLink>
+                                            );
+                                        }
+                                        return (
+                                            <span key={subIndex} className={className}>
+                                                {subItem.label}
+                                            </span>
+                                        );
+                                    })}
+                                </div>
+                            )}
+                        </div>
                         {menuItems.map((item, index) => {
                             if (item.type === 'link') {
                                 return (
-                                    <Link
+                                    <HeadlessLink
                                         key={index}
                                         href={item.href}
                                         className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
                                     >
                                         {item.label}
-                                    </Link>
+                                    </HeadlessLink>
                                 );
                             }
 
@@ -328,14 +403,14 @@ export function Header(props: HeaderProps) {
                                                     }
 
                                                     return (
-                                                        <Link
+                                                        <HeadlessLink
                                                             key={subIndex}
                                                             href={subItem.href!}
                                                             className={className}
                                                             onClick={() => item.setIsOpen(false)}
                                                         >
                                                             {subItem.label}
-                                                        </Link>
+                                                        </HeadlessLink>
                                                     );
                                                 })}
                                             </div>
@@ -348,25 +423,25 @@ export function Header(props: HeaderProps) {
                         })}
 
                         {just(false /* TODO: [🧠] Figure out what to do with theese links */) && (
-                            <Link
+                            <a
                                 href="https://ptbk.io/"
                                 target="_blank"
                                 className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
                             >
                                 Create your server
-                            </Link>
+                            </a>
                         )}
                     </nav>
 
                     {/* CTA Button & Mobile Menu Toggle */}
                     <div className="flex items-center gap-4">
                         {just(false /* TODO: [🧠] Figure out what to do with call to action */) && (
-                            <Link href="https://ptbk.io/?modal=get-started" target="_blank" className="hidden md:block">
+                            <a href="https://ptbk.io/?modal=get-started" target="_blank" className="hidden md:block">
                                 <button className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-promptbook-blue-dark text-white hover:bg-promptbook-blue-dark/90">
                                     Get Started
                                     <ArrowRight className="ml-2 w-4 h-4" />
                                 </button>
-                            </Link>
+                            </a>
                         )}
 
                         {!currentUser && !isAdmin && (
@@ -508,14 +583,14 @@ export function Header(props: HeaderProps) {
                             {menuItems.map((item, index) => {
                                 if (item.type === 'link') {
                                     return (
-                                        <Link
+                                        <HeadlessLink
                                             key={index}
                                             href={item.href}
                                             className="block text-base font-medium text-gray-600 hover:text-gray-900 py-2"
                                             onClick={() => setIsMenuOpen(false)}
                                         >
                                             {item.label}
-                                        </Link>
+                                        </HeadlessLink>
                                     );
                                 }
 
@@ -555,14 +630,14 @@ export function Header(props: HeaderProps) {
                                                         }
 
                                                         return (
-                                                            <Link
+                                                            <HeadlessLink
                                                                 key={subIndex}
                                                                 href={subItem.href!}
                                                                 className={className}
                                                                 onClick={() => setIsMenuOpen(false)}
                                                             >
                                                                 {subItem.label}
-                                                            </Link>
+                                                            </HeadlessLink>
                                                         );
                                                     })}
                                                 </div>
@@ -575,14 +650,14 @@ export function Header(props: HeaderProps) {
                             })}
 
                             {just(false /* TODO: [🧠] Figure out what to do with these links */) && (
-                                <Link
+                                <a
                                     href="https://ptbk.io/"
                                     target="_blank"
                                     className="text-base font-medium text-gray-600 hover:text-gray-900 py-2"
                                     onClick={() => setIsMenuOpen(false)}
                                 >
                                     Create your server
-                                </Link>
+                                </a>
                             )}
                         </nav>
                     </div>

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

@@ -15,6 +15,7 @@ type LayoutWrapperProps = {
     agents: Array<AgentBasicInformation>;
     isFooterShown: boolean;
     footerLinks: Array<FooterLink>;
+    federatedServers: Array<{ url: string; title: string }>;
 };
 
 export function LayoutWrapper({
@@ -26,6 +27,7 @@ export function LayoutWrapper({
     agents,
     isFooterShown,
     footerLinks,
+    federatedServers,
 }: LayoutWrapperProps) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -46,6 +48,7 @@ export function LayoutWrapper({
                 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/_utils/generateMetaTxt.ts

@@ -0,0 +1,28 @@
+// Utility to generate content for robots.txt, security.txt, and humans.txt [DRY]
+
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
+
+// Get base URL from environment or config
+const baseUrl = NEXT_PUBLIC_SITE_URL?.href || process.env.PUBLIC_URL || 'https://ptbk.io';
+
+export function generateRobotsTxt(): string {
+    return ['User-agent: *', `Sitemap: ${baseUrl}sitemap.xml`, ''].join('\n');
+}
+
+export function generateSecurityTxt(): string {
+    // See https://securitytxt.org/ for more fields
+    return [
+        `Contact: mailto:security@ptbk.io`,
+        `Expires: ${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]}`,
+        `Canonical: ${baseUrl}security.txt`,
+        '',
+    ].join('\n');
+}
+
+export function generateHumansTxt(): string {
+    return ['/* TEAM */', 'Developer: Promptbook Team', `Site: https://ptbk.io`, `Instance: ${baseUrl}`].join('\n');
+}
+
+/**
+ * TODO: Use `spaceTrim`
+ */

package/apps/agents-server/src/components/_utils/headlessParam.tsx

@@ -0,0 +1,36 @@
+// Utility to append ?headless param if present in current URL
+import { usePathname, useSearchParams } from 'next/navigation';
+import Link, { LinkProps } from 'next/link';
+import { useMemo } from 'react';
+
+// Returns true if ?headless is present in current search params
+export function useIsHeadless() {
+    const searchParams = useSearchParams();
+    return searchParams.has('headless');
+}
+
+// Appends ?headless to a given href if needed
+export function appendHeadlessParam(href: string, isHeadless: boolean): string {
+    if (!isHeadless) return href;
+    if (href.includes('headless')) return href;
+    const hasQuery = href.includes('?');
+    return hasQuery ? `${href}&headless` : `${href}?headless`;
+}
+
+// Custom Link that preserves headless param
+export function HeadlessLink({ href, children, ...rest }: LinkProps & { children: React.ReactNode } & React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+    const isHeadless = useIsHeadless();
+    const finalHref = useMemo(() => appendHeadlessParam(String(href), isHeadless), [href, isHeadless]);
+    return (
+        <Link href={finalHref} {...rest}>
+            {children}
+        </Link>
+    );
+}
+
+import { useRouter } from "next/navigation";
+
+// Helper for router.push
+export function pushWithHeadless(router: ReturnType<typeof useRouter>, href: string, isHeadless: boolean) {
+    router.push(appendHeadlessParam(href, isHeadless));
+}

package/apps/agents-server/src/middleware.ts

@@ -191,12 +191,16 @@ export async function middleware(req: NextRequest) {
             'api',
             'admin',
             'docs',
-            'manifest.webmanifest',
-            'sw.js',
             'test',
             'embed',
             '_next',
+            'manifest.webmanifest',
+            'sw.js',
             'favicon.ico',
+            'sitemap.xml',
+            'robots.txt',
+            'security.txt',
+            'humans.txt',
         ].includes(potentialAgentName) &&
         !potentialAgentName.startsWith('.') &&
         // Note: Other static files are excluded by the matcher configuration below

package/apps/agents-server/src/tools/$provideCdnForServer.ts

@@ -14,10 +14,22 @@ let cdn: IIFilesStorageWithCdn | null = null;
 export function $provideCdnForServer(): IIFilesStorageWithCdn {
     if (!cdn) {
         cdn = new VercelBlobStorage({
-            token: process.env.BLOB_READ_WRITE_TOKEN!,
+            token: process.env.VERCEL_BLOB_READ_WRITE_TOKEN!,
             pathPrefix: process.env.NEXT_PUBLIC_CDN_PATH_PREFIX!,
             cdnPublicUrl: new URL(process.env.NEXT_PUBLIC_CDN_PUBLIC_URL!),
         });
+
+        /*
+        cdn = new DigitalOceanSpaces({
+            bucket: process.env.CDN_BUCKET!,
+            pathPrefix: process.env.NEXT_PUBLIC_CDN_PATH_PREFIX!,
+            endpoint: process.env.CDN_ENDPOINT!,
+            accessKeyId: process.env.CDN_ACCESS_KEY_ID!,
+            secretAccessKey: process.env.CDN_SECRET_ACCESS_KEY!,
+            cdnPublicUrl: new URL(process.env.NEXT_PUBLIC_CDN_PUBLIC_URL!),
+            gzip: true,
+        });
+        */
     }
 
     return cdn;

package/apps/agents-server/src/utils/cdn/classes/DigitalOceanSpaces.ts

@@ -0,0 +1,119 @@
+import { GetObjectCommand, PutObjectCommand, PutObjectCommandInput, S3Client } from '@aws-sdk/client-s3';
+import { NotYetImplementedError } from '@promptbook-local/core';
+import { gzip, ungzip } from 'node-gzip';
+import { TODO_USE } from '../../../../../../src/utils/organization/TODO_USE';
+import { validateMimeType } from '../../validators/validateMimeType';
+import type { IFile, IIFilesStorageWithCdn } from '../interfaces/IFilesStorage';
+
+type IDigitalOceanSpacesConfig = {
+    readonly bucket: string;
+    readonly pathPrefix: string;
+    readonly endpoint: string;
+    readonly accessKeyId: string;
+    readonly secretAccessKey: string;
+    readonly cdnPublicUrl: URL;
+    readonly gzip: boolean;
+
+    // TODO: [⛳️] Probbably prefix should be in this config not on the consumer side
+};
+
+export class DigitalOceanSpaces implements IIFilesStorageWithCdn {
+    public get cdnPublicUrl() {
+        return this.config.cdnPublicUrl;
+    }
+
+    private s3: S3Client;
+
+    public constructor(private readonly config: IDigitalOceanSpacesConfig) {
+        this.s3 = new S3Client({
+            region: 'auto',
+            endpoint: 'https://' + config.endpoint,
+            credentials: {
+                accessKeyId: config.accessKeyId,
+                secretAccessKey: config.secretAccessKey,
+            },
+        });
+    }
+
+    public getItemUrl(key: string): URL {
+        return new URL(this.config.pathPrefix + '/' + key, this.cdnPublicUrl);
+    }
+
+    public async getItem(key: string): Promise<IFile | null> {
+        const parameters = {
+            Bucket: this.config.bucket,
+            Key: this.config.pathPrefix + '/' + key,
+        };
+
+        try {
+            const { Body, ContentType, ContentEncoding } = await this.s3.send(new GetObjectCommand(parameters));
+
+            // const blob = new Blob([await Body?.transformToByteArray()!]);
+
+            if (ContentEncoding === 'gzip') {
+                return {
+                    type: validateMimeType(ContentType),
+                    data: await ungzip(await Body!.transformToByteArray()),
+                };
+            } else {
+                return {
+                    type: validateMimeType(ContentType),
+                    data: (await Body!.transformToByteArray()) as Buffer,
+                };
+            }
+        } catch (error) {
+            if (error instanceof Error && error.name.match(/^NoSuchKey/)) {
+                return null;
+            } else {
+                throw error;
+            }
+        }
+    }
+
+    public async removeItem(key: string): Promise<void> {
+        TODO_USE(key);
+        throw new NotYetImplementedError(`DigitalOceanSpaces.removeItem is not implemented yet`);
+    }
+
+    public async setItem(key: string, file: IFile): Promise<void> {
+        // TODO: Put putObjectRequestAdditional into processedFile
+        const putObjectRequestAdditional: Partial<PutObjectCommandInput> = {};
+
+        let processedFile: IFile;
+        if (this.config.gzip) {
+            const gzipped = await gzip(file.data);
+            const sizePercentageAfterCompression = gzipped.byteLength / file.data.byteLength;
+            if (sizePercentageAfterCompression < 0.7) {
+                // consolex.log(`Gzipping ${key} (${Math.floor(sizePercentageAfterCompression * 100)}%)`);
+                processedFile = { ...file, data: gzipped };
+                putObjectRequestAdditional.ContentEncoding = 'gzip';
+            } else {
+                processedFile = file;
+                // consolex.log(`NOT Gzipping ${key} (${Math.floor(sizePercentageAfterCompression * 100)}%)`);
+            }
+        } else {
+            processedFile = file;
+        }
+
+        const uploadResult = await this.s3.send(
+            new PutObjectCommand({
+                Bucket: this.config.bucket,
+                Key: this.config.pathPrefix + '/' + key,
+                ContentType: processedFile.type,
+                ...putObjectRequestAdditional,
+                Body: processedFile.data,
+                // TODO: Public read access / just private to extending class
+                ACL: 'public-read',
+            }),
+        );
+
+        if (!uploadResult.ETag) {
+            throw new Error(`Upload result does not contain ETag`);
+        }
+    }
+}
+
+/**
+ * TODO: Implement Read-only mode
+ * TODO: [☹️] Unite with `PromptbookStorage` and move to `/src/...`
+ */

package/apps/agents-server/src/utils/cdn/classes/VercelBlobStorage.ts

@@ -51,12 +51,13 @@ export class VercelBlobStorage implements IIFilesStorageWithCdn {
 
     public async setItem(key: string, file: IFile): Promise<void> {
         const path = this.config.pathPrefix ? `${this.config.pathPrefix}/${key}` : key;
-        
+
         await put(path, file.data, {
             access: 'public',
             addRandomSuffix: false,
             contentType: file.type,
             token: this.config.token,
+            allowOverwrite: true, // <- TODO: This is inefficient, we should check first if the file exists and only then decide to overwrite or not
             // Note: We rely on Vercel Blob for compression
         });
     }