@promptbook/cli 0.103.0-49 → 0.103.0-51

package/apps/agents-server/package.json

@@ -1,6 +1,7 @@
 {
     "name": "promptbook-agents-server",
     "scripts": {
+        "migrate-database": "npx tsx src/database/migrate.ts",
         "dev": "(npx kill-port 4440 || true) && next dev -p 4440",
         "test-build": "npm run build",
         "build": "(npx kill-port 4440 || true) && next build",

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

@@ -1,20 +1,21 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+import { Card } from '../components/Homepage/Card';
 import { $createAgentAction } from './actions';
 
 export function AddAgentButton() {
+    const router = useRouter();
+
     const handleAddAgent = async () => {
         await $createAgentAction();
         // TODO: Add proper error handling and UI feedback
-        window.location.reload(); // Refresh to show the new agent
+        router.refresh();
     };
 
     return (
-        <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 cursor-pointer"
-            onClick={handleAddAgent}
-        >
-            + Add New Agent
+        <div onClick={handleAddAgent} className="cursor-pointer">
+            <Card>+ Add New Agent</Card>
         </div>
     );
 }

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

@@ -1,6 +1,11 @@
-import { redirect } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 
 export default async function RedirectPage({ params }: { params: Promise<{ agentName: string; rest: string[] }> }) {
     const { agentName, rest } = await params;
+
+    if (agentName === 'agents' || agentName === 'api' || agentName.startsWith('.')) {
+        notFound();
+    }
+
     redirect(`/agents/${agentName}/${rest.join('/')}`);
 }

package/apps/agents-server/src/app/{metadata → admin/metadata}/MetadataClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { metadataDefaults } from '../../database/metadataDefaults';
+import { metadataDefaults } from '../../../database/metadataDefaults';
 
 type MetadataEntry = {
     id: number;
@@ -132,15 +132,11 @@ export function MetadataClient() {
             <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-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>
+                <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">
@@ -235,12 +231,8 @@ export function MetadataClient() {
                                     <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 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)}

package/apps/agents-server/src/app/{metadata → admin/metadata}/page.tsx

@@ -1,5 +1,5 @@
-import { ForbiddenPage } from '../../components/ForbiddenPage/ForbiddenPage';
-import { isUserAdmin } from '../../utils/isUserAdmin';
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
 import { MetadataClient } from './MetadataClient';
 
 export default async function MetadataPage() {

package/apps/agents-server/src/app/agents/[agentName]/api/chat/route.ts

@@ -11,6 +11,17 @@ import { assertsError } from '../../../../../../../../src/errors/assertsError';
  */
 export const maxDuration = 300;
 
+export async function OPTIONS(request: Request) {
+    return new Response(null, {
+        status: 200,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type',
+        },
+    });
+}
+
 export async function POST(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
     let { agentName } = await params;
     agentName = decodeURIComponent(agentName);
@@ -110,6 +121,12 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
                             platform,
                         });
 
+                        // Note: [🐱‍🚀] Save the learned data
+                        const newAgentSource = agent.agentSource.value;
+                        if (newAgentSource !== agentSource) {
+                            await collection.updateAgentSource(agentName, newAgentSource);
+                        }
+
                         controller.close();
                     })
                     .catch((error) => {
@@ -120,7 +137,10 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
 
         return new Response(readableStream, {
             status: 200,
-            headers: { 'Content-Type': 'text/markdown' },
+            headers: {
+                'Content-Type': 'text/markdown',
+                'Access-Control-Allow-Origin': '*', // <- Note: Allow embedding on other websites
+            },
         });
     } catch (error) {
         assertsError(error);

package/apps/agents-server/src/app/agents/[agentName]/api/profile/route.ts

@@ -1,9 +1,21 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { parseAgentSource } from '@promptbook-local/core';
+import { computeAgentHash, parseAgentSource } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
 import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
 
+export async function OPTIONS(request: Request) {
+    keepUnused(request);
+    return new Response(null, {
+        status: 200,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type',
+        },
+    });
+}
+
 export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
     keepUnused(request /* <- Note: We dont need `request` parameter */);
     let { agentName } = await params;
@@ -13,10 +25,15 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const collection = await $provideAgentCollectionForServer();
         const agentSource = await collection.getAgentSource(agentName);
         const agentProfile = parseAgentSource(agentSource);
+        const agentHash = computeAgentHash(agentSource);
 
         return new Response(
             JSON.stringify(
-                agentProfile,
+                {
+                    ...agentProfile,
+                    agentHash,
+                    parameters: [], // <- TODO: [😰] Implement parameters
+                },
                 // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,
                 4,
@@ -24,7 +41,10 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
             ),
             {
                 status: 200,
-                headers: { 'Content-Type': 'application/json' },
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*', // <- Note: Allow embedding on other websites
+                },
             },
         );
     } catch (error) {

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

@@ -4,7 +4,7 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 // import { BookEditor } from '@promptbook-local/components';
 import { $provideServer } from '@/src/tools/$provideServer';
 import { parseAgentSource } from '@promptbook-local/core';
-import { Columns2Icon, Edit2Icon } from 'lucide-react';
+import { Columns2Icon, MessagesSquareIcon, NotebookPenIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
 import { Color } from '../../../../../../src/utils/color/Color';
@@ -114,6 +114,14 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
 
                 <div className="flex flex-col gap-2 mt-auto">
                     <div className="flex gap-2">
+                        <a
+                            href={`/agents/${encodeURIComponent(agentName)}/chat`}
+                            // <- TODO: [🧠] Can I append path like this on current browser URL in href?
+                            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
+                        >
+                            <MessagesSquareIcon className="ml-2 w-4 h-4 mr-2" />
+                            Chat
+                        </a>
                         <a
                             href={`/agents/${encodeURIComponent(agentName)}/book+chat`}
                             // <- TODO: [🧠] Can I append path like this on current browser URL in href?
@@ -127,7 +135,7 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
                             // <- TODO: [🧠] Can I append path like this on current browser URL in href?
                             className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
                         >
-                            <Edit2Icon className="ml-2 w-4 h-4 mr-2" />
+                            <NotebookPenIcon className="ml-2 w-4 h-4 mr-2" />
                             Edit
                         </a>
                     </div>

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

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import { getMetadata } from '../../../database/getMetadata';
+import { $provideAgentCollectionForServer } from '../../../tools/$provideAgentCollectionForServer';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agents = await collection.listAgents();
+        const serverUrl = (await getMetadata('SERVER_URL')) || '';
+        const federatedServersString = (await getMetadata('FEDERATED_SERVERS')) || '';
+        const federatedServers = federatedServersString
+            .split(',')
+            .map((s) => s.trim())
+            .filter((s) => s !== '');
+
+        const agentsWithUrl = agents.map((agent) => ({
+            ...agent,
+            url: `${serverUrl}/${agent.agentName}`,
+        }));
+
+        return NextResponse.json({
+            agents: agentsWithUrl,
+            federatedServers,
+        });
+    } catch (error) {
+        console.error('Error fetching agents:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch agents' },
+            { status: 500 },
+        );
+    }
+}

