@promptbook/cli 0.103.0-50 → 0.103.0-52

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/agents/[agentName]/AgentQrCode.tsx

@@ -5,19 +5,19 @@ import { AgentBasicInformation } from '@promptbook-local/types';
 import { useState } from 'react';
 import spaceTrim from 'spacetrim';
 
-type AgentQrCodeProps = Pick<AgentBasicInformation, 'agentName' | 'personaDescription'> & {
+type AgentQrCodeProps = Pick<AgentBasicInformation, 'agentName' | 'personaDescription' | 'meta'> & {
     agentUrl: string;
     agentEmail: string;
 };
 
-export function AgentQrCode({ agentName, agentUrl, agentEmail, personaDescription }: AgentQrCodeProps) {
+export function AgentQrCode({ agentName, agentUrl, agentEmail, personaDescription, meta }: AgentQrCodeProps) {
     const [mode, setMode] = useState<'contact' | 'link'>('contact');
 
     // TODO: [🧠] Should we include more info in VCARD?
     const vcard = spaceTrim(`
         BEGIN:VCARD
         VERSION:3.0
-        FN:${agentName}
+        FN:${meta.fullname || agentName}
         URL:${agentUrl}
         EMAIL:${agentEmail}
         NOTE:${personaDescription}

package/apps/agents-server/src/app/agents/[agentName]/generateAgentMetadata.ts

@@ -11,7 +11,7 @@ export async function generateAgentMetadata({ params }: { params: Promise<{ agen
         const agentSource = await collection.getAgentSource(agentName);
         const agentProfile = parseAgentSource(agentSource);
 
-        const title = agentProfile.meta.title || agentProfile.agentName;
+        const title = agentProfile.meta.fullname || agentProfile.agentName;
         const description = agentProfile.meta.description || agentProfile.personaDescription || undefined;
 
         // Extract image from meta

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

@@ -78,7 +78,7 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
                             src={agentProfile.meta.image as string}
-                            alt={agentProfile.agentName || 'Agent'}
+                            alt={agentProfile.meta.fullname || agentProfile.agentName || 'Agent'}
                             width={64}
                             height={64}
                             className="rounded-full object-cover border-2 aspect-square w-16 h-16"
@@ -86,7 +86,9 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
                         />
                     )}
                     <div className="flex-1">
-                        <h1 className="text-3xl font-bold text-gray-900 break-words">{agentProfile.agentName}</h1>
+                        <h1 className="text-3xl font-bold text-gray-900 break-words">
+                            {agentProfile.meta.fullname || agentProfile.agentName}
+                        </h1>
                         <span
                             className="inline-block mt-1 px-2 py-1 rounded text-xs font-semibold text-white"
                             style={{ backgroundColor: brandColor.toHex() }}
@@ -145,6 +147,7 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
                     <div className="bg-white rounded-lg p-4 flex flex-col items-center shadow-sm border border-gray-100">
                         <AgentQrCode
                             agentName={agentProfile.agentName || 'Agent'}
+                            meta={agentProfile.meta}
                             personaDescription={agentProfile.personaDescription}
                             agentUrl={agentUrl}
                             agentEmail={agentEmail}

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>
+    );
+}