@promptbook/cli 0.104.0-1 → 0.104.0-10

package/apps/agents-server/config.ts

@@ -29,9 +29,7 @@ const config = ConfigChecker.from({
  *
  * Note: When `SERVERS` are used, this URL will be overridden by the server URL.
  */
-export const NEXT_PUBLIC_SITE_URL = config
-    .get('NEXT_PUBLIC_SITE_URL')
-    .url()./* <- TODO: !!!! Is it ok not to be required().*/ value;
+export const NEXT_PUBLIC_SITE_URL = config.get('NEXT_PUBLIC_SITE_URL').url().value;
 
 /**
  * [♐️] Vercel environment: "development" | "preview" | "production"

package/apps/agents-server/next.config.ts

@@ -2,8 +2,8 @@ import type { NextConfig } from 'next';
 import path from 'path';
 
 const nextConfig: NextConfig = {
-    output: 'standalone',
-    // <- TODO: [🐱‍🚀][🧠] How to propperly build Next.js app
+    // output: 'standalone',
+    // <- TODO: [🐱‍🚀][🧠] How to propperly build Next.js app, for both Vercel and Doceker?
 
     experimental: {
         externalDir: true,

package/apps/agents-server/package.json

@@ -1,12 +1,16 @@
 {
     "name": "promptbook-agents-server",
     "scripts": {
-        "migrate-database": "npx tsx src/database/migrate.ts",
+        "migrate-database": "npx tsx ./src/database/migrate.ts",
+        "generate-reserved-paths": "ts-node ./scripts/generate-reserved-paths/generate-reserved-paths.ts",
+        "prebuild": "npm run generate-reserved-paths",
+        "predev": "npm run generate-reserved-paths",
         "dev": "(npx kill-port 4440 || true) && next dev -p 4440",
-        "test-build": "npm run build",
+        "test": "npm run lint && npm run test-build",
+        "test-build": "(npx kill-port 4440 || true) && next build",
         "build": "(npx kill-port 4440 || true) && next build",
         "start": "next start -p 4440",
-        "lint": "next lint",
+        "lint": "next lint --max-warnings=0",
         "postinstall": "cd ../../ && npm ci"
     }
 }

package/apps/agents-server/public/swagger.json

@@ -0,0 +1,115 @@
+{
+    "openapi": "3.0.0",
+    "info": {
+        "title": "Agents Server API",
+        "version": "1.0.0",
+        "description": "API documentation for the Agents Server"
+    },
+    "servers": [
+        {
+            "url": "/",
+            "description": "Current Server"
+        }
+    ],
+    "paths": {
+        "/api/agents": {
+            "get": {
+                "summary": "List all agents",
+                "tags": ["Agents"],
+                "responses": {
+                    "200": {
+                        "description": "A list of agents",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "type": "array",
+                                    "items": {
+                                        "type": "object",
+                                        "properties": {
+                                            "name": { "type": "string" },
+                                            "title": { "type": "string" },
+                                            "description": { "type": "string" }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/api/chat": {
+            "post": {
+                "summary": "Chat with an agent",
+                "tags": ["Chat"],
+                "requestBody": {
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "type": "object",
+                                "properties": {
+                                    "agentName": { "type": "string" },
+                                    "message": { "type": "string" }
+                                }
+                            }
+                        }
+                    }
+                },
+                "responses": {
+                    "200": {
+                        "description": "Chat response"
+                    }
+                }
+            }
+        },
+        "/api/agents/{agentName}": {
+            "get": {
+                "summary": "Get agent details",
+                "tags": ["Agents"],
+                "parameters": [
+                    {
+                        "name": "agentName",
+                        "in": "path",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Agent details"
+                    }
+                }
+            }
+        },
+        "/api/upload": {
+            "post": {
+                "summary": "Upload a file",
+                "tags": ["Upload"],
+                "requestBody": {
+                    "content": {
+                        "multipart/form-data": {
+                            "schema": {
+                                "type": "object",
+                                "properties": {
+                                    "file": {
+                                        "type": "string",
+                                        "format": "binary"
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                "responses": {
+                    "200": {
+                        "description": "File uploaded"
+                    }
+                }
+            }
+        }
+    },
+    "--0": "<- TODO: !!!! Generate this file dynamically from the codebase of the Agents server app"
+}

package/apps/agents-server/scripts/generate-reserved-paths/generate-reserved-paths.ts

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import path from 'path';
+import { GENERATOR_WARNING } from '../../../../src/config';
+
+const appDir = path.join(__dirname, '..', '..', 'src', 'app');
+const publicDir = path.join(__dirname, '..', '..', 'public');
+const outputFile = path.join(__dirname, '..', '..', 'src', 'generated', 'reservedPaths.ts');
+
+// Read the app directory
+const appEntries = fs.readdirSync(appDir, { withFileTypes: true });
+
+// Filter to get only directories (excluding dynamic routes like [agentName])
+const reservedPaths = appEntries
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => entry.name)
+    .filter((name) => !name.startsWith('[') && !name.endsWith(']'));
+
+// Read the public directory (files and folders)
+const publicEntries = fs.readdirSync(publicDir, { withFileTypes: true });
+const publicPaths = publicEntries.map((entry) => entry.name).filter((name) => !name.startsWith('.'));
+
+// Add additional paths that are not in app or public but should be reserved
+const additionalPaths = [
+    '_next', // Next.js internal paths
+    'manifest.webmanifest', // PWA manifest
+];
+
+const allReservedPaths = [...new Set([...reservedPaths, ...publicPaths, ...additionalPaths])].sort();
+
+// Generate the TypeScript file
+const content = `/**
+ * Reserved paths that should not be treated as agent names.
+ * This file is auto-generated by scripts/generate-reserved-paths.js
+ *
+ * ${GENERATOR_WARNING}
+ *
+ * @see /apps/agents-server/src/app - source directory for routes
+ * @see /apps/agents-server/public - source directory for static files
+ * @see /apps/agents-server/src/middleware.ts - where this is used
+ */
+export const RESERVED_PATHS: readonly string[] = ${JSON.stringify(allReservedPaths, null, 4)} as const;
+`;
+
+// Ensure the generated directory exists
+const generatedDir = path.dirname(outputFile);
+if (!fs.existsSync(generatedDir)) {
+    fs.mkdirSync(generatedDir, { recursive: true });
+}
+
+// Write the file
+fs.writeFileSync(outputFile, content, 'utf-8');
+
+console.log(`Generated ${outputFile} with ${allReservedPaths.length} reserved paths:`);
+console.log(allReservedPaths.join(', '));

package/apps/agents-server/scripts/generate-reserved-paths/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "commonjs",
+        "downlevelIteration": true,
+        "allowJs": true,
+        "moduleResolution": "node",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "experimentalDecorators": true,
+        "noUnusedLocals": false,
+        "resolveJsonModule": true,
+        "esModuleInterop": true
+    },
+    "exclude": ["node_modules"]
+}

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

@@ -1,41 +1,67 @@
 'use client';
 
+import { string_book } from '@promptbook-local/types';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { Card } from '../components/Homepage/Card';
-import { $createAgentAction } from './actions';
+import { NewAgentDialog } from '../components/NewAgentDialog/NewAgentDialog';
+import { $createAgentFromBookAction, $generateAgentBoilerplateAction } from './actions';
 
 export function AddAgentButton() {
     const router = useRouter();
     const [isLoading, setIsLoading] = useState(false);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [agentSource, setAgentSource] = useState<string_book>('' as string_book);
 
     const handleAddAgent = async () => {
         setIsLoading(true);
-        const agentName = await $createAgentAction();
-        // TODO: Add proper error handling and UI feedback
-        if (agentName) {
-            router.push(`/agents/${agentName}`);
+        try {
+            const boilerplate = await $generateAgentBoilerplateAction();
+            setAgentSource(boilerplate);
+            setIsDialogOpen(true);
+        } catch (error) {
+            console.error('Failed to generate agent boilerplate', error);
+            // TODO: Add proper error handling and UI feedback
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCreate = async (source: string_book) => {
+        // Note: [🧠] Logic for creation is now handled inside the dialog (waiting for promise), here we just handle navigation
+        const { permanentId } = await $createAgentFromBookAction(source);
+
+        if (permanentId) {
+            router.push(`/agents/${permanentId}`);
         } else {
             router.refresh();
-            setIsLoading(false);
         }
     };
 
     return (
-        <div
-            onClick={isLoading ? undefined : handleAddAgent}
-            className={`cursor-pointer h-full group ${isLoading ? 'pointer-events-none' : ''}`}
-        >
-            <Card className="flex items-center justify-center text-lg font-medium text-gray-500 group-hover:text-blue-500 group-hover:border-blue-400 border-dashed border-2">
-                {isLoading ? (
-                    <>
-                        <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
-                        Creating agent...
-                    </>
-                ) : (
-                    '+ Add New Agent'
-                )}
-            </Card>
-        </div>
+        <>
+            <div
+                onClick={isLoading ? undefined : handleAddAgent}
+                className={`cursor-pointer h-full group ${isLoading ? 'pointer-events-none' : ''}`}
+            >
+                <Card className="flex items-center justify-center text-lg font-medium text-gray-500 group-hover:text-blue-500 group-hover:border-blue-400 border-dashed border-2">
+                    {isLoading ? (
+                        <>
+                            <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+                            Preparing...
+                        </>
+                    ) : (
+                        '+ Add New Agent'
+                    )}
+                </Card>
+            </div>
+
+            <NewAgentDialog
+                isOpen={isDialogOpen}
+                onClose={() => setIsDialogOpen(false)}
+                initialAgentSource={agentSource}
+                onCreate={handleCreate}
+            />
+        </>
     );
 }

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

@@ -1,16 +1,16 @@
 'use server';
 
 import { $generateBookBoilerplate } from '@promptbook-local/core';
-import { string_agent_name } from '@promptbook-local/types';
+import { string_agent_name, string_book } from '@promptbook-local/types';
 import { revalidatePath } from 'next/cache';
-import { cookies } from 'next/headers';
+import { string_agent_permanent_id } from '../../../../src/types/typeAliases';
 import { getMetadata } from '../database/getMetadata';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
 import { authenticateUser } from '../utils/authenticateUser';
 import { isUserAdmin } from '../utils/isUserAdmin';
 import { clearSession, setSession } from '../utils/session';
 
-export async function $createAgentAction(): Promise<string_agent_name> {
+export async function $createAgentAction(): Promise<{ agentName: string_agent_name; permanentId: string_agent_permanent_id }> {
     // TODO: [👹] Check permissions here
     if (!(await isUserAdmin())) {
         throw new Error('You are not authorized to create agents');
@@ -20,9 +20,26 @@ export async function $createAgentAction(): Promise<string_agent_name> {
     const namePool = (await getMetadata('NAME_POOL')) || 'ENGLISH';
     const agentSource = $generateBookBoilerplate({ namePool });
 
-    const { agentName } = await collection.createAgent(agentSource);
+    const { agentName, permanentId } = await collection.createAgent(agentSource);
 
-    return agentName;
+    return { agentName, permanentId };
+}
+
+export async function $generateAgentBoilerplateAction(): Promise<string_book> {
+    const namePool = (await getMetadata('NAME_POOL')) || 'ENGLISH';
+    return $generateBookBoilerplate({ namePool });
+}
+
+export async function $createAgentFromBookAction(bookContent: string_book): Promise<{ agentName: string_agent_name; permanentId: string_agent_permanent_id }> {
+    // TODO: [👹] Check permissions here
+    if (!(await isUserAdmin())) {
+        throw new Error('You are not authorized to create agents');
+    }
+
+    const collection = await $provideAgentCollectionForServer();
+    const { agentName, permanentId } = await collection.createAgent(bookContent);
+
+    return { agentName, permanentId };
 }
 
 export async function loginAction(formData: FormData) {

package/apps/agents-server/src/app/admin/browser-test/BrowserTestClient.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+
+export function BrowserTestClient() {
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [facebookStreamUrl, setFacebookStreamUrl] = useState<string | null>(null);
+    const [goal, setGoal] = useState<string>('');
+    const [plan, setPlan] = useState<string | null>(null);
+    const [isConfirming, setIsConfirming] = useState<boolean>(false);
+
+    useEffect(() => {
+        return () => {
+            if (imageUrl) {
+                URL.revokeObjectURL(imageUrl);
+            }
+        };
+    }, [imageUrl]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleTakeScreenshot = async () => {
+        setFacebookStreamUrl(null);
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await fetch('/api/browser-test/screenshot');
+            if (!response.ok) {
+                const text = await response.text();
+                let errorMessage;
+                try {
+                    const json = JSON.parse(text);
+                    errorMessage = json.error || response.statusText;
+                } catch {
+                    errorMessage = text || response.statusText;
+                }
+                throw new Error(`Error: ${response.status} ${errorMessage}`);
+            }
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            setImageUrl(url);
+        } catch (err) {
+            setError(String(err));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleScrollFacebook = () => {
+        setImageUrl(null);
+        setError(null);
+        setFacebookStreamUrl(`/api/browser-test/scroll-facebook?t=${Date.now()}`);
+    };
+
+    const handleActOnFacebook = async () => {
+        setError(null);
+        setIsLoading(true);
+        // Start streaming view if not already started
+        if (!facebookStreamUrl) {
+            setFacebookStreamUrl(`/api/browser-test/scroll-facebook?t=${Date.now()}`);
+        }
+
+        try {
+            const response = await fetch('/api/browser-test/act', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ goal, action: 'plan' }),
+            });
+
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(`Error: ${response.status} ${text}`);
+            }
+
+            const data = await response.json();
+            setPlan(data.plan);
+            setIsConfirming(true);
+        } catch (err) {
+            setError(String(err));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleConfirmAction = async () => {
+        setError(null);
+        setIsLoading(true);
+        setIsConfirming(false);
+        setPlan(null);
+
+        try {
+            const response = await fetch('/api/browser-test/act', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ goal, action: 'execute', plan }),
+            });
+
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(`Error: ${response.status} ${text}`);
+            }
+
+            const data = await response.json();
+            // Optionally show success message
+            console.log('Action executed:', data);
+        } catch (err) {
+            setError(String(err));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl text-gray-900 font-light">Browser Test</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Launch a browser instance and take a screenshot to verify functionality.
+                    </p>
+                </div>
+            </div>
+
+            <Card>
+                <div className="mb-4">
+                    <p className="mb-2">Click the button below to launch a browser instance (if not running), navigate to ptbk.io, and take a screenshot.</p>
+                    <button
+                        onClick={handleTakeScreenshot}
+                        disabled={isLoading}
+                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                    >
+                        {isLoading ? 'Taking Screenshot...' : 'Take Screenshot'}
+                    </button>
+                    <button
+                        onClick={handleScrollFacebook}
+                        disabled={isLoading}
+                        className="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                    >
+                        View Facebook Stream
+                    </button>
+                </div>
+
+                <div className="mb-4 space-y-2">
+                    <label className="block text-sm font-medium text-gray-700">Goal for Agent</label>
+                    <div className="flex gap-2">
+                        <input
+                            type="text"
+                            value={goal}
+                            onChange={(e) => setGoal(e.target.value)}
+                            placeholder="e.g., Like 5 posts about AI"
+                            className="flex-1 p-2 border border-gray-300 rounded"
+                            disabled={isLoading}
+                        />
+                        <button
+                            onClick={handleActOnFacebook}
+                            disabled={isLoading || !goal}
+                            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                        >
+                            {isLoading ? 'Processing...' : 'Act on Facebook'}
+                        </button>
+                    </div>
+                </div>
+
+                {isConfirming && plan && (
+                    <div className="bg-yellow-50 border border-yellow-200 p-4 rounded mb-4">
+                        <h3 className="font-bold text-lg mb-2">Confirm Plan</h3>
+                        <pre className="whitespace-pre-wrap bg-white p-3 border rounded mb-3 text-sm">{plan}</pre>
+                        <div className="flex gap-2">
+                            <button
+                                onClick={handleConfirmAction}
+                                className="bg-green-600 hover:bg-green-800 text-white font-bold py-2 px-4 rounded"
+                            >
+                                Confirm & Execute
+                            </button>
+                            <button
+                                onClick={() => setIsConfirming(false)}
+                                className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {error && (
+                    <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
+                        <strong className="font-bold">Error: </strong>
+                        <span className="block sm:inline">{error}</span>
+                    </div>
+                )}
+
+                {imageUrl && (
+                    <div className="border rounded shadow-lg overflow-hidden">
+                        <h2 className="text-xl font-semibold p-2 bg-gray-100">Screenshot</h2>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={imageUrl} alt="Screenshot of ptbk.io" className="w-full h-auto" />
+                    </div>
+                )}
+
+                {facebookStreamUrl && (
+                    <div className="border rounded shadow-lg overflow-hidden">
+                        <h2 className="text-xl font-semibold p-2 bg-gray-100">Facebook Scroll Stream</h2>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={facebookStreamUrl} alt="Live stream of Facebook scrolling" className="w-full h-auto" />
+                    </div>
+                )}
+            </Card>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/browser-test/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { BrowserTestClient } from './BrowserTestClient';
+
+export default async function BrowserTestPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <BrowserTestClient />;
+}