@promptbook/cli 0.113.0-9 → 0.114.0-0

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

@@ -3,6 +3,9 @@ import Link from 'next/link';
 import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
 import { buildAgentProfileHref } from '../../../utils/agentRouting/agentRouteHrefs';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
+import { formatResourceBytes } from '../../../utils/resourceMonitor/formatResourceMonitorValue';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
+import { resolveFilesGalleryFileHref } from './filesGalleryLinks';
 import { FilesGalleryStatusBadge } from './FilesGalleryStatusBadge';
 import type { UseFilesGalleryState } from './useFilesGalleryState';
 
@@ -11,7 +14,15 @@ import type { UseFilesGalleryState } from './useFilesGalleryState';
  */
 type FilesGalleryTableProps = Pick<
     UseFilesGalleryState,
-    'files' | 'total' | 'isLoading' | 'page' | 'limit' | 'handlePageChange'
+    | 'files'
+    | 'total'
+    | 'isLoading'
+    | 'page'
+    | 'limit'
+    | 'sortBy'
+    | 'sortOrder'
+    | 'handlePageChange'
+    | 'handleSortChange'
 > & {
     /**
      * Active text formatter for agent naming.
@@ -24,13 +35,6 @@ type FilesGalleryTableProps = Pick<
     readonly language: ServerLanguageCode;
 };
 
-/**
- * Formats one file size for the table view.
- */
-function formatFilesGalleryFileSize(fileSize: number): string {
-    return `${(fileSize / 1024).toFixed(2)} KB`;
-}
-
 /**
  * Renders the table view of the files gallery, including pagination.
  *
@@ -44,7 +48,10 @@ export function FilesGalleryTable({
     isLoading,
     page,
     limit,
+    sortBy,
+    sortOrder,
     handlePageChange,
+    handleSortChange,
 }: FilesGalleryTableProps) {
     const isOnFirstPage = page === 1;
     const isOnLastPage = page * limit >= total;
@@ -55,61 +62,119 @@ export function FilesGalleryTable({
                 <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>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3"
+                                label="file name"
+                                sortBy="fileName"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                File Name
+                            </AdminSortableTableHeaderCell>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3"
+                                label="type"
+                                sortBy="fileType"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Type
+                            </AdminSortableTableHeaderCell>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3"
+                                label="size"
+                                sortBy="fileSize"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Size
+                            </AdminSortableTableHeaderCell>
                             <th className="px-6 py-3">{formatText('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>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3"
+                                label="purpose"
+                                sortBy="purpose"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Purpose
+                            </AdminSortableTableHeaderCell>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3"
+                                label="status"
+                                sortBy="status"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Status
+                            </AdminSortableTableHeaderCell>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3"
+                                label="created at"
+                                sortBy="createdAt"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Created At
+                            </AdminSortableTableHeaderCell>
                         </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">{formatFilesGalleryFileSize(file.fileSize)}</td>
-                                <td className="px-6 py-4">
-                                    {file.agent ? (
-                                        <Link
-                                            href={buildAgentProfileHref(
-                                                file.agent.permanentId || 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">
-                                    <FilesGalleryStatusBadge status={file.status} />
-                                </td>
-                                <td className="px-6 py-4 whitespace-nowrap">
-                                    {formatServerLanguageHumanReadableDate(file.createdAt, language)}
-                                </td>
-                            </tr>
-                        ))}
+                        {files.map((file) => {
+                            const fileHref = resolveFilesGalleryFileHref(file);
+
+                            return (
+                                <tr key={file.id} className="bg-white border-b hover:bg-gray-50">
+                                    <td className="px-6 py-4">
+                                        {fileHref ? (
+                                            <a
+                                                href={fileHref}
+                                                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">{formatResourceBytes(file.fileSize)}</td>
+                                    <td className="px-6 py-4">
+                                        {file.agent ? (
+                                            <Link
+                                                href={buildAgentProfileHref(
+                                                    file.agent.permanentId || 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">
+                                        <FilesGalleryStatusBadge status={file.status} />
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap">
+                                        {formatServerLanguageHumanReadableDate(file.createdAt, language)}
+                                    </td>
+                                </tr>
+                            );
+                        })}
                         {files.length === 0 && !isLoading && (
                             <tr>
                                 <td colSpan={7} className="px-6 py-4 text-center text-gray-500">
@@ -122,7 +187,7 @@ export function FilesGalleryTable({
             </div>
             <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{' '}
+                    Showing <span className="font-medium">{total === 0 ? 0 : (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>

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

@@ -1,30 +1,43 @@
 'use server';
 
 import { $getTableName } from '@/src/database/$getTableName';
-import { TODO_any } from '@promptbook-local/types';
 import { spaceTrim } from 'spacetrim';
+import { DatabaseError } from '../../../../../../src/errors/DatabaseError';
+import { NotAllowed } from '../../../../../../src/errors/NotAllowed';
 import { $provideSupabaseForServer } from '../../../database/$provideSupabaseForServer';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import {
+    collectFilesGalleryAgentIds,
+    normalizeFilesGalleryRows,
+    type FilesGalleryDatabaseAgentRow,
+    type FilesGalleryDatabaseFileRow,
+} from './filesGalleryRows';
+import type { FileWithAgent, FilesGallerySortField, FilesGallerySortOrder } from './filesGalleryTypes';
 
 /**
- * Type describing file with agent.
+ * Columns loaded from `File` for the files gallery.
+ *
+ * @private constant of `/admin/files`
  */
-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;
-        permanentId?: string | null;
-    } | null;
-};
+const FILES_GALLERY_FILE_SELECT_COLUMNS = spaceTrim(`
+    id,
+    createdAt,
+    fileName,
+    fileSize,
+    fileType,
+    storageUrl,
+    shortUrl,
+    purpose,
+    status,
+    agentId
+`);
+
+/**
+ * Columns loaded from `Agent` for the files gallery ownership labels.
+ *
+ * @private constant of `/admin/files`
+ */
+const FILES_GALLERY_AGENT_SELECT_COLUMNS = 'id, agentName, permanentId';
 
 /**
  * Lists files.
@@ -32,8 +45,14 @@ export type FileWithAgent = {
 export async function listFiles(options: {
     page: number;
     limit: number;
+    sortBy?: FilesGallerySortField;
+    sortOrder?: FilesGallerySortOrder;
 }): Promise<{ files: FileWithAgent[]; total: number }> {
-    const { page, limit } = options;
+    if (!(await isUserAdmin())) {
+        throw new NotAllowed('Only admins can list uploaded files.');
+    }
+
+    const { page, limit, sortBy = 'createdAt', sortOrder = 'desc' } = options;
     const offset = (page - 1) * limit;
 
     const supabase = $provideSupabaseForServer();
@@ -44,27 +63,58 @@ export async function listFiles(options: {
         count,
     } = await supabase
         .from(await $getTableName('File'))
-        .select(
-            spaceTrim(`
-                *,
-                agent:agentId (
-                    id,
-                    agentName,
-                    permanentId
-                )
-            `),
-            { count: 'exact' },
-        )
+        .select(FILES_GALLERY_FILE_SELECT_COLUMNS, { count: 'exact' })
         .range(offset, offset + limit - 1)
-        .order('createdAt', { ascending: false });
+        .order(sortBy, { ascending: sortOrder === 'asc' });
 
     if (error) {
         console.error('Error fetching files:', error);
-        throw new Error(error.message);
+        throw new DatabaseError(
+            spaceTrim(`
+                Failed to fetch uploaded files for the current server.
+
+                ${error.message}
+            `),
+        );
     }
 
+    const fileRows = ((files || []) as unknown) as FilesGalleryDatabaseFileRow[];
+    const agentRows = await listFileGalleryAgents(collectFilesGalleryAgentIds(fileRows));
+
     return {
-        files: (files as TODO_any[]) || [],
+        files: normalizeFilesGalleryRows(fileRows, agentRows),
         total: count || 0,
     };
 }
+
+/**
+ * Loads agent labels for files that have an owner agent.
+ *
+ * @param agentIds - Unique agent ids referenced by file rows.
+ * @returns Agent rows matching the given ids.
+ * @private helper of `/admin/files`
+ */
+async function listFileGalleryAgents(agentIds: ReadonlyArray<number>): Promise<FilesGalleryDatabaseAgentRow[]> {
+    if (agentIds.length === 0) {
+        return [];
+    }
+
+    const supabase = $provideSupabaseForServer();
+    const { data, error } = await supabase
+        .from(await $getTableName('Agent'))
+        .select(FILES_GALLERY_AGENT_SELECT_COLUMNS)
+        .in('id', [...agentIds]);
+
+    if (error) {
+        console.error('Error fetching file agents:', error);
+        throw new DatabaseError(
+            spaceTrim(`
+                Failed to fetch agent labels for uploaded files.
+
+                ${error.message}
+            `),
+        );
+    }
+
+    return ((data || []) as unknown) as FilesGalleryDatabaseAgentRow[];
+}

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

