@promptbook/cli 0.103.0-56 → 0.103.0-66

package/apps/agents-server/package.json

@@ -10,7 +10,10 @@
         "postinstall": "cd ../../ && npm ci"
     },
     "devDependencies": {
-        "@tailwindcss/typography": "^0.5.19"
+        "@tailwindcss/typography": "^0.5.19",
+        "autoprefixer": "^10.4.21",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.18"
     },
     "dependencies": {
         "remark-gfm": "^4.0.1"

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

@@ -4,6 +4,7 @@ import { $generateBookBoilerplate } from '@promptbook-local/core';
 import { string_agent_name } from '@promptbook-local/types';
 import { revalidatePath } from 'next/cache';
 import { cookies } from 'next/headers';
+import { getMetadata } from '../database/getMetadata';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
 import { authenticateUser } from '../utils/authenticateUser';
 import { isUserAdmin } from '../utils/isUserAdmin';
@@ -16,7 +17,8 @@ export async function $createAgentAction(): Promise<string_agent_name> {
     }
 
     const collection = await $provideAgentCollectionForServer();
-    const agentSource = $generateBookBoilerplate();
+    const namePool = (await getMetadata('NAME_POOL')) || 'ENGLISH';
+    const agentSource = $generateBookBoilerplate({ namePool });
 
     const { agentName } = await collection.createAgent(agentSource);
 

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { TODO_any } from '@promptbook-local/types';
 import {
     CopyIcon,
     CopyPlusIcon,
@@ -10,12 +11,25 @@ import {
     MessageSquareShareIcon,
     MoreHorizontalIcon,
     QrCodeIcon,
+    SmartphoneIcon,
     SquareSplitHorizontalIcon,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { Barlow_Condensed } from 'next/font/google';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { string_data_url, string_url_image } from '../../../../../../src/types/typeAliases';
 import { getAgentLinks } from './agentLinks';
 
+type BeforeInstallPromptEvent = Event & {
+    prompt: () => Promise<void>;
+    userChoice: Promise<{ outcome: 'accepted' | 'dismissed'; platform: string }>;
+};
+
+const barlowCondensed = Barlow_Condensed({
+    subsets: ['latin'],
+    weight: ['300', '400', '500', '600', '700'],
+    variable: '--font-barlow-condensed',
+});
+
 type AgentOptionsMenuProps = {
     agentName: string;
     agentUrl: string;
@@ -39,6 +53,45 @@ export function AgentOptionsMenu({
     const [copyFeedback, setCopyFeedback] = useState<string | null>(null);
     const menuRef = useRef<HTMLDivElement>(null);
 
+    // PWA Install state
+    const [installPromptEvent, setInstallPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
+    const [isInstalled, setIsInstalled] = useState(false);
+
+    useEffect(() => {
+        function handleBeforeInstallPrompt(e: Event) {
+            e.preventDefault();
+            setInstallPromptEvent(e as BeforeInstallPromptEvent);
+        }
+
+        function updateInstalledStatus() {
+            const mediaMatch = window.matchMedia('(display-mode: standalone)');
+            const standalone = mediaMatch.matches || (window.navigator as TODO_any).standalone === true;
+            setIsInstalled(standalone);
+        }
+
+        window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+        updateInstalledStatus();
+        window.matchMedia('(display-mode: standalone)').addEventListener('change', updateInstalledStatus);
+
+        return () => {
+            window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+            window.matchMedia('(display-mode: standalone)').removeEventListener('change', updateInstalledStatus);
+        };
+    }, []);
+
+    const handleInstallApp = useCallback(async () => {
+        if (!installPromptEvent) return;
+        try {
+            installPromptEvent.prompt();
+            const choice = await installPromptEvent.userChoice.catch(() => null);
+            if (choice?.outcome === 'accepted') {
+                setIsInstalled(true);
+            }
+        } finally {
+            setInstallPromptEvent(null);
+        }
+    }, [installPromptEvent]);
+
     useEffect(() => {
         function handleClickOutside(event: MouseEvent) {
             if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -123,6 +176,17 @@ export function AgentOptionsMenu({
             label: 'Show QR Code',
             onClick: onShowQrCode,
         },
+        // Install App - only show if PWA is installable and not already installed
+        ...(!isInstalled && installPromptEvent
+            ? [
+                  {
+                      type: 'action' as const,
+                      icon: SmartphoneIcon,
+                      label: 'Install App',
+                      onClick: handleInstallApp,
+                  },
+              ]
+            : []),
         // Admin-only items
         ...(isAdmin
             ? [
@@ -162,18 +226,20 @@ export function AgentOptionsMenu({
     ];
 
     return (
-        <div ref={menuRef} className="relative">
+        <div ref={menuRef} className="relative z-[9999]">
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className="p-3 rounded-full bg-white/20 hover:bg-white/30 transition-all duration-200 backdrop-blur-sm"
-                style={{ backgroundColor: brandColorHex }}
+                className="p-3 rounded-full hover:bg-white/30 transition-all duration-200"
+                // style={{ backgroundColor: brandColorHex }}
                 aria-label="More options"
             >
-                <MoreHorizontalIcon className="w-5 h-5 text-white" />
+                <MoreHorizontalIcon className="w-5 h-5 text-black" />
             </button>
 
             {isOpen && (
-                <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-2xl border border-gray-100 py-2 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+                <div
+                    className={`absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-2xl border border-gray-100 py-2 z-[9999] animate-in fade-in slide-in-from-top-2 duration-200 ${barlowCondensed.className}`}
+                >
                     {menuItems.map((item, index) => {
                         if (item.type === 'divider') {
                             return <div key={index} className="h-px bg-gray-100 my-2" />;

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

@@ -1,20 +1,22 @@
 'use client';
 
+import { usePromise } from '@common/hooks/usePromise';
 import { Chat } from '@promptbook-local/components';
 import { RemoteAgent } from '@promptbook-local/core';
-import spaceTrim from 'spacetrim';
-import { useCallback, useMemo } from 'react';
-import { usePromise } from '@common/hooks/usePromise';
 import { useRouter } from 'next/navigation';
-import { string_agent_url } from '../../../../../../src/types/typeAliases';
+import { useCallback, useMemo } from 'react';
+import spaceTrim from 'spacetrim';
+import { string_agent_url, string_color } from '../../../../../../src/types/typeAliases';
 
 type AgentProfileChatProps = {
     agentUrl: string_agent_url;
     agentName: string;
     fullname: string;
+    brandColorHex: string_color;
+    avatarSrc: string;
 };
 
-export function AgentProfileChat({ agentUrl, agentName, fullname }: AgentProfileChatProps) {
+export function AgentProfileChat({ agentUrl, agentName, fullname, brandColorHex, avatarSrc }: AgentProfileChatProps) {
     const router = useRouter();
 
     const agentPromise = useMemo(
@@ -56,21 +58,32 @@ export function AgentProfileChat({ agentUrl, agentName, fullname }: AgentProfile
 
     return (
         <div className="w-full h-[400px] md:h-[500px]">
-             <Chat
+            <Chat
                 title={`Chat with ${fullname}`}
+                participants={[
+                    {
+                        name: 'AGENT',
+                        fullname,
+                        isMe: false,
+                        color: brandColorHex,
+                        avatarSrc,
+                        // <- TODO: [🧠] Maybe this shouldnt be there
+                    },
+                ]}
                 messages={[
                     {
                         from: 'AGENT',
                         content: initialMessage,
                         date: new Date(),
                         id: 'initial-message',
-                        isComplete: true
+                        isComplete: true,
                     },
                 ]}
                 onMessage={handleMessage}
                 isSaveButtonEnabled={false}
                 isCopyButtonEnabled={false}
                 className="bg-transparent"
+                buttonColor={brandColorHex}
                 style={{ background: 'transparent' }}
             />
         </div>

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { AgentProfile } from '../../../components/AgentProfile/AgentProfile';
+import { AgentOptionsMenu } from './AgentOptionsMenu';
+
+type AgentProfileWrapperProps = {
+    agent: AgentBasicInformation;
+    agentUrl: string;
+    agentEmail: string;
+    agentName: string;
+    brandColorHex: string;
+    isAdmin: boolean;
+    isHeadless: boolean;
+    actions: React.ReactNode;
+    children: React.ReactNode;
+};
+
+export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
+    const { agent, agentUrl, agentEmail, agentName, brandColorHex, isAdmin, isHeadless, actions, children } = props;
+
+    return (
+        <AgentProfile
+            agent={agent}
+            agentUrl={agentUrl}
+            agentEmail={agentEmail}
+            isHeadless={isHeadless}
+            renderMenu={({ onShowQrCode }) => (
+                <AgentOptionsMenu
+                    agentName={agentName}
+                    agentUrl={agentUrl}
+                    agentEmail={agentEmail}
+                    brandColorHex={brandColorHex}
+                    isAdmin={isAdmin}
+                    onShowQrCode={onShowQrCode}
+                    backgroundImage="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYJh39z8ABJgCe/ZvAS4AAAAASUVORK5CYII="
+                />
+            )}
+            actions={actions}
+        >
+            {children}
+        </AgentProfile>
+    );
+}

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

@@ -12,14 +12,18 @@ export async function generateAgentMetadata({ params }: { params: Promise<{ agen
         const title = agentProfile.meta.fullname || agentProfile.agentName;
         const description = agentProfile.meta.description || agentProfile.personaDescription || undefined;
 
-        // Extract image from meta
-        const image = agentProfile.meta.image;
+        // Use the agent's icon-256.png as the favicon
+        const iconUrl = `/agents/${encodeURIComponent(agentName)}/images/icon-256.png`;
 
         const metadata = {
             metadataBase: publicUrl,
             title,
             description,
-            icons: image ? { icon: image } : undefined,
+            icons: {
+                icon: iconUrl,
+                shortcut: iconUrl,
+                apple: iconUrl,
+            },
             openGraph: {
                 title,
                 description,

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

@@ -0,0 +1,41 @@
+'use server';
+
+import type { Metadata } from 'next';
+import { getAgentName, getAgentProfile } from './_utils';
+
+export async function generateMetadata({ params }: { params: Promise<{ agentName: string }> }): Promise<Metadata> {
+    const agentName = await getAgentName(params);
+
+    try {
+        const agentProfile = await getAgentProfile(agentName);
+
+        const title = agentProfile.meta.fullname || agentProfile.agentName;
+        const description = agentProfile.meta.description || agentProfile.personaDescription || undefined;
+
+        // Use the agent's icon-256.png as the favicon for all agent pages and subpages
+        const iconUrl = `/agents/${encodeURIComponent(agentName)}/images/icon-256.png`;
+
+        return {
+            title,
+            description,
+            icons: {
+                icon: iconUrl,
+                shortcut: iconUrl,
+                apple: iconUrl,
+            },
+        };
+    } catch (error) {
+        console.warn(`Failed to generate metadata for agent ${agentName}`, error);
+        return {
+            title: agentName,
+        };
+    }
+}
+
+export default async function AgentLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <>{children}</>;
+}

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

@@ -2,22 +2,30 @@
 
 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 { notFound } from 'next/navigation';
-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 { getAgentName, getAgentProfile } from './_utils';
-import { AgentProfileView } from './AgentProfileView';
+import { getAgentLinks } from './agentLinks';
+import { AgentProfileChat } from './AgentProfileChat';
+import { AgentProfileWrapper } from './AgentProfileWrapper';
 import { generateAgentMetadata } from './generateAgentMetadata';
 import { ServiceWorkerRegister } from './ServiceWorkerRegister';
 
 export const generateMetadata = generateAgentMetadata;
 
-export default async function AgentPage({ params }: { params: Promise<{ agentName: string }> }) {
+export default async function AgentPage({
+    params,
+    searchParams,
+}: {
+    params: Promise<{ agentName: string }>;
+    searchParams: Promise<{ headless?: string }>;
+}) {
     const agentName = await getAgentName(params);
     const isAdmin = await isUserAdmin();
+    const { headless: headlessParam } = await searchParams;
+    const isHeadless = headlessParam !== undefined;
 
     let agentProfile;
     try {
@@ -42,111 +50,50 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
 
     const agentEmail = `${agentName}@${publicUrl.hostname}`;
 
-    // Extract brand color from meta and create color variations
-    const brandColorString = agentProfile.meta.color || PROMPTBOOK_COLOR.toHex();
-    const brandColors = brandColorString.split(',').map((c) => Color.fromSafe(c.trim()));
-
-    // Ensure at least one color
-    if (brandColors.length === 0) {
-        brandColors.push(PROMPTBOOK_COLOR);
-    }
-
-    const brandColor = brandColors[0]!;
-    const brandColorHex = brandColor.toHex();
-    const brandColorLightHex = brandColor.then(lighten(0.2)).toHex();
-    const brandColorDarkHex = brandColor.then(darken(0.15)).toHex();
-    const brandColorsHex = brandColors.map((c) => c.toHex());
-
-    // Generate Noisy SVG Background
-    const color1 = brandColors[0]!;
-    const color2 = brandColors[1] || brandColors[0]!; // Use secondary color or fallback to primary
-
-    // [🧠] Make colors much lighter for the background as per feedback
-    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)}`;
+    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;
-    const imageUrl = (agentProfile.meta.image as string) || null;
 
     return (
         <>
             <ServiceWorkerRegister scope={`/agents/${encodeURIComponent(agentName)}/`} />
-            <AgentProfileView
-                agentName={agentName}
-                fullname={fullname}
-                personaDescription={agentProfile.personaDescription || ''}
-                imageUrl={imageUrl}
+            <AgentProfileWrapper
+                agent={agentProfile}
                 agentUrl={agentUrl}
                 agentEmail={agentEmail}
+                agentName={agentName}
                 brandColorHex={brandColorHex}
-                brandColorLightHex={brandColorLightHex}
-                brandColorDarkHex={brandColorDarkHex}
-                brandColorsHex={brandColorsHex}
-                backgroundImage={backgroundImage}
-                meta={agentProfile.meta}
                 isAdmin={isAdmin}
-            />
+                isHeadless={isHeadless}
+                actions={
+                    <>
+                        {getAgentLinks(agentName)
+                            .filter((link) => ['Edit Book', 'Integration', 'All Links'].includes(link.title))
+                            .map((link) => (
+                                <a
+                                    key={link.href}
+                                    href={link.href}
+                                    className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors group"
+                                    title={link.title}
+                                >
+                                    <div className="p-2 rounded-full bg-white/40 group-hover:bg-white/60 transition-colors shadow-sm">
+                                        <link.icon className="w-5 h-5" />
+                                    </div>
+                                    <span className="font-medium text-sm">{link.title}</span>
+                                </a>
+                            ))}
+                    </>
+                }
+            >
+                <AgentProfileChat
+                    agentUrl={agentUrl}
+                    agentName={agentName}
+                    fullname={fullname}
+                    brandColorHex={brandColorHex}
+                    avatarSrc={agentProfile.meta.image!}
+                />
+            </AgentProfileWrapper>
         </>
     );
 }

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

@@ -2,7 +2,7 @@
 
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
 import { $provideServer } from '@/src/tools/$provideServer';
-import { PromptbookAgent } from '@promptbook-local/components';
+import { PromptbookAgentIntegration } from '@promptbook-local/components';
 import { parseAgentSource } from '@promptbook-local/core';
 import { headers } from 'next/headers';
 import spaceTrim from 'spacetrim';
@@ -50,7 +50,16 @@ export default async function WebsiteIntegrationAgentPage({ params }: { params:
             </p>
 
             <CodePreview code={code} />
-            <PromptbookAgent agentUrl={agentUrl} meta={meta} />
+            <PromptbookAgentIntegration
+                formfactor="profile"
+                agentUrl={agentUrl}
+                meta={meta}
+                style={{
+                    width: '400px',
+                    height: '600px',
+                    // outline: `2px solid red`
+                }}
+            />
         </main>
     );
 }

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { PromptbookAgent } from '@promptbook-local/components';
+import { PromptbookAgentIntegration } from '@promptbook-local/components';
 import { useSearchParams } from 'next/navigation';
 
 export default function EmbedPage() {
@@ -13,7 +13,7 @@ export default function EmbedPage() {
 
     return (
         <div className="w-full h-full bg-transparent">
-            <PromptbookAgent
+            <PromptbookAgentIntegration
                 agentUrl={agentUrl}
                 onOpenChange={(isOpen) => {
                     window.parent.postMessage({ type: 'PROMPTBOOK_AGENT_RESIZE', isOpen }, '*');

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

@@ -5,8 +5,8 @@ import { Barlow_Condensed, Poppins } from 'next/font/google';
 import { getMetadata } from '../database/getMetadata';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
 import { $provideServer } from '../tools/$provideServer';
-import { isUserAdmin } from '../utils/isUserAdmin';
 import { getCurrentUser } from '../utils/getCurrentUser';
+import { isUserAdmin } from '../utils/isUserAdmin';
 import './globals.css';
 
 const barlowCondensed = Barlow_Condensed({
@@ -25,12 +25,18 @@ export async function generateMetadata(): Promise<Metadata> {
     const { publicUrl } = await $provideServer();
     const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
     const serverDescription = (await getMetadata('SERVER_DESCRIPTION')) || 'Agents server powered by Promptbook';
+    const serverFaviconUrl = (await getMetadata('SERVER_FAVICON_URL')) || faviconLogoImage.src;
 
     return {
         title: serverName,
         description: serverDescription,
         // TODO: keywords: ['@@@'],
         authors: [{ name: 'Promptbook Team' }],
+        icons: {
+            icon: serverFaviconUrl,
+            shortcut: serverFaviconUrl,
+            apple: serverFaviconUrl,
+        },
         openGraph: {
             title: serverName,
             description: serverDescription,
@@ -66,7 +72,6 @@ export default async function RootLayout({
     const currentUser = await getCurrentUser();
     const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
     const serverLogoUrl = (await getMetadata('SERVER_LOGO_URL')) || null;
-    const serverFaviconUrl = (await getMetadata('SERVER_FAVICON_URL')) || faviconLogoImage.src;
     const isFooterShown = ((await getMetadata('IS_FOOTER_SHOWN')) || 'true') === 'true';
 
     let footerLinks = [];
@@ -82,28 +87,7 @@ export default async function RootLayout({
 
     return (
         <html lang="en">
-            <head>
-                {/* Favicon for light mode */}
-                {/*
-                <link
-                    rel="icon"
-                    href="https://www.ptbk.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo-blue-transparent-256.493b7e49.png&w=64&q=75"
-                    media="(prefers-color-scheme: light)"
-                    type="image/svg+xml"
-                />
-                */}
-                {/* Favicon for dark mode */}
-                {/*
-                <link
-                    rel="icon"
-                    href="https://www.ptbk.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo-blue-transparent-256.493b7e49.png&w=64&q=75"
-                    media="(prefers-color-scheme: dark)"
-                    type="image/svg+xml"
-                />
-                */}
-                {/* Default favicon as a fallback */}
-                <link rel="icon" href={serverFaviconUrl} type="image/x-icon" />
-            </head>
+            {/* Note: Icon is set via metadata to allow agent-page specific icons to override it */}
             <body className={`${barlowCondensed.variable} ${poppins.variable} antialiased bg-white text-gray-900`}>
                 <LayoutWrapper
                     isAdmin={isAdmin}

package/apps/agents-server/src/app/manifest.ts

@@ -6,6 +6,9 @@ import { getMetadata } from '../database/getMetadata';
 import { $provideServer } from '../tools/$provideServer';
 import { getAgentProfile } from './agents/[agentName]/_utils';
 
+/**
+ * Manifest for PWA Progressive Web App
+ */
 export default async function manifest(): Promise<MetadataRoute.Manifest> {
     const { publicUrl } = await $provideServer();
     const serverName = (await getMetadata('SERVER_NAME')) || 'Promptbook Agents Server';
@@ -19,7 +22,7 @@ export default async function manifest(): Promise<MetadataRoute.Manifest> {
             name: serverName,
             short_name: serverName,
             description: serverDescription,
-            start_url: publicUrl.href,
+            start_url: publicUrl.href + '?utm_source=pwa&utm_medium=install&utm_campaign=agents_server_app',
             display_override: ['fullscreen', 'minimal-ui'],
             display: 'standalone',
             background_color: PROMPTBOOK_COLOR.toHex(),
@@ -84,7 +87,7 @@ export default async function manifest(): Promise<MetadataRoute.Manifest> {
             name,
             short_name,
             description,
-            start_url: `${agentUrl}/chat`,
+            start_url: `${agentUrl}?headless&utm_source=pwa&utm_medium=install&utm_campaign=agent_app`,
             scope: agentUrl,
             display_override: ['fullscreen', 'minimal-ui'],
             display: 'standalone',
@@ -98,7 +101,9 @@ export default async function manifest(): Promise<MetadataRoute.Manifest> {
         return {
             name: agentName,
             short_name: agentName,
-            start_url: `${publicUrl.href}agents/${encodeURIComponent(agentName)}/chat`,
+            start_url: `${publicUrl.href}agents/${encodeURIComponent(
+                agentName,
+            )}?headless&utm_source=pwa&utm_medium=install&utm_campaign=agent_app`,
             display_override: ['fullscreen', 'minimal-ui'],
             display: 'standalone',
             background_color: '#ffffff',