package/apps/agents-server/src/app/api/embed.js/route.ts

@@ -0,0 +1,93 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest) {
+    const protocol = request.nextUrl.protocol;
+    const host = request.nextUrl.host;
+    const baseUrl = `${protocol}//${host}`;
+
+    const script = `
+(function() {
+    if (customElements.get('promptbook-agent')) {
+        return;
+    }
+
+    class PromptbookAgentElement extends HTMLElement {
+        constructor() {
+            super();
+            this.iframe = null;
+        }
+
+        static get observedAttributes() {
+            return ['agent-url'];
+        }
+
+        connectedCallback() {
+            this.render();
+            window.addEventListener('message', this.handleMessage.bind(this));
+        }
+
+        disconnectedCallback() {
+            window.removeEventListener('message', this.handleMessage.bind(this));
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (name === 'agent-url' && oldValue !== newValue) {
+                this.render();
+            }
+        }
+
+        handleMessage(event) {
+            if (event.data && event.data.type === 'PROMPTBOOK_AGENT_RESIZE') {
+                if (event.data.isOpen) {
+                    this.iframe.style.width = '450px';
+                    this.iframe.style.height = '650px';
+                    this.iframe.style.maxHeight = '90vh';
+                    this.iframe.style.maxWidth = '90vw';
+                    this.iframe.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
+                    this.iframe.style.borderRadius = '12px';
+                } else {
+                    this.iframe.style.width = '60px';
+                    this.iframe.style.height = '60px';
+                    this.iframe.style.boxShadow = 'none';
+                    this.iframe.style.borderRadius = '0';
+                }
+            }
+        }
+
+        render() {
+            const agentUrl = this.getAttribute('agent-url');
+            if (!agentUrl) return;
+
+            if (!this.iframe) {
+                this.attachShadow({ mode: 'open' });
+                this.iframe = document.createElement('iframe');
+                this.iframe.style.border = 'none';
+                this.iframe.style.position = 'fixed';
+                this.iframe.style.bottom = '20px';
+                this.iframe.style.right = '20px';
+                this.iframe.style.width = '60px';
+                this.iframe.style.height = '60px';
+                this.iframe.style.zIndex = '2147483647'; // Max z-index
+                this.iframe.style.transition = 'width 0.3s ease, height 0.3s ease';
+                this.iframe.style.backgroundColor = 'transparent';
+                this.iframe.setAttribute('allow', 'microphone'); // Allow microphone if needed for voice
+                this.shadowRoot.appendChild(this.iframe);
+            }
+
+            // Construct embed URL pointing to the Next.js page we created
+            const embedUrl = '${baseUrl}/embed?agentUrl=' + encodeURIComponent(agentUrl);
+            this.iframe.src = embedUrl;
+        }
+    }
+
+    customElements.define('promptbook-agent', PromptbookAgentElement);
+})();
+    `;
+
+    return new NextResponse(script, {
+        headers: {
+            'Content-Type': 'application/javascript',
+            'Access-Control-Allow-Origin': '*',
+        },
+    });
+}

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { PromptbookAgent } from '@promptbook-local/components';
+import { useSearchParams } from 'next/navigation';
+
+export default function EmbedPage() {
+    const searchParams = useSearchParams();
+    const agentUrl = searchParams.get('agentUrl');
+
+    if (!agentUrl) {
+        return <div className="text-red-500">Missing agentUrl parameter</div>;
+    }
+
+    return (
+        <div className="w-full h-full bg-transparent">
+            <PromptbookAgent
+                agentUrl={agentUrl}
+                onOpenChange={(isOpen) => {
+                    window.parent.postMessage({ type: 'PROMPTBOOK_AGENT_RESIZE', isOpen }, '*');
+                }}
+            />
+        </div>
+    );
+}

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

