@promptbook/cli 0.103.0-50 → 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/{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/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,11 +3,13 @@
 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';
@@ -15,8 +17,8 @@ import { getLongRunningTask } from '../deamons/longRunningTask';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
 import { $provideExecutionToolsForServer } from '../tools/$provideExecutionToolsForServer';
 import { $provideServer } from '../tools/$provideServer';
-import { getFederatedAgents } from '../utils/getFederatedAgents';
 import { getCurrentUser } from '../utils/getCurrentUser';
+import { getFederatedAgents } from '../utils/getFederatedAgents';
 import { isUserAdmin } from '../utils/isUserAdmin';
 import { AddAgentButton } from './AddAgentButton';
 
@@ -52,7 +54,7 @@ export default async function HomePage() {
     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">
@@ -61,68 +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>
-                        ))}
-                        {isAdmin && <AddAgentButton />}
-                    </div>
-                </>
+                <Section title={`Agents (${agents.length})`}>
+                    {agents.map((agent) => (
+                        <AgentCard key={agent.agentName} agent={agent} href={`/${agent.agentName}`} />
+                    ))}
+                    {isAdmin && <AddAgentButton />}
+                </Section>
 
                 {externalAgents.length > 0 && (
-                    <>
-                        <h2 className="text-3xl text-gray-900 mt-16 mb-4">External Agents ({externalAgents.length})</h2>
-                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                            {externalAgents.map((agent) => (
-                                <Link key={agent.url} href={agent.url}>
-                                    <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>
-                            ))}
-                        </div>
-                    </>
+                    <Section title={`External Agents (${externalAgents.length})`}>
+                        {externalAgents.map((agent) => (
+                            <AgentCard key={agent.url} agent={agent} href={agent.url} />
+                        ))}
+                    </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 && (
@@ -133,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>

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

@@ -0,0 +1,28 @@
+import Link from 'next/link';
+import React from 'react';
+import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+import { AvatarProfile } from '../../../../../src/book-components/AvatarProfile/AvatarProfile/AvatarProfile';
+import { Card } from './Card';
+
+type AgentCardProps = {
+    agent: AgentBasicInformation;
+    href: string;
+};
+
+export function AgentCard({ agent, href }: AgentCardProps) {
+    return (
+        <Link href={href}>
+            <Card
+                style={
+                    !agent.meta.color
+                        ? {}
+                        : {
+                              backgroundColor: `${agent.meta.color}22`,
+                          }
+                }
+            >
+                <AvatarProfile agent={agent} />
+            </Card>
+        </Link>
+    );
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+type CardProps = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+export function Card({ children, className = '', style }: CardProps) {
+    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 ${className}`}
+            style={style}
+        >
+            {children}
+        </div>
+    );
+}

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

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import React from 'react';
+import { Card } from './Card';
+
+type ModelCardProps = {
+    modelName: string;
+    modelTitle: string;
+    modelDescription?: string;
+};
+
+export function ModelCard({ modelName, modelTitle, modelDescription }: ModelCardProps) {
+    return (
+        <Link href={`#[🐱‍🚀]`}>
+            <Card className="h-full flex flex-col">
+                <div className="flex justify-between items-start mb-2">
+                    <h2 className="text-xl font-bold text-gray-900">{modelTitle}</h2>
+                    <span className="inline-block bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded font-mono">
+                        {modelName}
+                    </span>
+                </div>
+                {modelDescription && (
+                    <p className="text-gray-600 text-sm mt-2 flex-grow leading-relaxed">
+                        {modelDescription}
+                    </p>
+                )}
+            </Card>
+        </Link>
+    );
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+type SectionProps = {
+    title: string;
+    children: React.ReactNode;
+};
+
+export function Section({ title, children }: SectionProps) {
+    return (
+        <section className="mt-16 first:mt-4 mb-4">
+            <h2 className="text-3xl text-gray-900 mb-6 font-light">{title}</h2>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                {children}
+            </div>
+        </section>
+    );
+}

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

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import React from 'react';
+import { Card } from './Card';
+
+type TechInfoCardProps = {
+    title: string;
+    children: React.ReactNode;
+    href?: string;
+};
+
+export function TechInfoCard({ title, children, href = '#' }: TechInfoCardProps) {
+    return (
+        <Link href={href}>
+            <Card>
+                <h2 className="text-2xl font-semibold text-gray-900 mb-2">{title}</h2>
+                {children}
+            </Card>
+        </Link>
+    );
+}

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

@@ -1,6 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { Card } from '../Homepage/Card';
+import { Section } from '../Homepage/Section';
 
 type User = {
     id: number;
@@ -111,13 +113,11 @@ export function UsersList() {
 
     return (
         <div className="space-y-6">
-            <h2 className="text-3xl text-gray-900 mt-16 mb-4">Users ({users.length})</h2>
-            
             {error && <div className="bg-red-100 text-red-700 p-3 rounded">{error}</div>}
 
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <Section title={`Users (${users.length})`}>
                 {users.map((user) => (
-                    <div key={user.id} className="block p-6 bg-white rounded-lg shadow-md border border-gray-200">
+                    <Card key={user.id}>
                         <div className="flex justify-between items-start">
                             <div>
                                 <h3 className="text-xl font-semibold text-gray-900">{user.username}</h3>
@@ -139,7 +139,7 @@ export function UsersList() {
                                 </button>
                             </div>
                         </div>
-                    </div>
+                    </Card>
                 ))}
                 
                 {/* Create User Form */}
@@ -184,7 +184,7 @@ export function UsersList() {
                         </button>
                     </form>
                 </div>
-            </div>
+            </Section>
         </div>
     );
 }

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

@@ -16,19 +16,14 @@ import {
     NEXT_PUBLIC_VERCEL_TARGET_ENV,
     NEXT_PUBLIC_VERCEL_URL,
 } from '@/config';
-import Link from 'next/link';
+import { TechInfoCard } from '../Homepage/TechInfoCard';
 
 /**
  * [♐️] Expose Vercel environment variables to indentify the deployment
  */
 export default function VercelDeploymentCard() {
     return (
-        <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-4">Vercel Deployment</h2>
-
+        <TechInfoCard title="Vercel Deployment">
             <p className="text-gray-600">NEXT_PUBLIC_VERCEL_ENV: {NEXT_PUBLIC_VERCEL_ENV}</p>
             <p className="text-gray-600">NEXT_PUBLIC_VERCEL_TARGET_ENV: {NEXT_PUBLIC_VERCEL_TARGET_ENV}</p>
             <p className="text-gray-600">NEXT_PUBLIC_VERCEL_URL: {NEXT_PUBLIC_VERCEL_URL}</p>
@@ -55,6 +50,6 @@ export default function VercelDeploymentCard() {
             <p className="text-gray-600">
                 NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID: {NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID}
             </p>
-        </Link>
+        </TechInfoCard>
     );
 }

package/apps/agents-server/src/database/migrate.ts

@@ -0,0 +1,131 @@
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
+import * as path from 'path';
+import { Client } from 'pg';
+
+dotenv.config();
+
+async function migrate() {
+    console.info('🚀 Starting database migration');
+
+    // 1. Get configuration
+    const prefixesEnv = process.env.SUPABASE_MIGRATION_PREFIXES;
+    if (!prefixesEnv) {
+        console.warn('⚠️ SUPABASE_MIGRATION_PREFIXES is not defined. Skipping migration.');
+        return;
+    }
+    const prefixes = prefixesEnv
+        .split(',')
+        .map((p) => p.trim())
+        .filter((p) => p !== '');
+
+    if (prefixes.length === 0) {
+        console.warn('⚠️ No prefixes found in SUPABASE_MIGRATION_PREFIXES. Skipping migration.');
+        return;
+    }
+
+    const connectionString = process.env.POSTGRES_URL || process.env.DATABASE_URL;
+    if (!connectionString) {
+        console.error('❌ POSTGRES_URL or DATABASE_URL is not defined.');
+        process.exit(1);
+    }
+
+    console.info(`📋 Found ${prefixes.length} prefixes to migrate: ${prefixes.join(', ')}`);
+
+    // 2. Connect to database
+    const client = new Client({
+        connectionString,
+        ssl: { rejectUnauthorized: false }, // Required for some Supabase/Heroku connections
+    });
+
+    try {
+        await client.connect();
+        console.info('🔌 Connected to database');
+
+        // 3. Read migration files
+        const migrationsDir = path.join(__dirname, 'migrations');
+        if (!fs.existsSync(migrationsDir)) {
+            console.error(`❌ Migrations directory not found at ${migrationsDir}`);
+            process.exit(1);
+        }
+
+        const migrationFiles = fs
+            .readdirSync(migrationsDir)
+            .filter((file) => file.endsWith('.sql'))
+            .sort(); // Ensure files are processed in order
+
+        console.info(`📂 Found ${migrationFiles.length} migration files`);
+
+        // 4. Iterate over prefixes and apply migrations
+        for (const prefix of prefixes) {
+            console.info(`\n🏗️ Migrating prefix: "${prefix}"`);
+            const migrationsTableName = `${prefix}Migrations`;
+
+            // 4.1 Create migrations table if not exists
+            const createMigrationsTableSql = `
+                CREATE TABLE IF NOT EXISTS "${migrationsTableName}" (
+                    "filename" TEXT PRIMARY KEY,
+                    "appliedAt" TIMESTAMP WITH TIME ZONE DEFAULT now()
+                );
+            `;
+            await client.query(createMigrationsTableSql);
+
+            // Enable RLS for migrations table
+            const enableRlsSql = `ALTER TABLE "${migrationsTableName}" ENABLE ROW LEVEL SECURITY;`;
+            await client.query(enableRlsSql);
+
+            // 4.2 Get applied migrations
+            const { rows: appliedMigrationsRows } = await client.query(
+                `SELECT "filename" FROM "${migrationsTableName}"`,
+            );
+            const appliedMigrations = new Set(appliedMigrationsRows.map((row) => row.filename));
+
+            // 4.3 Apply new migrations in one big transaction
+            let migrationError = null;
+            await client.query('BEGIN');
+            try {
+                for (const file of migrationFiles) {
+                    if (appliedMigrations.has(file)) {
+                        // console.info(`  ⏭️  Skipping ${file} (already applied)`);
+                        continue;
+                    }
+
+                    console.info(`  🚀 Applying ${file}...`);
+                    const filePath = path.join(migrationsDir, file);
+                    let sql = fs.readFileSync(filePath, 'utf-8');
+
+                    // Replace prefix placeholder
+                    sql = sql.replace(/prefix_/g, prefix);
+
+                    try {
+                        await client.query(sql);
+                        await client.query(`INSERT INTO "${migrationsTableName}" ("filename") VALUES ($1)`, [file]);
+                        console.info(`  ✅ Applied ${file}`);
+                    } catch (error) {
+                        console.error(`  ❌ Failed to apply ${file}:`, error);
+                        migrationError = error;
+                        break;
+                    }
+                }
+                if (migrationError) {
+                    await client.query('ROLLBACK');
+                    throw migrationError;
+                } else {
+                    await client.query('COMMIT');
+                }
+            } catch (error) {
+                await client.query('ROLLBACK');
+                throw error;
+            }
+        }
+
+        console.info('\n🎉 All migrations completed successfully');
+    } catch (error) {
+        console.error('\n❌ Migration failed:', error);
+        process.exit(1);
+    } finally {
+        await client.end();
+    }
+}
+
+migrate();

package/apps/agents-server/src/database/{schema.sql → migrations/2025-11-0001-initial-schema.sql}

@@ -1,22 +1,8 @@
-
 -- Note: This is primary source of truth for the database schema
 --       In future we want to be compatible with more then Supabase so we keep SQL as main schema definition
 --       To update, search for [💽]
 
 
-CREATE TABLE IF NOT EXISTS "prefix_Metadata" (
-    "id" BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
-    "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
-    "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
-    "key" TEXT NOT NULL,
-    "value" TEXT NOT NULL,
-    "note" TEXT NULL,
-    CONSTRAINT prefix_Metadata_key_key UNIQUE ("key")
-);
-
-ALTER TABLE "prefix_Metadata" ENABLE ROW LEVEL SECURITY;
-
-
 CREATE TABLE IF NOT EXISTS "prefix_Agent" (
     "id" BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
     "agentName" TEXT NOT NULL,
@@ -36,7 +22,7 @@ CREATE TABLE IF NOT EXISTS "prefix_Agent" (
     "preparedExternals" JSONB NULL
 );
 -- Ensure uniqueness of agentName even on repeated schema application without duplicate constraint creation
-CREATE UNIQUE INDEX IF NOT EXISTS prefix_agent_agentname_key ON "prefix_Agent" ("agentName");
+CREATE UNIQUE INDEX IF NOT EXISTS "prefix_agent_agentname_key" ON "prefix_Agent" ("agentName");
 COMMENT ON COLUMN "prefix_Agent"."agentName" IS 'The unique name of the agent derived from the first line of the `agentSource`, automatically updated on `agentSource` change';
 COMMENT ON COLUMN "prefix_Agent"."agentHash" IS 'The hash of the `agentSource`, automatically updated on `agentSource` change';
 COMMENT ON COLUMN "prefix_Agent"."agentSource" IS 'The source code of the agent';
@@ -175,5 +161,3 @@ ALTER TABLE "prefix_ChatFeedback"
     FOREIGN KEY ("agentName") 
     REFERENCES "prefix_Agent"("agentName") 
     ON DELETE CASCADE;
-
--- TODO: [🐱‍🚀] Create propper database migrations

package/apps/agents-server/src/database/migrations/2025-11-0002-metadata-table.sql

@@ -0,0 +1,16 @@
+-- Note: This is primary source of truth for the database schema
+--       In future we want to be compatible with more then Supabase so we keep SQL as main schema definition
+--       To update, search for [💽]
+
+
+CREATE TABLE IF NOT EXISTS "prefix_Metadata" (
+    "id" BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
+    "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
+    "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
+    "key" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "note" TEXT NULL,
+    CONSTRAINT "prefix_Metadata_key_key" UNIQUE ("key")
+);
+
+ALTER TABLE "prefix_Metadata" ENABLE ROW LEVEL SECURITY;

package/apps/agents-server/src/middleware.ts

@@ -96,7 +96,7 @@ export async function middleware(req: NextRequest) {
 
         if (
             potentialAgentName &&
-            !['agents', 'api', '_next', 'favicon.ico'].includes(potentialAgentName) &&
+            !['agents', 'api', 'admin', 'embed', '_next', 'favicon.ico'].includes(potentialAgentName) &&
             !potentialAgentName.startsWith('.') &&
             // Note: Other static files are excluded by the matcher configuration below
             true

package/esm/index.es.js

@@ -47,7 +47,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.103.0-50';
+const PROMPTBOOK_ENGINE_VERSION = '0.103.0-51';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name

package/esm/typings/src/book-components/PromptbookAgent/PromptbookAgent.d.ts

@@ -1,4 +1,3 @@
-import './PromptbookAgent.css';
 type PromptbookAgentProps = {
     /**
      * URL of the agent to connect to
@@ -6,6 +5,10 @@ type PromptbookAgentProps = {
      * @example "http://s6.ptbk.io/benjamin-white"
      */
     agentUrl: string;
+    /**
+     * Callback when the window is opened or closed
+     */
+    onOpenChange?: (isOpen: boolean) => void;
 };
 /**
  * Renders a floating agent button that opens a chat window with the remote agent.

package/esm/typings/src/version.d.ts

@@ -15,7 +15,7 @@ export declare const BOOK_LANGUAGE_VERSION: string_semantic_version;
 export declare const PROMPTBOOK_ENGINE_VERSION: string_promptbook_version;
 /**
  * Represents the version string of the Promptbook engine.
- * It follows semantic versioning (e.g., `0.103.0-49`).
+ * It follows semantic versioning (e.g., `0.103.0-50`).
  *
  * @generated
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@promptbook/cli",
-    "version": "0.103.0-50",
+    "version": "0.103.0-51",
     "description": "Promptbook: Turn your company's scattered knowledge into AI ready books",
     "private": false,
     "sideEffects": false,

package/umd/index.umd.js

@@ -56,7 +56,7 @@
      * @generated
      * @see https://github.com/webgptorg/promptbook
      */
-    const PROMPTBOOK_ENGINE_VERSION = '0.103.0-50';
+    const PROMPTBOOK_ENGINE_VERSION = '0.103.0-51';
     /**
      * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
      * Note: [💞] Ignore a discrepancy between file name and entity name