@promptbook/cli 0.103.0-67 → 0.103.0-68

package/apps/agents-server/package.json

@@ -8,14 +8,5 @@
         "start": "next start -p 4440",
         "lint": "next lint",
         "postinstall": "cd ../../ && npm ci"
-    },
-    "devDependencies": {
-        "@tailwindcss/typography": "^0.5.19",
-        "autoprefixer": "^10.4.21",
-        "postcss": "^8.5.6",
-        "tailwindcss": "^3.4.18"
-    },
-    "dependencies": {
-        "remark-gfm": "^4.0.1"
     }
 }

package/apps/agents-server/src/app/agents/[agentName]/AgentOptionsMenu.tsx

@@ -32,6 +32,7 @@ const barlowCondensed = Barlow_Condensed({
 
 type AgentOptionsMenuProps = {
     agentName: string;
+    derivedAgentName: string;
     agentUrl: string;
     agentEmail: string;
     brandColorHex: string;
@@ -42,6 +43,7 @@ type AgentOptionsMenuProps = {
 
 export function AgentOptionsMenu({
     agentName,
+    derivedAgentName,
     agentUrl,
     agentEmail,
     brandColorHex,
@@ -119,7 +121,33 @@ export function AgentOptionsMenu({
     const historyLink = links.find((l) => l.title === 'History & Feedback')!;
     const allLinksLink = links.find((l) => l.title === 'All Links')!;
 
+    // "Update URL" logic
+    const showUpdateUrl = agentName !== derivedAgentName;
+    const updateUrlHref = `/agents/${encodeURIComponent(derivedAgentName)}`;
+
+    const handleUpdateUrl = () => {
+        if (
+            window.confirm(
+                `Are you sure you want to change the agent URL from "/agents/${agentName}" to "/agents/${derivedAgentName}"?`
+            )
+        ) {
+            window.location.href = updateUrlHref;
+        }
+    };
+
     const menuItems = [
+        ...(showUpdateUrl
+            ? [
+                  {
+                      type: 'action' as const,
+                      icon: MoreHorizontalIcon,
+                      label: 'Update URL',
+                      onClick: handleUpdateUrl,
+                      highlight: true,
+                  },
+                  { type: 'divider' as const },
+              ]
+            : []),
         {
             type: 'link' as const,
             href: `/agents/${encodeURIComponent(agentName)}/chat`,
@@ -268,9 +296,13 @@ export function AgentOptionsMenu({
                                         // Keep menu open for copy feedback
                                     }
                                 }}
-                                className="flex items-center gap-3 px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition-colors w-full text-left"
+                                className={`flex items-center gap-3 px-4 py-2.5 w-full text-left transition-colors
+                                    ${item.highlight
+                                        ? 'bg-yellow-100 text-yellow-900 font-bold hover:bg-yellow-200'
+                                        : 'text-gray-700 hover:bg-gray-50'}
+                                `}
                             >
-                                <item.icon className="w-4 h-4 text-gray-500" />
+                                <item.icon className={`w-4 h-4 ${item.highlight ? 'text-yellow-700' : 'text-gray-500'}`} />
                                 <span className="text-sm font-medium">{item.label}</span>
                             </button>
                         );

package/apps/agents-server/src/app/agents/[agentName]/AgentProfileWrapper.tsx

@@ -19,6 +19,9 @@ type AgentProfileWrapperProps = {
 export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
     const { agent, agentUrl, agentEmail, agentName, brandColorHex, isAdmin, isHeadless, actions, children } = props;
 
+    // Derived agentName from agent data
+    const derivedAgentName = agent.agentName;
+
     return (
         <AgentProfile
             agent={agent}
@@ -28,6 +31,7 @@ export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
             renderMenu={({ onShowQrCode }) => (
                 <AgentOptionsMenu
                     agentName={agentName}
+                    derivedAgentName={derivedAgentName}
                     agentUrl={agentUrl}
                     agentEmail={agentEmail}
                     brandColorHex={brandColorHex}

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

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

package/apps/agents-server/src/app/layout.tsx

@@ -7,6 +7,7 @@ import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollecti
 import { $provideServer } from '../tools/$provideServer';
 import { getCurrentUser } from '../utils/getCurrentUser';
 import { isUserAdmin } from '../utils/isUserAdmin';
+import { getFederatedServersFromMetadata } from '../utils/getFederatedServersFromMetadata';
 import './globals.css';
 
 const barlowCondensed = Barlow_Condensed({
@@ -82,6 +83,35 @@ export default async function RootLayout({
         console.error('Failed to parse FOOTER_LINKS', error);
     }
 
+    // Fetch federated servers and add to footerLinks
+    let federatedServers: Array<{ url: string; title: string; logoUrl: string | null }> = [];
+    try {
+        const federatedServersRaw = await getFederatedServersFromMetadata();
+        federatedServers = await Promise.all(
+            federatedServersRaw.map(async (url: string) => {
+                let logoUrl: string | null = null;
+                try {
+                    // Try to fetch logo from metadata endpoint if available
+                    const res = await fetch(`${url}/api/metadata`);
+                    if (res.ok) {
+                        const meta = await res.json();
+                        logoUrl = meta.SERVER_LOGO_URL || null;
+                    }
+                } catch {
+                    logoUrl = null;
+                }
+                return {
+                    title: `Federated: ${new URL(url).hostname}`,
+                    url,
+                    logoUrl,
+                };
+            })
+        );
+        footerLinks = [...footerLinks, ...federatedServers];
+    } catch (error) {
+        console.error('Failed to fetch federated servers for footer', error);
+    }
+
     const collection = await $provideAgentCollectionForServer();
     const agents = await collection.listAgents();
 
@@ -97,6 +127,7 @@ export default async function RootLayout({
                     agents={JSON.parse(JSON.stringify(agents))}
                     isFooterShown={isFooterShown}
                     footerLinks={footerLinks}
+                    federatedServers={federatedServers}
                 >
                     {children}
                 </LayoutWrapper>

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/components/DocumentationContent/DocumentationContent.tsx

@@ -1,7 +1,4 @@
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { string_book } from '../../../../../src/book-2.0/agent-source/string_book';
-import { BookEditor } from '../../../../../src/book-components/BookEditor/BookEditor';
+import { MarkdownContent } from '@promptbook-local/components';
 import { OpenMojiIcon } from '../OpenMojiIcon/OpenMojiIcon';
 
 type DocumentationContentProps = {
@@ -17,16 +14,22 @@ type DocumentationContentProps = {
 
 export function DocumentationContent({ primary, aliases = [], isPrintOnly = false }: DocumentationContentProps) {
     return (
-        <div className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden ${isPrintOnly ? 'shadow-none border-none' : ''}`}>
-            <div className={`p-8 border-b border-gray-100 bg-gray-50/50 ${isPrintOnly ? 'border-none bg-white p-0 mb-4' : ''}`}>
+        <div
+            className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden ${
+                isPrintOnly ? 'shadow-none border-none' : ''
+            }`}
+        >
+            <div
+                className={`p-8 border-b border-gray-100 bg-gray-50/50 ${
+                    isPrintOnly ? 'border-none bg-white p-0 mb-4' : ''
+                }`}
+            >
                 <div className="flex items-center gap-4 mb-4">
                     <h1 className="text-4xl font-bold text-gray-900 tracking-tight">
                         <OpenMojiIcon icon={primary.icon} className="mr-3" />
                         {primary.type}
                         {aliases.length > 0 && (
-                            <span className="text-gray-400 font-normal ml-4 text-2xl">
-                                / {aliases.join(' / ')}
-                            </span>
+                            <span className="text-gray-400 font-normal ml-4 text-2xl">/ {aliases.join(' / ')}</span>
                         )}
                     </h1>
                     {!isPrintOnly && (
@@ -36,16 +39,15 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
                     )}
                 </div>
                 {primary.description && (
-                    <p className="text-xl text-gray-600 leading-relaxed max-w-3xl">
-                        {primary.description}
-                    </p>
+                    <p className="text-xl text-gray-600 leading-relaxed max-w-3xl">{primary.description}</p>
                 )}
             </div>
-            
+
             <div className={`p-8 ${isPrintOnly ? 'p-0' : ''}`}>
                 <article className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-gray-900 prose-h1:text-4xl prose-h1:mb-8 prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6 prose-h2:pb-2 prose-h2:border-b prose-h2:border-gray-200 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h3:text-gray-800 prose-p:text-gray-600 prose-p:leading-relaxed prose-p:mb-6 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:text-blue-700 hover:prose-a:underline prose-a:transition-colors prose-strong:font-bold prose-strong:text-gray-900 prose-code:text-blue-600 prose-code:bg-blue-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-code:font-medium prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:shadow-lg prose-pre:rounded-xl prose-pre:p-6 prose-ul:list-disc prose-ul:pl-6 prose-li:marker:text-gray-400 prose-li:mb-2 prose-ol:list-decimal prose-ol:pl-6 prose-li:mb-2 prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:bg-blue-50/50 prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-blockquote:my-8 prose-img:rounded-xl prose-img:shadow-md prose-img:my-8 prose-hr:border-gray-200 prose-hr:my-10 prose-table:w-full prose-th:text-left prose-th:py-2 prose-th:px-3 prose-th:bg-gray-100 prose-th:font-semibold prose-th:text-gray-900 prose-td:py-2 prose-td:px-3 prose-td:border-b prose-td:border-gray-200 prose-tr:hover:bg-gray-50">
-                    <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
+                    <MarkdownContent
+                        content={primary.documentation}
+                        /* TODO: !!!!
                         components={{
                             code(props) {
                                 const { children, className, node, ...rest } = props;
@@ -77,9 +79,8 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
                                 );
                             },
                         }}
-                    >
-                        {primary.documentation}
-                    </ReactMarkdown>
+                        */
+                    />
                 </article>
             </div>
         </div>

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

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { HeadlessLink } from '../_utils/headlessParam';
 
 export type FooterLink = {
     title: string;
@@ -33,14 +33,14 @@ export function Footer(props: FooterProps) {
                         <h3 className="font-bold">Product</h3>
                         <ul className="space-y-2 text-sm">
                             <li>
-                                <Link href="/get-started" className="text-gray-500 hover:text-gray-900">
+                                <HeadlessLink href="/get-started" className="text-gray-500 hover:text-gray-900">
                                     Get started
-                                </Link>
+                                </HeadlessLink>
                             </li>
                             <li>
-                                <Link href="/manifest" className="text-gray-500 hover:text-gray-900">
+                                <HeadlessLink href="/manifest" className="text-gray-500 hover:text-gray-900">
                                     Manifest
-                                </Link>
+                                </HeadlessLink>
                             </li>
                             <li>
                                 <a
@@ -51,14 +51,14 @@ export function Footer(props: FooterProps) {
                                 </a>
                             </li>
                             <li>
-                                <Link href="/terms" className="text-gray-500 hover:text-gray-900">
+                                <HeadlessLink href="/terms" className="text-gray-500 hover:text-gray-900">
                                     Terms of Service
-                                </Link>
+                                </HeadlessLink>
                             </li>
                             <li>
-                                <Link href="/privacy" className="text-gray-500 hover:text-gray-900">
+                                <HeadlessLink href="/privacy" className="text-gray-500 hover:text-gray-900">
                                     Privacy Policy
-                                </Link>
+                                </HeadlessLink>
                             </li>
                         </ul>
                     </div>
@@ -86,9 +86,9 @@ export function Footer(props: FooterProps) {
                                 </a>
                             </li>
                             <li>
-                                <Link href="/design" className="text-gray-500 hover:text-gray-900">
+                                <HeadlessLink href="/design" className="text-gray-500 hover:text-gray-900">
                                     Logos & Branding
-                                </Link>
+                                </HeadlessLink>
                             </li>
                         </ul>
                     </div>
@@ -122,9 +122,9 @@ export function Footer(props: FooterProps) {
                                 </a>
                             </li>
                             <li>
-                                <Link href="/contact" className="text-gray-500 hover:text-gray-900">
+                                <HeadlessLink href="/contact" className="text-gray-500 hover:text-gray-900">
                                     More
-                                </Link>
+                                </HeadlessLink>
                             </li>
                         </ul>
                     </div>

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} />}