@promptbook/cli 0.103.0-10 → 0.103.0-100

package/apps/agents-server/src/app/api/users/route.ts

@@ -0,0 +1,71 @@
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabaseForServer } from '../../../database/$provideSupabaseForServer';
+import { hashPassword } from '../../../utils/auth';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    try {
+        const supabase = $provideSupabaseForServer();
+        const { data: users, error } = await supabase
+            .from(await $getTableName('User'))
+            .select('id, username, createdAt, updatedAt, isAdmin')
+            .order('username');
+
+        if (error) {
+            throw error;
+        }
+
+        return NextResponse.json(users);
+    } catch (error) {
+        console.error('List users error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}
+
+export async function POST(request: Request) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    try {
+        const body = await request.json();
+        const { username, password, isAdmin } = body;
+
+        if (!username || !password) {
+            return NextResponse.json({ error: 'Username and password are required' }, { status: 400 });
+        }
+
+        const passwordHash = await hashPassword(password);
+        const supabase = $provideSupabaseForServer();
+
+        const { data: newUser, error } = await supabase
+            .from(await $getTableName('User'))
+            .insert({
+                username,
+                passwordHash,
+                isAdmin: !!isAdmin,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+            })
+            .select('id, username, createdAt, updatedAt, isAdmin')
+            .single();
+
+        if (error) {
+            if (error.code === '23505') { // unique_violation
+                 return NextResponse.json({ error: 'Username already exists' }, { status: 409 });
+            }
+            throw error;
+        }
+
+        return NextResponse.json(newUser);
+
+    } catch (error) {
+        console.error('Create user error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,43 @@
+import { notFound } from 'next/navigation';
+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<{
+        docId: string;
+    }>;
+};
+
+export default async function DocPage(props: DocPageProps) {
+    const { docId } = await props.params;
+
+    // Decode the docId in case it contains encoded characters (though types usually don't)
+    const commitmentType = decodeURIComponent(docId) as BookCommitment;
+    const groupedCommitments = getVisibleCommitmentDefinitions();
+    const group = groupedCommitments.find((g) => g.primary.type === commitmentType || g.aliases.includes(commitmentType));
+
+    if (!group) {
+        notFound();
+    }
+
+    const { primary, aliases } = group;
+
+    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">
+                <PrintHeader title={primary.type} />
+                
+                <DocumentationContent 
+                    primary={primary} 
+                    aliases={aliases} 
+                    isPrintOnly={false} 
+                />
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,59 @@
+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">
+                <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 }) => (
+                        <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>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { PromptbookAgent } from '@promptbook-local/components';
+import { useSearchParams } from 'next/navigation';
+
+export default function EmbedPage() {
+    const searchParams = useSearchParams();
+    const agentUrl = searchParams.get('agentUrl');
+
+    if (!agentUrl) {
+        return <div className="text-red-500">Missing agentUrl parameter</div>;
+    }
+
+    return (
+        <div className="w-full h-full bg-transparent">
+            <PromptbookAgent
+                agentUrl={agentUrl}
+                onOpenChange={(isOpen) => {
+                    window.parent.postMessage({ type: 'PROMPTBOOK_AGENT_RESIZE', isOpen }, '*');
+                }}
+            />
+        </div>
+    );
+}

package/apps/agents-server/src/app/globals.css

@@ -0,0 +1,276 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/**
+ * OpenMoji black and white CSS
+ *
+ * https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-black-glyf/openmoji.css
+ */
+@font-face {
+    font-family: 'OpenMojiBlack';
+    src: url('/fonts/OpenMoji-black-glyf.woff2') format('woff2');
+    unicode-range: U+23, U+2A, U+2D, U+30-39, U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3, U+2117, U+2120, U+2122,
+        U+2139, U+2194-2199, U+21A9, U+21AA, U+229C, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FE, U+24C2,
+        U+25A1, U+25AA-25AE, U+25B6, U+25C0, U+25C9, U+25D0, U+25D1, U+25E7-25EA, U+25ED, U+25EE, U+25FB-25FE,
+        U+2600-2605, U+260E, U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626, U+262A, U+262E,
+        U+262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F, U+2660, U+2663, U+2665, U+2666, U+2668, U+267B,
+        U+267E, U+267F, U+2691-2697, U+2699, U+269B, U+269C, U+26A0, U+26A1, U+26A7, U+26AA, U+26AB, U+26B0, U+26B1,
+        U+26BD, U+26BE, U+26C4, U+26C5, U+26C8, U+26CE, U+26CF, U+26D1, U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5,
+        U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728,
+        U+2733, U+2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763, U+2764, U+2795-2797, U+27A1,
+        U+27B0, U+27BF, U+2934, U+2935, U+2B05-2B07, U+2B0C, U+2B0D, U+2B1B, U+2B1C, U+2B1F-2B24, U+2B2E, U+2B2F,
+        U+2B50, U+2B55, U+2B58, U+2B8F, U+2BBA-2BBC, U+2BC3, U+2BC4, U+2BEA, U+2BEB, U+3030, U+303D, U+3297, U+3299,
+        U+E000-E009, U+E010, U+E011, U+E040-E06D, U+E080-E0B4, U+E0C0-E0CC, U+E0FF-E10D, U+E140-E14A, U+E150-E157,
+        U+E181-E189, U+E1C0-E1C4, U+E1C6-E1D9, U+E200-E216, U+E240-E269, U+E280-E283, U+E2C0-E2C4, U+E2C6-E2DA,
+        U+E300-E303, U+E305-E30F, U+E312-E316, U+E318-E322, U+E324-E329, U+E32B, U+E340-E348, U+E380, U+E381, U+F000,
+        U+F77A, U+F8FF, U+FE0F, U+1F004, U+1F0CF, U+1F10D-1F10F, U+1F12F, U+1F16D-1F171, U+1F17E, U+1F17F, U+1F18E,
+        U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250, U+1F251,
+        U+1F260-1F265, U+1F300-1F321, U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5,
+        U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F, U+1F570, U+1F573-1F57A, U+1F587,
+        U+1F58A-1F58D, U+1F590, U+1F595, U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2, U+1F5BC, U+1F5C2-1F5C4,
+        U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5,
+        U+1F6CB-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0, U+1F6F3-1F6FC, U+1F7E0-1F7EB,
+        U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1F9FF, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD,
+        U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FBC5-1FBC9, U+E0061-E0067, U+E0069,
+        U+E006C-E0079, U+E007F;
+}
+
+:root {
+    --background: #ffffff;
+    --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #0a0a0a;
+        --foreground: #ededed;
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    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;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Mermaid diagram styling */
+.mermaid-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mermaid-container svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Code block styling */
+pre code {
+    font-family: var(--font-mono), 'Courier New', monospace;
+}
+
+/* Smooth transitions */
+* {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
+        transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+/* Focus styles */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* Loading animation */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.animate-spin {
+    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));
+}
+
+/* Component preview container */
+.component-preview {
+    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

@@ -0,0 +1,124 @@
+import faviconLogoImage from '@/public/favicon.ico';
+import { LayoutWrapper } from '@/src/components/LayoutWrapper/LayoutWrapper';
+import type { Metadata } from 'next';
+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 './globals.css';
+
+const barlowCondensed = Barlow_Condensed({
+    subsets: ['latin'],
+    weight: ['300', '400', '500', '600', '700'],
+    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';
+
+    return {
+        title: serverName,
+        description: serverDescription,
+        // TODO: keywords: ['@@@'],
+        authors: [{ name: 'Promptbook Team' }],
+        openGraph: {
+            title: serverName,
+            description: serverDescription,
+            type: 'website',
+            images: [
+                /*
+            TODO:
+            {
+                url: 'https://www.ptbk.io/design',
+                width: 1200,
+                height: 630,
+                alt: 'Promptbook agents server',
+            },
+            */
+            ],
+        },
+        twitter: {
+            card: 'summary_large_image',
+            title: serverName,
+            description: serverDescription,
+            // TODO: images: ['https://www.ptbk.io/design'],
+        },
+        metadataBase: publicUrl,
+    };
+}
+
+export default async function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    const isAdmin = await isUserAdmin();
+    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 = [];
+    try {
+        const footerLinksString = (await getMetadata('FOOTER_LINKS')) || '[]';
+        footerLinks = JSON.parse(footerLinksString);
+    } catch (error) {
+        console.error('Failed to parse FOOTER_LINKS', error);
+    }
+
+    const collection = await $provideAgentCollectionForServer();
+    const agents = await collection.listAgents();
+
+    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} ${poppins.variable} antialiased bg-white text-gray-900`}>
+                <LayoutWrapper
+                    isAdmin={isAdmin}
+                    currentUser={currentUser}
+                    serverName={serverName}
+                    serverLogoUrl={serverLogoUrl}
+                    agents={JSON.parse(JSON.stringify(agents))}
+                    isFooterShown={isFooterShown}
+                    footerLinks={footerLinks}
+                >
+                    {children}
+                </LayoutWrapper>
+                {/* Global portal root for modals/popups */}
+                <div id="portal-root" />
+            </body>
+        </html>
+    );
+}