@promptbook/cli 0.103.0-10 → 0.103.0-100

package/apps/agents-server/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "promptbook-agents-server",
+    "scripts": {
+        "migrate-database": "npx tsx src/database/migrate.ts",
+        "dev": "(npx kill-port 4440 || true) && next dev -p 4440",
+        "test-build": "npm run build",
+        "build": "(npx kill-port 4440 || true) && next build",
+        "start": "next start -p 4440",
+        "lint": "next lint",
+        "postinstall": "cd ../../ && npm ci"
+    },
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.19"
+    },
+    "dependencies": {
+        "remark-gfm": "^4.0.1"
+    }
+}

package/apps/agents-server/postcss.config.mjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/apps/agents-server/public/fonts/download-font.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+
+const dir = path.join('apps', 'agents-server', 'public', 'fonts');
+const filePath = path.join(dir, 'OpenMoji-black-glyf.woff2');
+
+if (!fs.existsSync(dir)){
+    fs.mkdirSync(dir, { recursive: true });
+}
+
+const file = fs.createWriteStream(filePath);
+https.get('https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/font/OpenMoji-black-glyf/OpenMoji-black-glyf.woff2', function(response) {
+  response.pipe(file);
+  file.on('finish', function() {
+    file.close();
+    console.log('Download completed');
+  });
+}).on('error', function(err) { 
+  fs.unlink(filePath); 
+  console.error('Error downloading file:', err.message);
+});

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

@@ -0,0 +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 () => {
+        setIsLoading(true);
+        const agentName = await $createAgentAction();
+        // TODO: Add proper error handling and UI feedback
+        if (agentName) {
+            router.push(`/agents/${agentName}`);
+        } 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>
+    );
+}

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

@@ -0,0 +1,11 @@
+import { notFound, redirect } from 'next/navigation';
+
+export default async function RedirectPage({ params }: { params: Promise<{ agentName: string; rest: string[] }> }) {
+    const { agentName, rest } = await params;
+
+    if (agentName === 'agents' || agentName === 'api' || agentName.startsWith('.')) {
+        notFound();
+    }
+
+    redirect(`/agents/${agentName}/${rest.join('/')}`);
+}

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

@@ -0,0 +1 @@
+export { generateMetadata, default } from '../agents/[agentName]/page';

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

@@ -0,0 +1,51 @@
+'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(): 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();
+    const agentSource = $generateBookBoilerplate();
+
+    const { agentName } = await collection.createAgent(agentSource);
+
+    return agentName;
+}
+
+export async function loginAction(formData: FormData) {
+    const username = formData.get('username') as string;
+    const password = formData.get('password') as string;
+
+    console.info(`Login attempt for user: ${username}`);
+
+    const user = await authenticateUser(username, password);
+
+    if (user) {
+        await setSession(user);
+        revalidatePath('/', 'layout');
+        return { success: true };
+    } else {
+        return { success: false, message: 'Invalid credentials' };
+    }
+}
+
+export async function logoutAction() {
+    await clearSession();
+    revalidatePath('/', 'layout');
+}
+
+/**
+ * TODO: [🐱‍🚀] Reorganize actions.ts files
+ * TODO: [🐱‍🚀] [🧠] Study how Next.js actions work
+ */

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 />;
+}