Skip to content

📁 Implement Advanced File Manager - Enhanced file operations with batch processing, preview, and permissions

Import Userrequested to merge
copilot/fix-35 into main

This PR implements a comprehensive enhancement to the existing file manager, transforming it from a basic file browser into a full-featured file management system with advanced operations, batch processing, and modern UX features.

Advanced File Manager Screenshot

Key Features Implemented

🔥 Batch Operations

  • Multi-file Selection: Checkbox-based selection with visual feedback
  • Bulk Operations: Delete, copy, or move multiple files simultaneously via new /api/files/batch endpoint
  • Smart Clipboard: Copy/cut/paste workflow with visual indicators and keyboard shortcuts (Ctrl+C/X/V)
  • Archive Creation: Create ZIP/TAR archives from selected files

🔍 File Preview & Management

  • Instant Preview: Modal preview for text files, configuration files, and images without opening separate editor
  • File Type Detection: Automatic syntax detection for various file extensions (properties, yaml, json, logs, scripts, etc.)
  • Permission Management: Visual chmod interface with octal/symbolic modes and common presets (644, 755, 777)
  • Archive Extraction: Extract ZIP/TAR archives directly in the file manager

⚡ Enhanced User Experience

  • Right-Click Context Menus: File-specific actions accessible via context menu
  • Keyboard Shortcuts: Full keyboard navigation support
    • Ctrl+C/X/V - Copy/Cut/Paste
    • Space - Preview selected file
    • Delete - Delete selected files
    • Ctrl+A - Select all files
    • Escape - Clear selection
  • Enhanced Search: Improved search input with clear functionality
  • Smart Navigation: Clickable breadcrumb navigation with "Home" instead of cryptic "/"
  • Toast Notifications: Real-time feedback for all operations

Technical Implementation

Backend Enhancements

Extended the existing /src/routes/files.ts with new endpoints:

  • POST /api/files/copy - Copy individual files/directories
  • POST /api/files/move - Move individual files/directories
  • POST /api/files/batch - Batch operations for multiple files
  • GET/POST /api/files/permissions - File permission management
  • POST /api/files/archive/create - Create archives
  • POST /api/files/archive/extract - Extract archives

Enhanced ExternalAgentService with 6 new methods maintaining the existing agent-based architecture.

Frontend Components

Created new reusable components in /frontend/components/files/:

  • FilePreviewModal - Multi-format file preview with error handling
  • FilePermissionsDialog - Interactive chmod interface with visual checkboxes
  • FileContextMenu - Dynamic right-click menu with file-type specific actions
  • BatchOperationsToolbar - Floating toolbar for bulk operations

Enhanced Main Interface

Significantly improved /frontend/pages/files.tsx with:

  • Multi-select file grid with enhanced state management
  • Keyboard shortcut handling throughout the interface
  • Copy/cut/paste clipboard system with visual feedback
  • Context menu integration with comprehensive action handling

Testing & Quality

  • Comprehensive Test Coverage: Extended integration tests covering all new endpoints and batch operations
  • Error Handling: Robust error handling for permission denied, network failures, and invalid operations
  • TypeScript Safety: Full type safety with zero compilation errors
  • Backward Compatibility: All existing functionality preserved

Impact for Server Administrators

Before: Manual one-by-one file operations, command-line permission changes, separate tools for previews After: Professional file manager with efficient batch operations, instant previews, and visual permission management

This enhancement significantly improves daily administrative workflows by providing:

  • Efficiency: Batch operations eliminate repetitive single-file tasks
  • Convenience: Quick file previews without opening separate editors
  • Control: Visual permission management instead of command-line chmod
  • Modern UX: Keyboard shortcuts and context menus for power users

The implementation maintains full compatibility with the existing external agent system while adding substantial new functionality through focused, minimal changes to the codebase.

Fixes #35 (closed).

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

  • binaries.prisma.sh
    • Triggering command: node scripts/postinstall.js (dns block)
    • Triggering command: node /home/REDACTED/work/ctrl-alt-play-panel/ctrl-alt-play-panel/node_modules/prisma/build/index.js generate --postinstall "UNABLE_TO_FIND_POSTINSTALL_TRIGGER__ENVAR_MISSING" (dns block)
    • Triggering command: node /home/REDACTED/work/ctrl-alt-play-panel/ctrl-alt-play-panel/node_modules/.bin/prisma generate (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Merge request reports