@promptbook/cli 0.103.0-66 → 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]/AgentProfileChat.tsx

@@ -57,7 +57,7 @@ export function AgentProfileChat({ agentUrl, agentName, fullname, brandColorHex,
     // The fallback above matches AgentChat.tsx default.
 
     return (
-        <div className="w-full h-[400px] md:h-[500px]">
+        <div className="w-full h-[calc(100dvh-300px)] min-h-[350px] md:h-[500px]">
             <Chat
                 title={`Chat with ${fullname}`}
                 participants={[

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

@@ -208,11 +208,14 @@ export function AgentProfile(props: AgentProfileProps) {
                 )}
 
                 {/* Main profile content */}
-                <div className="relative z-10 flex flex-col md:flex-row items-center md:items-start gap-8 md:gap-12 max-w-5xl w-full">
+                <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" style={{ perspective: '1000px' }}>
+                    <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-72 md:w-80 transition-all duration-700 transform-style-3d cursor-pointer"
+                            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',
@@ -222,7 +225,7 @@ export function AgentProfile(props: AgentProfileProps) {
                         >
                             {/* Front of Card (Image) */}
                             <div
-                                className="absolute inset-0 w-full h-full backface-hidden rounded-3xl shadow-2xl overflow-hidden backdrop-blur-sm"
+                                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,
@@ -234,7 +237,7 @@ export function AgentProfile(props: AgentProfileProps) {
                                     <img src={imageUrl} alt={fullname} className="w-full h-full object-cover" />
                                 ) : (
                                     <div
-                                        className="w-full h-full flex items-center justify-center text-8xl font-bold text-white/80"
+                                        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()}
@@ -242,14 +245,14 @@ export function AgentProfile(props: AgentProfileProps) {
                                 )}
 
                                 {/* Flip hint icon */}
-                                <div className="absolute bottom-4 right-4 bg-black/30 p-2 rounded-full text-white/80 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity">
-                                    <RepeatIcon className="w-5 h-5" />
+                                <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-3xl shadow-2xl overflow-hidden backdrop-blur-sm flex flex-col items-center justify-center p-6"
+                                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)',
@@ -269,18 +272,18 @@ export function AgentProfile(props: AgentProfileProps) {
                                 </div>
 
                                 {/* Flip hint icon */}
-                                <div className="absolute bottom-4 right-4 bg-black/10 p-2 rounded-full text-black/50 backdrop-blur-md">
-                                    <RepeatIcon className="w-5 h-5" />
+                                <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 */}
-                    <div className="flex flex-col items-center md:items-start text-center md:text-left gap-6">
+                    {/* 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-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight"
+                            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)',
                             }}
@@ -289,20 +292,22 @@ export function AgentProfile(props: AgentProfileProps) {
                         </h1>
 
                         {/* Short description */}
-                        <p className="text-lg md:text-xl text-gray-700 max-w-lg leading-relaxed font-medium">
+                        <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 */}
-                        <div className="w-full">{children}</div>
-
-                        {/* Secondary Actions */}
-                        {!isHeadless && (
-                            <div className="flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-2">
-                                {actions}
-                            </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 */}

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>