@promptbook/cli 0.104.0-1 → 0.104.0-11

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

@@ -1,23 +1,25 @@
 // Dynamic sitemap.xml for Agents Server
 
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { spaceTrim } from '@promptbook-local/utils';
 import { NextResponse } from 'next/server';
 
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
+    const { publicUrl } = await $provideServer();
+
     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 agents = await collection.listAgents();
 
-    const urls = agentNames
-        .map(({ agentName }) => `<url><loc>${baseUrl}agents/${encodeURIComponent(agentName)}</loc></url>`)
+    const urls = agents
+        .map(
+            ({ permanentId, agentName }) =>
+                `<url><loc>${publicUrl.href}agents/${encodeURIComponent(permanentId || agentName)}</loc></url>`,
+        )
         .join('\n');
 
     const xml = spaceTrim(

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

@@ -0,0 +1,14 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import 'swagger-ui-react/swagger-ui.css';
+
+const SwaggerUI = dynamic(() => import('swagger-ui-react'), { ssr: false });
+
+export default function SwaggerPage() {
+  return (
+    <div className="swagger-container bg-white min-h-screen">
+      <SwaggerUI url="/swagger.json" />
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { Book, FileText, Globe, Search } from 'lucide-react';
+
+type AgentCapabilityChipsProps = {
+    readonly agent: AgentBasicInformation;
+    readonly className?: string;
+};
+
+export function AgentCapabilityChips({ agent, className }: AgentCapabilityChipsProps) {
+    if (!agent.capabilities || agent.capabilities.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={`flex flex-wrap gap-2 ${className || ''}`}>
+            {agent.capabilities.map((capability, i) => {
+                const Icon =
+                    {
+                        Globe,
+                        Search,
+                        Book,
+                        FileText,
+                    }[capability.iconName] || Book;
+
+                return (
+                    <div
+                        key={i}
+                        className="flex items-center gap-1.5 bg-white/50 backdrop-blur-sm px-2.5 py-1 rounded-full text-xs font-semibold text-gray-800 border border-white/20 shadow-sm"
+                        title={capability.label}
+                    >
+                        <Icon className="w-3.5 h-3.5 opacity-70" />
+                        <span className="truncate max-w-[150px]">{capability.label}</span>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

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

@@ -1,14 +1,15 @@
 'use client';
 
-import { AgentBasicInformation } from '@promptbook-local/types';
+import { colorToDataUrl } from '@promptbook-local/color';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { AgentBasicInformation, string_agent_permanent_id } 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 { useState } from 'react';
+import { AgentCapabilityChips } from './AgentCapabilityChips';
+import { AgentProfileImage } from './AgentProfileImage';
 import { AgentQrCode } from './AgentQrCode';
 import { QrCodeModal } from './QrCodeModal';
+import { useAgentBackground } from './useAgentBackground';
 
 type AgentProfileProps = {
     /**
@@ -16,6 +17,11 @@ type AgentProfileProps = {
      */
     readonly agent: AgentBasicInformation;
 
+    /**
+     * The permanent ID of the agent
+     */
+    readonly permanentId: string_agent_permanent_id;
+
     /**
      * URL of the agent page
      *
@@ -23,6 +29,11 @@ type AgentProfileProps = {
      */
     readonly agentUrl?: string;
 
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
     /**
      * Email of the agent
      */
@@ -61,16 +72,19 @@ export function AgentProfile(props: AgentProfileProps) {
         agent,
         agentUrl = '',
         agentEmail = '',
+        publicUrl,
+        permanentId,
         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 imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(permanentId, publicUrl);
 
     const [isQrModalOpen, setIsQrModalOpen] = useState(false);
     const [isFlipped, setIsFlipped] = useState(false);
@@ -81,102 +95,14 @@ export function AgentProfile(props: AgentProfileProps) {
 
     if (fontString) {
         // [🧠] TODO: Properly parse font string to get family name
-        const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
+        // 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]);
+    const { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage } = useAgentBackground(meta.color);
 
     return (
         <>
@@ -208,14 +134,14 @@ export function AgentProfile(props: AgentProfileProps) {
                 )}
 
                 {/* 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">
+                <div className="relative z-10 flex flex-col md:grid md:grid-cols-[auto_1fr] gap-y-6 md:gap-y-4 md:gap-x-12 max-w-5xl w-full items-center md:items-start">
                     {/* Agent image card (Flippable) */}
                     <div
-                        className="flex-shrink-0 perspective-1000 group row-start-1 col-start-1 md:row-span-3"
+                        className="flex-shrink-0 perspective-1000 group w-full md:w-auto md:row-start-1 md: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"
+                            className="relative w-full md:w-80 transition-all duration-700 transform-style-3d cursor-pointer max-w-sm mx-auto md:max-w-none md:mx-0"
                             style={{
                                 aspectRatio: '1 / 1.618', // Golden Ratio
                                 transformStyle: 'preserve-3d',
@@ -230,19 +156,21 @@ export function AgentProfile(props: AgentProfileProps) {
                                     backfaceVisibility: 'hidden',
                                     backgroundColor: brandColorDarkHex,
                                     boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px ${brandColorLightHex}40`,
+
+                                    // Note: Make it squircle
+                                    // borderRadius: '50%',
+                                    // ['cornerShape' as really_any /* <- Note: `cornerShape` is non standard CSS property */]: 'squircle ',
                                 }}
                             >
-                                {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>
-                                )}
+                                <AgentProfileImage
+                                    src={imageUrl}
+                                    alt={fullname}
+                                    className="w-full h-full object-cover"
+                                    style={{
+                                        objectFit: 'cover',
+                                        backgroundImage: `url(${colorToDataUrl(brandColorLightHex)})`,
+                                    }}
+                                />
 
                                 {/* 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">
@@ -280,7 +208,7 @@ export function AgentProfile(props: AgentProfileProps) {
                     </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">
+                    <div className="w-full md:w-auto md:row-start-1 md:col-start-2 flex flex-col justify-center md:justify-start items-center md:items-start h-auto gap-4 md:gap-6 text-center md:text-left">
                         {/* Agent name with custom font */}
                         <h1
                             className="text-2xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight leading-tight"
@@ -295,16 +223,16 @@ export function AgentProfile(props: AgentProfileProps) {
                         <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>
+
+                        <AgentCapabilityChips agent={agent} />
                     </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>
+                    <div className="w-full md:col-span-1 md:col-start-2 mt-4 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">
+                        <div className="w-full md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-4 md:mt-2">
                             {actions}
                         </div>
                     )}

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

@@ -0,0 +1,92 @@
+import { Loader2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type AgentProfileImageProps = {
+    readonly src: string;
+    readonly alt: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+};
+
+export function AgentProfileImage({ src, alt, className, style }: AgentProfileImageProps) {
+    const [imageSrc, setImageSrc] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        let isMounted = true;
+        let timeoutId: NodeJS.Timeout;
+        let objectUrl: string | null = null;
+
+        const fetchImage = async () => {
+            try {
+                const response = await fetch(src);
+                if (response.ok) {
+                    const blob = await response.blob();
+                    if (!isMounted) {
+                        return;
+                    }
+
+                    objectUrl = URL.createObjectURL(blob);
+                    setImageSrc(objectUrl);
+                    setIsLoading(false);
+                } else {
+                    // Retry on non-200
+                    if (isMounted) {
+                        timeoutId = setTimeout(fetchImage, 2000);
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to fetch image, retrying...', error);
+                if (isMounted) {
+                    timeoutId = setTimeout(fetchImage, 2000);
+                }
+            }
+        };
+
+        const isExternal = (() => {
+            try {
+                return new URL(src, window.location.href).origin !== window.location.origin;
+            } catch {
+                return false;
+            }
+        })();
+
+        if (isExternal) {
+            setImageSrc(src);
+            setIsLoading(false);
+        } else {
+            setIsLoading(true);
+            fetchImage();
+        }
+
+        return () => {
+            isMounted = false;
+            clearTimeout(timeoutId);
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
+    }, [src]);
+
+    return (
+        <div className={`relative ${className}`} style={style}>
+            {/* Note: We apply style to the container, so backgroundImage works here */}
+
+            {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <Loader2 className="w-8 h-8 animate-spin text-white/50" />
+                </div>
+            )}
+
+            {imageSrc && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                    src={imageSrc}
+                    alt={alt}
+                    className="w-full h-full object-cover"
+                    // We don't pass style here because it is applied to container
+                />
+            )}
+        </div>
+    );
+}

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

@@ -24,7 +24,6 @@ export function QrCodeModal({
     personaDescription,
     agentUrl,
     agentEmail,
-    brandColorHex,
 }: QrCodeModalProps) {
     useEffect(() => {
         if (isOpen) {

package/apps/agents-server/src/components/AgentProfile/useAgentBackground.ts

@@ -0,0 +1,97 @@
+import { Color } from '../../../../../src/utils/color/Color';
+import { darken } from '../../../../../src/utils/color/operators/darken';
+import { lighten } from '../../../../../src/utils/color/operators/lighten';
+import { useMemo } from 'react';
+import spaceTrim from 'spacetrim';
+
+export function useAgentBackground(colorString: string | undefined) {
+    return useMemo(() => {
+        // [🧠] Default color should be imported constant, but for now hardcoded fallback
+        const PROMPTBOOK_COLOR_HEX = '#f15b24'; // TODO: Import PROMPTBOOK_COLOR
+        const brandColorString = colorString || 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 };
+    }, [colorString]);
+}

package/apps/agents-server/src/components/Auth/AuthControls.tsx

@@ -1,15 +1,14 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
 
 type AuthControlsProps = {
     initialUser: { username: string; isAdmin: boolean } | null;
 };
 
 export function AuthControls({ initialUser }: AuthControlsProps) {
-    const router = useRouter();
-    const [user, setUser] = useState(initialUser);
+    // const router = useRouter();
+    const [user] = useState(initialUser);
     const [isLoginOpen, setIsLoginOpen] = useState(false);
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
@@ -52,7 +51,9 @@ export function AuthControls({ initialUser }: AuthControlsProps) {
             <div className="flex items-center space-x-4">
                 <span className="text-gray-600">
                     Logged in as <strong>{user.username}</strong>
-                    {user.isAdmin && <span className="ml-2 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Admin</span>}
+                    {user.isAdmin && (
+                        <span className="ml-2 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Admin</span>
+                    )}
                 </span>
                 <button
                     onClick={handleLogout}

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

@@ -0,0 +1,26 @@
+'use client';
+
+type DeletedAgentBannerProps = {
+    message?: string;
+};
+
+export function DeletedAgentBanner({
+    message = "This agent has been deleted. You can restore it from the Recycle Bin."
+}: DeletedAgentBannerProps) {
+    return (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+            <div className="flex">
+                <div className="flex-shrink-0">
+                    <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                    </svg>
+                </div>
+                <div className="ml-3">
+                    <p className="text-sm text-yellow-700">
+                        {message}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { Download, PrinterIcon } from 'lucide-react';
+import Link from 'next/link';
+import { OpenMojiIcon } from '../OpenMojiIcon/OpenMojiIcon';
+
+export function DocsToolbar() {
+    return (
+        <div className="flex flex-wrap items-center justify-between gap-4 p-4 mb-8 bg-white rounded-xl shadow-sm border border-gray-100 print:hidden">
+            <div className="flex items-center gap-2">
+                <OpenMojiIcon icon="📚" className="text-2xl" />
+                <span className="font-semibold text-gray-700">Documentation</span>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+                <button
+                    onClick={() => window.print()}
+                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                    title="Print this page or save as PDF"
+                >
+                    <PrinterIcon className="w-4 h-4" />
+                    Print / Save as PDF
+                </button>
+
+                <Link
+                    href="/api/docs/book.md"
+                    download="book.md"
+                    target="_blank"
+                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                    title="Download raw Markdown documentation"
+                >
+                    <Download className="w-4 h-4" />
+                    Download Markdown
+                </Link>
+            </div>
+        </div>
+    );
+}