@promptbook/cli 0.104.0-0 → 0.104.0-10

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

@@ -0,0 +1,200 @@
+'use server';
+
+import { saturate } from '@promptbook-local/color';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import Link from 'next/link';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { getAgentName, getAgentProfile } from '../_utils';
+
+/**
+ * Available image types for agents with their descriptions and sizes
+ */
+const AGENT_IMAGES = [
+    {
+        name: 'default-avatar.png',
+        title: 'Default Avatar',
+        description: 'AI-generated avatar image based on the agent profile. Vertical orientation (1024x1792).',
+        size: '1024×1792',
+    },
+    {
+        name: 'icon-256.png',
+        title: 'Icon (256×256)',
+        description: 'Small circular icon suitable for profile pictures and thumbnails.',
+        size: '256×256',
+    },
+    {
+        name: 'screenshot-fullhd.png',
+        title: 'Screenshot Full HD',
+        description: 'Landscape screenshot showing the agent with name. Suitable for desktop previews.',
+        size: '1920×1080',
+    },
+    {
+        name: 'screenshot-phone.png',
+        title: 'Screenshot Phone',
+        description: 'Portrait screenshot optimized for mobile devices.',
+        size: '1080×1920',
+    },
+] as const;
+
+export default async function AgentImagesPage({ params }: { params: Promise<{ agentName: string }> }) {
+    const agentName = await getAgentName(params);
+    const agentProfile = await getAgentProfile(agentName);
+
+    const brandColor = Color.fromSafe(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const brandColorHex = brandColor.then(saturate(-0.5)).toHex();
+
+    const fullname = (agentProfile.meta.fullname || agentProfile.agentName || 'Agent') as string;
+
+    return (
+        <div
+            style={{
+                minHeight: '100vh',
+                backgroundColor: '#f5f5f5',
+                padding: '2rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: '1200px',
+                    margin: '0 auto',
+                }}
+            >
+                <header
+                    style={{
+                        marginBottom: '2rem',
+                        padding: '1.5rem',
+                        backgroundColor: brandColorHex,
+                        borderRadius: '12px',
+                        color: 'white',
+                    }}
+                >
+                    <h1 style={{ margin: 0, fontSize: '2rem' }}>
+                        Images for <strong>{fullname}</strong>
+                    </h1>
+                    <p style={{ margin: '0.5rem 0 0', opacity: 0.9 }}>
+                        All available image assets for agent{' '}
+                        <code
+                            style={{
+                                backgroundColor: 'rgba(255,255,255,0.2)',
+                                padding: '2px 6px',
+                                borderRadius: '4px',
+                            }}
+                        >
+                            {agentName}
+                        </code>
+                    </p>
+                </header>
+
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+                        gap: '1.5rem',
+                    }}
+                >
+                    {AGENT_IMAGES.map((image) => {
+                        const imageUrl = `/agents/${encodeURIComponent(agentName)}/images/${image.name}`;
+                        return (
+                            <div
+                                key={image.name}
+                                style={{
+                                    backgroundColor: 'white',
+                                    borderRadius: '12px',
+                                    overflow: 'hidden',
+                                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        aspectRatio: '16/9',
+                                        backgroundColor: '#e0e0e0',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        overflow: 'hidden',
+                                    }}
+                                >
+                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img
+                                        src={imageUrl}
+                                        alt={image.title}
+                                        style={{
+                                            maxWidth: '100%',
+                                            maxHeight: '100%',
+                                            objectFit: 'contain',
+                                        }}
+                                    />
+                                </div>
+                                <div style={{ padding: '1rem' }}>
+                                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.25rem' }}>{image.title}</h2>
+                                    <p style={{ margin: '0 0 0.5rem', color: '#666', fontSize: '0.9rem' }}>
+                                        {image.description}
+                                    </p>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            marginTop: '1rem',
+                                        }}
+                                    >
+                                        <span
+                                            style={{
+                                                backgroundColor: '#f0f0f0',
+                                                padding: '4px 8px',
+                                                borderRadius: '4px',
+                                                fontSize: '0.85rem',
+                                                color: '#555',
+                                            }}
+                                        >
+                                            {image.size}
+                                        </span>
+                                        <Link
+                                            href={imageUrl}
+                                            target="_blank"
+                                            style={{
+                                                backgroundColor: brandColorHex,
+                                                color: 'white',
+                                                padding: '8px 16px',
+                                                borderRadius: '6px',
+                                                textDecoration: 'none',
+                                                fontSize: '0.9rem',
+                                            }}
+                                        >
+                                            Open Image
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <footer
+                    style={{
+                        marginTop: '2rem',
+                        padding: '1rem',
+                        backgroundColor: 'white',
+                        borderRadius: '12px',
+                        textAlign: 'center',
+                        color: '#666',
+                    }}
+                >
+                    <p style={{ margin: 0 }}>
+                        <Link
+                            href={`/agents/${encodeURIComponent(agentName)}`}
+                            style={{ color: brandColorHex, textDecoration: 'none' }}
+                        >
+                            ← Back to {fullname}
+                        </Link>
+                    </p>
+                </footer>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * TODO: [🦚] Add download button functionality
+ * TODO: [🦚] Add image regeneration option for default-avatar
+ */

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-fullhd.png/route.tsx

@@ -1,3 +1,4 @@
+import { $provideServer } from '@/src/tools/$provideServer';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
@@ -21,6 +22,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentProfile = await getAgentProfile(agentName);
         const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
         const backgroundColor = agentColor.then(grayscale(0.5));
+        const { publicUrl } = await $provideServer();
 
         return new ImageResponse(
             (
@@ -48,10 +50,9 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                         <img
                             style={{
                                 width: '80%',
-                                backgroundColor: agentColor.toHex(),
-                                borderRadius: '50%',
+                                // backgroundColor: agentColor.toHex(),
                             }}
-                            src={agentProfile.meta.image!}
+                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
                             alt="Agent Icon"
                         />
                     </div>

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-phone.png/route.tsx

@@ -1,3 +1,4 @@
+import { $provideServer } from '@/src/tools/$provideServer';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
@@ -21,6 +22,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentProfile = await getAgentProfile(agentName);
         const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
         const backgroundColor = agentColor.then(grayscale(0.5));
+        const { publicUrl } = await $provideServer();
 
         return new ImageResponse(
             (
@@ -48,10 +50,9 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                         <img
                             style={{
                                 width: '80%',
-                                backgroundColor: agentColor.toHex(),
-                                borderRadius: '50%',
+                                // backgroundColor: agentColor.toHex(),
                             }}
-                            src={agentProfile.meta.image!}
+                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
                             alt="Agent Icon"
                         />
                     </div>

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../../../../_common/components/Tabs/Tabs';
+
+type WebsiteIntegrationTabsProps = {
+    reactCode: string;
+    htmlCode: string;
+};
+
+export function WebsiteIntegrationTabs({ reactCode, htmlCode }: WebsiteIntegrationTabsProps) {
+    return (
+        <Tabs defaultValue="react" className="w-full">
+            <TabsList>
+                <TabsTrigger value="react">React</TabsTrigger>
+                <TabsTrigger value="html">HTML</TabsTrigger>
+            </TabsList>
+            <TabsContent value="react">
+                <CodePreview code={reactCode} language="typescript" />
+            </TabsContent>
+            <TabsContent value="html">
+                <CodePreview code={htmlCode} language="xml" />
+            </TabsContent>
+        </Tabs>
+    );
+}

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

@@ -4,7 +4,7 @@ import { $getTableName } from '@/src/database/$getTableName';
 import { $provideSupabase } from '@/src/database/$provideSupabase';
 import { $provideServer } from '@/src/tools/$provideServer';
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { ArrowLeftIcon, BoxIcon, CodeIcon, GlobeIcon, ServerIcon, TerminalIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import Link from 'next/link';
@@ -14,16 +14,18 @@ import { Color } from '../../../../../../../src/utils/color/Color';
 import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
 import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { getAgentName, getAgentProfile } from '../_utils';
 import { getAgentLinks } from '../agentLinks';
 import { CopyField } from '../CopyField';
-import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 import { SdkCodeTabs } from './SdkCodeTabs';
+import { WebsiteIntegrationTabs } from './WebsiteIntegrationTabs';
 
 export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentIntegrationPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
     const agentName = await getAgentName(params);
     const isAdmin = await isUserAdmin();
 
@@ -71,13 +73,13 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
 
     // Website Integration Code
     const { fullname, color, image, ...restMeta } = agentProfile.meta;
-    const websiteIntegrationCode = spaceTrim(
+    const websiteIntegrationReactCode = spaceTrim(
         (block) => `
-            import { PromptbookAgent } from '@promptbook/components';
+            import { PromptbookAgentIntegration } from '@promptbook/components';
 
             export function YourComponent() {
                 return(
-                    <PromptbookAgent
+                    <PromptbookAgentIntegration
                         agentUrl="${baseUrl}"
                         meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
                     />
@@ -86,6 +88,19 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
         `,
     );
 
+    // HTML Integration Code - use single quotes for meta attribute to allow JSON with double quotes inside
+    const metaJsonString = JSON.stringify({ fullname, color, image, ...restMeta }, null, 4);
+    const websiteIntegrationHtmlCode = spaceTrim(
+        (block) => `
+            <script src="${publicUrl.href}api/embed.js" async defer></script>
+
+            <promptbook-agent-integration
+                agent-url="${baseUrl}"
+                meta='${block(metaJsonString)}'
+            />
+        `,
+    );
+
     // OpenAI Compatible Curl
     const curlCode = spaceTrim(`
         curl ${agentApiBase}/api/openai/v1/chat/completions \\
@@ -156,7 +171,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')!;
 
@@ -173,7 +188,13 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image as string}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2"
                             style={{ borderColor: primaryColor }}
@@ -214,7 +235,10 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
                                 </p>
                             </div>
                         </div>
-                        <CodePreview code={websiteIntegrationCode} language="typescript" />
+                        <WebsiteIntegrationTabs
+                            reactCode={websiteIntegrationReactCode}
+                            htmlCode={websiteIntegrationHtmlCode}
+                        />
                     </div>
 
                     {/* OpenAI API Compatible Endpoint */}

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

@@ -1,7 +1,7 @@
 'use server';
 
 import { $provideServer } from '@/src/tools/$provideServer';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { ArrowLeftIcon, CodeIcon, HomeIcon, LinkIcon, ShareIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import Link from 'next/link';
@@ -9,15 +9,16 @@ 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;
 
 export default async function AgentLinksPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
+
     const agentName = await getAgentName(params);
 
     let agentProfile;
@@ -56,7 +57,13 @@ export default async function AgentLinksPage({ params }: { params: Promise<{ age
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image as string}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2"
                             style={{ borderColor: primaryColor }}
@@ -129,7 +136,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]/opengraph-image.tsx

@@ -1,4 +1,5 @@
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
 import { assertsError } from '../../../../../../src/errors/assertsError';
@@ -24,6 +25,7 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
         const agentProfile = await getAgentProfile(agentName);
         const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
         const backgroundColor = agentColor.then(grayscale(0.5));
+        const { publicUrl } = await $provideServer();
 
         return new ImageResponse(
             (
@@ -53,8 +55,15 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
                                 width: '80%',
                                 backgroundColor: agentColor.toHex(),
                                 borderRadius: '50%',
+                                aspectRatio: '1 / 1',
                             }}
-                            src={agentProfile.meta.image!}
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
                             alt="Agent Icon"
                         />
                     </div>

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

@@ -3,10 +3,11 @@
 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 { generatePlaceholderAgentProfileImageUrl, NotFoundError, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { notFound } from 'next/navigation';
 import { Color } from '../../../../../../src/utils/color/Color';
-import { getAgentName, getAgentProfile } from './_utils';
+import { DeletedAgentBanner } from '../../../components/DeletedAgentBanner';
+import { getAgentName, getAgentProfile, isAgentDeleted } from './_utils';
 import { getAgentLinks } from './agentLinks';
 import { AgentProfileChat } from './AgentProfileChat';
 import { AgentProfileWrapper } from './AgentProfileWrapper';
@@ -26,24 +27,24 @@ export default async function AgentPage({
     const isAdmin = await isUserAdmin();
     const { headless: headlessParam } = await searchParams;
     const isHeadless = headlessParam !== undefined;
+    const { publicUrl } = await $provideServer();
 
     let agentProfile;
     try {
         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();
         }
         throw error;
     }
 
-    const { publicUrl } = await $provideServer();
-
     // Build agent page URL for QR and copy
     const agentUrl = `${publicUrl.href}${encodeURIComponent(agentName)}`;
     // <- TODO: [🐱‍🚀] Better
@@ -54,6 +55,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 (
         <>
@@ -61,6 +63,7 @@ export default async function AgentPage({
             <AgentProfileWrapper
                 agent={agentProfile}
                 agentUrl={agentUrl}
+                publicUrl={publicUrl}
                 agentEmail={agentEmail}
                 agentName={agentName}
                 brandColorHex={brandColorHex}
@@ -68,7 +71,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 +89,17 @@ export default async function AgentPage({
                     </>
                 }
             >
+                {isDeleted && <DeletedAgentBanner />}
                 <AgentProfileChat
                     agentUrl={agentUrl}
                     agentName={agentName}
                     fullname={fullname}
                     brandColorHex={brandColorHex}
-                    avatarSrc={agentProfile.meta.image!}
+                    avatarSrc={
+                        agentProfile.meta.image ||
+                        generatePlaceholderAgentProfileImageUrl(agentProfile.permanentId || agentName, publicUrl)
+                    }
+                    isDeleted={isDeleted}
                 />
             </AgentProfileWrapper>
         </>

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

@@ -0,0 +1,100 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+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 { publicUrl } = await $provideServer();
+
+    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 ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
+                            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>
+    );
+}