@@ -0,0 +1,31 @@
+import type { FileWithAgent } from './filesGalleryTypes';
+
+/**
+ * Minimal file fields required to build a browser link from a gallery row.
+ *
+ * @private type of `/admin/files`
+ */
+type FilesGalleryFileLinkCandidate = Pick<FileWithAgent, 'storageUrl' | 'shortUrl'>;
+
+/**
+ * Resolves the best available URL for opening a file from the gallery.
+ *
+ * @param file - File row containing stored public URLs.
+ * @returns Public file href, or `null` when no usable URL is available.
+ * @private helper of `/admin/files`
+ */
+export function resolveFilesGalleryFileHref(file: FilesGalleryFileLinkCandidate): string | null {
+    return normalizeFilesGalleryFileUrl(file.storageUrl) || normalizeFilesGalleryFileUrl(file.shortUrl);
+}
+
+/**
+ * Normalizes one optional file URL field.
+ *
+ * @param url - Raw URL from a file row.
+ * @returns Trimmed URL, or `null` when empty.
+ * @private helper of `resolveFilesGalleryFileHref`
+ */
+function normalizeFilesGalleryFileUrl(url: string | null | undefined): string | null {
+    const normalizedUrl = url?.trim();
+    return normalizedUrl ? normalizedUrl : null;
+}

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

