@promptbook/cli 0.103.0-48 → 0.103.0-49

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

@@ -2,6 +2,40 @@
 @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;
@@ -17,7 +51,7 @@
 body {
     background: var(--background);
     color: var(--foreground);
-    font-family: 'Barlow Condensed', Arial, Helvetica, sans-serif;
+    font-family: var(--font-barlow-condensed), 'OpenMojiBlack', Arial, Helvetica, sans-serif;
 }
 
 /* Custom utilities */

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

@@ -1,24 +1,33 @@
 import faviconLogoImage from '@/public/favicon.ico';
+import { LayoutWrapper } from '@/src/components/LayoutWrapper/LayoutWrapper';
 import type { Metadata } from 'next';
 import { Barlow_Condensed } from 'next/font/google';
+import { getMetadata } from '../database/getMetadata';
+import { isUserAdmin } from '../utils/isUserAdmin';
 import './globals.css';
 
 const barlowCondensed = Barlow_Condensed({
     subsets: ['latin'],
     weight: ['300', '400', '500', '600', '700'],
+    variable: '--font-barlow-condensed',
 });
 
-export const metadata: Metadata = {
-    title: 'Promptbook agents server',
-    description: '@@@',
-    keywords: ['@@@'],
-    authors: [{ name: 'Promptbook Team' }],
-    openGraph: {
-        title: 'Promptbook agents server',
-        description: '@@@',
-        type: 'website',
-        images: [
-            /*
+export async function generateMetadata(): Promise<Metadata> {
+    const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
+    const serverDescription = (await getMetadata('SERVER_DESCRIPTION')) || 'Agents server powered by Promptbook';
+    const serverUrl = (await getMetadata('SERVER_URL')) || 'https://ptbk.io';
+
+    return {
+        title: serverName,
+        description: serverDescription,
+        // TODO: keywords: ['@@@'],
+        authors: [{ name: 'Promptbook Team' }],
+        openGraph: {
+            title: serverName,
+            description: serverDescription,
+            type: 'website',
+            images: [
+                /*
             TODO:
             {
                 url: 'https://www.ptbk.io/design',
@@ -27,21 +36,28 @@ export const metadata: Metadata = {
                 alt: 'Promptbook agents server',
             },
             */
-        ],
-    },
-    twitter: {
-        card: 'summary_large_image',
-        title: 'Promptbook agents server',
-        description: '@@@',
-        // TODO: images: ['https://www.ptbk.io/design'],
-    },
-};
+            ],
+        },
+        twitter: {
+            card: 'summary_large_image',
+            title: serverName,
+            description: serverDescription,
+            // TODO: images: ['https://www.ptbk.io/design'],
+        },
+        metadataBase: new URL(serverUrl),
+    };
+}
 
