@promptbook/cli 0.104.0-1 → 0.104.0-10

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>
+    );
+}

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

@@ -17,34 +17,36 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
         <div
             className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden ${
                 isPrintOnly ? 'shadow-none border-none' : ''
-            }`}
+            } print:shadow-none print:border-none print:rounded-none`}
         >
             <div
                 className={`p-8 border-b border-gray-100 bg-gray-50/50 ${
                     isPrintOnly ? 'border-none bg-white p-0 mb-4' : ''
-                }`}
+                } print:p-0 print:border-none print:bg-white print: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" />
+                    <h1 className="text-4xl font-bold text-gray-900 tracking-tight print:text-3xl">
+                        <OpenMojiIcon icon={primary.icon} variant="color" 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 print:text-xl">
+                                / {aliases.join(' / ')}
+                            </span>
                         )}
                     </h1>
                     {!isPrintOnly && (
-                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 print:hidden">
                             Commitment
                         </span>
                     )}
                 </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 print:text-lg">{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">
+            <div className={`p-8 ${isPrintOnly ? 'p-0' : ''} print: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 print:prose-base print:max-w-none">
                     <MarkdownContent
                         content={primary.documentation}
                         /* TODO: !!!!

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

@@ -114,10 +114,7 @@ export function Footer(props: FooterProps) {
                                 </a>
                             </li>
                             <li>
-                                <a
-                                    href="https://discord.gg/x3QWNaa89N"
-                                    className="text-gray-500 hover:text-gray-900"
-                                >
+                                <a href="https://discord.gg/x3QWNaa89N" className="text-gray-500 hover:text-gray-900">
                                     Discord
                                 </a>
                             </li>
@@ -160,8 +157,10 @@ export function Footer(props: FooterProps) {
                         💜
                     </p>
                 </div>
+                {/*
+                TODO: [🧠] Should we show this in the footer?
                 <div className="flex flex-col items-center mt-8">
-                    {/* <Image src={TechnologyIncubation} alt="Our Sponsor" className="h-32 w-auto" /> */}
+                    {/* <Image src={TechnologyIncubation} alt="Our Sponsor" className="h-32 w-auto" /> * /}
                     <p className="text-center text-sm text-gray-500 mt-4 max-w-lg">
                         This project was implemented with funding from the national budget
                         <br />
@@ -169,6 +168,7 @@ export function Footer(props: FooterProps) {
                         Incubation programme.
                     </p>
                 </div>
+                */}
             </div>
         </footer>
     );

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { Portal } from '../Portal/Portal';
+
+type ForgottenPasswordDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    adminEmail: string;
+};
+
+export function ForgottenPasswordDialog(props: ForgottenPasswordDialogProps) {
+    const { isOpen, onClose, adminEmail } = props;
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Portal>
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
+                <div className="relative w-full max-w-md bg-white rounded-lg shadow-lg border border-gray-200 p-6 animate-in zoom-in-95 duration-200">
+                    <button
+                        onClick={onClose}
+                        className="absolute top-4 right-4 text-gray-400 hover:text-gray-500 transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                        <span className="sr-only">Close</span>
+                    </button>
+
+                    <div className="mb-6">
+                        <h2 className="text-xl font-semibold text-gray-900">Forgotten Password</h2>
+                        <p className="text-sm text-gray-500 mt-1">Reset your password</p>
+                    </div>
+
+                    <div className="space-y-4">
+                        <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
+                            <p className="text-sm text-blue-800">
+                                This Promptbook server has no email capability. Please contact the administrator at{' '}
+                                <a
+                                    href={`mailto:${adminEmail}`}
+                                    className="font-medium text-blue-900 underline hover:text-blue-800"
+                                >
+                                    {adminEmail}
+                                </a>{' '}
+                                to reset your password.
+                            </p>
+                        </div>
+
+                        <button
+                            onClick={onClose}
+                            className="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-gray-100 text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                        >
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Portal>
+    );
+}