@promptbook/cli 0.113.0-9 → 0.114.0-0

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

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
-import { listFiles, type FileWithAgent } from './actions';
+import { resolveNextAdminTableSortState } from '../_components/adminTableSorting';
+import { listFiles } from './actions';
+import type { FilesGallerySortField, FilesGallerySortOrder, FileWithAgent } from './filesGalleryTypes';
 
 /**
  * Page size used by the files gallery views.
@@ -29,9 +31,12 @@ export type UseFilesGalleryState = {
     limit: number;
     hasMore: boolean;
     viewMode: FilesGalleryViewMode;
+    sortBy: FilesGallerySortField;
+    sortOrder: FilesGallerySortOrder;
     observerTarget: RefObject<HTMLDivElement | null>;
     handleViewModeChange: (nextViewMode: FilesGalleryViewMode) => void;
     handlePageChange: (newPage: number) => void;
+    handleSortChange: (sortBy: FilesGallerySortField) => void;
 };
 
 /**
@@ -59,6 +64,13 @@ function shouldLoadMoreFiles(
     return Boolean(entry?.isIntersecting) && state.hasMore && !state.isLoading && state.viewMode === 'GRID';
 }
 
+/**
+ * Resolves the initial direction used when switching files gallery sort fields.
+ */
+function resolveFilesGalleryDefaultSortOrder(sortBy: FilesGallerySortField): FilesGallerySortOrder {
+    return sortBy === 'fileSize' || sortBy === 'createdAt' ? 'desc' : 'asc';
+}
+
 /**
  * Handles files gallery loading and view-state orchestration.
  *
@@ -71,23 +83,33 @@ export function useFilesGalleryState(): UseFilesGalleryState {
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
     const [hasMore, setHasMore] = useState(true);
+    const [sortBy, setSortBy] = useState<FilesGallerySortField>('createdAt');
+    const [sortOrder, setSortOrder] = useState<FilesGallerySortOrder>('desc');
     const observerTarget = useRef<HTMLDivElement>(null);
 
-    const loadFilesPage = useCallback(async (pageNumber: number, loadMode: FilesGalleryLoadMode) => {
-        setIsLoading(true);
-
-        try {
-            const result = await listFiles({ page: pageNumber, limit: FILES_GALLERY_PAGE_SIZE });
-
-            setFiles((previousFiles) => resolveFilesGalleryItems(previousFiles, result.files, loadMode));
-            setTotal(result.total);
-            setHasMore(result.files.length === FILES_GALLERY_PAGE_SIZE);
-        } catch (error) {
-            console.error(error);
-        } finally {
-            setIsLoading(false);
-        }
-    }, []);
+    const loadFilesPage = useCallback(
+        async (pageNumber: number, loadMode: FilesGalleryLoadMode) => {
+            setIsLoading(true);
+
+            try {
+                const result = await listFiles({
+                    page: pageNumber,
+                    limit: FILES_GALLERY_PAGE_SIZE,
+                    sortBy,
+                    sortOrder,
+                });
+
+                setFiles((previousFiles) => resolveFilesGalleryItems(previousFiles, result.files, loadMode));
+                setTotal(result.total);
+                setHasMore(result.files.length === FILES_GALLERY_PAGE_SIZE);
+            } catch (error) {
+                console.error(error);
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [sortBy, sortOrder],
+    );
 
     useEffect(() => {
         void loadFilesPage(1, 'replace');
@@ -117,6 +139,23 @@ export function useFilesGalleryState(): UseFilesGalleryState {
         setViewMode(nextViewMode);
     }, []);
 
+    const handleSortChange = useCallback(
+        (nextSortBy: FilesGallerySortField): void => {
+            const nextSortState = resolveNextAdminTableSortState({
+                currentSortBy: sortBy,
+                currentSortOrder: sortOrder,
+                nextSortBy,
+                resolveDefaultSortOrder: resolveFilesGalleryDefaultSortOrder,
+            });
+
+            setSortBy(nextSortState.sortBy);
+            setSortOrder(nextSortState.sortOrder);
+            setPage(1);
+            setHasMore(true);
+        },
+        [sortBy, sortOrder],
+    );
+
     useEffect(() => {
         const target = observerTarget.current;
         const observer = new IntersectionObserver(
@@ -147,8 +186,11 @@ export function useFilesGalleryState(): UseFilesGalleryState {
         limit: FILES_GALLERY_PAGE_SIZE,
         hasMore,
         viewMode,
+        sortBy,
+        sortOrder,
         observerTarget,
         handleViewModeChange,
         handlePageChange,
+        handleSortChange,
     };
 }

package/apps/agents-server/src/app/admin/images/ImagesGalleryClient.tsx

@@ -34,8 +34,11 @@ export function ImagesGalleryClient() {
                     isLoading={imagesGalleryState.isLoading}
                     page={imagesGalleryState.page}
                     limit={imagesGalleryState.limit}
+                    sortBy={imagesGalleryState.sortBy}
+                    sortOrder={imagesGalleryState.sortOrder}
                     copiedId={imagesGalleryState.copiedId}
                     handlePageChange={imagesGalleryState.handlePageChange}
+                    handleSortChange={imagesGalleryState.handleSortChange}
                     handlePromptCopy={imagesGalleryState.handlePromptCopy}
                 />
             ) : (

package/apps/agents-server/src/app/admin/images/ImagesGalleryTable.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
 import { buildAgentProfileHref } from '../../../utils/agentRouting/agentRouteHrefs';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
 import type { ImageWithAgent } from './actions';
 import { ImagesGalleryParametersBadges } from './ImagesGalleryParametersBadges';
 import { ImagesGalleryPromptCopyButton } from './ImagesGalleryPromptCopyButton';
@@ -14,7 +15,17 @@ import type { UseImagesGalleryState } from './useImagesGalleryState';
  */
 type ImagesGalleryTableProps = Pick<
     UseImagesGalleryState,
