@promptbook/cli 0.104.0-0 → 0.104.0-10

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

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

@@ -4,14 +4,15 @@ 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 { 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';
 import { HamburgerMenu } from '../../../../../src/book-components/_common/HamburgerMenu/HamburgerMenu';
+import { useMenuHoisting } from '../../../../../src/book-components/_common/MenuHoisting/MenuHoistingContext';
 import { just } from '../../../../../src/utils/organization/just';
 import type { UserInfo } from '../../utils/getCurrentUser';
 import { getVisibleCommitmentDefinitions } from '../../utils/getVisibleCommitmentDefinitions';
+import { HeadlessLink, pushWithHeadless, useIsHeadless } from '../_utils/headlessParam';
 import { ChangePasswordDialog } from '../ChangePasswordDialog/ChangePasswordDialog';
 import { LoginDialog } from '../LoginDialog/LoginDialog';
 import { useUsersAdmin } from '../UsersList/useUsersAdmin';
@@ -92,6 +93,7 @@ export function Header(props: HeaderProps) {
     const [isCreatingAgent, setIsCreatingAgent] = useState(false);
     const router = useRouter();
     const isHeadless = useIsHeadless();
+    const menuHoisting = useMenuHoisting();
 
     const { users: adminUsers } = useUsersAdmin();
 
@@ -117,16 +119,22 @@ 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 [isMobileFederatedOpen, setIsMobileFederatedOpen] = useState(false);
 
-    const federatedDropdownItems: SubMenuItem[] = federatedServers.map(server => {
+    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" />
+                          <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>
@@ -138,7 +146,13 @@ export function Header(props: HeaderProps) {
                   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" />
+                          <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>
                   ),
@@ -167,6 +181,12 @@ export function Header(props: HeaderProps) {
                     isBold: true,
                     isBordered: true,
                 } as SubMenuItem,
+                {
+                    label: 'API Reference',
+                    href: '/swagger',
+                    isBold: true,
+                    isBordered: true,
+                } as SubMenuItem,
                 ...getVisibleCommitmentDefinitions().map(
                     ({ primary, aliases }) =>
                         ({
@@ -261,6 +281,10 @@ export function Header(props: HeaderProps) {
                       isMobileOpen: isMobileSystemOpen,
                       setIsMobileOpen: setIsMobileSystemOpen,
                       items: [
+                          {
+                              label: 'OpenAPI Documentation',
+                              href: '/swagger',
+                          },
                           {
                               label: 'API Tokens',
                               href: '/admin/api-tokens',
@@ -273,10 +297,18 @@ export function Header(props: HeaderProps) {
                               label: 'Chat history',
                               href: '/admin/chat-history',
                           },
+                          {
+                              label: 'Messages & Emails',
+                              href: '/admin/messages',
+                          },
                           {
                               label: 'Chat feedback',
                               href: '/admin/chat-feedback',
                           },
+                          {
+                              label: 'Browser',
+                              href: '/admin/browser-test',
+                          },
                       ],
                   },
                   {
@@ -320,44 +352,46 @@ export function Header(props: HeaderProps) {
 
                     {/* 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) {
+                        {/* Federated servers dropdown - only show if there are federated servers */}
+                        {federatedServers.length > 0 && (
+                            <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 (
-                                                <HeadlessLink
-                                                    key={subIndex}
-                                                    href={subItem.href}
-                                                    className={className}
-                                                    onClick={() => setIsFederatedOpen(false)}
-                                                >
+                                                <span key={subIndex} className={className}>
                                                     {subItem.label}
-                                                </HeadlessLink>
+                                                </span>
                                             );
-                                        }
-                                        return (
-                                            <span key={subIndex} className={className}>
-                                                {subItem.label}
-                                            </span>
-                                        );
-                                    })}
-                                </div>
-                            )}
-                        </div>
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        )}
                         {menuItems.map((item, index) => {
                             if (item.type === 'link') {
                                 return (
@@ -433,6 +467,24 @@ export function Header(props: HeaderProps) {
                         )}
                     </nav>
 
+                    {/* Hoisted Menu Items */}
+                    {menuHoisting && menuHoisting.menu.length > 0 && (
+                        <div className="hidden lg:flex items-center gap-2 border-r border-gray-200 pr-4 mr-2">
+                            {menuHoisting.menu.map((item, index) => (
+                                <button
+                                    key={index}
+                                    onClick={item.onClick}
+                                    className={`p-2 rounded-md hover:bg-gray-100 transition-colors text-gray-600 hover:text-gray-900 ${
+                                        item.isActive ? 'bg-gray-100 text-gray-900' : ''
+                                    }`}
+                                    title={item.name}
+                                >
+                                    {item.icon}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+
                     {/* CTA Button & Mobile Menu Toggle */}
                     <div className="flex items-center gap-4">
                         {just(false /* TODO: [🧠] Figure out what to do with call to action */) && (
@@ -531,6 +583,28 @@ export function Header(props: HeaderProps) {
                         }}
                     >
                         <nav className="container mx-auto flex flex-col gap-4 px-6">
+                            {/* Hoisted Menu Items for Mobile */}
+                            {menuHoisting && menuHoisting.menu.length > 0 && (
+                                <div className="py-2 border-b border-gray-100 mb-2 flex gap-2 overflow-x-auto">
+                                    {menuHoisting.menu.map((item, index) => (
+                                        <button
+                                            key={index}
+                                            onClick={() => {
+                                                item.onClick();
+                                                setIsMenuOpen(false);
+                                            }}
+                                            className={`p-2 rounded-md hover:bg-gray-100 transition-colors text-gray-600 hover:text-gray-900 ${
+                                                item.isActive ? 'bg-gray-100 text-gray-900' : ''
+                                            }`}
+                                            title={item.name}
+                                        >
+                                            {item.icon}
+                                            <span className="sr-only">{item.name}</span>
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+
                             {/* Login Status for Mobile */}
                             <div className="py-2 border-b border-gray-100 mb-2">
                                 {!currentUser && !isAdmin && (

package/apps/agents-server/src/components/Homepage/AgentCard.tsx

@@ -1,43 +1,165 @@
+'use client';
+
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { really_any } from '@promptbook-local/types';
+import { EyeIcon, EyeOffIcon, RotateCcwIcon } from 'lucide-react';
 import Link from 'next/link';
-import React from 'react';
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
-import { AvatarProfile } from '../../../../../src/book-components/AvatarProfile/AvatarProfile/AvatarProfile';
-import { Card } from './Card';
+import { useAgentBackground } from '../AgentProfile/useAgentBackground';
 
 type AgentCardProps = {
-    agent: AgentBasicInformation;
-    href: string;
-    isAdmin?: boolean;
-    onDelete?: (agentName: string) => void;
-    onClone?: (agentName: string) => void;
+    /**
+     * @@@
+     */
+    readonly agent: AgentBasicInformation;
+
+    /**
+     * @@@
+     */
+    readonly href: string;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
+    /**
+     * @@@
+     */
+    readonly isAdmin?: boolean;
+
+    /**
+     * @@@
+     */
+    readonly onDelete?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly onClone?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly onToggleVisibility?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly onRestore?: (agentIdentifier: string) => void;
+
+    /**
+     * @@@
+     */
+    readonly visibility?: 'PUBLIC' | 'PRIVATE';
 };
 
 const ACTION_BUTTON_CLASSES =
     'text-white px-3 py-1 rounded shadow text-xs font-medium transition-colors uppercase tracking-wider opacity-80 hover:opacity-100';
 
-export function AgentCard({ agent, href, isAdmin, onDelete, onClone }: AgentCardProps) {
+export function AgentCard({
+    agent,
+    href,
+    isAdmin,
+    publicUrl,
+    onDelete,
+    onClone,
+    onToggleVisibility,
+    onRestore,
+    visibility,
+}: AgentCardProps) {
+    const { meta, agentName } = agent;
+    const fullname = (meta.fullname as string) || agentName || 'Agent';
+    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(agentName, publicUrl);
+    const personaDescription = agent.personaDescription || '';
+
+    const { brandColorLightHex, brandColorDarkHex, backgroundImage } = useAgentBackground(meta.color);
+
     return (
         <div className="relative h-full group">
-            <Link href={href} className="block h-full">
-                <Card
-                    style={
-                        !agent.meta.color
-                            ? {}
-                            : {
-                                  backgroundColor: `${agent.meta.color}22`,
-                              }
-                    }
+            <Link href={href} className="block h-full transition-transform hover:scale-[1.02] duration-300">
+                <div
+                    className="h-full rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 flex flex-col border border-white/20"
+                    style={{
+                        background: `url("${backgroundImage}")`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }}
                 >
-                    <AvatarProfile agent={agent} />
-                </Card>
+                    <div className="p-6 flex flex-col items-center flex-grow backdrop-blur-[2px]">
+                        {/* Image container */}
+                        <div
+                            className="w-32 h-32 mb-4 shadow-lg overflow-hidden flex-shrink-0 bg-black/20"
+                            style={{
+                                boxShadow: `0 10px 20px -5px rgba(0, 0, 0, 0.2), 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-4xl font-bold text-white/80"
+                                    style={{ backgroundColor: brandColorDarkHex }}
+                                >
+                                    {fullname.charAt(0).toUpperCase()}
+                                </div>
+                            )}
+                        </div>
+
+                        <h3
+                            className="text-lg font-bold text-gray-900 text-center leading-tight mb-2"
+                            style={{ textShadow: '0 1px 2px rgba(255,255,255,0.8)' }}
+                        >
+                            {fullname}
+                        </h3>
+
+                        <p className="text-sm text-gray-800 text-center line-clamp-3 leading-relaxed font-medium mix-blend-hard-light">
+                            {personaDescription}
+                        </p>
+                    </div>
+                </div>
             </Link>
-            {isAdmin && (
+            {isAdmin && onRestore && (
                 <div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                    <button
+                        className={`bg-green-500 hover:bg-green-600 ${ACTION_BUTTON_CLASSES}`}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            onRestore(agent.permanentId || agent.agentName);
+                        }}
+                        title="Restore agent"
+                    >
+                        <RotateCcwIcon className="w-3 h-3" />
+                    </button>
+                </div>
+            )}
+            {isAdmin && !onRestore && (
+                <div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                    <button
+                        className={`${
+                            visibility === 'PUBLIC'
+                                ? 'bg-green-500 hover:bg-green-600'
+                                : 'bg-gray-500 hover:bg-gray-600'
+                        } ${ACTION_BUTTON_CLASSES}`}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            onToggleVisibility?.(agent.permanentId || agent.agentName);
+                        }}
+                        title={`Make ${visibility === 'PUBLIC' ? 'private' : 'public'}`}
+                    >
+                        {visibility === 'PUBLIC' ? <EyeIcon className="w-3 h-3" /> : <EyeOffIcon className="w-3 h-3" />}
+                    </button>
                     <button
                         className={`bg-blue-500 hover:bg-blue-600 ${ACTION_BUTTON_CLASSES}`}
                         onClick={(e) => {
                             e.preventDefault();
-                            onClone?.(agent.agentName);
+                            onClone?.(agent.permanentId || agent.agentName);
                         }}
                         title="Clone agent"
                     >
@@ -47,7 +169,7 @@ export function AgentCard({ agent, href, isAdmin, onDelete, onClone }: AgentCard
                         className={`bg-red-500 hover:bg-red-600 ${ACTION_BUTTON_CLASSES}`}
                         onClick={(e) => {
                             e.preventDefault();
-                            onDelete?.(agent.agentName);
+                            onDelete?.(agent.permanentId || agent.agentName);
                         }}
                         title="Delete agent"
                     >