@promptbook/cli 0.104.0-1 → 0.104.0-10

package/apps/agents-server/src/app/humans.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateHumansTxt();
+    const txt = await generateHumansTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

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

@@ -83,31 +83,36 @@ export default async function RootLayout({
         console.error('Failed to parse FOOTER_LINKS', error);
     }
 
-    // Fetch federated servers and add to footerLinks
+    // Fetch federated servers and add to footerLinks (only if user is authenticated or SHOW_FEDERATED_SERVERS_PUBLICLY is true)
     let federatedServers: Array<{ url: string; title: string; logoUrl: string | null }> = [];
     try {
-        const federatedServersRaw = await getFederatedServersFromMetadata();
-        federatedServers = await Promise.all(
-            federatedServersRaw.map(async (url: string) => {
-                let logoUrl: string | null = null;
-                try {
-                    // Try to fetch logo from metadata endpoint if available
-                    const res = await fetch(`${url}/api/metadata`);
-                    if (res.ok) {
-                        const meta = await res.json();
-                        logoUrl = meta.SERVER_LOGO_URL || null;
+        const showFederatedServersPublicly = ((await getMetadata('SHOW_FEDERATED_SERVERS_PUBLICLY')) || 'false') === 'true';
+
+        // Only show federated servers in footer if user is authenticated or if SHOW_FEDERATED_SERVERS_PUBLICLY is true
+        if (currentUser || showFederatedServersPublicly) {
+            const federatedServersRaw = await getFederatedServersFromMetadata();
+            federatedServers = await Promise.all(
+                federatedServersRaw.map(async (url: string) => {
+                    let logoUrl: string | null = null;
+                    try {
+                        // Try to fetch logo from metadata endpoint if available
+                        const res = await fetch(`${url}/api/metadata`);
+                        if (res.ok) {
+                            const meta = await res.json();
+                            logoUrl = meta.SERVER_LOGO_URL || null;
+                        }
+                    } catch {
+                        logoUrl = null;
                     }
-                } catch {
-                    logoUrl = null;
-                }
-                return {
-                    title: `Federated: ${new URL(url).hostname}`,
-                    url,
-                    logoUrl,
-                };
-            })
-        );
-        footerLinks = [...footerLinks, ...federatedServers];
+                    return {
+                        title: `Federated: ${new URL(url).hostname}`,
+                        url,
+                        logoUrl,
+                    };
+                })
+            );
+            footerLinks = [...footerLinks, ...federatedServers];
+        }
     } catch (error) {
         console.error('Failed to fetch federated servers for footer', error);
     }

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

@@ -12,10 +12,13 @@ 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 { $getTableName } from '../database/$getTableName';
+import { $provideSupabaseForServer } from '../database/$provideSupabaseForServer';
 import { getLongRunningTask } from '../deamons/longRunningTask';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
 import { $provideExecutionToolsForServer } from '../tools/$provideExecutionToolsForServer';
 import { $provideServer } from '../tools/$provideServer';
+import { getCurrentUser } from '../utils/getCurrentUser';
 import { isUserAdmin } from '../utils/isUserAdmin';
 
 // Add calendar formats that include seconds
@@ -31,10 +34,57 @@ const calendarWithSeconds = {
 export default async function HomePage() {
     $sideEffect(/* Note: [🐶] This will ensure dynamic rendering of page and avoid Next.js pre-render */ headers());
 
+    const { publicUrl } = await $provideServer();
+
+    const currentUser = await getCurrentUser();
     const isAdmin = await isUserAdmin(); /* <- TODO: [👹] Here should be user permissions */
 
     const collection = await $provideAgentCollectionForServer();
-    const agents = await collection.listAgents();
+    const allAgents = await collection.listAgents();
+
+    // Filter agents based on visibility and user authentication
+    const supabase = $provideSupabaseForServer();
+    // const { tablePrefix } = await $provideServer();
+
+    // Get visibility for all agents
+    const visibilityResult = await supabase
+        .from(await $getTableName(`Agent`))
+        .select('agentName, visibility')
+        .is('deletedAt', null);
+
+    let agents: typeof allAgents;
+    if (visibilityResult.error) {
+        console.error('Error fetching agent visibility:', visibilityResult.error);
+        // Fallback to showing all agents if visibility fetch fails
+        agents = allAgents;
+    } else {
+        const visibilityMap = new Map(
+            visibilityResult.data.map((item: { agentName: string; visibility: 'PUBLIC' | 'PRIVATE' }) => [
+                item.agentName,
+                item.visibility,
+            ]),
+        );
+
+        // Filter agents based on user authentication and visibility
+        agents = allAgents
+            .filter((agent) => {
+                const visibility = visibilityMap.get(agent.agentName);
+                if (!visibility) return false; // If no visibility info, hide the agent
+
+                // Admins can see all agents
+                if (currentUser?.isAdmin) return true;
+
+                // Authenticated users can see PUBLIC and PRIVATE agents
+                if (currentUser) return true;
+
+                // Unauthenticated users can only see PUBLIC agents
+                return visibility === 'PUBLIC';
+            })
+            .map((agent) => ({
+                ...agent,
+                visibility: visibilityMap.get(agent.agentName) as 'PUBLIC' | 'PRIVATE',
+            }));
+    }
 
     const longRunningTask = getLongRunningTask();
 
@@ -46,15 +96,13 @@ export default async function HomePage() {
     return (
         <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
             <div className="container mx-auto px-4 py-16">
-                <AgentsList agents={[...agents]} isAdmin={isAdmin} />
+                <AgentsList agents={[...agents]} isAdmin={isAdmin} publicUrl={publicUrl} />
 
-                <ExternalAgentsSectionClient />
+                <ExternalAgentsSectionClient publicUrl={publicUrl} />
 
                 {isAdmin && <UsersList allowCreate={false} />}
 
-                {isAdmin && (
-                    <ModelsSection models={models} maxVisible={11} showViewAllLink />
-                )}
+                {isAdmin && <ModelsSection models={models} maxVisible={11} showViewAllLink />}
 
                 {isAdmin && (
                     <>

package/apps/agents-server/src/app/recycle-bin/actions.ts

@@ -2,25 +2,31 @@
 
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
 import { revalidatePath } from 'next/cache';
+import { isUserAdmin } from '../../utils/isUserAdmin';
 
 export async function restoreDeletedAgent(agentName: string) {
-    const collection = await $provideAgentCollectionForServer();
-    
-    // Find the latest history item for this agent
-    const history = await collection.listAgentHistory(agentName);
-    
-    if (history.length === 0) {
-        throw new Error(`No history found for agent ${agentName}`);
+    if (!(await isUserAdmin())) {
+        throw new Error('You are not authorized to restore agents');
     }
-    
-    const latestVersion = history[0];
-    
-    if (!latestVersion) {
-         throw new Error(`No history found for agent ${agentName}`);
+
+    const collection = await $provideAgentCollectionForServer();
+
+    await collection.restoreAgent(agentName);
+
+    revalidatePath('/recycle-bin');
+    revalidatePath(`/agents/${agentName}`);
+    revalidatePath('/');
+}
+
+export async function deleteAgent(agentName: string) {
+    if (!(await isUserAdmin())) {
+        throw new Error('You are not authorized to delete agents');
     }
 
-    await collection.restoreAgent(latestVersion.id);
-    
+    const collection = await $provideAgentCollectionForServer();
+
+    await collection.deleteAgent(agentName);
+
     revalidatePath('/recycle-bin');
     revalidatePath(`/agents/${agentName}`);
     revalidatePath('/');

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

@@ -1,58 +1,44 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { TrashIcon } from 'lucide-react';
 import Link from 'next/link';
-import { RestoreAgentButton } from './RestoreAgentButton';
+import { DeletedAgentsList } from '../../components/Homepage/DeletedAgentsList';
+import { isUserAdmin } from '../../utils/isUserAdmin';
 
 export const metadata = {
     title: 'Recycle Bin',
 };
 
 export default async function RecycleBinPage() {
+    const { publicUrl } = await $provideServer();
     const collection = await $provideAgentCollectionForServer();
     const deletedAgents = await collection.listDeletedAgents();
+    const isAdmin = await isUserAdmin();
 
     return (
-        <div className="container mx-auto p-6 max-w-4xl">
-            <header className="flex items-center gap-4 mb-8">
-                <div className="bg-red-100 p-3 rounded-full">
-                    <TrashIcon className="w-8 h-8 text-red-600" />
-                </div>
-                <div>
-                    <h1 className="text-3xl font-bold text-gray-900">Recycle Bin</h1>
-                    <p className="text-gray-600">Restore deleted agents from here.</p>
-                </div>
-            </header>
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+            <div className="container mx-auto px-4 py-16">
+                <header className="flex items-center gap-4 mb-8">
+                    <div className="bg-red-100 p-3 rounded-full">
+                        <TrashIcon className="w-8 h-8 text-red-600" />
+                    </div>
+                    <div>
+                        <h1 className="text-3xl font-bold text-gray-900">Recycle Bin</h1>
+                        <p className="text-gray-600">Restore deleted agents from here.</p>
+                    </div>
+                </header>
 
-            {deletedAgents.length === 0 ? (
-                <div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
-                    <p className="text-gray-500 text-lg">Recycle bin is empty</p>
-                    <Link href="/" className="text-blue-600 hover:underline mt-2 inline-block">
-                        Go back to agents
-                    </Link>
-                </div>
-            ) : (
-                <div className="grid gap-4">
-                    {deletedAgents.map((agentName) => (
-                        <div
-                            key={agentName}
-                            className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-center justify-between hover:shadow-md transition-shadow"
-                        >
-                            <div className="flex items-center gap-3">
-                                <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 font-bold text-lg">
-                                    {agentName.charAt(0).toUpperCase()}
-                                </div>
-                                <div>
-                                    <h3 className="font-semibold text-lg text-gray-900">{agentName}</h3>
-                                    <p className="text-sm text-gray-500">Deleted agent</p>
-                                </div>
-                            </div>
-                            <div className="flex gap-2">
-                                <RestoreAgentButton agentName={agentName} />
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            )}
+                {deletedAgents.length === 0 ? (
+                    <div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                        <p className="text-gray-500 text-lg">Recycle bin is empty</p>
+                        <Link href="/" className="text-blue-600 hover:underline mt-2 inline-block">
+                            Go back to agents
+                        </Link>
+                    </div>
+                ) : (
+                    <DeletedAgentsList agents={deletedAgents} isAdmin={isAdmin} publicUrl={publicUrl} />
+                )}
+            </div>
         </div>
     );
 }

package/apps/agents-server/src/app/robots.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateRobotsTxt();
+    const txt = await generateRobotsTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/security.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateSecurityTxt();
+    const txt = await generateSecurityTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/sitemap.xml/route.ts

@@ -1,23 +1,25 @@
 // Dynamic sitemap.xml for Agents Server
 
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { spaceTrim } from '@promptbook-local/utils';
 import { NextResponse } from 'next/server';
 
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
+    const { publicUrl } = await $provideServer();
+
     const collection = await $provideAgentCollectionForServer();
 
     // Assume collection.listAgents() returns an array of agent names
-    const agentNames = await collection.listAgents();
-
-    // Get base URL from environment or config
-    const baseUrl = NEXT_PUBLIC_SITE_URL?.href || process.env.PUBLIC_URL || 'https://ptbk.io';
+    const agents = await collection.listAgents();
 
-    const urls = agentNames
-        .map(({ agentName }) => `<url><loc>${baseUrl}agents/${encodeURIComponent(agentName)}</loc></url>`)
+    const urls = agents
+        .map(
+            ({ permanentId, agentName }) =>
+                `<url><loc>${publicUrl.href}agents/${encodeURIComponent(permanentId || agentName)}</loc></url>`,
+        )
         .join('\n');
 
     const xml = spaceTrim(

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

@@ -0,0 +1,14 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import 'swagger-ui-react/swagger-ui.css';
+
+const SwaggerUI = dynamic(() => import('swagger-ui-react'), { ssr: false });
+
+export default function SwaggerPage() {
+  return (
+    <div className="swagger-container bg-white min-h-screen">
+      <SwaggerUI url="/swagger.json" />
+    </div>
+  );
+}

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

@@ -1,14 +1,14 @@
 'use client';
 
-import { AgentBasicInformation } from '@promptbook-local/types';
+import { colorToDataUrl } from '@promptbook-local/color';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { AgentBasicInformation, string_agent_permanent_id } from '@promptbook-local/types';
 import { RepeatIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import spaceTrim from 'spacetrim';
-import { Color } from '../../../../../src/utils/color/Color';
-import { darken } from '../../../../../src/utils/color/operators/darken';
-import { lighten } from '../../../../../src/utils/color/operators/lighten';
+import { useState } from 'react';
+import { AgentProfileImage } from './AgentProfileImage';
 import { AgentQrCode } from './AgentQrCode';
 import { QrCodeModal } from './QrCodeModal';
+import { useAgentBackground } from './useAgentBackground';
 
 type AgentProfileProps = {
     /**
@@ -16,6 +16,11 @@ type AgentProfileProps = {
      */
     readonly agent: AgentBasicInformation;
 
+    /**
+     * The permanent ID of the agent
+     */
+    readonly permanentId: string_agent_permanent_id;
+
     /**
      * URL of the agent page
      *
@@ -23,6 +28,11 @@ type AgentProfileProps = {
      */
     readonly agentUrl?: string;
 
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
     /**
      * Email of the agent
      */
@@ -61,16 +71,19 @@ export function AgentProfile(props: AgentProfileProps) {
         agent,
         agentUrl = '',
         agentEmail = '',
+        publicUrl,
+        permanentId,
         renderMenu,
         children,
         actions,
         isHeadless = false,
         className,
     } = props;
+
     const { meta, agentName } = agent;
     const fullname = (meta.fullname as string) || agentName || 'Agent';
     const personaDescription = agent.personaDescription || '';
-    const imageUrl = (meta.image as string) || null;
+    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(permanentId, publicUrl);
 
     const [isQrModalOpen, setIsQrModalOpen] = useState(false);
     const [isFlipped, setIsFlipped] = useState(false);
@@ -81,102 +94,14 @@ export function AgentProfile(props: AgentProfileProps) {
 
     if (fontString) {
         // [🧠] TODO: Properly parse font string to get family name
-        const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
+        // const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
         fontStyle = {
             fontFamily: fontString,
         };
     }
 
     // Compute Colors and Background
-    const { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage } = useMemo(() => {
-        // [🧠] Default color should be imported constant, but for now hardcoded fallback
-        const PROMPTBOOK_COLOR_HEX = '#f15b24'; // TODO: Import PROMPTBOOK_COLOR
-        const brandColorString = meta.color || PROMPTBOOK_COLOR_HEX;
-
-        let brandColor;
-        try {
-            brandColor = Color.fromSafe(brandColorString.split(',')[0].trim());
-        } catch {
-            brandColor = Color.fromHex(PROMPTBOOK_COLOR_HEX);
-        }
-
-        const brandColorHex = brandColor.toHex();
-        const brandColorLightHex = brandColor.then(lighten(0.2)).toHex();
-        const brandColorDarkHex = brandColor.then(darken(0.15)).toHex();
-
-        // Generate Noisy SVG Background
-        const color1 = brandColor;
-        // const color2 = brandColors[1] || brandColors[0]!; // Use secondary color if available?
-        // For simplicity using primary color for now or derive second one
-        const color2 = brandColor;
-
-        // [🧠] Make colors much lighter for the background
-        const color1Light = color1.then(lighten(0.3)).toHex();
-        const color1Main = color1.toHex();
-        const color1Dark = color1.then(darken(0.3)).toHex();
-
-        const color2Light = color2.then(lighten(0.3)).toHex();
-        const color2Main = color2.toHex();
-        const color2Dark = color2.then(darken(0.3)).toHex();
-
-        const svgContent = spaceTrim(`
-            <svg xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 1920 1080"
-              width="1920" height="1080"
-              preserveAspectRatio="xMidYMid slice">
-              <defs>
-                <!-- Bottom-left -->
-                <radialGradient id="grad1" cx="0%" cy="100%" r="90%">
-                  <stop offset="0%" stop-color="${color1Light}" />
-                  <stop offset="50%" stop-color="${color1Main}" />
-                  <stop offset="100%" stop-color="${color1Dark}" />
-                </radialGradient>
-
-                <!-- Bottom-right -->
-                <radialGradient id="grad2" cx="100%" cy="100%" r="90%">
-                  <stop offset="0%" stop-color="${color2Light}" />
-                  <stop offset="50%" stop-color="${color2Main}" />
-                  <stop offset="100%" stop-color="${color2Dark}" />
-                </radialGradient>
-
-                <!-- White top fade -->
-                <linearGradient id="whiteTopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-                  <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
-                  <stop offset="100%" stop-color="#ffffff" stop-opacity="0.3" />
-                </linearGradient>
-
-                <!-- Strong grain -->
-                <filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
-                  <feTurbulence type="fractalNoise" baseFrequency="3.5" numOctaves="3" seed="8" result="noise" />
-                  <feComponentTransfer>
-                    <feFuncR type="linear" slope="3.5" intercept="-1.2" />
-                    <feFuncG type="linear" slope="3.5" intercept="-1.2" />
-                    <feFuncB type="linear" slope="3.5" intercept="-1.2" />
-                    <feFuncA type="table" tableValues="0 0.8" />
-                  </feComponentTransfer>
-                </filter>
-              </defs>
-
-              <!-- White base -->
-              <rect width="100%" height="100%" fill="#ffffff" />
-
-              <!-- Gradients -->
-              <rect width="100%" height="100%" fill="url(#grad1)" />
-              <rect width="100%" height="100%" fill="url(#grad2)" style="mix-blend-mode:screen; opacity:0.85" />
-
-              <!-- White fade on top -->
-              <rect width="100%" height="100%" fill="url(#whiteTopGrad)" />
-
-              <!-- Strong visible noise -->
-              <rect width="100%" height="100%" filter="url(#grain)"
-                style="mix-blend-mode:soft-light; opacity:1.2" />
-            </svg>
-        `);
-
-        const backgroundImage = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
-
-        return { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage };
-    }, [meta.color]);
+    const { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage } = useAgentBackground(meta.color);
 
     return (
         <>
@@ -208,14 +133,14 @@ export function AgentProfile(props: AgentProfileProps) {
                 )}
 
                 {/* Main profile content */}
-                <div className="relative z-10 grid grid-cols-[auto_1fr] gap-x-6 gap-y-4 md:gap-12 max-w-5xl w-full items-start">
+                <div className="relative z-10 flex flex-col md:grid md:grid-cols-[auto_1fr] gap-y-6 md:gap-y-4 md:gap-x-12 max-w-5xl w-full items-center md:items-start">
                     {/* Agent image card (Flippable) */}
                     <div
-                        className="flex-shrink-0 perspective-1000 group row-start-1 col-start-1 md:row-span-3"
+                        className="flex-shrink-0 perspective-1000 group w-full md:w-auto md:row-start-1 md:col-start-1 md:row-span-3"
                         style={{ perspective: '1000px' }}
                     >
                         <div
-                            className="relative w-24 md:w-80 transition-all duration-700 transform-style-3d cursor-pointer"
+                            className="relative w-full md:w-80 transition-all duration-700 transform-style-3d cursor-pointer max-w-sm mx-auto md:max-w-none md:mx-0"
                             style={{
                                 aspectRatio: '1 / 1.618', // Golden Ratio
                                 transformStyle: 'preserve-3d',
@@ -230,19 +155,21 @@ export function AgentProfile(props: AgentProfileProps) {
                                     backfaceVisibility: 'hidden',
                                     backgroundColor: brandColorDarkHex,
                                     boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px ${brandColorLightHex}40`,
+
+                                    // Note: Make it squircle
+                                    // borderRadius: '50%',
+                                    // ['cornerShape' as really_any /* <- Note: `cornerShape` is non standard CSS property */]: 'squircle ',
                                 }}
                             >
-                                {imageUrl ? (
-                                    // eslint-disable-next-line @next/next/no-img-element
-                                    <img src={imageUrl} alt={fullname} className="w-full h-full object-cover" />
-                                ) : (
-                                    <div
-                                        className="w-full h-full flex items-center justify-center text-3xl md:text-8xl font-bold text-white/80"
-                                        style={{ backgroundColor: brandColorDarkHex }}
-                                    >
-                                        {fullname.charAt(0).toUpperCase()}
-                                    </div>
-                                )}
+                                <AgentProfileImage
+                                    src={imageUrl}
+                                    alt={fullname}
+                                    className="w-full h-full object-cover"
+                                    style={{
+                                        objectFit: 'cover',
+                                        backgroundImage: `url(${colorToDataUrl(brandColorLightHex)})`,
+                                    }}
+                                />
 
                                 {/* Flip hint icon */}
                                 <div className="absolute bottom-2 md:bottom-4 right-2 md:right-4 bg-black/30 p-1 md:p-2 rounded-full text-white/80 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity">
@@ -280,7 +207,7 @@ export function AgentProfile(props: AgentProfileProps) {
                     </div>
 
                     {/* Agent info - Header Area */}
-                    <div className="row-start-1 col-start-2 flex flex-col justify-center md:justify-start h-full md:h-auto gap-1 md:gap-6">
+                    <div className="w-full md:w-auto md:row-start-1 md:col-start-2 flex flex-col justify-center md:justify-start items-center md:items-start h-auto gap-4 md:gap-6 text-center md:text-left">
                         {/* Agent name with custom font */}
                         <h1
                             className="text-2xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight leading-tight"
@@ -298,13 +225,11 @@ export function AgentProfile(props: AgentProfileProps) {
                     </div>
 
                     {/* Chat Area */}
-                    <div className="col-span-2 md:col-span-1 md:col-start-2 w-full mt-2 md:mt-0">
-                        {children}
-                    </div>
+                    <div className="w-full md:col-span-1 md:col-start-2 mt-4 md:mt-0">{children}</div>
 
                     {/* Secondary Actions */}
                     {!isHeadless && (
-                        <div className="col-span-2 md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-2">
+                        <div className="w-full md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-4 md:mt-2">
                             {actions}
                         </div>
                     )}