@promptbook/cli 0.103.0-9 → 0.104.0-0

package/apps/agents-server/src/app/globals.css

@@ -0,0 +1,276 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/**
+ * OpenMoji black and white CSS
+ *
+ * https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-black-glyf/openmoji.css
+ */
+@font-face {
+    font-family: 'OpenMojiBlack';
+    src: url('/fonts/OpenMoji-black-glyf.woff2') format('woff2');
+    unicode-range: U+23, U+2A, U+2D, U+30-39, U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3, U+2117, U+2120, U+2122,
+        U+2139, U+2194-2199, U+21A9, U+21AA, U+229C, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FE, U+24C2,
+        U+25A1, U+25AA-25AE, U+25B6, U+25C0, U+25C9, U+25D0, U+25D1, U+25E7-25EA, U+25ED, U+25EE, U+25FB-25FE,
+        U+2600-2605, U+260E, U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626, U+262A, U+262E,
+        U+262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F, U+2660, U+2663, U+2665, U+2666, U+2668, U+267B,
+        U+267E, U+267F, U+2691-2697, U+2699, U+269B, U+269C, U+26A0, U+26A1, U+26A7, U+26AA, U+26AB, U+26B0, U+26B1,
+        U+26BD, U+26BE, U+26C4, U+26C5, U+26C8, U+26CE, U+26CF, U+26D1, U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5,
+        U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728,
+        U+2733, U+2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763, U+2764, U+2795-2797, U+27A1,
+        U+27B0, U+27BF, U+2934, U+2935, U+2B05-2B07, U+2B0C, U+2B0D, U+2B1B, U+2B1C, U+2B1F-2B24, U+2B2E, U+2B2F,
+        U+2B50, U+2B55, U+2B58, U+2B8F, U+2BBA-2BBC, U+2BC3, U+2BC4, U+2BEA, U+2BEB, U+3030, U+303D, U+3297, U+3299,
+        U+E000-E009, U+E010, U+E011, U+E040-E06D, U+E080-E0B4, U+E0C0-E0CC, U+E0FF-E10D, U+E140-E14A, U+E150-E157,
+        U+E181-E189, U+E1C0-E1C4, U+E1C6-E1D9, U+E200-E216, U+E240-E269, U+E280-E283, U+E2C0-E2C4, U+E2C6-E2DA,
+        U+E300-E303, U+E305-E30F, U+E312-E316, U+E318-E322, U+E324-E329, U+E32B, U+E340-E348, U+E380, U+E381, U+F000,
+        U+F77A, U+F8FF, U+FE0F, U+1F004, U+1F0CF, U+1F10D-1F10F, U+1F12F, U+1F16D-1F171, U+1F17E, U+1F17F, U+1F18E,
+        U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250, U+1F251,
+        U+1F260-1F265, U+1F300-1F321, U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5,
+        U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F, U+1F570, U+1F573-1F57A, U+1F587,
+        U+1F58A-1F58D, U+1F590, U+1F595, U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2, U+1F5BC, U+1F5C2-1F5C4,
+        U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5,
+        U+1F6CB-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0, U+1F6F3-1F6FC, U+1F7E0-1F7EB,
+        U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1F9FF, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD,
+        U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FBC5-1FBC9, U+E0061-E0067, U+E0069,
+        U+E006C-E0079, U+E007F;
+}
+
+:root {
+    --background: #ffffff;
+    --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #0a0a0a;
+        --foreground: #ededed;
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-barlow-condensed), 'OpenMojiBlack', Arial, Helvetica, sans-serif;
+}
+
+/* Poppins font for agent names and headings */
+.font-poppins {
+    font-family: var(--font-poppins), 'Poppins', system-ui, -apple-system, sans-serif;
+}
+
+/* Custom utilities */
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Mermaid diagram styling */
+.mermaid-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mermaid-container svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Code block styling */
+pre code {
+    font-family: var(--font-mono), 'Courier New', monospace;
+}
+
+/* Smooth transitions */
+* {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
+        transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+/* Focus styles */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* Loading animation */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+
+/* Tailwind CSS animation utilities */
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slide-in-from-top-2 {
+    from {
+        transform: translateY(-0.5rem);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes zoom-in-95 {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.animate-in {
+    animation-duration: 200ms;
+    animation-fill-mode: both;
+}
+
+.fade-in {
+    animation-name: fade-in;
+}
+
+.slide-in-from-top-2 {
+    animation-name: slide-in-from-top-2;
+}
+
+.zoom-in-95 {
+    animation-name: zoom-in-95;
+}
+
+/* Gradient backgrounds */
+.bg-gradient-to-br {
+    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+/* Component preview container */
+.component-preview {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 1px solid #e2e8f0;
+}
+
+/* Print styles */
+@media print {
+    @page {
+        margin: 2cm;
+    }
+
+    /* Hide UI elements */
+    header,
+    footer,
+    nav,
+    aside,
+    button:not(.print:block),
+    .no-print,
+    [role="complementary"],
+    #portal-root {
+        display: none !important;
+    }
+
+    /* Reset layout */
+    body,
+    main {
+        padding: 0 !important;
+        margin: 0 !important;
+        background: white !important;
+        min-height: auto !important;
+        width: 100% !important;
+        color: black !important;
+    }
+
+    /* Remove shadows and backgrounds for clean print */
+    * {
+        box-shadow: none !important;
+        text-shadow: none !important;
+        background-color: transparent !important;
+        background-image: none !important;
+    }
+
+    /* Ensure text visibility */
+    h1, h2, h3, h4, h5, h6, p, li, span, div {
+        color: black !important;
+    }
+
+    /* Links */
+    a {
+        text-decoration: underline;
+        color: black !important;
+    }
+
+    /* Preserve borders */
+    .border, .border-b, .border-t, .border-l, .border-r {
+        border-color: #ddd !important;
+    }
+
+    /* Page break control */
+    h1, h2 {
+        break-after: avoid;
+        page-break-after: avoid;
+    }
+
+    p, li, pre, code {
+        break-inside: avoid;
+        page-break-inside: avoid;
+    }
+
+    /* Specific component overrides */
+    .card, .bg-white {
+        border: none !important;
+    }
+
+    /* Code blocks */
+    pre, code {
+        background-color: #f5f5f5 !important;
+        border: 1px solid #ddd !important;
+        white-space: pre-wrap !important;
+    }
+}

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

@@ -0,0 +1,15 @@
+// Dynamic humans.txt for Agents Server
+
+import { generateHumansTxt } from '@/src/components/_utils/generateMetaTxt';
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const txt = generateHumansTxt();
+    return new NextResponse(txt, {
+        headers: {
+            'Content-Type': 'text/plain',
+        },
+    });
+}

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

@@ -0,0 +1,139 @@
+import faviconLogoImage from '@/public/favicon.ico';
+import { LayoutWrapper } from '@/src/components/LayoutWrapper/LayoutWrapper';
+import type { Metadata } from 'next';
+import { Barlow_Condensed, Poppins } from 'next/font/google';
+import { getMetadata } from '../database/getMetadata';
+import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
+import { $provideServer } from '../tools/$provideServer';
+import { getCurrentUser } from '../utils/getCurrentUser';
+import { isUserAdmin } from '../utils/isUserAdmin';
+import { getFederatedServersFromMetadata } from '../utils/getFederatedServersFromMetadata';
+import './globals.css';
+
+const barlowCondensed = Barlow_Condensed({
+    subsets: ['latin'],
+    weight: ['300', '400', '500', '600', '700'],
+    variable: '--font-barlow-condensed',
+});
+
+const poppins = Poppins({
+    subsets: ['latin'],
+    weight: ['400', '500', '600', '700', '800'],
+    variable: '--font-poppins',
+});
+
+export async function generateMetadata(): Promise<Metadata> {
+    const { publicUrl } = await $provideServer();
+    const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
+    const serverDescription = (await getMetadata('SERVER_DESCRIPTION')) || 'Agents server powered by Promptbook';
+    const serverFaviconUrl = (await getMetadata('SERVER_FAVICON_URL')) || faviconLogoImage.src;
+
+    return {
+        title: serverName,
+        description: serverDescription,
+        // TODO: keywords: ['@@@'],
+        authors: [{ name: 'Promptbook Team' }],
+        icons: {
+            icon: serverFaviconUrl,
+            shortcut: serverFaviconUrl,
+            apple: serverFaviconUrl,
+        },
+        openGraph: {
+            title: serverName,
+            description: serverDescription,
+            type: 'website',
+            images: [
+                /*
+            TODO:
+            {
+                url: 'https://www.ptbk.io/design',
+                width: 1200,
+                height: 630,
+                alt: 'Promptbook agents server',
+            },
+            */
+            ],
+        },
+        twitter: {
+            card: 'summary_large_image',
+            title: serverName,
+            description: serverDescription,
+            // TODO: images: ['https://www.ptbk.io/design'],
+        },
+        metadataBase: publicUrl,
+    };
+}
+
+export default async function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    const isAdmin = await isUserAdmin();
+    const currentUser = await getCurrentUser();
+    const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
+    const serverLogoUrl = (await getMetadata('SERVER_LOGO_URL')) || null;
+    const isFooterShown = ((await getMetadata('IS_FOOTER_SHOWN')) || 'true') === 'true';
+
+    let footerLinks = [];
+    try {
+        const footerLinksString = (await getMetadata('FOOTER_LINKS')) || '[]';
+        footerLinks = JSON.parse(footerLinksString);
+    } catch (error) {
+        console.error('Failed to parse FOOTER_LINKS', error);
+    }
+
+    // Fetch federated servers and add to footerLinks
+    let federatedServers: Array<{ url: string; title: string; logoUrl: string | null }> = [];
+    try {
+        const federatedServersRaw = await getFederatedServersFromMetadata();
+        federatedServers = await Promise.all(
+            federatedServersRaw.map(async (url: string) => {
+                let logoUrl: string | null = null;
+                try {
+                    // Try to fetch logo from metadata endpoint if available
+                    const res = await fetch(`${url}/api/metadata`);
+                    if (res.ok) {
+                        const meta = await res.json();
+                        logoUrl = meta.SERVER_LOGO_URL || null;
+                    }
+                } catch {
+                    logoUrl = null;
+                }
+                return {
+                    title: `Federated: ${new URL(url).hostname}`,
+                    url,
+                    logoUrl,
+                };
+            })
+        );
+        footerLinks = [...footerLinks, ...federatedServers];
+    } catch (error) {
+        console.error('Failed to fetch federated servers for footer', error);
+    }
+
+    const collection = await $provideAgentCollectionForServer();
+    const agents = await collection.listAgents();
+
+    return (
+        <html lang="en">
+            {/* Note: Icon is set via metadata to allow agent-page specific icons to override it */}
+            <body className={`${barlowCondensed.variable} ${poppins.variable} antialiased bg-white text-gray-900`}>
+                <LayoutWrapper
+                    isAdmin={isAdmin}
+                    currentUser={currentUser}
+                    serverName={serverName}
+                    serverLogoUrl={serverLogoUrl}
+                    agents={JSON.parse(JSON.stringify(agents))}
+                    isFooterShown={isFooterShown}
+                    footerLinks={footerLinks}
+                    federatedServers={federatedServers}
+                >
+                    {children}
+                </LayoutWrapper>
+                {/* Global portal root for modals/popups */}
+                <div id="portal-root" />
+            </body>
+        </html>
+    );
+}

package/apps/agents-server/src/app/manifest.ts

@@ -0,0 +1,114 @@
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { MetadataRoute } from 'next';
+import { headers } from 'next/headers';
+import { Color } from '../../../../src/utils/color/Color';
+import { getMetadata } from '../database/getMetadata';
+import { $provideServer } from '../tools/$provideServer';
+import { getAgentProfile } from './agents/[agentName]/_utils';
+
+/**
+ * Manifest for PWA Progressive Web App
+ */
+export default async function manifest(): Promise<MetadataRoute.Manifest> {
+    const { publicUrl } = await $provideServer();
+    const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
+    const serverDescription = (await getMetadata('SERVER_DESCRIPTION')) || 'Agents server powered by Promptbook';
+
+    const referer = (await headers()).get('referer') || '';
+    const isAgentManifest = referer.includes('/agents/');
+
+    if (!isAgentManifest) {
+        return {
+            name: serverName,
+            short_name: serverName,
+            description: serverDescription,
+            start_url: publicUrl.href + '?utm_source=pwa&utm_medium=install&utm_campaign=agents_server_app',
+            display_override: ['fullscreen', 'minimal-ui'],
+            display: 'standalone',
+            background_color: PROMPTBOOK_COLOR.toHex(),
+            theme_color: PROMPTBOOK_COLOR.toHex(),
+            icons: [
+                // TODO: Create icons for the server homepage
+            ],
+            scope: publicUrl.href,
+        } satisfies MetadataRoute.Manifest;
+    }
+
+    const agentName = decodeURIComponent(referer.split('/agents/')[1]?.split('/')[0]);
+
+    try {
+        const agentProfile = await getAgentProfile(agentName);
+
+        const name = agentProfile.meta.fullname || agentProfile.agentName;
+        const short_name = agentProfile.agentName;
+        const description = agentProfile.meta.description || agentProfile.personaDescription || `Agent ${name}`;
+
+        // Extract brand color from meta
+        const brandColor = Color.fromSafe(agentProfile.meta.color || PROMPTBOOK_COLOR);
+        const theme_color = brandColor.toHex();
+        const background_color = '#ffffff';
+
+        const agentUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+
+        const icons: MetadataRoute.Manifest['icons'] = [
+            {
+                src: `${agentUrl}/images/icon-256.png`,
+                sizes: '256x256',
+                type: 'image/png',
+                purpose: 'any',
+            },
+            {
+                src: `${agentUrl}/images/icon-256.png`,
+                sizes: '256x256',
+                type: 'image/png',
+                purpose: 'maskable',
+            },
+        ];
+
+        const screenshots: MetadataRoute.Manifest['screenshots'] = [
+            {
+                src: `${agentUrl}/images/screenshot-fullhd.png`,
+                sizes: '1920x1080',
+                type: 'image/png',
+                form_factor: 'wide',
+                label: 'Full HD Screenshot',
+            },
+            {
+                src: `${agentUrl}/images/screenshot-phone.png`,
+                sizes: '1080x1920',
+                type: 'image/png',
+                form_factor: 'narrow',
+                label: 'Phone Screenshot',
+            },
+        ];
+
+        return {
+            id: agentUrl,
+            name,
+            short_name,
+            description,
+            start_url: `${agentUrl}?headless&utm_source=pwa&utm_medium=install&utm_campaign=agent_app`,
+            scope: agentUrl,
+            display_override: ['fullscreen', 'minimal-ui'],
+            display: 'standalone',
+            background_color,
+            theme_color,
+            icons,
+            screenshots,
+        } satisfies MetadataRoute.Manifest;
+    } catch (error) {
+        console.warn(`Failed to generate manifest for agent ${agentName}`, error);
+        return {
+            name: agentName,
+            short_name: agentName,
+            start_url: `${publicUrl.href}agents/${encodeURIComponent(
+                agentName,
+            )}?headless&utm_source=pwa&utm_medium=install&utm_campaign=agent_app`,
+            display_override: ['fullscreen', 'minimal-ui'],
+            display: 'standalone',
+            background_color: '#ffffff',
+            theme_color: PROMPTBOOK_COLOR.toHex(),
+            icons: [],
+        } satisfies MetadataRoute.Manifest;
+    }
+}

package/apps/agents-server/src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { NotFoundPage } from '../components/NotFoundPage/NotFoundPage';
+
+export default function NotFound() {
+    return <NotFoundPage />;
+}

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

@@ -0,0 +1,96 @@
+'use server';
+
+import { getSingleLlmExecutionTools } from '@promptbook-local/core';
+import moment from 'moment';
+import { headers } from 'next/headers';
+import { AboutPromptbookInformation } from '../../../../src/utils/misc/xAboutPromptbookInformation';
+import { $sideEffect } from '../../../../src/utils/organization/$sideEffect';
+import { AgentsList } from '../components/Homepage/AgentsList';
+import { ExternalAgentsSectionClient } from '../components/Homepage/ExternalAgentsSectionClient';
+import { ModelsSection } from '../components/Homepage/ModelsSection';
+import { Section } from '../components/Homepage/Section';
+import { TechInfoCard } from '../components/Homepage/TechInfoCard';
+import { UsersList } from '../components/UsersList/UsersList';
+import VercelDeploymentCard from '../components/VercelDeploymentCard/VercelDeploymentCard';
+import { getLongRunningTask } from '../deamons/longRunningTask';
+import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
+import { $provideExecutionToolsForServer } from '../tools/$provideExecutionToolsForServer';
+import { $provideServer } from '../tools/$provideServer';
+import { isUserAdmin } from '../utils/isUserAdmin';
+
+// Add calendar formats that include seconds
+const calendarWithSeconds = {
+    sameDay: '[Today at] LTS',
+    nextDay: '[Tomorrow at] LTS',
+    nextWeek: 'dddd [at] LTS',
+    lastDay: '[Yesterday at] LTS',
+    lastWeek: '[Last] dddd [at] LTS',
+    sameElse: 'L [at] LTS',
+};
+
+export default async function HomePage() {
+    $sideEffect(/* Note: [🐶] This will ensure dynamic rendering of page and avoid Next.js pre-render */ headers());
+
+    const isAdmin = await isUserAdmin(); /* <- TODO: [👹] Here should be user permissions */
+
+    const collection = await $provideAgentCollectionForServer();
+    const agents = await collection.listAgents();
+
+    const longRunningTask = getLongRunningTask();
+
+    const executionTools = await $provideExecutionToolsForServer();
+    const models = await getSingleLlmExecutionTools(executionTools.llm).listModels();
+
+    const host = (await headers()).get('host') || 'unknown';
+
+    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} />
+
+                <ExternalAgentsSectionClient />
+
+                {isAdmin && <UsersList allowCreate={false} />}
+
+                {isAdmin && (
+                    <ModelsSection models={models} maxVisible={11} showViewAllLink />
+                )}
+
+                {isAdmin && (
+                    <>
+                        {/* Note: Shown in <AboutPromptbookInformation />: <h2 className="text-3xl text-gray-900 mt-16 mb-4">About Promptbook</h2> */}
+                        <AboutPromptbookInformation />
+                    </>
+                )}
+
+                {isAdmin && (
+                    <Section title="Technical Information">
+                        <TechInfoCard title={`Long running task ${longRunningTask.taskId}`}>
+                            <p className="text-gray-600">Tick: {longRunningTask.tick}</p>
+                            <p className="text-gray-600">
+                                Created At: {moment(longRunningTask.createdAt).calendar(undefined, calendarWithSeconds)}
+                            </p>
+                            <p className="text-gray-600">
+                                Updated At: {moment(longRunningTask.updatedAt).calendar(undefined, calendarWithSeconds)}
+                            </p>
+                        </TechInfoCard>
+
+                        <VercelDeploymentCard />
+
+                        <TechInfoCard title="HTTP Information">
+                            <p className="text-gray-600">Host: {host}</p>
+                        </TechInfoCard>
+
+                        <TechInfoCard title="Server">
+                            <pre>{JSON.stringify(await $provideServer(), null, 2)}</pre>
+                        </TechInfoCard>
+                    </Section>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * TODO: [🕋] Use here `AboutPromptbookInformation`
+ */

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

@@ -0,0 +1,40 @@
+'use client';
+
+import { RefreshCcwIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { restoreDeletedAgent } from './actions';
+
+type RestoreAgentButtonProps = {
+    agentName: string;
+};
+
+export function RestoreAgentButton({ agentName }: RestoreAgentButtonProps) {
+    const router = useRouter();
+    const [isRestoring, setIsRestoring] = useState(false);
+
+    const handleRestore = async () => {
+        try {
+            setIsRestoring(true);
+            await restoreDeletedAgent(agentName);
+            router.refresh();
+        } catch (error) {
+            console.error('Failed to restore agent:', error);
+            alert('Failed to restore agent');
+        } finally {
+            setIsRestoring(false);
+        }
+    };
+
+    return (
+        <button
+            onClick={handleRestore}
+            disabled={isRestoring}
+            className="flex items-center gap-2 px-3 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 text-gray-700 disabled:opacity-50"
+            title="Restore agent"
+        >
+            <RefreshCcwIcon className={`w-4 h-4 ${isRestoring ? 'animate-spin' : ''}`} />
+            {isRestoring ? 'Restoring...' : 'Restore'}
+        </button>
+    );
+}