Added three distinct loading animation styles to enhance brand presence:
1. Typewriter Effect
- Letters appear sequentially like terminal typing
- Includes blinking cursor animation
- Reinforces terminal tool positioning
- 150ms delay between each letter
2. Scanner Effect
- Vertical and horizontal scan lines passing through text
- Grid background with cyan glow effects
- Hacker movie aesthetic
- Multiple scan lines with different colors (cyan/magenta)
3. Pulse Ripple Effect
- Expanding wave rings from center outward
- Radar sweep effect rotating around text
- Center dot with glow
- 5 concentric waves with different delays
- Modern tech feel
Random Selection:
- All 5 animations (Glitch, Breathe, Typewriter, Scanner, Pulse) now have equal 20% chance
- Selection happens on each loading state trigger
- Provides visual variety across application
Technical Details:
- CSS keyframe animations for all effects
- Step-based typewriter timing
- Linear scan line movements
- Ease-out wave expansion
- Consistent TERMIX monospace font across all styles
Add comprehensive file compression functionality to file manager:
Compression features:
- Support multiple formats: zip, tar.gz, tar.bz2, tar.xz, 7z
- Compress single or multiple files/folders
- Interactive compression dialog with format selection
- Preview of files to be compressed
- Context menu integration (right-click to compress)
Error handling improvements:
- Detect missing compression tools on remote server
- Provide friendly error messages with installation instructions
- Format-specific tool detection (zip, tar, 7z, unrar, etc.)
- Clear guidance for users when tools are unavailable
UI enhancements:
- Multi-language support (English/Chinese)
- Real-time compression progress feedback
- Smart default format selection
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement comprehensive command history system for SSH terminals:
- Stage 1: Automatic command tracking with character-level input monitoring
- Stage 2: Ctrl+R history search dialog with real-time filtering and keyboard navigation
- Stage 3: Tab-based autocomplete with multi-match selection UI
Key features:
- Per-host command history stored in SQLite database
- Smart positioning for autocomplete menu (auto-adjusts based on screen space)
- Delete individual commands from history
- Keyboard shortcuts: Ctrl+R (search), Tab (autocomplete), ↑↓ (navigate), Enter (select), Esc (close)
Bug fixes:
- Prevent double input by filtering keyup events (only handle keydown)
- Use refs to avoid closure traps in event handlers
- Real-time history updates without requiring terminal restart
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds comprehensive archive extraction support to the file manager context menu:
Backend API (file-manager.ts):
- New POST /ssh/file_manager/ssh/extractArchive endpoint
- Supports multiple archive formats: .zip, .tar, .tar.gz, .tgz, .tar.bz2, .tbz2, .tar.xz, .gz, .bz2, .xz, .7z, .rar
- Automatically selects appropriate extraction command based on file extension
- Extracts to current directory by default, supports custom extraction path
- Proper error handling and logging for extraction operations
Frontend Implementation:
- Added extractSSHArchive() function in main-axios.ts for API calls
- Added handleExtractArchive() handler in FileManager.tsx
- FileManagerContextMenu displays 'Extract Archive' option for supported archive files
- FileArchive icon from lucide-react for visual clarity
- Keyboard shortcut: Ctrl+E
User Experience:
- Right-click on any supported archive file to see 'Extract Archive' option
- Toast notifications for progress and success/error states
- Automatic directory refresh after extraction to show extracted files
- Only shows extract option for recognized archive file types
i18n Support:
- English translations: extractArchive, extractingArchive, archiveExtractedSuccessfully, extractFailed
- Chinese translations: 解压文件, 正在解压, 解压成功, 解压失败
Supported Archive Formats:
- ZIP archives (.zip)
- TAR archives (.tar, .tar.gz, .tgz, .tar.bz2, .tbz2, .tar.xz)
- Compressed files (.gz, .bz2, .xz)
- 7-Zip archives (.7z)
- RAR archives (.rar)
This feature streamlines file management workflows by allowing users to extract archives directly from the file manager without switching to terminal.
Implements intuitive drag-and-drop split screen feature for tabs:
Core Functionality:
- Drag a splittable tab (Terminal, File Manager, or Server) onto another splittable tab
- Automatically triggers split screen mode for the dragged tab
- Target tab becomes the active focused tab
- Works alongside existing tab reordering drag-and-drop
Visual Feedback:
- Valid drop targets show blue border (border-blue-400/50) when dragging begins
- Hovered drop target shows enhanced highlight with blue ring and background
- Clear visual distinction between reorder drag vs split screen drop
- Smooth transitions and hover states
Smart Detection:
- Only allows split screen between compatible tab types (terminal/server/file_manager)
- Prevents splitting onto tabs already in split screen mode
- Respects 3-tab split screen limit
- Automatically falls back to reorder if dropped between tabs instead of on a tab
Implementation Details:
- Added hoverTabIndex to dragState to track which tab is being hovered
- New findHoveredTab() function detects mouse position over tabs
- Modified handleDrop() to prioritize split screen over reorder
- Added isValidDropTarget and isHoveredDropTarget props to Tab component
- Updated Tab.tsx styles with conditional classes for drop target states
User Experience:
- Drag tab to empty space between tabs = reorder (existing behavior)
- Drag tab directly onto another tab = split screen (new behavior)
- Visual feedback guides user to valid drop targets
- Seamless integration with existing tab management
Changes Host Manager button behavior to match Admin and User Profile tabs:
- Button is always clickable (except during split screen mode)
- If Host Manager tab already exists, clicking switches to it
- If tab doesn't exist, creates new tab and switches to it
- Removes 'Already Open' disabled state and tooltip
This improves UX by allowing users to quickly return to Host Manager tab without needing to manually find and click the tab.
Adds inline quick actions to host manager cards for efficient multi-host management:
Server Status Monitoring:
- Real-time status indicators (online/offline/degraded) for each host card
- Status updates every 10 seconds
- Respects per-host status check configuration
- Uses same status logic as sidebar host components
Quick Action Buttons:
- Terminal: Opens SSH terminal session (when enableTerminal is true)
- File Manager: Opens file browser (when enableFileManager is true)
- Server Details: Opens server monitoring dashboard (always available)
- Buttons appear in bottom section of each host card
- Hover effects with color-coded borders (blue/emerald/purple)
Benefits:
- Enables centralized monitoring and management of multiple hosts
- Reduces clicks needed to access common operations
- Provides at-a-glance status overview in grid view
- Maintains consistent UX with sidebar host components
Updates the left sidebar to display custom folder colors and icons:
- FolderCard component now accepts folderColor and folderIcon props
- LeftSidebar fetches folder metadata and passes to FolderCard
- Supports same 10 icons as host manager (Folder, Server, Cloud, Database, Box, Package, Layers, Archive, HardDrive, Globe)
- Folder metadata refreshes with host data and on ssh-hosts:changed events
This ensures the sidebar reflects folder appearance changes made in the host manager.
Adds the CREATE TABLE statement for ssh_folders table to ensure it's created when the database is initialized. This fixes the 'no such table: ssh_folders' error that occurs on backend restart.
Allow users to customize folder appearance and manage hosts in bulk:
Database & Types:
- Add sshFolders table with color and icon fields for folder metadata
- Add SSHFolder interface to types with userId, name, color, icon fields
- Update folder rename route to also update folder metadata
API Endpoints:
- GET /ssh/folders - Fetch all folders with metadata for user
- PUT /ssh/folders/metadata - Create or update folder color and icon
- DELETE /ssh/folders/:name/hosts - Delete all hosts in a folder and folder metadata
Frontend Features:
- Create FolderEditDialog component with color picker (8 colors) and icon selector (10 icons)
- Add folder metadata state management in HostManagerViewer
- Display custom folder colors and icons in host manager UI
- Add "Edit Folder Appearance" button with palette icon
- Add "Delete All Hosts in Folder" button with trash icon and confirmation
- Fetch and sync folder metadata on component mount and refresh
API Functions:
- getSSHFolders() - Retrieve all folder metadata
- updateFolderMetadata(name, color, icon) - Update folder appearance
- deleteAllHostsInFolder(folderName) - Batch delete with count return
i18n Support:
- Add translations for folder customization (en, zh)
- Add batch delete confirmation messages
- Add success/error toast messages
Add a comprehensive file permissions modification feature accessible via right-click context menu:
- Add PermissionsDialog component with read/write/execute checkboxes for owner/group/others
- Display current and new permissions side-by-side with real-time octal calculation
- Support both numeric (755) and symbolic (rwxr-xr-x) permission formats
- Implement backend API endpoint POST /ssh/file_manager/ssh/changePermissions
- Add frontend API function changeSSHPermissions with complete logging
- Integrate dialog with FileManager via onProperties callback
- Add i18n translations for English and Chinese
- Include path escaping and comprehensive error handling
- Files: blue (text-blue-400)
- Folders: red (text-red-400)
- Symlinks: green (text-green-400)
- Add toggle in User Profile settings
- Store preference in localStorage
- Support i18n (en, zh)
- Can be disabled via settings
- Matches dark theme color scheme
- Implement LoginRateLimiter with IP and username-based tracking
- Block after 5 failed attempts within 15 minutes
- Lock account/IP for 15 minutes after threshold
- Automatic cleanup of expired entries every 5 minutes
- Track remaining attempts in logs for monitoring
- Return 429 status with remaining time on rate limit
- Reset counters on successful login
- Dual protection: both IP-based and username-based limits
- Unify error messages for invalid username and incorrect password
- Both return 401 status with 'Invalid username or password'
- Prevent attackers from enumerating valid usernames
- Maintain detailed logging for debugging purposes
- Changed from 404 'User not found' to generic auth failure message
- Combine background color and pattern in single style attribute
- Use white semi-transparent lines (rgba 0.03 opacity)
- 45deg angle, 35px spacing, 2px width
- Remove separate overlay div to ensure pattern visibility
- Replace decorative slash with subtle diagonal line pattern background
- Use repeating-linear-gradient at 45deg angle
- Set very low opacity (0.03) for subtle effect
- Pattern uses theme primary color
- Add decorative slash divider with gradient lines below TERMIX logo
- Remove subtitle text (welcomeBack and createAccount)
- Simplify page title to show only the main heading
- Changed login page gradient from blue to match dark theme colors
- Updated ripple effects to use theme primary color
- Added i18n translation keys for login page (auth.tagline, auth.description, auth.welcomeBack, auth.createAccount, auth.continueExternal)
- Updated all language files (en, zh, de, ru, pt-BR) with new translations
- Fixed TypeScript compilation issues by clearing build cache
Major redesign of authentication page:
Left Side (40% width):
- Full-height gradient background using primary theme color
- Large TERMIX logo with glow effect
- Subtitle and tagline
- Infinite animated ripple waves (3 layers)
- Hidden on mobile, shows brand identity
Right Side (60% width):
- Centered glassmorphism card with backdrop blur
- Refined tab switcher with pill-style active state
- Enlarged title with gradient text effect
- Added welcome subtitles for better UX
- Card slides in from bottom on load
- All existing functionality preserved
Visual enhancements:
- Tab navigation: segmented control style in muted container
- Active tab: white background with subtle shadow
- Smooth 200ms transitions on all interactions
- Card: rounded-2xl, shadow-xl, semi-transparent border
Creates premium, modern login experience matching transition animations
Timing adjustments:
- Extend fadeOut from 800ms to 1200ms
- Extend fadeIn from 600ms to 800ms
- Slow background fade to 700ms for elegance
Visual enhancements:
- Add 4-layer ripple waves (10%, 7%, 5%, 3% opacity) with staggered delays
- Ripple animation extended to 2.5s with refined opacity curve
- Logo blur effect: starts at 8px, sharpens to 0px, exits at 4px
- Logo glow effect: triple-layer text-shadow using primary theme color
- Increase logo size from text-6xl to text-7xl
- Subtitle delayed fade-in from bottom with smooth slide animation
Creates a cinematic, polished brand experience
Changes:
- Extend transition duration from 300ms/400ms to 800ms/600ms for more elegant feel
- Reduce ripple intensity from /20,/15,/10 to /8,/5 for subtlety
- Slow down ripple animation from 0.8s to 2s with cubic-bezier easing
- Add centered TERMIX logo with monospace font and subtitle
- Logo fades in from 80% scale, holds, then fades out at 110% scale
- Total effect: 1.2s logo animation synced with 2s ripple waves
Creates a premium, branded transition experience
Add three-layer expanding ripple animation during fadeOut phase:
- Ripples expand from screen center using primary theme color
- Each layer has staggered delay (0ms, 150ms, 300ms) for wave effect
- Ripples fade out as they expand to create elegant visual feedback
- Uses pure CSS keyframe animation, no external libraries
Total animation: 800ms ripple + 300ms screen fade
Page switching animations were not noticeable enough and felt unnecessary.
Keep only the login/logout fullscreen crossfade transitions which provide clear visual feedback for authentication state changes
Each page container now has key={currentTab} to ensure React unmounts and remounts the element on every tab switch, properly triggering the slide-in animation
- Add fullscreen crossfade transition for login/logout (300ms fade-out + 400ms fade-in)
- Add slide-in-from-right animation for all page switches (Dashboard, Terminal, SSH Manager, Admin, Profile)
- Fix TypeScript compilation by adding esModuleInterop to tsconfig.node.json
- Pass handleLogout from DesktopApp to LeftSidebar for consistent transition behavior
All page transitions now use Tailwind animate-in utilities with 300ms duration for smooth, native-feeling UX
- Add active:scale-95 to all buttons for tactile click feedback
- Add hover border effect to dashboard cards (150ms transition)
- Add pulse animation to dashboard loading states
- Pure CSS transitions with zero JavaScript overhead
- Improves enterprise-level feel of UI
- Add fade-in/fade-out transition to command palette (200ms)
- Add scale animation to command palette on open/close
- Add smooth popup animation to context menu (150ms)
- Add visual feedback for file selection with ring effect
- Add hover scale effect to file grid items
- Add transition-all to list view items for consistent behavior
- Zero JavaScript overhead, pure CSS transitions
- All animations under 200ms for instant feel
- Add commandPalette translation section with 22 keys to all 4 languages
- Update CommandPalette component to use i18n for all UI text
- Translate search placeholder, group headings, menu items, and shortcut hints
- Support multilingual command palette interface
- Add comprehensive terminal customization translations (60+ keys) for appearance, behavior, and advanced settings across all 4 languages
- Add SSH login statistics translations
- Update HostManagerEditor to use i18n for all terminal customization UI elements
- Update LoginStatsWidget to use i18n for all UI text
- Add missing logger imports in backend files for improved debugging
* Update translation.json
Fixed some translation issues for German, made it more user friendly and common.
* Update translation.json
added updated block for serverStats
* Update translation.json
Added translations
* Update translation.json
Removed duplicate of "free":"Free"
* fix: Resolve database encryption atomicity issues and enhance debugging
This commit addresses critical data corruption issues caused by non-atomic
file writes during database encryption, and adds comprehensive diagnostic
logging to help debug encryption-related failures.
**Problem:**
Users reported "Unsupported state or unable to authenticate data" errors
when starting the application after system crashes or Docker container
restarts. The root cause was non-atomic writes of encrypted database files:
1. Encrypted data file written (step 1)
2. Metadata file written (step 2)
→ If process crashes between steps 1 and 2, files become inconsistent
→ New IV/tag in data file, old IV/tag in metadata
→ GCM authentication fails on next startup
→ User data permanently inaccessible
**Solution - Atomic Writes:**
1. Write-to-temp + atomic-rename pattern:
- Write to temporary files (*.tmp-timestamp-pid)
- Perform atomic rename operations
- Clean up temp files on failure
2. Data integrity validation:
- Add dataSize field to metadata
- Verify file size before decryption
- Early detection of corrupted writes
3. Enhanced error diagnostics:
- Key fingerprints (SHA256 prefix) for verification
- File modification timestamps
- Detailed GCM auth failure messages
- Automatic diagnostic info generation
**Changes:**
database-file-encryption.ts:
- Implement atomic write pattern in encryptDatabaseFromBuffer
- Implement atomic write pattern in encryptDatabaseFile
- Add dataSize field to EncryptedFileMetadata interface
- Validate file size before decryption in decryptDatabaseToBuffer
- Enhanced error messages for GCM auth failures
- Add getDiagnosticInfo() function for comprehensive debugging
- Add debug logging for all encryption/decryption operations
system-crypto.ts:
- Add detailed logging for DATABASE_KEY initialization
- Log key source (env var vs .env file)
- Add key fingerprints to all log messages
- Better error messages when key loading fails
db/index.ts:
- Automatically generate diagnostic info on decryption failure
- Log detailed debugging information to help users troubleshoot
**Debugging Info Added:**
- Key initialization: source, fingerprint, length, path
- Encryption: original size, encrypted size, IV/tag prefixes, temp paths
- Decryption: file timestamps, metadata content, key fingerprint matching
- Auth failures: .env file status, key availability, file consistency
- File diagnostics: existence, readability, size validation, mtime comparison
**Backward Compatibility:**
- dataSize field is optional (metadata.dataSize?: number)
- Old encrypted files without dataSize continue to work
- No migration required
**Testing:**
- Compiled successfully
- No breaking changes to existing APIs
- Graceful handling of legacy v1 encrypted files
Fixes data loss issues reported by users experiencing container restarts
and system crashes during database saves.
* fix: Cleanup PR
* Update src/backend/utils/database-file-encryption.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update src/backend/utils/database-file-encryption.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update src/backend/utils/database-file-encryption.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update src/backend/utils/database-file-encryption.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update src/backend/utils/database-file-encryption.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: LukeGus <bugattiguy527@gmail.com>
Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
