@promptbook/cli 0.103.0-9 → 0.103.0

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