@promptbook/cli 0.104.0-1 → 0.104.0-2

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

@@ -2,6 +2,7 @@
 
 import { BookEditor } from '@promptbook-local/components';
 import { string_book } from '@promptbook-local/types';
+import { upload } from '@vercel/blob/client';
 import { useEffect, useRef, useState } from 'react';
 
 type BookEditorWrapperProps = {
@@ -93,35 +94,38 @@ export function BookEditorWrapper({ agentName, initialAgentSource }: BookEditorW
                 value={agentSource}
                 onChange={handleChange}
                 onFileUpload={async (file) => {
-                    const formData = new FormData();
-                    formData.append('file', file);
-
-                    const response = await fetch('/api/upload', {
-                        method: 'POST',
-                        body: formData,
+                    console.info('🔼 Uploading file', file);
+
+                    // Build the full path including prefix and user/files directory
+                    const pathPrefix = process.env.NEXT_PUBLIC_CDN_PATH_PREFIX || '';
+                    const uploadPath = pathPrefix ? `${pathPrefix}/user/files/${file.name}` : `user/files/${file.name}`;
+
+                    // Upload directly to Vercel Blob using client upload
+                    const blob = await upload(uploadPath, file, {
+                        access: 'public',
+                        handleUploadUrl: '/api/upload',
+                        clientPayload: JSON.stringify({
+                            purpose: 'KNOWLEDGE',
+                            contentType: file.type,
+                        }),
                     });
 
-                    if (!response.ok) {
-                        throw new Error(`Failed to upload file: ${response.statusText}`);
-                    }
-
-                    const { fileUrl: longFileUrl } = await response.json();
+                    const fileUrl = blob.url;
 
                     const LONG_URL = `${process.env.NEXT_PUBLIC_CDN_PUBLIC_URL!}/${process.env
                         .NEXT_PUBLIC_CDN_PATH_PREFIX!}/user/files/`;
                     const SHORT_URL = `https://ptbk.io/k/`;
                     // <- TODO: [🌍] Unite this logic in one place
 
-                    const shortFileUrl = longFileUrl.split(LONG_URL).join(SHORT_URL);
+                    const shortFileUrl = fileUrl.split(LONG_URL).join(SHORT_URL);
 
-                    console.log(`File uploaded:`, {
+                    console.log(`🔼 File uploaded:`, {
                         LONG_URL,
                         SHORT_URL,
-                        longFileUrl,
+                        fileUrl,
                         shortFileUrl,
                         file,
-                        formData,
-                        response,
+                        blob,
                     });
 
                     return shortFileUrl;

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

@@ -5,21 +5,34 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
 import { headers } from 'next/headers';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { isAgentDeleted } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 import { BookEditorWrapper } from './BookEditorWrapper';
+import { DeletedAgentBanner } from '../../../../components/DeletedAgentBanner';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentBookPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
 
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    const isDeleted = await isAgentDeleted(agentName);
+
+    if (isDeleted) {
+        return (
+            <div className="w-screen h-[calc(100vh-60px)] flex items-center justify-center p-8">
+                <DeletedAgentBanner />
+            </div>
+        );
+    }
+
     if (!(await isUserAdmin())) {
         /* <- TODO: [👹] Here should be user permissions */
         return <ForbiddenPage />;
     }
 
-    let { agentName } = await params;
-    agentName = decodeURIComponent(agentName);
     const collection = await $provideAgentCollectionForServer();
     const agentSource = await collection.getAgentSource(decodeURIComponent(agentName));
 

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

@@ -5,21 +5,34 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
 import { headers } from 'next/headers';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { isAgentDeleted } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 import { AgentBookAndChat } from './AgentBookAndChat';
+import { DeletedAgentBanner } from '../../../../components/DeletedAgentBanner';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentBookAndChatPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
 
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    const isDeleted = await isAgentDeleted(agentName);
+
+    if (isDeleted) {
+        return (
+            <div className="w-screen h-[calc(100vh-60px)] flex items-center justify-center p-8">
+                <DeletedAgentBanner />
+            </div>
+        );
+    }
+
     if (!(await isUserAdmin())) {
         /* <- TODO: [👹] Here should be user permissions */
         return <ForbiddenPage />;
     }
 
-    let { agentName } = await params;
-    agentName = decodeURIComponent(agentName);
     const collection = await $provideAgentCollectionForServer();
     const agentSource = await collection.getAgentSource(agentName);
     const agentUrl = `/agents/${agentName}`;

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

@@ -2,8 +2,10 @@
 
 import { headers } from 'next/headers';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { isAgentDeleted } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 import { AgentChatWrapper } from '../AgentChatWrapper';
+import { DeletedAgentBanner } from '../../../../components/DeletedAgentBanner';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -19,6 +21,16 @@ export default async function AgentChatPage({
     agentName = decodeURIComponent(agentName);
     const { message } = await searchParams;
 
+    const isDeleted = await isAgentDeleted(agentName);
+
+    if (isDeleted) {
+        return (
+            <main className="w-screen h-screen flex items-center justify-center p-8">
+                <DeletedAgentBanner message="This agent has been deleted. You can restore it from the Recycle Bin." />
+            </main>
+        );
+    }
+
     const agentUrl = `/agents/${agentName}`;
 
     return (

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

@@ -0,0 +1,66 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
+import { $bookTranspilersRegister } from '../../../../../../../../src/transpilers/_common/register/$bookTranspilersRegister';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
+    const agentName = (await params).agentName;
+
+    try {
+        // Get available transpilers
+        const transpilers = $bookTranspilersRegister.list().map(transpiler => ({
+            name: transpiler.name,
+            title: transpiler.title,
+        }));
+
+        return NextResponse.json({ transpilers });
+    } catch (error) {
+        console.error('Error getting transpilers:', error);
+        return NextResponse.json({ error: 'Failed to get transpilers' }, { status: 500 });
+    }
+}
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
+    const agentName = (await params).agentName;
+
+    try {
+        const { transpilerName } = await request.json();
+
+        if (!transpilerName) {
+            return NextResponse.json({ error: 'Transpiler name is required' }, { status: 400 });
+        }
+
+        // Get the transpiler
+        const allTranspilers = $bookTranspilersRegister.list();
+        const transpiler = allTranspilers.find(t => t.name === transpilerName);
+        if (!transpiler) {
+            return NextResponse.json({ error: 'Transpiler not found' }, { status: 404 });
+        }
+
+        // Get agent source
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+
+        if (!agentSource) {
+            return NextResponse.json({ error: 'Agent source not found' }, { status: 404 });
+        }
+
+        // Get execution tools
+        const tools = await $provideExecutionToolsForServer();
+
+        // Transpile the code
+        const transpiledCode = await transpiler.transpileBook(agentSource, tools);
+
+        return NextResponse.json({
+            code: transpiledCode,
+            transpiler: {
+                name: transpiler.name,
+                title: transpiler.title,
+            }
+        });
+
+    } catch (error) {
+        console.error('Error transpiling code:', error);
+        return NextResponse.json({ error: 'Failed to transpile code' }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,211 @@
+'use client';
+
+import Editor from '@monaco-editor/react';
+import { ArrowLeftIcon, ChevronDownIcon, CodeIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+type Transpiler = {
+    name: string;
+    title: string;
+};
+
+type TranspilationResult = {
+    code: string;
+    transpiler: Transpiler;
+};
+
+function getLanguageFromTranspiler(transpilerName?: string): string {
+    if (!transpilerName) return 'plaintext';
+
+    // Map transpiler names to Monaco language identifiers
+    if (transpilerName.includes('openai-sdk')) return 'javascript';
+    if (transpilerName.includes('langchain') || transpilerName.includes('python')) return 'python';
+    if (transpilerName.includes('markdown')) return 'markdown';
+
+    // Default to plaintext for unknown transpilers
+    return 'plaintext';
+}
+
+export default function AgentCodePage({ params }: { params: Promise<{ agentName: string }> }) {
+    const [agentName, setAgentName] = useState<string>('');
+    const [agentProfile, setAgentProfile] = useState<unknown>(null);
+    const [transpilers, setTranspilers] = useState<Transpiler[]>([]);
+    const [selectedTranspiler, setSelectedTranspiler] = useState<Transpiler | null>(null);
+    const [transpiledCode, setTranspiledCode] = useState<string>('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        params.then((p) => setAgentName(p.agentName));
+    }, [params]);
+
+    useEffect(() => {
+        if (!agentName) return;
+
+        // Fetch agent profile
+        fetch(`/api/agents/${encodeURIComponent(agentName)}`)
+            .then((res) => res.json())
+            .then((data) => setAgentProfile(data))
+            .catch((err) => console.error('Error fetching agent profile:', err));
+
+        // Fetch available transpilers
+        fetch(`/agents/${encodeURIComponent(agentName)}/code/api`)
+            .then((res) => res.json())
+            .then((data) => {
+                setTranspilers(data.transpilers || []);
+                if (data.transpilers && data.transpilers.length > 0) {
+                    setSelectedTranspiler(data.transpilers[0]);
+                }
+            })
+            .catch((err) => console.error('Error fetching transpilers:', err));
+    }, [agentName]);
+
+    useEffect(() => {
+        if (selectedTranspiler && agentName) {
+            transpileCode(selectedTranspiler.name);
+        }
+    }, [selectedTranspiler, agentName]);
+
+    const transpileCode = async (transpilerName: string) => {
+        setLoading(true);
+        setError('');
+
+        try {
+            const response = await fetch(`/agents/${encodeURIComponent(agentName)}/code/api`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ transpilerName }),
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to transpile code');
+            }
+
+            const result: TranspilationResult = await response.json();
+            setTranspiledCode(result.code);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to transpile code');
+            setTranspiledCode('');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (!agentProfile) {
+        return (
+            <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
+                <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 p-12">
+                    <div className="text-center">Loading...</div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
+            <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                {/* Header */}
+                <div className="p-6 border-b border-gray-200 flex items-center gap-4">
+                    {/* eslint-disable @typescript-eslint/no-explicit-any, @next/next/no-img-element */}
+                    {(agentProfile as any)?.meta?.image && (
+                        <img
+                            src={(agentProfile as any).meta.image as string}
+                            alt={(agentProfile as any).meta.fullname || agentName}
+                            className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
+                        />
+                    )}
+                    <div className="flex-1">
+                        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                        <h1 className="text-2xl font-bold text-gray-900">
+                            {(agentProfile as any)?.meta?.fullname || agentName}
+                        </h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <CodeIcon className="w-4 h-4" />
+                            Generated Code
+                        </p>
+                    </div>
+                    <Link
+                        href={`/agents/${encodeURIComponent(agentName)}`}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="p-6">
+                    {/* Transpiler Selector */}
+                    <div className="mb-6">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">Select Transpiler</label>
+                        <div className="relative">
+                            <select
+                                value={selectedTranspiler?.name || ''}
+                                onChange={(e) => {
+                                    const transpiler = transpilers.find((t) => t.name === e.target.value);
+                                    if (transpiler) setSelectedTranspiler(transpiler);
+                                }}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            >
+                                {transpilers.map((transpiler) => (
+                                    <option key={transpiler.name} value={transpiler.name}>
+                                        {transpiler.title}
+                                    </option>
+                                ))}
+                            </select>
+                            <ChevronDownIcon className="absolute right-3 top-3 w-4 h-4 text-gray-400 pointer-events-none" />
+                        </div>
+                    </div>
+
+                    {/* Code Display */}
+                    <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
+                        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+                            <h2 className="text-lg font-semibold text-gray-900">
+                                {selectedTranspiler?.title || 'Generated Code'}
+                            </h2>
+                            {loading && <div className="text-sm text-gray-500">Generating...</div>}
+                        </div>
+                        <div className="p-4">
+                            {error && (
+                                <div className="text-red-600 text-sm mb-4 p-3 bg-red-50 rounded border border-red-200">
+                                    {error}
+                                </div>
+                            )}
+                            {transpiledCode ? (
+                                <div className="h-96 border border-gray-200 rounded">
+                                    <Editor
+                                        value={transpiledCode}
+                                        language={getLanguageFromTranspiler(selectedTranspiler?.name)}
+                                        options={{
+                                            readOnly: true,
+                                            minimap: { enabled: false },
+                                            fontSize: 14,
+                                            lineNumbers: 'on',
+                                            scrollBeyondLastLine: false,
+                                            automaticLayout: true,
+                                            wordWrap: 'on',
+                                        }}
+                                        loading={
+                                            <div className="flex items-center justify-center h-full text-gray-500">
+                                                Loading editor...
+                                            </div>
+                                        }
+                                    />
+                                </div>
+                            ) : loading ? (
+                                <div className="text-gray-500 text-center py-8">Generating code...</div>
+                            ) : (
+                                <div className="text-gray-500 text-center py-8">
+                                    Select a transpiler to generate code
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -15,6 +15,8 @@ export async function generateAgentMetadata({ params }: { params: Promise<{ agen
         // Use the agent's icon-256.png as the favicon
         const iconUrl = `/agents/${encodeURIComponent(agentName)}/images/icon-256.png`;
 
+        const canonicalUrl = `/agents/${encodeURIComponent(agentProfile.permanentId || agentName)}`;
+
         const metadata = {
             metadataBase: publicUrl,
             title,
@@ -24,6 +26,9 @@ export async function generateAgentMetadata({ params }: { params: Promise<{ agen
                 shortcut: iconUrl,
                 apple: iconUrl,
             },
+            alternates: {
+                canonical: canonicalUrl,
+            },
             openGraph: {
                 title,
                 description,

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

@@ -5,8 +5,8 @@ import { revalidatePath } from 'next/cache';
 
 export async function restoreAgentVersion(agentName: string, historyId: number) {
     const collection = await $provideAgentCollectionForServer();
-    await collection.restoreAgent(historyId);
-    
+    await collection.restoreAgentFromHistory(historyId);
+
     revalidatePath(`/agents/${agentName}`);
     revalidatePath(`/agents/${agentName}/history`);
 }

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

@@ -170,7 +170,7 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
         }
     `);
 
-    const agentLinks = getAgentLinks(agentName);
+    const agentLinks = getAgentLinks(agentProfile.permanentId || agentName);
     const chatLink = agentLinks.find((l) => l.title === 'Chat with Agent')!;
     const websiteIntegrationLink = agentLinks.find((l) => l.title === 'Website Integration')!;
 

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

@@ -9,9 +9,9 @@ import { notFound } from 'next/navigation';
 import { Color } from '../../../../../../../src/utils/color/Color';
 import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { getAgentName, getAgentProfile } from '../_utils';
 import { getAgentExternalLinks, getAgentLinks } from '../agentLinks';
 import { CopyField } from '../CopyField';
-import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 
 export const generateMetadata = generateAgentMetadata;
@@ -129,7 +129,7 @@ export default async function AgentLinksPage({ params }: { params: Promise<{ age
                             Agent Resources
                         </h2>
                         <div className="grid md:grid-cols-2 gap-4">
-                            {getAgentLinks(agentName)
+                            {getAgentLinks(agentProfile.permanentId || agentName)
                                 .filter((link) =>
                                     ['Chat with Agent', 'History & Feedback', 'Integration'].includes(link.title),
                                 )

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

@@ -4,14 +4,16 @@ import { $provideServer } from '@/src/tools/$provideServer';
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
 import { saturate } from '@promptbook-local/color';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { NotFoundError } from '@promptbook-local/core';
 import { notFound } from 'next/navigation';
 import { Color } from '../../../../../../src/utils/color/Color';
-import { getAgentName, getAgentProfile } from './_utils';
+import { getAgentName, getAgentProfile, isAgentDeleted } from './_utils';
 import { getAgentLinks } from './agentLinks';
 import { AgentProfileChat } from './AgentProfileChat';
 import { AgentProfileWrapper } from './AgentProfileWrapper';
 import { generateAgentMetadata } from './generateAgentMetadata';
 import { ServiceWorkerRegister } from './ServiceWorkerRegister';
+import { DeletedAgentBanner } from '../../../components/DeletedAgentBanner';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -32,10 +34,11 @@ export default async function AgentPage({
         agentProfile = await getAgentProfile(agentName);
     } catch (error) {
         if (
-            error instanceof Error &&
-            // Note: This is a bit hacky, but valid way to check for specific error message
-            (error.message.includes('Cannot coerce the result to a single JSON object') ||
-                error.message.includes('JSON object requested, multiple (or no) results returned'))
+            error instanceof NotFoundError ||
+            (error instanceof Error &&
+                // Note: This is a bit hacky, but valid way to check for specific error message
+                (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                    error.message.includes('JSON object requested, multiple (or no) results returned')))
         ) {
             notFound();
         }
@@ -54,6 +57,7 @@ export default async function AgentPage({
     const brandColorHex = brandColor.then(saturate(-0.5)).toHex();
 
     const fullname = (agentProfile.meta.fullname || agentProfile.agentName || 'Agent') as string;
+    const isDeleted = await isAgentDeleted(agentName);
 
     return (
         <>
@@ -68,7 +72,7 @@ export default async function AgentPage({
                 isHeadless={isHeadless}
                 actions={
                     <>
-                        {getAgentLinks(agentName)
+                        {getAgentLinks(agentProfile.permanentId || agentName)
                             .filter((link) => ['Edit Book', 'Integration', 'All Links'].includes(link.title))
                             .map((link) => (
                                 <a
@@ -86,12 +90,14 @@ export default async function AgentPage({
                     </>
                 }
             >
+                {isDeleted && <DeletedAgentBanner />}
                 <AgentProfileChat
                     agentUrl={agentUrl}
                     agentName={agentName}
                     fullname={fullname}
                     brandColorHex={brandColorHex}
                     avatarSrc={agentProfile.meta.image!}
+                    isDeleted={isDeleted}
                 />
             </AgentProfileWrapper>
         </>

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

@@ -0,0 +1,87 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { ArrowLeftIcon, FileTextIcon } from 'lucide-react';
+import { headers } from 'next/headers';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { getAgentName, getAgentProfile } from '../_utils';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentSystemMessagePage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+    const agentName = await getAgentName(params);
+
+    let agentProfile;
+    let agentSource;
+    try {
+        agentProfile = await getAgentProfile(agentName);
+        const collection = await $provideAgentCollectionForServer();
+        agentSource = await collection.getAgentSource(agentName);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                error.message.includes('JSON object requested, multiple (or no) results returned'))
+        ) {
+            notFound();
+        }
+        throw error;
+    }
+
+    // For now, we'll display the agent source as the system message
+    // TODO: [🧠] This might need to be the actual generated system message from the Agent class
+    const systemMessage = agentSource || 'No system message available';
+
+    return (
+        <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
+            <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                {/* Header */}
+                <div className="p-6 border-b border-gray-200 flex items-center gap-4">
+                    {agentProfile.meta.image && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                            src={agentProfile.meta.image as string}
+                            alt={agentProfile.meta.fullname || agentName}
+                            className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
+                        />
+                    )}
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-gray-900">{agentProfile.meta.fullname || agentName}</h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <FileTextIcon className="w-4 h-4" />
+                            System Message
+                        </p>
+                    </div>
+                    <Link
+                        href={`/agents/${encodeURIComponent(agentName)}`}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="p-6">
+                    <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-3">Generated System Message</h2>
+                        <pre className="text-sm text-gray-700 whitespace-pre-wrap font-mono bg-white p-4 rounded border border-gray-200 overflow-x-auto">
+                            {systemMessage}
+                        </pre>
+                    </div>
+
+                    <div className="mt-6 bg-blue-50 rounded-lg p-4 border border-blue-200">
+                        <h3 className="text-md font-semibold text-blue-900 mb-2">Model Requirements</h3>
+                        <div className="text-sm text-blue-800">
+                            <p><strong>Model Variant:</strong> CHAT</p>
+                            {/* TODO: [🧠] Add more model requirements if available */}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}