@promptbook/cli 0.104.0-1 → 0.104.0-11

package/apps/agents-server/src/app/admin/chat-history/ChatHistoryClient.tsx

@@ -54,10 +54,7 @@ function getMessagePreview(message: unknown, maxLength = 120): string {
     }
 
     if (typeof message === 'object') {
-        const content =
-            (message as { content?: unknown }).content ??
-            (message as { text?: unknown }).text ??
-            message;
+        const content = (message as { content?: unknown }).content ?? (message as { text?: unknown }).text ?? message;
 
         let text: string;
 
@@ -303,11 +300,12 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
             const message = row.message as { role?: string; content?: string };
             const role = (message.role || 'USER').toUpperCase();
             return {
+                // channel: 'PROMPTBOOK_CHAT',
                 id: String(row.id),
-                from: role === 'USER' ? 'USER' : 'ASSISTANT',
+                sender: role === 'USER' ? 'USER' : 'ASSISTANT',
                 content: message.content || JSON.stringify(message),
                 isComplete: true,
-                date: new Date(row.createdAt),
+                createdAt: new Date(row.createdAt),
             } satisfies ChatMessage;
         });
     }, [items, viewMode]);
@@ -317,17 +315,9 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
             <div>
                 {total > 0 ? (
                     <>
-                        Showing{' '}
-                        <span className="font-semibold">
-                            {Math.min((page - 1) * pageSize + 1, total)}
-                        </span>{' '}
-                        –{' '}
-                        <span className="font-semibold">
-                            {Math.min(page * pageSize, total)}
-                        </span>{' '}
-                        of{' '}
-                        <span className="font-semibold">{total}</span>{' '}
-                        messages
+                        Showing <span className="font-semibold">{Math.min((page - 1) * pageSize + 1, total)}</span> –{' '}
+                        <span className="font-semibold">{Math.min(page * pageSize, total)}</span> of{' '}
+                        <span className="font-semibold">{total}</span> messages
                     </>
                 ) : (
                     'No messages'
@@ -403,97 +393,90 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                         </a>
                     </div>
                     <div>
-                        <div className="text-xl font-semibold text-gray-900">
-                            {total.toLocaleString()}
-                        </div>
-                        <div className="text-xs uppercase tracking-wide text-gray-400">
-                            Total messages
-                        </div>
+                        <div className="text-xl font-semibold text-gray-900">{total.toLocaleString()}</div>
+                        <div className="text-xs uppercase tracking-wide text-gray-400">Total messages</div>
                     </div>
                 </div>
             </div>
             <Card>
-                    <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
-                        <form onSubmit={handleSearchSubmit} className="flex flex-col gap-2 md:flex-row md:items-end">
-                            <div className="flex flex-col gap-1">
-                                <label htmlFor="search" className="text-sm font-medium text-gray-700">
-                                    Search
-                                </label>
-                                <input
-                                    id="search"
-                                    type="text"
-                                    value={searchInput}
-                                    onChange={(event) => setSearchInput(event.target.value)}
-                                    placeholder="Search by agent name, URL or IP"
-                                    className="w-full md:w-72 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                />
-                            </div>
-                            <button
-                                type="submit"
-                                className="mt-2 inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 md:mt-0 md:ml-3"
+                <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                    <form onSubmit={handleSearchSubmit} className="flex flex-col gap-2 md:flex-row md:items-end">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="search" className="text-sm font-medium text-gray-700">
+                                Search
+                            </label>
+                            <input
+                                id="search"
+                                type="text"
+                                value={searchInput}
+                                onChange={(event) => setSearchInput(event.target.value)}
+                                placeholder="Search by agent name, URL or IP"
+                                className="w-full md:w-72 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            className="mt-2 inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 md:mt-0 md:ml-3"
+                        >
+                            Apply
+                        </button>
+                    </form>
+
+                    <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-4">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="agentFilter" className="text-sm font-medium text-gray-700">
+                                Agent filter
+                            </label>
+                            <select
+                                id="agentFilter"
+                                value={agentName}
+                                onChange={handleAgentChange}
+                                className="w-full md:w-64 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                             >
-                                Apply
-                            </button>
-                        </form>
-
-                        <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-4">
-                            <div className="flex flex-col gap-1">
-                                <label htmlFor="agentFilter" className="text-sm font-medium text-gray-700">
-                                    Agent filter
-                                </label>
-                                <select
-                                    id="agentFilter"
-                                    value={agentName}
-                                    onChange={handleAgentChange}
-                                    className="w-full md:w-64 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                >
-                                    <option value="">All agents</option>
-                                    {agents.map((agent) => (
-                                        <option key={agent.agentName} value={agent.agentName}>
-                                            {agent.fullname || agent.agentName}
-                                        </option>
-                                    ))}
-                                </select>
-                                {agentsLoading && (
-                                    <span className="text-xs text-gray-400">Loading agents…</span>
-                                )}
-                            </div>
-
-                            <div className="flex flex-col gap-1">
-                                <label htmlFor="pageSize" className="text-sm font-medium text-gray-700">
-                                    Page size
-                                </label>
-                                <select
-                                    id="pageSize"
-                                    value={pageSize}
-                                    onChange={handlePageSizeChange}
-                                    className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                >
-                                    <option value={10}>10</option>
-                                    <option value={20}>20</option>
-                                    <option value={50}>50</option>
-                                    <option value={100}>100</option>
-                                </select>
-                            </div>
+                                <option value="">All agents</option>
+                                {agents.map((agent) => (
+                                    <option key={agent.agentName} value={agent.agentName}>
+                                        {agent.fullname || agent.agentName}
+                                    </option>
+                                ))}
+                            </select>
+                            {agentsLoading && <span className="text-xs text-gray-400">Loading agents…</span>}
                         </div>
-                    </div>
 
-                    {agentName && (
-                        <div className="mt-4 flex items-center justify-between gap-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3">
-                            <p className="text-sm text-amber-800">
-                                Showing chat history for agent{' '}
-                                <span className="font-semibold break-all">{agentName}</span>.
-                            </p>
-                            <button
-                                type="button"
-                                onClick={handleClearAgentHistory}
-                                className="inline-flex items-center justify-center rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-50"
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="pageSize" className="text-sm font-medium text-gray-700">
+                                Page size
+                            </label>
+                            <select
+                                id="pageSize"
+                                value={pageSize}
+                                onChange={handlePageSizeChange}
+                                className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                             >
-                                Clear history for this agent
-                            </button>
+                                <option value={10}>10</option>
+                                <option value={20}>20</option>
+                                <option value={50}>50</option>
+                                <option value={100}>100</option>
+                            </select>
                         </div>
-                    )}
-                </Card>
+                    </div>
+                </div>
+
+                {agentName && (
+                    <div className="mt-4 flex items-center justify-between gap-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3">
+                        <p className="text-sm text-amber-800">
+                            Showing chat history for agent <span className="font-semibold break-all">{agentName}</span>.
+                        </p>
+                        <button
+                            type="button"
+                            onClick={handleClearAgentHistory}
+                            className="inline-flex items-center justify-center rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-50"
+                        >
+                            Clear history for this agent
+                        </button>
+                    </div>
+                )}
+            </Card>
 
             {viewMode === 'chat' ? (
                 <div className="bg-white rounded-lg shadow border border-gray-200 overflow-hidden flex flex-col">
@@ -505,22 +488,14 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                             isSaveButtonEnabled={true}
                         />
                     </div>
-                    <div className="p-4 bg-gray-50 border-t border-gray-200">
-                        {pagination}
-                    </div>
+                    <div className="p-4 bg-gray-50 border-t border-gray-200">{pagination}</div>
                 </div>
             ) : (
                 <Card>
                     <div className="flex items-center justify-between mb-4">
-                        <h2 className="text-lg font-medium text-gray-900">
-                            Messages ({total})
-                        </h2>
+                        <h2 className="text-lg font-medium text-gray-900">Messages ({total})</h2>
                     </div>
-                    {error && (
-                        <div className="mb-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800">
-                            {error}
-                        </div>
-                    )}
+                    {error && <div className="mb-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800">{error}</div>}
 
                     {loading && items.length === 0 ? (
                         <div className="py-8 text-center text-gray-500">Loading chat history…</div>
@@ -555,27 +530,13 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                                                 )}
                                             </button>
                                         </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Role
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Message
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            URL
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            IP
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Language
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Platform
-                                        </th>
-                                        <th className="px-4 py-3 text-right font-medium text-gray-500">
-                                            Actions
-                                        </th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Role</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Message</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">URL</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">IP</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Language</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Platform</th>
+                                        <th className="px-4 py-3 text-right font-medium text-gray-500">Actions</th>
                                     </tr>
                                 </thead>
                                 <tbody className="divide-y divide-gray-200 bg-white">
@@ -596,9 +557,7 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                                                 </div>
                                             </td>
                                             <td className="max-w-xs px-4 py-3 text-gray-500">
-                                                <div className="truncate text-xs">
-                                                    {row.url || '-'}
-                                                </div>
+                                                <div className="truncate text-xs">{row.url || '-'}</div>
                                             </td>
                                             <td className="whitespace-nowrap px-4 py-3 text-gray-500">
                                                 {row.ip || '-'}
@@ -607,9 +566,7 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                                                 {row.language || '-'}
                                             </td>
                                             <td className="max-w-xs px-4 py-3 text-gray-500">
-                                                <div className="truncate text-xs">
-                                                    {row.platform || '-'}
-                                                </div>
+                                                <div className="truncate text-xs">{row.platform || '-'}</div>
                                             </td>
                                             <td className="whitespace-nowrap px-4 py-3 text-right text-xs font-medium">
                                                 <button

package/apps/agents-server/src/app/admin/files/FilesGalleryClient.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+import { ChevronLeft, ChevronRight, File, Grid, LayoutList, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { FileWithAgent, listFiles } from './actions';
+
+type ViewMode = 'TABLE' | 'GRID';
+
+export function FilesGalleryClient() {
+    const [viewMode, setViewMode] = useState<ViewMode>('TABLE');
+    const [files, setFiles] = useState<FileWithAgent[]>([]);
+    const [total, setTotal] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [page, setPage] = useState(1);
+    const [limit] = useState(20);
+    const [hasMore, setHasMore] = useState(true);
+
+    const loadFiles = async (pageNum: number, isNewView: boolean) => {
+        setIsLoading(true);
+        try {
+            const result = await listFiles({ page: pageNum, limit });
+            if (isNewView) {
+                setFiles(result.files);
+            } else {
+                setFiles((prev) => [...prev, ...result.files]);
+            }
+            setTotal(result.total);
+            setHasMore(result.files.length === limit);
+        } catch (error) {
+            console.error(error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadFiles(1, true);
+        setPage(1);
+        setHasMore(true);
+    }, [viewMode]);
+
+    const handleLoadMore = () => {
+        if (!isLoading && hasMore) {
+            const nextPage = page + 1;
+            setPage(nextPage);
+            loadFiles(nextPage, false);
+        }
+    };
+
+    // Table view pagination
+    const handlePageChange = (newPage: number) => {
+        setPage(newPage);
+        loadFiles(newPage, true);
+    };
+
+    const observerTarget = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting && hasMore && !isLoading && viewMode === 'GRID') {
+                    handleLoadMore();
+                }
+            },
+            { threshold: 0.1 }
+        );
+
+        if (observerTarget.current) {
+            observer.observe(observerTarget.current);
+        }
+
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            if (observerTarget.current) {
+                observer.unobserve(observerTarget.current);
+            }
+        };
+    }, [hasMore, isLoading, viewMode, page]);
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <div className="flex justify-between items-center mt-20 mb-4">
+                <h1 className="text-3xl text-gray-900 font-light">Files Gallery</h1>
+                <div className="flex items-center gap-2 bg-gray-100 p-1 rounded-lg">
+                    <button
+                        onClick={() => setViewMode('TABLE')}
+                        className={`p-2 rounded-md transition-colors ${
+                            viewMode === 'TABLE' ? 'bg-white shadow-sm text-blue-600' : 'text-gray-500 hover:text-gray-900'
+                        }`}
+                        title="Table View"
+                    >
+                        <LayoutList className="w-5 h-5" />
+                    </button>
+                    <button
+                        onClick={() => setViewMode('GRID')}
+                        className={`p-2 rounded-md transition-colors ${
+                            viewMode === 'GRID' ? 'bg-white shadow-sm text-blue-600' : 'text-gray-500 hover:text-gray-900'
+                        }`}
+                        title="Grid View"
+                    >
+                        <Grid className="w-5 h-5" />
+                    </button>
+                </div>
+            </div>
+
+            {viewMode === 'TABLE' ? (
+                <div className="bg-white border rounded-lg overflow-hidden shadow-sm">
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm text-left text-gray-500">
+                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 border-b">
+                                <tr>
+                                    <th className="px-6 py-3">File Name</th>
+                                    <th className="px-6 py-3">Type</th>
+                                    <th className="px-6 py-3">Size</th>
+                                    <th className="px-6 py-3">Agent</th>
+                                    <th className="px-6 py-3">Purpose</th>
+                                    <th className="px-6 py-3">Status</th>
+                                    <th className="px-6 py-3">Created At</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {files.map((file) => (
+                                    <tr key={file.id} className="bg-white border-b hover:bg-gray-50">
+                                        <td className="px-6 py-4">
+                                            {file.storageUrl ? (
+                                                <a href={file.storageUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                                                    {file.fileName}
+                                                </a>
+                                            ) : (
+                                                file.fileName
+                                            )}
+                                        </td>
+                                        <td className="px-6 py-4">{file.fileType}</td>
+                                        <td className="px-6 py-4">{(file.fileSize / 1024).toFixed(2)} KB</td>
+                                        <td className="px-6 py-4">
+                                            {file.agent ? (
+                                                <Link href={`/${file.agent.agentName}`} className="text-blue-600 hover:underline">
+                                                    {file.agent.agentName}
+                                                </Link>
+                                            ) : (
+                                                <span className="text-gray-400">-</span>
+                                            )}
+                                        </td>
+                                        <td className="px-6 py-4">
+                                            <span className="bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
+                                                {file.purpose}
+                                            </span>
+                                        </td>
+                                        <td className="px-6 py-4">
+                                             <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                                                file.status === 'COMPLETED' ? 'bg-green-100 text-green-800' : 
+                                                file.status === 'FAILED' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'
+                                            }`}>
+                                                {file.status}
+                                            </span>
+                                        </td>
+                                        <td className="px-6 py-4 whitespace-nowrap">
+                                            {new Date(file.createdAt).toLocaleString()}
+                                        </td>
+                                    </tr>
+                                ))}
+                                {files.length === 0 && !isLoading && (
+                                    <tr>
+                                        <td colSpan={7} className="px-6 py-4 text-center text-gray-500">
+                                            No files found.
+                                        </td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                    {/* Pagination for Table */}
+                    <div className="flex items-center justify-between px-6 py-4 border-t bg-gray-50">
+                        <span className="text-sm text-gray-700">
+                            Showing <span className="font-medium">{(page - 1) * limit + 1}</span> to <span className="font-medium">{Math.min(page * limit, total)}</span> of <span className="font-medium">{total}</span> results
+                        </span>
+                        <div className="flex gap-2">
+                            <button
+                                onClick={() => handlePageChange(page - 1)}
+                                disabled={page === 1 || isLoading}
+                                className="p-2 border rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                <ChevronLeft className="w-4 h-4" />
+                            </button>
+                            <button
+                                onClick={() => handlePageChange(page + 1)}
+                                disabled={page * limit >= total || isLoading}
+                                className="p-2 border rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                <ChevronRight className="w-4 h-4" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <>
+                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+                        {files.map((file) => (
+                            <div key={file.id} className="group relative border rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow">
+                                <a href={file.storageUrl || '#'} target="_blank" rel="noopener noreferrer" className="block aspect-square relative bg-gray-100 flex items-center justify-center">
+                                    {file.fileType.startsWith('image/') && file.storageUrl ? (
+                                        /* eslint-disable-next-line @next/next/no-img-element */
+                                        <img 
+                                            src={file.storageUrl} 
+                                            alt={file.fileName} 
+                                            className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105" 
+                                            loading="lazy"
+                                        />
+                                    ) : (
+                                        <File className="w-16 h-16 text-gray-400" />
+                                    )}
+                                </a>
+                                <div className="p-3">
+                                    <div className="flex items-center justify-between gap-2 mb-1">
+                                        {file.agent ? (
+                                            <Link href={`/${file.agent.agentName}`} className="text-xs font-medium text-blue-600 hover:underline truncate">
+                                                {file.agent.agentName}
+                                            </Link>
+                                        ) : (
+                                             <span className="text-xs text-gray-400">No agent</span>
+                                        )}
+                                        <span className="text-[10px] text-gray-400 whitespace-nowrap">
+                                            {new Date(file.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+                                        </span>
+                                    </div>
+                                    <p className="text-xs text-gray-600 truncate" title={file.fileName}>
+                                        {file.fileName}
+                                    </p>
+                                    <div className="mt-1 flex justify-between items-center">
+                                        <span className="text-[10px] text-gray-500">{(file.fileSize / 1024).toFixed(1)} KB</span>
+                                        <span className={`px-1.5 py-0.5 rounded-full text-[10px] font-medium ${
+                                            file.status === 'COMPLETED' ? 'bg-green-100 text-green-800' : 
+                                            file.status === 'FAILED' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'
+                                        }`}>
+                                            {file.status}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                    
+                    {files.length === 0 && !isLoading && (
+                        <div className="text-center text-gray-500 py-12">
+                            No files found.
+                        </div>
+                    )}
+
+                    {/* Infinite Scroll Loader */}
+                    <div className="py-8 flex justify-center" ref={observerTarget}>
+                        {isLoading && (
+                            <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
+                        )}
+                        {!isLoading && !hasMore && files.length > 0 && (
+                            <p className="text-gray-400 text-sm">No more files</p>
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,61 @@
+'use server';
+
+import { $getTableName } from '@/src/database/$getTableName';
+import { TODO_any } from '@promptbook-local/types';
+import { $provideSupabaseForServer } from '../../../database/$provideSupabaseForServer';
+
+export type FileWithAgent = {
+    id: number;
+    createdAt: string;
+    fileName: string;
+    fileSize: number;
+    fileType: string;
+    storageUrl: string | null;
+    shortUrl: string | null;
+    purpose: string;
+    status: 'UPLOADING' | 'COMPLETED' | 'FAILED';
+    agentId: number | null;
+    agent: {
+        id: number;
+        agentName: string;
+    } | null;
+};
+
+export async function listFiles(options: {
+    page: number;
+    limit: number;
+}): Promise<{ files: FileWithAgent[]; total: number }> {
+    const { page, limit } = options;
+    const offset = (page - 1) * limit;
+
+    const supabase = $provideSupabaseForServer();
+
+    const {
+        data: files,
+        error,
+        count,
+    } = await supabase
+        .from(await $getTableName('File'))
+        .select(
+            `
+            *,
+            agent:agentId (
+                id,
+                agentName
+            )
+        `,
+            { count: 'exact' },
+        )
+        .range(offset, offset + limit - 1)
+        .order('createdAt', { ascending: false });
+
+    if (error) {
+        console.error('Error fetching files:', error);
+        throw new Error(error.message);
+    }
+
+    return {
+        files: (files as TODO_any[]) || [],
+        total: count || 0,
+    };
+}

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

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