feat: Enhanced security, UI improvements, and animations (#432)

* fix: Remove empty catch blocks and add error logging

* refactor: Modularize server stats widget collectors

* feat: Add i18n support for terminal customization and login stats

- 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

* feat: Add keyboard shortcut enhancements with Kbd component

- Add shadcn kbd component for displaying keyboard shortcuts
- Enhance file manager context menu to display shortcuts with Kbd component
- Add 5 new keyboard shortcuts to file manager:
  - Ctrl+D: Download selected files
  - Ctrl+N: Create new file
  - Ctrl+Shift+N: Create new folder
  - Ctrl+U: Upload files
  - Enter: Open/run selected file
- Add keyboard shortcut hints to command palette footer
- Create helper function to parse and render keyboard shortcuts

* feat: Add i18n support for command palette

- 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

* feat: Add smooth transitions and animations to 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

* feat: Add button active state and dashboard card animations

- 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

* feat: Add smooth macOS-style page transitions

- 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

* fix: Add key prop to force animation re-trigger on tab switch

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

* revert: Remove page transition animations

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

* feat: Add ripple effect to login/logout transitions

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

* feat: Add smooth TERMIX logo animation to transitions

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

* feat: Enhance transition animation with premium details

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

* feat: Redesign login page with split-screen cinematic layout

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

* feat: Update login page theme colors and add i18n support

- 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

* refactor: Use shadcn Tabs component and fix modal styling

- Replace custom tab navigation with shadcn Tabs component
- Restore border-2 border-dark-border for modal consistency
- Remove circular icon from login success message
- Simplify authentication success display

* refactor: Remove ripple effects and gradient from login page

- Remove animated ripple background effects
- Remove gradient background, use solid color (bg-dark-bg-darker)
- Remove text-shadow glow effect from logo
- Simplify brand showcase to clean, minimal design

* feat: Add decorative slash and remove subtitle from login page

- 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

* feat: Add diagonal line pattern background to login page

- 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

* fix: Display diagonal line pattern on login background

- 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

* security: Fix user enumeration vulnerability in login

- 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

* security: Add login rate limiting to prevent brute force attacks

- 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

src/backend/utils/auto-ssl-setup.ts

@@ -233,7 +233,11 @@ IP.3 = 0.0.0.0
     let envContent = "";
     try {
       envContent = await fs.readFile(this.ENV_FILE, "utf8");
-    } catch {}
+    } catch (error) {
+      systemLogger.debug("Operation failed, continuing", {
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
 
     let updatedContent = envContent;
     let hasChanges = false;

src/backend/utils/database-file-encryption.ts

@@ -327,7 +327,11 @@ class DatabaseFileEncryption {
             fs.accessSync(envPath, fs.constants.R_OK);
             envFileReadable = true;
           }
-        } catch {}
+        } catch (error) {
+          databaseLogger.debug("Operation failed, continuing", {
+            error: error instanceof Error ? error.message : String(error),
+          });
+        }
 
         databaseLogger.error(
           "Database decryption authentication failed - possible causes: wrong DATABASE_KEY, corrupted files, or interrupted write",
@@ -628,7 +632,11 @@ class DatabaseFileEncryption {
         try {
           fs.accessSync(envPath, fs.constants.R_OK);
           result.environment.envFileReadable = true;
-        } catch {}
+        } catch (error) {
+          databaseLogger.debug("Operation failed, continuing", {
+            error: error instanceof Error ? error.message : String(error),
+          });
+        }
       }
 
       if (

src/backend/utils/lazy-field-encryption.ts

@@ -82,7 +82,11 @@ export class LazyFieldEncryption {
               legacyFieldName,
             );
             return decrypted;
-          } catch {}
+          } catch (error) {
+            databaseLogger.debug("Operation failed, continuing", {
+              error: error instanceof Error ? error.message : String(error),
+            });
+          }
         }
 
         const sensitiveFields = [
@@ -174,7 +178,11 @@ export class LazyFieldEncryption {
               wasPlaintext: false,
               wasLegacyEncryption: true,
             };
-          } catch {}
+          } catch (error) {
+            databaseLogger.debug("Operation failed, continuing", {
+              error: error instanceof Error ? error.message : String(error),
+            });
+          }
         }
         return {
           encrypted: fieldValue,

src/backend/utils/login-rate-limiter.ts

@@ -0,0 +1,146 @@
+interface LoginAttempt {
+  count: number;
+  firstAttempt: number;
+  lockedUntil?: number;
+}
+
+class LoginRateLimiter {
+  private ipAttempts = new Map<string, LoginAttempt>();
+  private usernameAttempts = new Map<string, LoginAttempt>();
+
+  private readonly MAX_ATTEMPTS = 5;
+  private readonly WINDOW_MS = 15 * 60 * 1000; // 15 minutes
+  private readonly LOCKOUT_MS = 15 * 60 * 1000; // 15 minutes
+
+  // Clean up old entries periodically
+  constructor() {
+    setInterval(() => this.cleanup(), 5 * 60 * 1000); // Clean every 5 minutes
+  }
+
+  private cleanup(): void {
+    const now = Date.now();
+
+    // Clean IP attempts
+    for (const [ip, attempt] of this.ipAttempts.entries()) {
+      if (attempt.lockedUntil && attempt.lockedUntil < now) {
+        this.ipAttempts.delete(ip);
+      } else if (!attempt.lockedUntil && (now - attempt.firstAttempt) > this.WINDOW_MS) {
+        this.ipAttempts.delete(ip);
+      }
+    }
+
+    // Clean username attempts
+    for (const [username, attempt] of this.usernameAttempts.entries()) {
+      if (attempt.lockedUntil && attempt.lockedUntil < now) {
+        this.usernameAttempts.delete(username);
+      } else if (!attempt.lockedUntil && (now - attempt.firstAttempt) > this.WINDOW_MS) {
+        this.usernameAttempts.delete(username);
+      }
+    }
+  }
+
+  recordFailedAttempt(ip: string, username?: string): void {
+    const now = Date.now();
+
+    // Record IP attempt
+    const ipAttempt = this.ipAttempts.get(ip);
+    if (!ipAttempt) {
+      this.ipAttempts.set(ip, {
+        count: 1,
+        firstAttempt: now,
+      });
+    } else if ((now - ipAttempt.firstAttempt) > this.WINDOW_MS) {
+      // Reset if outside window
+      this.ipAttempts.set(ip, {
+        count: 1,
+        firstAttempt: now,
+      });
+    } else {
+      ipAttempt.count++;
+      if (ipAttempt.count >= this.MAX_ATTEMPTS) {
+        ipAttempt.lockedUntil = now + this.LOCKOUT_MS;
+      }
+    }
+
+    // Record username attempt if provided
+    if (username) {
+      const userAttempt = this.usernameAttempts.get(username);
+      if (!userAttempt) {
+        this.usernameAttempts.set(username, {
+          count: 1,
+          firstAttempt: now,
+        });
+      } else if ((now - userAttempt.firstAttempt) > this.WINDOW_MS) {
+        // Reset if outside window
+        this.usernameAttempts.set(username, {
+          count: 1,
+          firstAttempt: now,
+        });
+      } else {
+        userAttempt.count++;
+        if (userAttempt.count >= this.MAX_ATTEMPTS) {
+          userAttempt.lockedUntil = now + this.LOCKOUT_MS;
+        }
+      }
+    }
+  }
+
+  resetAttempts(ip: string, username?: string): void {
+    this.ipAttempts.delete(ip);
+    if (username) {
+      this.usernameAttempts.delete(username);
+    }
+  }
+
+  isLocked(ip: string, username?: string): { locked: boolean; remainingTime?: number } {
+    const now = Date.now();
+
+    // Check IP lockout
+    const ipAttempt = this.ipAttempts.get(ip);
+    if (ipAttempt?.lockedUntil && ipAttempt.lockedUntil > now) {
+      return {
+        locked: true,
+        remainingTime: Math.ceil((ipAttempt.lockedUntil - now) / 1000),
+      };
+    }
+
+    // Check username lockout
+    if (username) {
+      const userAttempt = this.usernameAttempts.get(username);
+      if (userAttempt?.lockedUntil && userAttempt.lockedUntil > now) {
+        return {
+          locked: true,
+          remainingTime: Math.ceil((userAttempt.lockedUntil - now) / 1000),
+        };
+      }
+    }
+
+    return { locked: false };
+  }
+
+  getRemainingAttempts(ip: string, username?: string): number {
+    const now = Date.now();
+    let minRemaining = this.MAX_ATTEMPTS;
+
+    // Check IP attempts
+    const ipAttempt = this.ipAttempts.get(ip);
+    if (ipAttempt && (now - ipAttempt.firstAttempt) <= this.WINDOW_MS) {
+      const ipRemaining = Math.max(0, this.MAX_ATTEMPTS - ipAttempt.count);
+      minRemaining = Math.min(minRemaining, ipRemaining);
+    }
+
+    // Check username attempts
+    if (username) {
+      const userAttempt = this.usernameAttempts.get(username);
+      if (userAttempt && (now - userAttempt.firstAttempt) <= this.WINDOW_MS) {
+        const userRemaining = Math.max(0, this.MAX_ATTEMPTS - userAttempt.count);
+        minRemaining = Math.min(minRemaining, userRemaining);
+      }
+    }
+
+    return minRemaining;
+  }
+}
+
+// Export singleton instance
+export const loginRateLimiter = new LoginRateLimiter();

src/backend/utils/ssh-key-utils.ts

@@ -1,4 +1,5 @@
 import ssh2Pkg from "ssh2";
+import { sshLogger } from "./logger.js";
 const ssh2Utils = ssh2Pkg.utils;
 
 function detectKeyTypeFromContent(keyContent: string): string {
@@ -84,7 +85,11 @@ function detectKeyTypeFromContent(keyContent: string): string {
       } else if (decodedString.includes("1.3.101.112")) {
         return "ssh-ed25519";
       }
-    } catch {}
+    } catch (error) {
+      sshLogger.debug("Operation failed, continuing", {
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
 
     if (content.length < 800) {
       return "ssh-ed25519";
@@ -140,7 +145,11 @@ function detectPublicKeyTypeFromContent(publicKeyContent: string): string {
       } else if (decodedString.includes("1.3.101.112")) {
         return "ssh-ed25519";
       }
-    } catch {}
+    } catch (error) {
+      sshLogger.debug("Operation failed, continuing", {
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
 
     if (content.length < 400) {
       return "ssh-ed25519";
@@ -242,7 +251,11 @@ export function parseSSHKey(
 
           useSSH2 = true;
         }
-      } catch {}
+      } catch (error) {
+        sshLogger.debug("Operation failed, continuing", {
+          error: error instanceof Error ? error.message : String(error),
+        });
+      }
     }
 
     if (!useSSH2) {
@@ -268,7 +281,11 @@ export function parseSSHKey(
           success: true,
         };
       }
-    } catch {}
+    } catch (error) {
+      sshLogger.debug("Operation failed, continuing", {
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
 
     return {
       privateKey: privateKeyData,

src/backend/utils/system-crypto.ts

@@ -51,7 +51,15 @@ class SystemCrypto {
             },
           );
         }
-      } catch (fileError) {}
+      } catch (fileError) {
+        // OK: .env file not found or unreadable, will generate new JWT secret
+        databaseLogger.debug(
+          ".env file not accessible, will generate new JWT secret",
+          {
+            operation: "jwt_env_not_found",
+          },
+        );
+      }
 
       await this.generateAndGuideUser();
     } catch (error) {
@@ -102,7 +110,15 @@ class SystemCrypto {
           return;
         } else {
         }
-      } catch (fileError) {}
+      } catch (fileError) {
+        // OK: .env file not found or unreadable, will generate new database key
+        databaseLogger.debug(
+          ".env file not accessible, will generate new database key",
+          {
+            operation: "db_key_env_not_found",
+          },
+        );
+      }
 
       await this.generateAndGuideDatabaseKey();
     } catch (error) {
@@ -140,7 +156,11 @@ class SystemCrypto {
           process.env.INTERNAL_AUTH_TOKEN = tokenMatch[1];
           return;
         }
-      } catch {}
+      } catch (error) {
+        databaseLogger.debug("Operation failed, continuing", {
+          error: error instanceof Error ? error.message : String(error),
+        });
+      }
 
       await this.generateAndGuideInternalAuthToken();
     } catch (error) {