@promptbook/cli 0.104.0-6 → 0.104.0-8

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-phone.png/route.tsx

@@ -1,4 +1,5 @@
-import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
@@ -21,6 +22,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentProfile = await getAgentProfile(agentName);
         const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
         const backgroundColor = agentColor.then(grayscale(0.5));
+        const { publicUrl } = await $provideServer();
 
         return new ImageResponse(
             (
@@ -48,10 +50,9 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                         <img
                             style={{
                                 width: '80%',
-                                backgroundColor: agentColor.toHex(),
-                                borderRadius: '50%',
+                                // backgroundColor: agentColor.toHex(),
                             }}
-                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName)}
+                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
                             alt="Agent Icon"
                         />
                     </div>

package/apps/agents-server/src/app/agents/[agentName]/integration/page.tsx

@@ -25,6 +25,7 @@ export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentIntegrationPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
     const agentName = await getAgentName(params);
     const isAdmin = await isUserAdmin();
 
@@ -187,7 +188,13 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName)}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2"
                             style={{ borderColor: primaryColor }}

package/apps/agents-server/src/app/agents/[agentName]/links/page.tsx

@@ -18,6 +18,7 @@ export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentLinksPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
     const agentName = await getAgentName(params);
 
     let agentProfile;
@@ -56,7 +57,13 @@ export default async function AgentLinksPage({ params }: { params: Promise<{ age
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image || agentProfile.permanentId || generatePlaceholderAgentProfileImageUrl(agentName)}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2"
                             style={{ borderColor: primaryColor }}

package/apps/agents-server/src/app/agents/[agentName]/opengraph-image.tsx

@@ -1,3 +1,4 @@
+import { $provideServer } from '@/src/tools/$provideServer';
 import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
@@ -24,6 +25,7 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
         const agentProfile = await getAgentProfile(agentName);
         const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
         const backgroundColor = agentColor.then(grayscale(0.5));
+        const { publicUrl } = await $provideServer();
 
         return new ImageResponse(
             (
@@ -53,11 +55,14 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
                                 width: '80%',
                                 backgroundColor: agentColor.toHex(),
                                 borderRadius: '50%',
+                                aspectRatio: '1 / 1',
                             }}
                             src={
                                 agentProfile.meta.image ||
-                                agentProfile.permanentId ||
-                                generatePlaceholderAgentProfileImageUrl(agentProfile.permanentId || agentName)
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
                             }
                             alt="Agent Icon"
                         />

package/apps/agents-server/src/app/agents/[agentName]/page.tsx

@@ -27,6 +27,7 @@ export default async function AgentPage({
     const isAdmin = await isUserAdmin();
     const { headless: headlessParam } = await searchParams;
     const isHeadless = headlessParam !== undefined;
+    const { publicUrl } = await $provideServer();
 
     let agentProfile;
     try {
@@ -44,8 +45,6 @@ export default async function AgentPage({
         throw error;
     }
 
-    const { publicUrl } = await $provideServer();
-
     // Build agent page URL for QR and copy
     const agentUrl = `${publicUrl.href}${encodeURIComponent(agentName)}`;
     // <- TODO: [🐱‍🚀] Better
@@ -64,6 +63,7 @@ export default async function AgentPage({
             <AgentProfileWrapper
                 agent={agentProfile}
                 agentUrl={agentUrl}
+                publicUrl={publicUrl}
                 agentEmail={agentEmail}
                 agentName={agentName}
                 brandColorHex={brandColorHex}
@@ -97,8 +97,7 @@ export default async function AgentPage({
                     brandColorHex={brandColorHex}
                     avatarSrc={
                         agentProfile.meta.image ||
-                        agentProfile.permanentId ||
-                        generatePlaceholderAgentProfileImageUrl(agentName)
+                        generatePlaceholderAgentProfileImageUrl(agentProfile.permanentId || agentName, publicUrl)
                     }
                     isDeleted={isDeleted}
                 />

package/apps/agents-server/src/app/agents/[agentName]/system-message/page.tsx

@@ -1,6 +1,8 @@
 'use server';
 
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
 import { ArrowLeftIcon, FileTextIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import Link from 'next/link';
@@ -8,12 +10,14 @@ import { notFound } from 'next/navigation';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
 import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
-import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentSystemMessagePage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
+    const { publicUrl } = await $provideServer();
+
     const agentName = await getAgentName(params);
 
     let agentProfile;
@@ -45,7 +49,13 @@ export default async function AgentSystemMessagePage({ params }: { params: Promi
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName)}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
                         />
@@ -77,7 +87,9 @@ export default async function AgentSystemMessagePage({ params }: { params: Promi
                     <div className="mt-6 bg-blue-50 rounded-lg p-4 border border-blue-200">
                         <h3 className="text-md font-semibold text-blue-900 mb-2">Model Requirements</h3>
                         <div className="text-sm text-blue-800">
-                            <p><strong>Model Variant:</strong> CHAT</p>
+                            <p>
+                                <strong>Model Variant:</strong> CHAT
+                            </p>
                             {/* TODO: [🧠] Add more model requirements if available */}
                         </div>
                     </div>

package/apps/agents-server/src/app/api/browser-test/screenshot/route.ts

@@ -0,0 +1,30 @@
+import { $provideBrowserForServer } from '@/src/tools/$provideBrowserForServer';
+import { serializeError } from '@promptbook-local/utils';
+import { NextResponse } from 'next/server';
+import { assertsError } from '../../../../../../../src/errors/assertsError';
+
+export async function GET() {
+    try {
+        const browserContext = await $provideBrowserForServer();
+
+        const page = await browserContext.newPage();
+
+        await page.goto('https://ptbk.io');
+        const screenshotBuffer = await page.screenshot();
+
+        // await page.close();
+        // Do not close browser
+        // <- TODO: !!!! Fix
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return new NextResponse(new Blob([screenshotBuffer as any]), {
+            headers: {
+                'Content-Type': 'image/png',
+            },
+        });
+    } catch (error) {
+        assertsError(error);
+        console.error('Error taking screenshot:', error);
+        return NextResponse.json({ error: serializeError(error) }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/humans.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateHumansTxt();
+    const txt = await generateHumansTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

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

@@ -34,6 +34,8 @@ const calendarWithSeconds = {
 export default async function HomePage() {
     $sideEffect(/* Note: [🐶] This will ensure dynamic rendering of page and avoid Next.js pre-render */ headers());
 
+    const { publicUrl } = await $provideServer();
+
     const currentUser = await getCurrentUser();
     const isAdmin = await isUserAdmin(); /* <- TODO: [👹] Here should be user permissions */
 
@@ -94,9 +96,9 @@ export default async function HomePage() {
     return (
         <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
             <div className="container mx-auto px-4 py-16">
-                <AgentsList agents={[...agents]} isAdmin={isAdmin} />
+                <AgentsList agents={[...agents]} isAdmin={isAdmin} publicUrl={publicUrl} />
 
-                <ExternalAgentsSectionClient />
+                <ExternalAgentsSectionClient publicUrl={publicUrl} />
 
                 {isAdmin && <UsersList allowCreate={false} />}
 

package/apps/agents-server/src/app/recycle-bin/page.tsx

@@ -1,4 +1,5 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { TrashIcon } from 'lucide-react';
 import Link from 'next/link';
 import { DeletedAgentsList } from '../../components/Homepage/DeletedAgentsList';
@@ -9,6 +10,7 @@ export const metadata = {
 };
 
 export default async function RecycleBinPage() {
+    const { publicUrl } = await $provideServer();
     const collection = await $provideAgentCollectionForServer();
     const deletedAgents = await collection.listDeletedAgents();
     const isAdmin = await isUserAdmin();
@@ -34,7 +36,7 @@ export default async function RecycleBinPage() {
                         </Link>
                     </div>
                 ) : (
-                    <DeletedAgentsList agents={deletedAgents} isAdmin={isAdmin} />
+                    <DeletedAgentsList agents={deletedAgents} isAdmin={isAdmin} publicUrl={publicUrl} />
                 )}
             </div>
         </div>

package/apps/agents-server/src/app/robots.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateRobotsTxt();
+    const txt = await generateRobotsTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/security.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateSecurityTxt();
+    const txt = await generateSecurityTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

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

@@ -1,25 +1,24 @@
 // 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 agents = await collection.listAgents();
 
-    // Get base URL from environment or config
-    const baseUrl = NEXT_PUBLIC_SITE_URL?.href || process.env.PUBLIC_URL || 'https://ptbk.io';
-
     const urls = agents
         .map(
             ({ permanentId, agentName }) =>
-                `<url><loc>${baseUrl}agents/${encodeURIComponent(permanentId || agentName)}</loc></url>`,
+                `<url><loc>${publicUrl.href}agents/${encodeURIComponent(permanentId || agentName)}</loc></url>`,
         )
         .join('\n');
 

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

@@ -1,5 +1,6 @@
 'use client';
 
+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';
@@ -26,6 +27,11 @@ type AgentProfileProps = {
      */
     readonly agentUrl?: string;
 
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
     /**
      * Email of the agent
      */
@@ -64,6 +70,7 @@ export function AgentProfile(props: AgentProfileProps) {
         agent,
         agentUrl = '',
         agentEmail = '',
+        publicUrl,
         permanentId,
         renderMenu,
         children,
@@ -71,11 +78,11 @@ export function AgentProfile(props: AgentProfileProps) {
         isHeadless = false,
         className,
     } = props;
-    console.log('!!!!', { agent });
+
     const { meta, agentName } = agent;
     const fullname = (meta.fullname as string) || agentName || 'Agent';
     const personaDescription = agent.personaDescription || '';
-    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(permanentId);
+    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(permanentId, publicUrl);
 
     const [isQrModalOpen, setIsQrModalOpen] = useState(false);
     const [isFlipped, setIsFlipped] = useState(false);
@@ -153,17 +160,19 @@ export function AgentProfile(props: AgentProfileProps) {
                                     // ['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>
-                                )}
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img
+                                    src={imageUrl}
+                                    alt={fullname}
+                                    className="w-full h-full object-cover"
+                                    // width={1024}
+                                    // height={1792}
+                                    // <- TODO: [🤐] DRY
+                                    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">

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

@@ -305,6 +305,10 @@ export function Header(props: HeaderProps) {
                               label: 'Chat feedback',
                               href: '/admin/chat-feedback',
                           },
+                          {
+                              label: 'Browser',
+                              href: '/admin/browser-test',
+                          },
                       ],
                   },
                   {

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

@@ -8,14 +8,50 @@ import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/
 import { useAgentBackground } from '../AgentProfile/useAgentBackground';
 
 type AgentCardProps = {
-    agent: AgentBasicInformation;
-    href: string;
-    isAdmin?: boolean;
-    onDelete?: (agentIdentifier: string) => void;
-    onClone?: (agentIdentifier: string) => void;
-    onToggleVisibility?: (agentIdentifier: string) => void;
-    onRestore?: (agentIdentifier: string) => void;
-    visibility?: 'PUBLIC' | 'PRIVATE';
+    /**
+     * @@@
+     */
+    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 =
@@ -25,6 +61,7 @@ export function AgentCard({
     agent,
     href,
     isAdmin,
+    publicUrl,
     onDelete,
     onClone,
     onToggleVisibility,
@@ -33,7 +70,7 @@ export function AgentCard({
 }: AgentCardProps) {
     const { meta, agentName } = agent;
     const fullname = (meta.fullname as string) || agentName || 'Agent';
-    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(agentName);
+    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(agentName, publicUrl);
     const personaDescription = agent.personaDescription || '';
 
     const { brandColorLightHex, brandColorDarkHex, backgroundImage } = useAgentBackground(meta.color);

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

@@ -1,10 +1,10 @@
 // Client Component for rendering and deleting agents
 'use client';
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
 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';
@@ -16,16 +16,29 @@ type AgentWithVisibility = AgentBasicInformation & {
 };
 
 type AgentsListProps = {
-    agents: AgentWithVisibility[];
-    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 (agentIdentifier: string) => {
-        const agent = agents.find(a => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        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;
 
@@ -45,12 +58,14 @@ export function AgentsList({ agents: initialAgents, isAdmin }: AgentsListProps)
     };
 
     const handleClone = async (agentIdentifier: string) => {
-        const agent = agents.find(a => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        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' });
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentIdentifier)}/clone`, {
+                method: 'POST',
+            });
             if (response.ok) {
                 const newAgent = await response.json();
                 setAgents([...agents, newAgent]);
@@ -64,7 +79,7 @@ export function AgentsList({ agents: initialAgents, isAdmin }: AgentsListProps)
     };
 
     const handleToggleVisibility = async (agentIdentifier: string) => {
-        const agent = agents.find(a => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
+        const agent = agents.find((a) => a.permanentId === agentIdentifier || a.agentName === agentIdentifier);
         if (!agent) return;
 
         const newVisibility = agent.visibility === 'PUBLIC' ? 'PRIVATE' : 'PUBLIC';
@@ -78,11 +93,13 @@ export function AgentsList({ agents: initialAgents, isAdmin }: AgentsListProps)
 
         if (response.ok) {
             // Update the local state
-            setAgents(agents.map(a =>
-                a.permanentId === agent.permanentId || a.agentName === agent.agentName
-                    ? { ...a, visibility: newVisibility }
-                    : a
-            ));
+            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');
@@ -95,6 +112,7 @@ export function AgentsList({ agents: initialAgents, isAdmin }: AgentsListProps)
                 <AgentCard
                     key={agent.permanentId || agent.agentName}
                     agent={agent}
+                    publicUrl={publicUrl}
                     href={`/agents/${encodeURIComponent(agent.permanentId || agent.agentName)}`}
                     isAdmin={isAdmin}
                     onDelete={handleDelete}

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

@@ -1,26 +1,41 @@
 // Client Component for rendering deleted agents
 'use client';
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { AgentCard } from './AgentCard';
 
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
 
 type DeletedAgentsListProps = {
-    agents: readonly AgentBasicInformation[];
-    isAdmin: boolean;
+    /**
+     * @@@
+     */
+    readonly agents: readonly AgentBasicInformation[];
+
+    /**
+     * @@@
+     */
+    readonly isAdmin: boolean;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
 };
 
-export function DeletedAgentsList({ agents: initialAgents, isAdmin }: DeletedAgentsListProps) {
+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);
+        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' });
+            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));
@@ -40,6 +55,7 @@ export function DeletedAgentsList({ agents: initialAgents, isAdmin }: DeletedAge
                 <AgentCard
                     key={agent.permanentId || agent.agentName}
                     agent={agent}
+                    publicUrl={publicUrl}
                     href={`/agents/${encodeURIComponent(agent.permanentId || agent.agentName)}`}
                     isAdmin={isAdmin}
                     onRestore={handleRestore}