@promptbook/cli 0.103.0-55 → 0.103.0-66

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

@@ -1,7 +1,9 @@
 import { notFound } from 'next/navigation';
-import ReactMarkdown from 'react-markdown';
 import { BookCommitment } from '../../../../../../src/commitments/_base/BookCommitment';
 import { getVisibleCommitmentDefinitions } from '../../../utils/getVisibleCommitmentDefinitions';
+import { PrintButton } from '../../../components/PrintButton/PrintButton';
+import { PrintHeader } from '../../../components/PrintHeader/PrintHeader';
+import { DocumentationContent } from '../../../components/DocumentationContent/DocumentationContent';
 
 type DocPageProps = {
     params: Promise<{
@@ -25,38 +27,16 @@ export default async function DocPage(props: DocPageProps) {
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+            <PrintButton />
+            
             <div className="container mx-auto px-4 py-16">
-                <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
-                    <div className="p-8 border-b border-gray-100 bg-gray-50/50">
-                        <div className="flex items-center gap-4 mb-4">
-                            <h1 className="text-4xl font-bold text-gray-900 tracking-tight">
-                                <span className="mr-3">{primary.icon}</span>
-                                {primary.type}
-                                {aliases.length > 0 && (
-                                    <span className="text-gray-400 font-normal ml-4 text-2xl">
-                                        / {aliases.join(' / ')}
-                                    </span>
-                                )}
-                            </h1>
-                            <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
-                                Commitment
-                            </span>
-                        </div>
-                        {primary.description && (
-                            <p className="text-xl text-gray-600 leading-relaxed max-w-3xl">
-                                {primary.description}
-                            </p>
-                        )}
-                    </div>
-                    
-                    <div className="p-8">
-                        <article className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-h2:text-2xl prose-h2:mt-8 prose-h2:mb-4 prose-p:text-gray-600 prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:text-gray-800">
-                            <ReactMarkdown>
-                                {primary.documentation}
-                            </ReactMarkdown>
-                        </article>
-                    </div>
-                </div>
+                <PrintHeader title={primary.type} />
+                
+                <DocumentationContent 
+                    primary={primary} 
+                    aliases={aliases} 
+                    isPrintOnly={false} 
+                />
             </div>
         </div>
     );

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

@@ -1,33 +1,58 @@
 import Link from 'next/link';
 import { Card } from '../../components/Homepage/Card';
 import { Section } from '../../components/Homepage/Section';
+import { OpenMojiIcon } from '../../components/OpenMojiIcon/OpenMojiIcon';
 import { getVisibleCommitmentDefinitions } from '../../utils/getVisibleCommitmentDefinitions';
+import { PrintButton } from '../../components/PrintButton/PrintButton';
+import { PrintHeader } from '../../components/PrintHeader/PrintHeader';
+import { DocumentationContent } from '../../components/DocumentationContent/DocumentationContent';
 
 export default function DocsPage() {
     const groupedCommitments = getVisibleCommitmentDefinitions();
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+            <PrintButton />
+            
             <div className="container mx-auto px-4 py-16">
-                <Section title="Documentation">
+                <PrintHeader title="Full Documentation" />
+
+                {/* Screen view: Cards */}
+                <div className="print:hidden">
+                    <Section title="Documentation">
+                        {groupedCommitments.map(({ primary, aliases }) => (
+                            <Link key={primary.type} href={`/docs/${primary.type}`} className="block h-full group">
+                                <Card className="h-full group-hover:border-blue-500 transition-colors">
+                                    <h3 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
+                                        <OpenMojiIcon icon={primary.icon} className="mr-2" />
+                                        {primary.type}
+                                        {aliases.length > 0 && (
+                                            <span className="text-gray-400 font-normal text-lg">
+                                                {' / '}
+                                                {aliases.join(' / ')}
+                                            </span>
+                                        )}
+                                    </h3>
+                                    {primary.description && <p className="text-gray-600 line-clamp-3">{primary.description}</p>}
+                                </Card>
+                            </Link>
+                        ))}
+                    </Section>
+                </div>
+
+                {/* Print view: Full Content */}
+                <div className="hidden print:block space-y-12">
                     {groupedCommitments.map(({ primary, aliases }) => (
-                        <Link key={primary.type} href={`/docs/${primary.type}`} className="block h-full group">
-                            <Card className="h-full group-hover:border-blue-500 transition-colors">
-                                <h3 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
-                                    <span className="mr-2">{primary.icon}</span>
-                                    {primary.type}
-                                    {aliases.length > 0 && (
-                                        <span className="text-gray-400 font-normal text-lg">
-                                            {' / '}
-                                            {aliases.join(' / ')}
-                                        </span>
-                                    )}
-                                </h3>
-                                {primary.description && <p className="text-gray-600 line-clamp-3">{primary.description}</p>}
-                            </Card>
-                        </Link>
+                        <div key={primary.type} className="break-inside-avoid page-break-after-always">
+                            <DocumentationContent 
+                                primary={primary} 
+                                aliases={aliases} 
+                                isPrintOnly={true} 
+                            />
+                            <hr className="my-8 border-gray-200" />
+                        </div>
                     ))}
-                </Section>
+                </div>
             </div>
         </div>
     );

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/globals.css

@@ -54,6 +54,11 @@ body {
     font-family: var(--font-barlow-condensed), 'OpenMojiBlack', Arial, Helvetica, sans-serif;
 }
 
+/* Poppins font for agent names and headings */
+.font-poppins {
+    font-family: var(--font-poppins), 'Poppins', system-ui, -apple-system, sans-serif;
+}
+
 /* Custom utilities */
 .line-clamp-2 {
     display: -webkit-box;
@@ -135,6 +140,53 @@ textarea:focus-visible {
     animation: spin 1s linear infinite;
 }
 
+/* Tailwind CSS animation utilities */
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slide-in-from-top-2 {
+    from {
+        transform: translateY(-0.5rem);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes zoom-in-95 {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.animate-in {
+    animation-duration: 200ms;
+    animation-fill-mode: both;
+}
+
+.fade-in {
+    animation-name: fade-in;
+}
+
+.slide-in-from-top-2 {
+    animation-name: slide-in-from-top-2;
+}
+
+.zoom-in-95 {
+    animation-name: zoom-in-95;
+}
+
 /* Gradient backgrounds */
 .bg-gradient-to-br {
     background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
@@ -145,3 +197,80 @@ textarea:focus-visible {
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     border: 1px solid #e2e8f0;
 }
+
+/* Print styles */
+@media print {
+    @page {
+        margin: 2cm;
+    }
+
+    /* Hide UI elements */
+    header,
+    footer,
+    nav,
+    aside,
+    button:not(.print:block),
+    .no-print,
+    [role="complementary"],
+    #portal-root {
+        display: none !important;
+    }
+
+    /* Reset layout */
+    body,
+    main {
+        padding: 0 !important;
+        margin: 0 !important;
+        background: white !important;
+        min-height: auto !important;
+        width: 100% !important;
+        color: black !important;
+    }
+
+    /* Remove shadows and backgrounds for clean print */
+    * {
+        box-shadow: none !important;
+        text-shadow: none !important;
+        background-color: transparent !important;
+        background-image: none !important;
+    }
+
+    /* Ensure text visibility */
+    h1, h2, h3, h4, h5, h6, p, li, span, div {
+        color: black !important;
+    }
+
+    /* Links */
+    a {
+        text-decoration: underline;
+        color: black !important;
+    }
+
+    /* Preserve borders */
+    .border, .border-b, .border-t, .border-l, .border-r {
+        border-color: #ddd !important;
+    }
+
+    /* Page break control */
+    h1, h2 {
+        break-after: avoid;
+        page-break-after: avoid;
+    }
+
+    p, li, pre, code {
+        break-inside: avoid;
+        page-break-inside: avoid;
+    }
+
+    /* Specific component overrides */
+    .card, .bg-white {
+        border: none !important;
+    }
+
+    /* Code blocks */
+    pre, code {
+        background-color: #f5f5f5 !important;
+        border: 1px solid #ddd !important;
+        white-space: pre-wrap !important;
+    }
+}

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

@@ -1,12 +1,12 @@
 import faviconLogoImage from '@/public/favicon.ico';
 import { LayoutWrapper } from '@/src/components/LayoutWrapper/LayoutWrapper';
 import type { Metadata } from 'next';
-import { Barlow_Condensed } from 'next/font/google';
+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({
@@ -15,16 +15,28 @@ const barlowCondensed = Barlow_Condensed({
     variable: '--font-barlow-condensed',
 });
 
+const poppins = Poppins({
+    subsets: ['latin'],
+    weight: ['400', '500', '600', '700', '800'],
+    variable: '--font-poppins',
+});
+
 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,
@@ -60,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 = [];
@@ -76,29 +87,8 @@ 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>
-            <body className={`${barlowCondensed.variable} antialiased bg-white text-gray-900`}>
+            {/* 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}
                     currentUser={currentUser}

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(),
@@ -41,7 +44,7 @@ export default async function manifest(): Promise<MetadataRoute.Manifest> {
         const description = agentProfile.meta.description || agentProfile.personaDescription || `Agent ${name}`;
 
         // Extract brand color from meta
-        const brandColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+        const brandColor = Color.fromSafe(agentProfile.meta.color || PROMPTBOOK_COLOR);
         const theme_color = brandColor.toHex();
         const background_color = '#ffffff';
 
@@ -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',