@@ -3,18 +3,22 @@
 import { getSingleLlmExecutionTools } from '@promptbook-local/core';
 import moment from 'moment';
 import { headers } from 'next/headers';
-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 { AgentCard } from '../components/Homepage/AgentCard';
+import { ModelCard } from '../components/Homepage/ModelCard';
+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 { getMetadata } from '../database/getMetadata';
 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 { getFederatedAgents } from '../utils/getFederatedAgents';
 import { isUserAdmin } from '../utils/isUserAdmin';
 import { AddAgentButton } from './AddAgentButton';
 
@@ -37,12 +41,20 @@ export default async function HomePage() {
     const collection = await $provideAgentCollectionForServer();
     const agents = await collection.listAgents();
 
+    const federatedServersString = (await getMetadata('FEDERATED_SERVERS')) || '';
+    const federatedServers = federatedServersString
+        .split(',')
+        .map((s) => s.trim())
+        .filter((s) => s !== '');
+
+    const externalAgents = await getFederatedAgents(federatedServers);
+
     const longRunningTask = getLongRunningTask();
 
     const executionTools = await $provideExecutionToolsForServer();
     const models = await getSingleLlmExecutionTools(executionTools.llm).listModels();
 
-    const host = (await headers()).get('host');
+    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">
@@ -51,45 +63,34 @@ export default async function HomePage() {
                     <AuthControls initialUser={currentUser} />
                 </div>
 
-                <>
-                    <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={`/${agent.agentName}`}>
-                                <AvatarProfile
-                                    {...{ agent }}
-                                    style={
-                                        !agent.meta.color
-                                            ? {}
-                                            : {
-                                                  backgroundColor: `${agent.meta.color}22`, // <- TODO: Use Color object here
-                                              }
-                                    }
-                                    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"
-                                />
-                            </Link>
+                <Section title={`Agents (${agents.length})`}>
+                    {agents.map((agent) => (
+                        <AgentCard key={agent.agentName} agent={agent} href={`/${agent.agentName}`} />
+                    ))}
+                    {isAdmin && <AddAgentButton />}
+                </Section>
+
+                {externalAgents.length > 0 && (
+                    <Section title={`External Agents (${externalAgents.length})`}>
+                        {externalAgents.map((agent) => (
+                            <AgentCard key={agent.url} agent={agent} href={agent.url} />
                         ))}
-                        {isAdmin && <AddAgentButton />}
-                    </div>
-                </>
+                    </Section>
+                )}
 
                 {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>
-                    </>
+                    <Section title={`Models (${models.length})`}>
+                        {models.map(({ modelName, modelTitle, modelDescription }) => (
+                            <ModelCard
+                                key={modelName}
+                                modelName={modelName}
+                                modelTitle={modelTitle || modelName}
+                                modelDescription={modelDescription}
+                            />
+                        ))}
+                    </Section>
                 )}
 
                 {isAdmin && (
@@ -100,48 +101,27 @@ export default async function HomePage() {
                 )}
 
                 {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>
-
-                            <VercelDeploymentCard />
-
-                            <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>
-                    </>
+                    <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>

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

@@ -59,21 +59,41 @@ export function Header(props: HeaderProps) {
                     {/* Desktop Navigation */}
                     <nav className="hidden md:flex items-center gap-8">
                         {isAdmin && (
-                            <Link
-                                href="/metadata"
-                                className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
-                            >
-                                Metadata
-                            </Link>
+                            <>
+                                <Link
+                                    href="/"
+                                    className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                                >
+                                    Agents
+                                </Link>
+                                <Link
+                                    href="/"
+                                    className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                                >
+                                    Models
+                                </Link>
+                                <Link
+                                    href="/admin/metadata"
+                                    className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                                >
+                                    Metadata
+                                </Link>
+                                <Link
+                                    href="https://ptbk.io/"
+                                    className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                                >
+                                    About
+                                </Link>
+                            </>
                         )}
 
                         {just(false /* TODO: [🧠] Figure out what to do with theese links */) && (
                             <Link
-                                href="https://ptbk.io/#try-it-yourself"
+                                href="https://ptbk.io/"
                                 target="_blank"
                                 className="text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
                             >
-                                Try it yourself
+                                Create your server
                             </Link>
                         )}
                     </nav>