@promptbook/cli 0.112.0-99 → 0.112.0

package/apps/agents-server/src/components/Homepage/AgentsList.tsx

@@ -72,14 +72,31 @@ export function AgentsList(props: AgentsListProps) {
         isAdmin && contextMenuFolder ? () => state.handleRequestFolderVisibilityUpdate(contextMenuFolder.id) : undefined;
 
     return (
-        <section className="mt-16 first:mt-4 mb-4">
+        <section
+            className={`relative mt-16 first:mt-4 mb-4 ${
+                state.isAgentsImportDragActive ? 'rounded-xl ring-2 ring-blue-400 ring-offset-4' : ''
+            }`}
+            onDragEnter={isAdmin ? state.handleAgentsFileDragEnter : undefined}
+            onDragLeave={isAdmin ? state.handleAgentsFileDragLeave : undefined}
+            onDragOver={isAdmin ? state.handleAgentsFileDragOver : undefined}
+            onDrop={isAdmin ? state.handleAgentsFileDrop : undefined}
+        >
+            {isAdmin && state.isAgentsImportDragActive && (
+                <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-xl border-2 border-dashed border-blue-400 bg-blue-50/85 text-sm font-medium text-blue-800 shadow-sm">
+                    Drop books or ZIP archives to import agents
+                </div>
+            )}
             <AgentsListHeader
                 agentCount={state.agentCount}
                 allAgentsLabel={state.allAgentsLabel}
                 breadcrumbFolders={state.breadcrumbFolders}
                 canOrganize={canOrganize}
                 headingTitle={state.headingTitle}
+                isAdmin={isAdmin}
+                isAgentsExporting={state.isAgentsExporting}
+                isAgentsImporting={state.isAgentsImporting}
                 onCreateFolder={state.handleCreateFolder}
+                onExportAgents={() => void state.handleAgentsExport()}
                 onNavigateToFolder={state.navigateToFolder}
                 onSetViewMode={state.setViewMode}
                 viewMode={state.viewMode}
@@ -108,6 +125,7 @@ export function AgentsList(props: AgentsListProps) {
                 handleDragEnd={state.handleDragEnd}
                 handleDragOver={state.handleDragOver}
                 handleDragStart={state.handleDragStart}
+                handleAgentsFileDropIntoFolder={state.handleAgentsFileDropIntoFolder}
                 handleFolderContextMenu={state.handleFolderContextMenu}
                 handleRenameFolder={state.handleRenameFolder}
                 handleRequestAgentVisibilityChange={state.handleRequestAgentVisibilityChange}

package/apps/agents-server/src/components/Homepage/AgentsListHeader.tsx

@@ -1,6 +1,15 @@
 'use client';
 
-import { Building2, FolderPlusIcon, Gamepad2, Grid, Map, Network, type LucideIcon } from 'lucide-react';
+import {
+    Building2,
+    DownloadIcon,
+    FolderPlusIcon,
+    Gamepad2,
+    Grid,
+    Map,
+    Network,
+    type LucideIcon,
+} from 'lucide-react';
 import type { AgentOrganizationFolder } from '../../utils/agentOrganization/types';
 import type { HomeViewMode } from './homeViewMode';
 import { BreadcrumbDropTarget } from './BreadcrumbDropTarget';
@@ -55,6 +64,14 @@ type AgentsListHeaderProps = {
      * Current heading title.
      */
     readonly headingTitle: string;
+    /**
+     * Whether agents import/export controls are available.
+     */
+    readonly isAdmin: boolean;
+    /**
+     * Downloads an agents archive.
+     */
+    readonly onExportAgents: () => void;
     /**
      * Opens the create-folder dialog.
      */
@@ -71,6 +88,14 @@ type AgentsListHeaderProps = {
      * Currently active homepage view mode.
      */
     readonly viewMode: HomeViewMode;
+    /**
+     * Whether agents export is currently running.
+     */
+    readonly isAgentsExporting: boolean;
+    /**
+     * Whether agents import is currently running.
+     */
+    readonly isAgentsImporting: boolean;
 };
 
 /**
@@ -100,7 +125,11 @@ export function AgentsListHeader({
     breadcrumbFolders,
     canOrganize,
     headingTitle,
+    isAdmin,
+    isAgentsExporting,
+    isAgentsImporting,
     onCreateFolder,
+    onExportAgents,
     onNavigateToFolder,
     onSetViewMode,
     viewMode,
@@ -138,6 +167,20 @@ export function AgentsListHeader({
                     )}
                 </div>
                 <div className="flex items-center gap-2">
+                    {isListView && isAdmin && (
+                        <>
+                            <button
+                                type="button"
+                                onClick={onExportAgents}
+                                disabled={isAgentsExporting || isAgentsImporting}
+                                className="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 transition-colors text-sm disabled:cursor-not-allowed disabled:opacity-60"
+                                title="Download agents"
+                            >
+                                <DownloadIcon className="w-4 h-4" />
+                                {isAgentsExporting ? 'Downloading...' : 'Download'}
+                            </button>
+                        </>
+                    )}
                     {isListView && canOrganize && (
                         <button
                             type="button"

package/apps/agents-server/src/components/Homepage/AgentsListListView.tsx

@@ -101,6 +101,10 @@ type AgentsListListViewProps = {
      * dnd-kit drag-start handler.
      */
     readonly handleDragStart: ComponentProps<typeof DndContext>['onDragStart'];
+    /**
+     * Imports dropped book files or ZIP archives directly into one folder.
+     */
+    readonly handleAgentsFileDropIntoFolder: SortableFolderCardProps['onFileDrop'];
     /**
      * Handles folder context-menu requests.
      */
@@ -193,6 +197,7 @@ export function AgentsListListView({
     handleDragEnd,
     handleDragOver,
     handleDragStart,
+    handleAgentsFileDropIntoFolder,
     handleFolderContextMenu,
     handleRenameFolder,
     handleRequestAgentVisibilityChange,
@@ -239,6 +244,7 @@ export function AgentsListListView({
                             onRename={canOrganize ? () => handleRenameFolder(folder.id) : undefined}
                             onDelete={canOrganize ? () => handleDeleteFolder(folder.id) : undefined}
                             onContextMenu={handleFolderContextMenu}
+                            onFileDrop={isAdmin ? handleAgentsFileDropIntoFolder : undefined}
                             dragHandleLabel={dragFolderLabel}
                             allowFullCardDrag={allowFullCardDrag}
                         />

package/apps/agents-server/src/components/Homepage/AgentsListViewContent.tsx

@@ -111,6 +111,10 @@ type AgentsListViewContentProps = {
      * dnd-kit drag-start handler.
      */
     readonly handleDragStart: ComponentProps<typeof DndContext>['onDragStart'];
+    /**
+     * Imports dropped book files or ZIP archives directly into one folder.
+     */
+    readonly handleAgentsFileDropIntoFolder: ComponentProps<typeof AgentsListListView>['handleAgentsFileDropIntoFolder'];
     /**
      * Handles folder context-menu requests.
      */
@@ -269,6 +273,7 @@ export function AgentsListViewContent({
     handleDragEnd,
     handleDragOver,
     handleDragStart,
+    handleAgentsFileDropIntoFolder,
     handleFolderContextMenu,
     handleRenameFolder,
     handleRequestAgentVisibilityChange,
@@ -308,6 +313,7 @@ export function AgentsListViewContent({
                 handleDragEnd={handleDragEnd}
                 handleDragOver={handleDragOver}
                 handleDragStart={handleDragStart}
+                handleAgentsFileDropIntoFolder={handleAgentsFileDropIntoFolder}
                 handleFolderContextMenu={handleFolderContextMenu}
                 handleRenameFolder={handleRenameFolder}
                 handleRequestAgentVisibilityChange={handleRequestAgentVisibilityChange}

package/apps/agents-server/src/components/Homepage/Card.tsx

@@ -15,7 +15,7 @@ type CardProps = {
 export function Card({ children, className = '', style }: CardProps) {
     return (
         <div
-            className={`block h-full p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400 ${className}`}
+            className={`block h-full p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-100 dark:shadow-slate-950/30 dark:hover:border-blue-400/70 ${className}`}
             style={style}
         >
             {children}

package/apps/agents-server/src/components/Homepage/Section.tsx

@@ -51,7 +51,9 @@ export function Section({
 }: SectionProps) {
     return (
         <section className={`mt-16 first:mt-4 mb-4 ${sectionClassName || ''}`.trim()}>
-            <h2 className={`text-3xl text-gray-900 mb-6 font-light ${titleClassName || ''}`.trim()}>{title}</h2>
+            <h2 className={`text-3xl text-gray-900 mb-6 font-light dark:text-slate-100 ${titleClassName || ''}`.trim()}>
+                {title}
+            </h2>
             <div className={gridClassName}>{children}</div>
         </section>
     );

package/apps/agents-server/src/components/Homepage/SortableFolderCard.tsx

@@ -4,7 +4,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { useSortable } from '@dnd-kit/sortable';
 import type { string_url } from '@promptbook-local/types';
 import type { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
-import type { CSSProperties, MouseEvent } from 'react';
+import type { CSSProperties, DragEvent, MouseEvent } from 'react';
 import type { AgentOrganizationFolder } from '../../utils/agentOrganization/types';
 import { FolderCard } from './FolderCard';
 import { buildCardDragProps, DragHandle } from './DragHandle';
@@ -61,6 +61,10 @@ export type SortableFolderCardProps = {
      * Context menu handler for the folder.
      */
     readonly onContextMenu?: (event: MouseEvent<HTMLDivElement>, folder: AgentOrganizationFolder) => void;
+    /**
+     * File-drop handler for importing agents directly into this folder.
+     */
+    readonly onFileDrop?: (event: DragEvent<HTMLDivElement>, folderId: number) => void;
     /**
      * Accessible label displayed for the drag handle.
      */
@@ -88,6 +92,7 @@ export function SortableFolderCard({
     onRename,
     onDelete,
     onContextMenu,
+    onFileDrop,
     dragHandleLabel,
     allowFullCardDrag,
 }: SortableFolderCardProps) {
@@ -125,6 +130,7 @@ export function SortableFolderCard({
             className={`relative ${canOrganize ? 'select-none' : ''} ${isDragging ? 'opacity-0' : ''} ${dropClasses}`}
             {...dragProps}
             onContextMenu={(event) => onContextMenu?.(event, folder)}
+            onDrop={(event) => onFileDrop?.(event, folder.id)}
         >
             <FolderCard
                 folderName={folder.name}