@@ -0,0 +1,119 @@
+import type { AgentsServerDatabase } from '../../../database/schema';
+import type { FileWithAgent, FilesGalleryUploadStatus } from './filesGalleryTypes';
+
+/**
+ * Database columns loaded from the `File` table for the files gallery.
+ *
+ * @private type of `/admin/files`
+ */
+export type FilesGalleryDatabaseFileRow = Pick<
+    AgentsServerDatabase['public']['Tables']['File']['Row'],
+    'id' | 'createdAt' | 'fileName' | 'fileSize' | 'fileType' | 'storageUrl' | 'shortUrl' | 'purpose' | 'status' | 'agentId'
+>;
+
+/**
+ * Database columns loaded from the `Agent` table for file ownership labels.
+ *
+ * @private type of `/admin/files`
+ */
+export type FilesGalleryDatabaseAgentRow = Pick<
+    AgentsServerDatabase['public']['Tables']['Agent']['Row'],
+    'id' | 'agentName' | 'permanentId'
+>;
+
+/**
+ * Upload status used when older or malformed rows do not contain a known value.
+ *
+ * @private constant of `/admin/files`
+ */
+const FILES_GALLERY_DEFAULT_UPLOAD_STATUS: FilesGalleryUploadStatus = 'COMPLETED';
+
+/**
+ * Upload statuses rendered by the files gallery.
+ *
+ * @private constant of `/admin/files`
+ */
+const FILES_GALLERY_UPLOAD_STATUSES = new Set<FilesGalleryUploadStatus>(['UPLOADING', 'COMPLETED', 'FAILED']);
+
+/**
+ * Collects unique agent ids referenced by file rows.
+ *
+ * @param files - File rows loaded from the database.
+ * @returns Unique non-null agent ids.
+ * @private helper of `/admin/files`
+ */
+export function collectFilesGalleryAgentIds(files: ReadonlyArray<FilesGalleryDatabaseFileRow>): number[] {
+    return Array.from(
+        new Set(
+            files
+                .map((file) => file.agentId)
+                .filter((agentId): agentId is number => typeof agentId === 'number' && Number.isFinite(agentId)),
+        ),
+    );
+}
+
+/**
+ * Normalizes file rows and attaches agent labels resolved by a separate lookup.
+ *
+ * @param files - File rows loaded from the database.
+ * @param agents - Agent rows loaded for referenced `agentId` values.
+ * @returns Browser-safe files gallery rows.
+ * @private helper of `/admin/files`
+ */
+export function normalizeFilesGalleryRows(
+    files: ReadonlyArray<FilesGalleryDatabaseFileRow>,
+    agents: ReadonlyArray<FilesGalleryDatabaseAgentRow>,
+): FileWithAgent[] {
+    const agentsById = new Map(agents.map((agent) => [agent.id, agent]));
+
+    return files.map((file) => {
+        const agent = typeof file.agentId === 'number' ? agentsById.get(file.agentId) : undefined;
+
+        return {
+            id: file.id,
+            createdAt: file.createdAt,
+            fileName: file.fileName || 'Unnamed file',
+            fileSize: normalizeFilesGalleryFileSize(file.fileSize),
+            fileType: file.fileType || 'application/octet-stream',
+            storageUrl: file.storageUrl || null,
+            shortUrl: file.shortUrl || null,
+            purpose: file.purpose || 'UNKNOWN',
+            status: normalizeFilesGalleryUploadStatus(file.status),
+            agentId: typeof file.agentId === 'number' ? file.agentId : null,
+            agent: agent
+                ? {
+                      id: agent.id,
+                      agentName: agent.agentName,
+                      permanentId: agent.permanentId,
+                  }
+                : null,
+        };
+    });
+}
+
+/**
+ * Normalizes a database byte count into a finite number.
+ *
+ * @param fileSize - Raw database file size.
+ * @returns Finite byte count.
+ * @private helper of `/admin/files`
+ */
+function normalizeFilesGalleryFileSize(fileSize: unknown): number {
+    const normalizedFileSize = Number(fileSize);
+    return Number.isFinite(normalizedFileSize) && normalizedFileSize > 0 ? normalizedFileSize : 0;
+}
+
+/**
+ * Normalizes a database upload status into a rendered status value.
+ *
+ * @param status - Raw database upload status.
+ * @returns Known upload status.
+ * @private helper of `/admin/files`
+ */
+function normalizeFilesGalleryUploadStatus(status: unknown): FilesGalleryUploadStatus {
+    if (typeof status === 'string' && FILES_GALLERY_UPLOAD_STATUSES.has(status as FilesGalleryUploadStatus)) {
+        return status as FilesGalleryUploadStatus;
+    }
+
+    return FILES_GALLERY_DEFAULT_UPLOAD_STATUS;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Upload status values rendered by the files gallery.
+ *
+ * @private type of `/admin/files`
+ */
+export type FilesGalleryUploadStatus = 'UPLOADING' | 'COMPLETED' | 'FAILED';
+
+/**
+ * Type describing file with agent.
+ *
+ * @private type of `/admin/files`
+ */
+export type FileWithAgent = {
+    readonly id: number;
+    readonly createdAt: string;
+    readonly fileName: string;
+    readonly fileSize: number;
+    readonly fileType: string;
+    readonly storageUrl: string | null;
+    readonly shortUrl: string | null;
+    readonly purpose: string;
+    readonly status: FilesGalleryUploadStatus;
+    readonly agentId: number | null;
+    readonly agent: {
+        readonly id: number;
+        readonly agentName: string;
+        readonly permanentId?: string | null;
+    } | null;
+};
+
+/**
+ * File gallery sort fields supported by the admin table.
+ *
+ * @private type of `/admin/files`
+ */
+export type FilesGallerySortField = 'fileName' | 'fileType' | 'fileSize' | 'purpose' | 'status' | 'createdAt';
+
+/**
+ * File gallery sort direction supported by the admin table.
+ *
+ * @private type of `/admin/files`
+ */
+export type FilesGallerySortOrder = 'asc' | 'desc';

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

@@ -1,16 +1,27 @@
 import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
 import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { isUserGlobalAdmin } from '../../../utils/isUserGlobalAdmin';
+import { AdminStorageTabs } from '../_components/AdminStorageTabs';
 import { FilesGalleryClient } from './FilesGalleryClient';
 
 /**
  * Handles files gallery page.
  */
 export default async function FilesGalleryPage() {
-    const isAdmin = await isUserAdmin();
+    const [isAdmin, isGlobalAdmin] = await Promise.all([isUserAdmin(), isUserGlobalAdmin()]);
 
     if (!isAdmin) {
         return <ForbiddenPage />;
     }
 
-    return <FilesGalleryClient />;
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            {isGlobalAdmin ? (
+                <div className="mt-20">
+                    <AdminStorageTabs activePage="files" />
+                </div>
+            ) : null}
+            <FilesGalleryClient isHeaderOffsetEnabled={!isGlobalAdmin} />
+        </div>
+    );
 }