-export default function RootLayout({
+export default async function RootLayout({
     children,
 }: Readonly<{
     children: React.ReactNode;
 }>) {
+    const isAdmin = await isUserAdmin();
+    const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
+    const serverLogoUrl = (await getMetadata('SERVER_LOGO_URL')) || null;
+    const serverFaviconUrl = (await getMetadata('SERVER_FAVICON_URL')) || faviconLogoImage.src;
+
     return (
         <html lang="en">
             <head>
@@ -64,9 +80,13 @@ export default function RootLayout({
                 />
                 */}
                 {/* Default favicon as a fallback */}
-                <link rel="icon" href={faviconLogoImage.src} type="image/x-icon" />
+                <link rel="icon" href={serverFaviconUrl} type="image/x-icon" />
             </head>
-            <body className={`${barlowCondensed.className} antialiased bg-white text-gray-900`}>{children}</body>
+            <body className={`${barlowCondensed.variable} antialiased bg-white text-gray-900`}>
+                <LayoutWrapper isAdmin={isAdmin} serverName={serverName} serverLogoUrl={serverLogoUrl}>
+                    {children}
+                </LayoutWrapper>
+            </body>
         </html>
     );
 }

package/apps/agents-server/src/app/metadata/MetadataClient.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { metadataDefaults } from '../../database/metadataDefaults';
+
+type MetadataEntry = {
+    id: number;
+    key: string;
+    value: string;
+    note: string | null;
+    createdAt: string;
+    updatedAt: string;
+    isDefault?: boolean;
+};
+
+export function MetadataClient() {
+    const [metadata, setMetadata] = useState<MetadataEntry[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [editingId, setEditingId] = useState<number | null>(null);
+    const [formState, setFormState] = useState<{
+        key: string;
+        value: string;
+        note: string;
+    }>({ key: '', value: '', note: '' });
+
+    const fetchMetadata = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/metadata');
+            if (!response.ok) {
+                throw new Error('Failed to fetch metadata');
+            }
+            const data: MetadataEntry[] = await response.json();
+
+            // Merge defaults
+            const mergedData = [...data];
+            for (const def of metadataDefaults) {
+                if (!mergedData.find((m) => m.key === def.key)) {
+                    mergedData.push({
+                        id: -1,
+                        key: def.key,
+                        value: def.value,
+                        note: def.note,
+                        createdAt: new Date().toISOString(),
+                        updatedAt: new Date().toISOString(),
+                        isDefault: true,
+                    });
+                }
+            }
+            // Sort by key
+            mergedData.sort((a, b) => a.key.localeCompare(b.key));
+
+            setMetadata(mergedData);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchMetadata();
+    }, []);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        try {
+            // If editingId is -1 (default value) or null (new value), use POST to create
+            // If editingId is > 0 (existing value), use PUT to update
+            const method = editingId && editingId !== -1 ? 'PUT' : 'POST';
+            const response = await fetch('/api/metadata', {
+                method,
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formState),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Failed to save metadata');
+            }
+
+            setFormState({ key: '', value: '', note: '' });
+            setEditingId(null);
+            fetchMetadata();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        }
+    };
+
+    const handleEdit = (entry: MetadataEntry) => {
+        setEditingId(entry.id);
+        setFormState({
+            key: entry.key,
+            value: entry.value,
+            note: entry.note || '',
+        });
+    };
+
+    const handleDelete = async (key: string) => {
+        if (!confirm('Are you sure you want to delete this metadata?')) return;
+
+        try {
+            const response = await fetch(`/api/metadata?key=${encodeURIComponent(key)}`, {
+                method: 'DELETE',
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Failed to delete metadata');
+            }
+
+            fetchMetadata();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        }
+    };
+
+    const handleCancel = () => {
+        setEditingId(null);
+        setFormState({ key: '', value: '', note: '' });
+    };
+
+    if (loading && metadata.length === 0) {
+        return <div className="p-8 text-center">Loading metadata...</div>;
+    }
+
+    return (
+        <div className="container mx-auto p-8 max-w-4xl">
+            <h1 className="text-3xl font-bold mb-8">Metadata Management</h1>
+
+            {error && (
+                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
+                    {error}
+                </div>
+            )}
+
+            <div className="bg-white shadow rounded-lg p-6 mb-8">
+                <h2 className="text-xl font-semibold mb-4">
+                    {editingId ? 'Edit Metadata' : 'Add New Metadata'}
+                </h2>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <div>
+                        <label htmlFor="key" className="block text-sm font-medium text-gray-700 mb-1">
+                            Key
+                        </label>
+                        <input
+                            type="text"
+                            id="key"
+                            value={formState.key}
+                            onChange={(e) => setFormState({ ...formState, key: e.target.value })}
+                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            required
+                            disabled={!!editingId} // Key cannot be changed during edit
+                            placeholder="e.g., SERVER_NAME"
+                        />
+                        {editingId && <p className="text-xs text-gray-500 mt-1">Key cannot be changed.</p>}
+                    </div>
+                    <div>
+                        <label htmlFor="value" className="block text-sm font-medium text-gray-700 mb-1">
+                            Value
+                        </label>
+                        <textarea
+                            id="value"
+                            value={formState.value}
+                            onChange={(e) => setFormState({ ...formState, value: e.target.value })}
+                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[100px]"
+                            required
+                            placeholder="Metadata value..."
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="note" className="block text-sm font-medium text-gray-700 mb-1">
+                            Note (Optional)
+                        </label>
+                        <input
+                            type="text"
+                            id="note"
+                            value={formState.note}
+                            onChange={(e) => setFormState({ ...formState, note: e.target.value })}
+                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="Description of this metadata"
+                        />
+                    </div>
+                    <div className="flex space-x-3">
+                        <button
+                            type="submit"
+                            className="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
+                        >
+                            {editingId ? 'Update Metadata' : 'Add Metadata'}
+                        </button>
+                        {editingId && (
+                            <button
+                                type="button"
+                                onClick={handleCancel}
+                                className="bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300 transition-colors"
+                            >
+                                Cancel
+                            </button>
+                        )}
+                    </div>
+                </form>
+            </div>
+
+            <div className="bg-white shadow rounded-lg overflow-hidden">
+                <table className="min-w-full divide-y divide-gray-200">
+                    <thead className="bg-gray-50">
+                        <tr>
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Key
+                            </th>
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Value
+                            </th>
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Note
+                            </th>
+                            <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody className="bg-white divide-y divide-gray-200">
+                        {metadata.length === 0 ? (
+                            <tr>
+                                <td colSpan={4} className="px-6 py-4 text-center text-gray-500">
+                                    No metadata found.
+                                </td>
+                            </tr>
+                        ) : (
+                            metadata.map((entry) => (
+                                <tr key={entry.id}>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                        {entry.key}
+                                    </td>
+                                    <td className="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">
+                                        {entry.value}
+                                    </td>
+                                    <td className="px-6 py-4 text-sm text-gray-500">
+                                        {entry.note || '-'}
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                        <button
+                                            onClick={() => handleEdit(entry)}
+                                            className="text-blue-600 hover:text-blue-900 mr-4"
+                                        >
+                                            Edit
+                                        </button>
+                                        {!entry.isDefault && (
+                                            <button
+                                                onClick={() => handleDelete(entry.key)}
+                                                className="text-red-600 hover:text-red-900"
+                                            >
+                                                Delete
+                                            </button>
+                                        )}
+                                        {entry.isDefault && (
+                                            <span className="text-gray-400 text-xs italic ml-2">Default</span>
+                                        )}
+                                    </td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../utils/isUserAdmin';
+import { MetadataClient } from './MetadataClient';
+
+export default async function MetadataPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <MetadataClient />;
+}

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

@@ -1,17 +1,21 @@
 'use server';
 
-import logoImage from '@/public/logo-blue-white-256.png';
 import { getSingleLlmExecutionTools } from '@promptbook-local/core';
 import moment from 'moment';
 import { headers } from 'next/headers';
-import Image from 'next/image';
 import Link from 'next/link';
 import { AvatarProfile } from '../../../../src/book-components/AvatarProfile/AvatarProfile/AvatarProfile';
 import { AboutPromptbookInformation } from '../../../../src/utils/misc/xAboutPromptbookInformation';
 import { $sideEffect } from '../../../../src/utils/organization/$sideEffect';
+import { AuthControls } from '../components/Auth/AuthControls';
+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 { getCurrentUser } from '../utils/getCurrentUser';
+import { isUserAdmin } from '../utils/isUserAdmin';
 import { AddAgentButton } from './AddAgentButton';
 
 // Add calendar formats that include seconds
@@ -27,6 +31,9 @@ const calendarWithSeconds = {
 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 currentUser = await getCurrentUser();
+
     const collection = await $provideAgentCollectionForServer();
     const agents = await collection.listAgents();
 
@@ -35,19 +42,20 @@ export default async function HomePage() {
     const executionTools = await $provideExecutionToolsForServer();
     const models = await getSingleLlmExecutionTools(executionTools.llm).listModels();
 
+    const host = (await headers()).get('host');
+
     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">
-                <h1 className="text-4xl font-bold text-gray-900 mb-4">
-                    <Image src={logoImage} alt="Promptbook Logo" height={50} className="inline-block mr-4" />
-                    Promptbook Agents Server
-                </h1>
+                <div className="flex justify-end mb-4">
+                    <AuthControls initialUser={currentUser} />
+                </div>
 
                 <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">Agents ({agents.length})</h2>
+                    <h2 className="text-3xl text-gray-900 mt-4 mb-4">Agents ({agents.length})</h2>
                     <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                         {agents.map((agent) => (
-                            <Link key={agent.agentName} href={`/agents/${agent.agentName}`}>
+                            <Link key={agent.agentName} href={`/${agent.agentName}`}>
                                 <AvatarProfile
                                     {...{ agent }}
                                     style={
@@ -61,50 +69,80 @@ export default async function HomePage() {
                                 />
                             </Link>
                         ))}
-                        <AddAgentButton />
+                        {isAdmin && <AddAgentButton />}
                     </div>
                 </>
 
-                <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">Models ({models.length})</h2>
-                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                        {models.map(({ modelName, modelTitle, modelDescription }) => (
-                            <Link key={modelName} href={`#!!!`}>
-                                <div className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400">
-                                    <h2 className="text-2xl font-semibold text-gray-900 mb-2">{modelTitle}</h2>
-                                    <code>{modelName}</code>
-                                    <p className="text-gray-600">{modelDescription}</p>
-                                </div>
+                {isAdmin && <UsersList />}
+
+                {isAdmin && (
+                    <>
+                        <h2 className="text-3xl text-gray-900 mt-16 mb-4">Models ({models.length})</h2>
+                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                            {models.map(({ modelName, modelTitle, modelDescription }) => (
+                                <Link key={modelName} href={`#[🐱‍🚀]`}>
+                                    <div className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400">
+                                        <h2 className="text-2xl font-semibold text-gray-900 mb-2">{modelTitle}</h2>
+                                        <code>{modelName}</code>
+                                        <p className="text-gray-600">{modelDescription}</p>
+                                    </div>
+                                </Link>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {isAdmin && (
+                    <>
+                        {/* Note: Shown in <AboutPromptbookInformation />: <h2 className="text-3xl text-gray-900 mt-16 mb-4">About Promptbook</h2> */}
+                        <AboutPromptbookInformation />
+                    </>
+                )}
+
+                {isAdmin && (
+                    <>
+                        <h2 className="text-3xl text-gray-900 mt-16 mb-4">Technical Information</h2>
+                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                            <Link
+                                href={'#'}
+                                className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
+                            >
+                                <h2 className="text-2xl font-semibold text-gray-900 mb-2">
+                                    Long running task {longRunningTask.taskId}
+                                </h2>
+                                <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>
                             </Link>
-                        ))}
-                    </div>
-                </>
 
-                <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">About</h2>
-                    <AboutPromptbookInformation />
-                </>
+                            <VercelDeploymentCard />
 
-                <>
-                    <h2 className="text-3xl text-gray-900 mt-16 mb-4">Technical Information</h2>
-                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                        <Link
-                            href={'#'}
-                            className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
-                        >
-                            <h2 className="text-2xl font-semibold text-gray-900 mb-2">
-                                Long running task {longRunningTask.taskId}
-                            </h2>
-                            <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>
-                        </Link>
-                    </div>
-                </>
+                            <Link
+                                href={'#'}
+                                className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
+                            >
+                                <h2 className="text-2xl font-semibold text-gray-900 mb-2">HTTP Information</h2>
+
+                                <p className="text-gray-600">Host: {host}</p>
+                            </Link>
+
+                            <Link
+                                href={'#'}
+                                className="block p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400"
+                            >
+                                <h2 className="text-2xl font-semibold text-gray-900 mb-2">Server</h2>
+
+                                <pre>{JSON.stringify(await $provideServer(), null, 2)}</pre>
+                            </Link>
+                        </div>
+                    </>
+                )}
             </div>
         </div>
     );