-    'images' | 'total' | 'isLoading' | 'page' | 'limit' | 'copiedId' | 'handlePageChange' | 'handlePromptCopy'
+    | 'images'
+    | 'total'
+    | 'isLoading'
+    | 'page'
+    | 'limit'
+    | 'sortBy'
+    | 'sortOrder'
+    | 'copiedId'
+    | 'handlePageChange'
+    | 'handleSortChange'
+    | 'handlePromptCopy'
 > & {
     /**
      * Active text formatter for agent naming.
@@ -119,8 +130,11 @@ export function ImagesGalleryTable({
     isLoading,
     page,
     limit,
+    sortBy,
+    sortOrder,
     copiedId,
     handlePageChange,
+    handleSortChange,
     handlePromptCopy,
 }: ImagesGalleryTableProps) {
     const isOnFirstPage = page === 1;
@@ -132,12 +146,48 @@ export function ImagesGalleryTable({
                 <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 w-32">Image</th>
-                            <th className="px-6 py-3">Prompt</th>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3 w-32"
+                                label="image"
+                                sortBy="filename"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Image
+                            </AdminSortableTableHeaderCell>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3"
+                                label="prompt"
+                                sortBy="prompt"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Prompt
+                            </AdminSortableTableHeaderCell>
                             <th className="px-6 py-3">{formatText('Agent')}</th>
                             <th className="px-6 py-3">Parameters</th>
-                            <th className="px-6 py-3">Purpose</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="created at"
+                                sortBy="createdAt"
+                                activeSortBy={sortBy}
+                                sortOrder={sortOrder}
+                                onSortChange={handleSortChange}
+                            >
+                                Created At
+                            </AdminSortableTableHeaderCell>
                         </tr>
                     </thead>
                     <tbody>
@@ -152,7 +202,7 @@ export function ImagesGalleryTable({
                         ))}
                         {images.length === 0 && !isLoading && (
                             <tr>
-                                <td colSpan={5} className="px-6 py-4 text-center text-gray-500">
+                                <td colSpan={6} className="px-6 py-4 text-center text-gray-500">
                                     No images found.
                                 </td>
                             </tr>

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

@@ -25,14 +25,30 @@ export type ImageWithAgent = {
     } | null;
 };
 
+/**
+ * Image gallery sort fields supported by the admin table.
+ *
+ * @private function of ImagesGalleryClient
+ */
+export type ImagesGallerySortField = 'filename' | 'prompt' | 'purpose' | 'createdAt';
+
+/**
+ * Image gallery sort direction supported by the admin table.
+ *
+ * @private function of ImagesGalleryClient
+ */
+export type ImagesGallerySortOrder = 'asc' | 'desc';
+
 /**
  * Lists images.
  */
 export async function listImages(options: {
     page: number;
     limit: number;
+    sortBy?: ImagesGallerySortField;
+    sortOrder?: ImagesGallerySortOrder;
 }): Promise<{ images: ImageWithAgent[]; total: number }> {
-    const { page, limit } = options;
+    const { page, limit, sortBy = 'createdAt', sortOrder = 'desc' } = options;
     const offset = (page - 1) * limit;
 
     const supabase = $provideSupabaseForServer();
@@ -55,7 +71,7 @@ export async function listImages(options: {
             { count: 'exact' },
         )
         .range(offset, offset + limit - 1)
-        .order('createdAt', { ascending: false });
+        .order(sortBy, { ascending: sortOrder === 'asc' });
 
     if (error) {
         console.error('Error fetching images:', error);

package/apps/agents-server/src/app/admin/images/useImagesGalleryState.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
-import { listImages, type ImageWithAgent } from './actions';
+import { resolveNextAdminTableSortState } from '../_components/adminTableSorting';
+import { listImages, type ImagesGallerySortField, type ImagesGallerySortOrder, type ImageWithAgent } from './actions';
 
 /**
  * Page size used by the images gallery views.
@@ -29,10 +30,13 @@ export type UseImagesGalleryState = {
     limit: number;
     hasMore: boolean;
     viewMode: ImagesGalleryViewMode;
+    sortBy: ImagesGallerySortField;
+    sortOrder: ImagesGallerySortOrder;
     copiedId: number | null;
     observerTarget: RefObject<HTMLDivElement | null>;
     handleViewModeChange: (nextViewMode: ImagesGalleryViewMode) => void;
     handlePageChange: (newPage: number) => void;
+    handleSortChange: (sortBy: ImagesGallerySortField) => void;
     handlePromptCopy: (prompt: string, imageId: number) => Promise<void>;
 };
 
@@ -61,6 +65,13 @@ function shouldLoadMoreImages(
     return Boolean(entry?.isIntersecting) && state.hasMore && !state.isLoading && state.viewMode === 'GRID';
 }
 
+/**
+ * Resolves the initial direction used when switching images gallery sort fields.
+ */
+function resolveImagesGalleryDefaultSortOrder(sortBy: ImagesGallerySortField): ImagesGallerySortOrder {
+    return sortBy === 'createdAt' ? 'desc' : 'asc';
+}
+
 /**
  * Handles images gallery loading and view-state orchestration.
  *
@@ -73,6 +84,8 @@ export function useImagesGalleryState(): UseImagesGalleryState {
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
     const [hasMore, setHasMore] = useState(true);
+    const [sortBy, setSortBy] = useState<ImagesGallerySortField>('createdAt');
+    const [sortOrder, setSortOrder] = useState<ImagesGallerySortOrder>('desc');
     const [copiedId, setCopiedId] = useState<number | null>(null);
     const observerTarget = useRef<HTMLDivElement>(null);
 
@@ -86,21 +99,29 @@ export function useImagesGalleryState(): UseImagesGalleryState {
         }
     }, []);
 
-    const loadImagesPage = useCallback(async (pageNumber: number, loadMode: ImagesGalleryLoadMode) => {
-        setIsLoading(true);
-
-        try {
-            const result = await listImages({ page: pageNumber, limit: IMAGES_GALLERY_PAGE_SIZE });
-
-            setImages((previousImages) => resolveImagesGalleryItems(previousImages, result.images, loadMode));
-            setTotal(result.total);
-            setHasMore(result.images.length === IMAGES_GALLERY_PAGE_SIZE);
-        } catch (error) {
-            console.error(error);
-        } finally {
-            setIsLoading(false);
-        }
-    }, []);
+    const loadImagesPage = useCallback(
+        async (pageNumber: number, loadMode: ImagesGalleryLoadMode) => {
+            setIsLoading(true);
+
+            try {
+                const result = await listImages({
+                    page: pageNumber,
+                    limit: IMAGES_GALLERY_PAGE_SIZE,
+                    sortBy,
+                    sortOrder,
+                });
+
+                setImages((previousImages) => resolveImagesGalleryItems(previousImages, result.images, loadMode));
+                setTotal(result.total);
+                setHasMore(result.images.length === IMAGES_GALLERY_PAGE_SIZE);
+            } catch (error) {
+                console.error(error);
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [sortBy, sortOrder],
+    );
 
     useEffect(() => {
         void loadImagesPage(1, 'replace');
@@ -130,6 +151,23 @@ export function useImagesGalleryState(): UseImagesGalleryState {
         setViewMode(nextViewMode);
     }, []);
 
+    const handleSortChange = useCallback(
+        (nextSortBy: ImagesGallerySortField): void => {
+            const nextSortState = resolveNextAdminTableSortState({
+                currentSortBy: sortBy,
+                currentSortOrder: sortOrder,
+                nextSortBy,
+                resolveDefaultSortOrder: resolveImagesGalleryDefaultSortOrder,
+            });
+
+            setSortBy(nextSortState.sortBy);
+            setSortOrder(nextSortState.sortOrder);
+            setPage(1);
+            setHasMore(true);
+        },
+        [sortBy, sortOrder],
+    );
+
     useEffect(() => {
         const target = observerTarget.current;
         const observer = new IntersectionObserver(
@@ -160,10 +198,13 @@ export function useImagesGalleryState(): UseImagesGalleryState {
         limit: IMAGES_GALLERY_PAGE_SIZE,
         hasMore,
         viewMode,
+        sortBy,
+        sortOrder,
         copiedId,
         observerTarget,
         handleViewModeChange,
         handlePageChange,
+        handleSortChange,
         handlePromptCopy,
     };
 }