@promptbook/cli 0.103.0-52 → 0.103.0-54

package/apps/agents-server/README.md

@@ -1,3 +1,3 @@
 # 🔠 Promptbook Agents server
 
--   TODO: [🐱‍🚀] Search for [🔠] to find all places where new app should be registered
+Agents Server is the main web application where Promptbook agents live

package/apps/agents-server/config.ts

@@ -5,7 +5,7 @@ const config = ConfigChecker.from({
 
     // Note: To expose env variables to the browser, using this seemingly strange syntax:
     //       @see https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browser
-    NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
+    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
 
     // Note: [🌇] Defa
     NEXT_PUBLIC_VERCEL_ENV: process.env.NEXT_PUBLIC_VERCEL_ENV,
@@ -31,7 +31,7 @@ const config = ConfigChecker.from({
  *
  * Note: When `SERVERS` are used, this URL will be overridden by the server URL.
  */
-export const NEXT_PUBLIC_URL = config.get('NEXT_PUBLIC_URL').url().value;
+export const NEXT_PUBLIC_SITE_URL = config.get('NEXT_PUBLIC_SITE_URL').url().required().value;
 
 /**
  * [♐️] Vercel environment: "development" | "preview" | "production"
@@ -118,7 +118,7 @@ export const NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID = config.get('NEXT_PUBLIC_VE
 /**
  * List of servers where agents can be hosted
  *
- * List of domains where the agents-server is deployed, this overrides the `NEXT_PUBLIC_URL` and `SUPABASE_TABLE_PREFIX` for each server.
+ * List of domains where the agents-server is deployed, this overrides the `NEXT_PUBLIC_SITE_URL` and `SUPABASE_TABLE_PREFIX` for each server.
  */
 export const SERVERS = config.get('SERVERS').list().value;
 

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

@@ -3,7 +3,7 @@ import path from 'path';
 
 const nextConfig: NextConfig = {
     output: 'standalone',
-    // <- TODO: [🐱‍🚀] How to propperly build Next.js app
+    // <- TODO: [🐱‍🚀][🧠] How to propperly build Next.js app
 
     experimental: {
         externalDir: true,

package/apps/agents-server/public/sw.js

@@ -0,0 +1,16 @@
+self.addEventListener('install', (event) => {
+    // console.log('Service Worker installing.');
+    // Perform install steps
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    // console.log('Service Worker activating.');
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+    // console.log('Service Worker fetching.', event.request.url);
+    // Simple pass-through fetch
+    event.respondWith(fetch(event.request));
+});

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

@@ -1,21 +1,41 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { Card } from '../components/Homepage/Card';
 import { $createAgentAction } from './actions';
 
 export function AddAgentButton() {
     const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
 
     const handleAddAgent = async () => {
-        await $createAgentAction();
+        setIsLoading(true);
+        const agentName = await $createAgentAction();
         // TODO: Add proper error handling and UI feedback
-        router.refresh();
+        if (agentName) {
+            router.push(`/agents/${agentName}`);
+        } else {
+            router.refresh();
+            setIsLoading(false);
+        }
     };
 
     return (
-        <div onClick={handleAddAgent} className="cursor-pointer">
-            <Card>+ Add New Agent</Card>
+        <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>
     );
 }

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

@@ -1,19 +1,26 @@
 'use server';
 
 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 { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
+import { authenticateUser } from '../utils/authenticateUser';
 import { isUserAdmin } from '../utils/isUserAdmin';
+import { clearSession, setSession } from '../utils/session';
 
-export async function $createAgentAction() {
+export async function $createAgentAction(): Promise<string_agent_name> {
     // TODO: [👹] Check permissions here
     if (!(await isUserAdmin())) {
         throw new Error('You are not authorized to create agents');
     }
 
     const collection = await $provideAgentCollectionForServer();
-    await collection.createAgent($generateBookBoilerplate());
+    const agentSource = $generateBookBoilerplate();
+
+    const { agentName } = await collection.createAgent(agentSource);
+
+    return agentName;
 }
 
 export async function loginAction(formData: FormData) {
@@ -22,24 +29,19 @@ export async function loginAction(formData: FormData) {
 
     console.info(`Login attempt for user: ${username}`);
 
-    if (password === process.env.ADMIN_PASSWORD) {
-        const cookieStore = await cookies();
-        cookieStore.set('adminToken', password, {
-            httpOnly: true,
-            secure: process.env.NODE_ENV === 'production',
-            path: '/',
-            maxAge: 60 * 60 * 24 * 30, // 30 days
-        });
+    const user = await authenticateUser(username, password);
+
+    if (user) {
+        await setSession(user);
         revalidatePath('/', 'layout');
         return { success: true };
     } else {
-        return { success: false, message: 'Invalid password' };
+        return { success: false, message: 'Invalid credentials' };
     }
 }
 
 export async function logoutAction() {
-    const cookieStore = await cookies();
-    cookieStore.delete('adminToken');
+    await clearSession();
     revalidatePath('/', 'layout');
 }
 

package/apps/agents-server/src/app/admin/api-tokens/ApiTokensClient.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { Copy, Plus, Trash } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type ApiTokenEntry = {
+    id: number;
+    token: string;
+    note: string | null;
+    createdAt: string;
+    updatedAt: string;
+    isRevoked: boolean;
+};
+
+export function ApiTokensClient() {
+    const [tokens, setTokens] = useState<ApiTokenEntry[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [note, setNote] = useState('');
+    const [isCreating, setIsCreating] = useState(false);
+
+    const fetchTokens = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/api-tokens');
+            if (!response.ok) {
+                throw new Error('Failed to fetch tokens');
+            }
+            const data: ApiTokenEntry[] = await response.json();
+            setTokens(data);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchTokens();
+    }, []);
+
+    const handleCreate = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+        setIsCreating(true);
+
+        try {
+            const response = await fetch('/api/api-tokens', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ note }),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Failed to create token');
+            }
+
+            setNote('');
+            fetchTokens();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    const handleDelete = async (id: number) => {
+        if (!confirm('Are you sure you want to delete this token?')) return;
+
+        try {
+            const response = await fetch(`/api/api-tokens?id=${id}`, {
+                method: 'DELETE',
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Failed to delete token');
+            }
+
+            fetchTokens();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        }
+    };
+
+    const copyToClipboard = (text: string) => {
+        navigator.clipboard.writeText(text);
+        // You could add a toast notification here
+    };
+
+    if (loading && tokens.length === 0) {
+        return <div className="p-8 text-center">Loading tokens...</div>;
+    }
+
+    return (
+        <div className="container mx-auto p-8 max-w-4xl">
+            <h1 className="text-3xl font-bold mb-8">API Tokens</h1>
+
+            {error && (
+                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">{error}</div>
+            )}
+
+            <div className="bg-white shadow rounded-lg p-6 mb-8">
+                <h2 className="text-xl font-semibold mb-4">Create New Token</h2>
+                <form onSubmit={handleCreate} className="flex gap-4">
+                    <input
+                        type="text"
+                        value={note}
+                        onChange={(e) => setNote(e.target.value)}
+                        className="flex-grow px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="Description (optional)"
+                    />
+                    <button
+                        type="submit"
+                        disabled={isCreating}
+                        className="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2 whitespace-nowrap"
+                    >
+                        <Plus className="w-4 h-4" />
+                        {isCreating ? 'Creating...' : 'Create Token'}
+                    </button>
+                </form>
+            </div>
+
+            <div className="bg-white shadow rounded-lg overflow-hidden">
+                <table className="min-w-full divide-y divide-gray-200">
+                    <thead className="bg-gray-50">
+                        <tr>
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Token
+                            </th>
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Note
+                            </th>
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Created At
+                            </th>
+                            <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody className="bg-white divide-y divide-gray-200">
+                        {tokens.length === 0 ? (
+                            <tr>
+                                <td colSpan={4} className="px-6 py-4 text-center text-gray-500">
+                                    No tokens found.
+                                </td>
+                            </tr>
+                        ) : (
+                            tokens.map((entry) => (
+                                <tr key={entry.id}>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 font-mono">
+                                        <div className="flex items-center gap-2">
+                                            <span>{entry.token}</span>
+                                            <button
+                                                onClick={() => copyToClipboard(entry.token)}
+                                                className="text-gray-400 hover:text-gray-600"
+                                                title="Copy to clipboard"
+                                            >
+                                                <Copy className="w-4 h-4" />
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td className="px-6 py-4 text-sm text-gray-500">{entry.note || '-'}</td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        {new Date(entry.createdAt).toLocaleDateString()}
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                        <button
+                                            onClick={() => handleDelete(entry.id)}
+                                            className="text-red-600 hover:text-red-900"
+                                            title="Delete token"
+                                        >
+                                            <Trash className="w-4 h-4" />
+                                        </button>
+                                    </td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/api-tokens/page.tsx

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