@promptbook/cli 0.104.0-1 → 0.104.0-10

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"
                     >

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

@@ -1,46 +1,124 @@
 // Client Component for rendering and deleting agents
 'use client';
 
-import React, { useState } from 'react';
 import { TrashIcon } from 'lucide-react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { AddAgentButton } from '../../app/AddAgentButton';
 import { AgentCard } from './AgentCard';
 import { Section } from './Section';
 
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
 
+type AgentWithVisibility = AgentBasicInformation & {
+    visibility?: 'PUBLIC' | 'PRIVATE';
+};
+
 type AgentsListProps = {
-    agents: AgentBasicInformation[];
-    isAdmin: boolean;
+    /**
+     * @@@
+     */
+    readonly agents: AgentWithVisibility[];
+
+    /**
+     * @@@
+     */
+    readonly isAdmin: boolean;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
 };
 
-export function AgentsList({ agents: initialAgents, isAdmin }: AgentsListProps) {
+export function AgentsList(props: AgentsListProps) {
+    const { agents: initialAgents, isAdmin, publicUrl } = props;
+    const router = useRouter();
     const [agents, setAgents] = useState(Array.from(initialAgents));
 
-    const handleDelete = async (agentName: string) => {
-        if (!window.confirm(`Delete agent "${agentName}"? It will be moved to Recycle Bin.`)) return;
-        await fetch(`/api/agents/${encodeURIComponent(agentName)}`, { method: 'DELETE' });
-        setAgents(agents.filter((a) => a.agentName !== agentName));
+    const handleDelete = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+        if (!window.confirm(`Delete agent "${agent.agentName}"? It will be moved to Recycle Bin.`)) return;
+
+        try {
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}`, { method: 'DELETE' });
+            if (response.ok) {
+                // Update local state immediately
+                setAgents(agents.filter((a) => a.permanentId !== agent.permanentId && a.agentName !== agent.agentName));
+                // Note: router.refresh() is not needed here as the local state update is sufficient
+                // and prevents the brief empty list issue during refresh
+            } else {
+                alert('Failed to delete agent');
+            }
+        } catch (error) {
+            alert('Failed to delete agent');
+        }
     };
 
-    const handleClone = async (agentName: string) => {
-        if (!window.confirm(`Clone agent "${agentName}"?`)) return;
-        const response = await fetch(`/api/agents/${encodeURIComponent(agentName)}/clone`, { method: 'POST' });
-        const newAgent = await response.json();
-        setAgents([...agents, newAgent]);
+    const handleClone = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+        if (!window.confirm(`Clone agent "${agent.agentName}"?`)) return;
+
+        try {
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}/clone`, {
+                method: 'POST',
+            });
+            if (response.ok) {
+                const newAgent = await response.json();
+                setAgents([...agents, newAgent]);
+                router.refresh(); // Refresh server data to ensure consistency
+            } else {
+                alert('Failed to clone agent');
+            }
+        } catch (error) {
+            alert('Failed to clone agent');
+        }
+    };
+
+    const handleToggleVisibility = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+
+        const newVisibility = agent.visibility === 'PUBLIC' ? 'PRIVATE' : 'PUBLIC';
+        if (!window.confirm(`Make agent "${agent.agentName}" ${newVisibility.toLowerCase()}?`)) return;
+
+        const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ visibility: newVisibility }),
+        });
+
+        if (response.ok) {
+            // Update the local state
+            setAgents(
+                agents.map((a) =>
+                    a.permanentId === agent.permanentId || a.agentName === agent.agentName
+                        ? { ...a, visibility: newVisibility }
+                        : a,
+                ),
+            );
+            router.refresh(); // Refresh server data to ensure consistency
+        } else {
+            alert('Failed to update agent visibility');
+        }
     };
 
     return (
         <Section title={`Agents (${agents.length})`}>
             {agents.map((agent) => (
                 <AgentCard
-                    key={agent.agentName}
+                    key={agent.permanentId || agent.agentName}
                     agent={agent}
-                    href={`/${agent.agentName}`}
+                    publicUrl={publicUrl}
+                    href={`/agents/${encodeURIComponent(agent.permanentId || agent.agentName)}`}
                     isAdmin={isAdmin}
                     onDelete={handleDelete}
                     onClone={handleClone}
+                    onToggleVisibility={handleToggleVisibility}
+                    visibility={agent.visibility}
                 />
             ))}
             {isAdmin && <AddAgentButton />}

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

@@ -0,0 +1,66 @@
+// Client Component for rendering deleted agents
+'use client';
+
+import { useState } from 'react';
+import { AgentCard } from './AgentCard';
+
+import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+
+type DeletedAgentsListProps = {
+    /**
+     * @@@
+     */
+    readonly agents: readonly AgentBasicInformation[];
+
+    /**
+     * @@@
+     */
+    readonly isAdmin: boolean;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+};
+
+export function DeletedAgentsList(props: DeletedAgentsListProps) {
+    const { agents: initialAgents, isAdmin, publicUrl } = props;
+    const [agents, setAgents] = useState(Array.from(initialAgents));
+
+    const handleRestore = async (agentIdentifier: string) => {
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        if (!agent) return;
+        if (!window.confirm(`Restore agent "${agent.agentName}"?`)) return;
+
+        try {
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}/restore`, {
+                method: 'POST',
+            });
+            if (response.ok) {
+                // Update local state immediately
+                setAgents(agents.filter((a) => a.permanentId !== agent.permanentId && a.agentName !== agent.agentName));
+                // Note: router.refresh() is not needed here as the local state update is sufficient
+                // and prevents the brief empty list issue during refresh
+            } else {
+                alert('Failed to restore agent');
+            }
+        } catch (error) {
+            alert('Failed to restore agent');
+        }
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {agents.map((agent) => (
+                <AgentCard
+                    key={agent.permanentId || agent.agentName}
+                    agent={agent}
+                    publicUrl={publicUrl}
+                    href={`/agents/${encodeURIComponent(agent.permanentId || agent.agentName)}`}
+                    isAdmin={isAdmin}
+                    onRestore={handleRestore}
+                />
+            ))}
+        </div>
+    );
+}