Dev 1.5.0 (#159)

* Add comprehensive Chinese internationalization support

- Implemented i18n framework with react-i18next for multi-language support
- Added Chinese (zh) and English (en) translation files with comprehensive coverage
- Localized Admin interface, authentication flows, and error messages
- Translated FileManager operations and UI elements
- Updated HomepageAuth component with localized authentication messages
- Localized LeftSidebar navigation and host management
- Added language switcher component (shown after login only)
- Configured default language as English with Chinese as secondary option
- Localized TOTPSetup two-factor authentication interface
- Updated Docker build to include translation files
- Achieved 95%+ UI localization coverage across core components

Co-Authored-By: Claude <noreply@anthropic.com>

* Extend Chinese localization coverage to Host Manager components

- Added comprehensive translations for HostManagerHostViewer component
- Localized all host management UI text including import/export features
- Translated error messages and confirmation dialogs for host operations
- Added translations for HostManagerHostEditor validation messages
- Localized connection details, organization settings, and form labels
- Fixed syntax error in FileManagerOperations component
- Achieved near-complete localization of SSH host management interface
- Updated placeholders and tooltips for better user guidance

Co-Authored-By: Claude <noreply@anthropic.com>

* Complete comprehensive Chinese localization for Termix

- Added full localization support for Tunnel components (connected/disconnected states, retry messages)
- Localized all tunnel status messages and connection errors
- Added translations for port forwarding UI elements
- Verified Server, TopNavbar, and Tab components already have complete i18n support
- Achieved 99%+ localization coverage across entire application
- All core UI components now fully support Chinese and English languages

This completes the comprehensive internationalization effort for the Termix SSH management platform.

Co-Authored-By: Claude <noreply@anthropic.com>

* Localize additional Host Manager components and authentication settings

- Added translations for all authentication options (Password, Key, SSH Private Key)
- Localized form labels in HostManagerHostEditor (Pin Connection, Enable Terminal/Tunnel/FileManager)
- Translated Upload/Update Key button states
- Localized Host Viewer and Add/Edit Host tab labels
- Added Chinese translations for all host management settings
- Fixed duplicate translation keys in JSON files

Co-Authored-By: Claude <noreply@anthropic.com>

* Extend localization coverage to UI components and common strings

- Added comprehensive common translations (online/offline, success/error, etc.)
- Localized status indicator component with all status states
- Updated FileManagerLeftSidebar toast messages for rename/delete operations
- Added translations for UI elements (close, toggle sidebar, etc.)
- Expanded placeholder translations for form inputs
- Added Chinese translations for all new common strings
- Improved consistency across component status messages

Co-Authored-By: Claude <noreply@anthropic.com>

* Complete Chinese localization for remaining UI components

- Add comprehensive Chinese translations for Host Manager component
  - Translate all form labels, buttons, and descriptions
  - Add translations for SSH configuration warnings and instructions
  - Localize tunnel connection settings and port forwarding options

- Localize SSH Tools panel
  - Translate key recording functionality
  - Add translations for settings and configuration options

- Translate homepage welcome messages and navigation elements
  - Add Chinese translations for login success messages
  - Localize "Updates & Releases" section title
  - Translate sidebar "Host Manager" button

- Fix translation key display issues
  - Remove duplicate translation keys in both language files
  - Ensure all components properly reference translation keys
  - Fix hosts.tunnelConnections key mapping

This completes the full Chinese localization of the Termix application,
achieving near 100% UI translation coverage while maintaining English
as the default language.

* Complete final Chinese localization for Host Manager tunnel configuration

- Add Chinese translations for authentication UI elements
  - Translate "Authentication", "Password", and "Key" tab labels
  - Localize SSH private key and key password fields
  - Add translations for key type selector

- Localize tunnel connection configuration descriptions
  - Translate retry attempts and retry interval descriptions
  - Add dynamic tunnel forwarding description with port parameters
  - Localize endpoint SSH configuration labels

- Fix missing translation keys
  - Add "upload" translation for file upload button
  - Ensure all FormLabel and FormDescription elements use translation keys

This completes the comprehensive Chinese localization of the entire
Termix application, achieving 100% UI translation coverage.

* Fix OIDC errors for "Failed to get user information"

* Fix OIDC errors for "Failed to get user information"

* Fix spelling error

* Fix PR feedback: Improve Profile section translations and UX

- Fixed password reset translations in Profile section
- Moved language selector from TopNavbar to Profile page
- Added profile.selectPreferredLanguage translation key
- Improved user experience for language preferences

* Migrate everything to alert system, update user.ts for OIDC updates.

* Update env

* Fix OIDC errors for "Failed to get user information"

* Fix OIDC errors for "Failed to get user information"

* Fix spelling error

* Migrate everything to alert system, update user.ts for OIDC updates.

* Translation update

* Translation update

* Translation update

* Translate tunnels

* Comment update

* Update build workflow naming

* Add more translations, fix user delete failing

* Fix config editor erorrs causing user delete failure

---------

Co-authored-by: ZacharyZcR <PayasoNorahC@protonmail.com>
Co-authored-by: Claude <noreply@anthropic.com>

.env

@@ -1 +1 @@
-VERSION=1.1.1
+VERSION=1.5.0

.github/dependabot.yml

@@ -0,0 +1,40 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    groups:
+      dev-patch-updates:
+        dependency-type: "development"
+        update-types:
+          - "patch"
+      dev-minor-updates:
+        dependency-type: "development"
+        update-types:
+          - "minor"
+      prod-patch-updates:
+        dependency-type: "production"
+        update-types:
+          - "patch"
+      prod-minor-updates:
+        dependency-type: "production"
+        update-types:
+          - "minor"
+          
+  - package-ecosystem: "docker"
+    directory: "/docker"
+    schedule:
+      interval: "daily"
+    groups:
+      patch-updates:
+        update-types:
+          - "patch"
+      minor-updates:
+        update-types:
+          - "minor"
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/docker-image.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 1
 
@@ -37,7 +37,7 @@ jobs:
             network=host
 
       - name: Cache npm dependencies
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ~/.npm
@@ -48,7 +48,7 @@ jobs:
             ${{ runner.os }}-node-
 
       - name: Cache Docker layers
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.ref_name }}-${{ hashFiles('docker/Dockerfile') }}
@@ -73,12 +73,12 @@ jobs:
           elif [ "${{ github.ref }}" == "refs/heads/development" ]; then
             IMAGE_TAG="development-latest"
           else
-            IMAGE_TAG="${{ github.ref_name }}-development-latest"
+            IMAGE_TAG="${{ github.ref_name }}"
           fi
           echo "IMAGE_TAG=$IMAGE_TAG" >> $GITHUB_ENV
 
       - name: Build and Push Multi-Arch Docker Image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./docker/Dockerfile

.nvmrc

@@ -0,0 +1 @@
+22

CONTRIBUTING.md

@@ -0,0 +1,56 @@
+# Contributing
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download/) (built with v24)
+- [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [Git](https://git-scm.com/downloads)
+
+## Installation
+
+1. Clone the repository:
+    ```sh
+    git clone https://github.com/LukeGus/Termix
+    ```
+2. Install the dependencies:
+    ```sh
+    npm install
+    ```
+
+## Running the development server
+
+Run the following commands:
+
+```sh
+npm run dev
+npx tsc -p tsconfig.node.json
+node ./dist/backend/starter.js
+```
+
+This will start the backend and the frontend Vite server. You can access Termix by going to `http://localhost:5174/`.
+
+## Contributing
+
+1. **Fork the repository**: Click the "Fork" button at the top right of
+   the [repository page](https://github.com/LukeGus/Termix).
+2. **Create a new branch**:
+    ```sh
+    git checkout -b feature/my-new-feature
+    ```
+3. **Make your changes**: Implement your feature, fix, or improvement.
+4. **Commit your changes**:
+    ```sh
+    git commit -m "Add feature: my new feature"
+    ```
+5. **Push to your fork**:
+    ```sh
+    git push origin feature/my-new-feature
+    ```
+6. **Open a pull request**: Go to the original repository and create a PR with a clear description.
+
+## 📝 Guidelines
+
+- Follow the existing code style. Use Tailwind CSS with shadcn components.
+- Place all API routes in the `main-axios.ts` file. Updating the `openapi.json` is unneeded.
+- Include meaningful commit messages.
+- Link related issues when applicable.

README.md

@@ -13,36 +13,42 @@
 [![SQLite Badge](https://img.shields.io/badge/-SQLite-003B57?style=flat-square&labelColor=black&logo=sqlite&logoColor=003B57)](#)
 [![Radix UI Badge](https://img.shields.io/badge/-Radix%20UI-161618?style=flat-square&labelColor=black&logo=radixui&logoColor=161618)](#)
 
-
 <br />
 <p align="center">
   <a href="https://github.com/LukeGus/Termix">
-    <img alt="Termix Banner" src=./public/icon.svg style="width: 250px; height: auto;">  </a>
+    <img alt="Termix Banner" src=./repo-images/HeaderImage.png style="width: auto; height: auto;">  </a>
 </p>
 
 If you would like, you can support the project here!\
 [![GitHub Sponsor](https://img.shields.io/badge/Sponsor-LukeGus-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/sponsors/LukeGus)
 
 # Overview
-Termix is an open-source, forever-free, self-hosted all-in-one server management platform. It provides a web-based solution for managing your servers and infrastructure through a single, intuitive interface. Termix offers SSH terminal access, SSH tunneling capabilities, and remote file configuration editing, with many more tools to come.
+
+<p align="center">
+  <a href="https://github.com/LukeGus/Termix">
+    <img alt="Termix Banner" src=./public/icon.svg style="width: 250px; height: 250px;">  </a>
+</p>
+
+Termix is an open-source, forever-free, self-hosted all-in-one server management platform. It provides a web-based solution for managing your servers and infrastructure through a single, intuitive interface. Termix offers SSH terminal access, SSH tunneling capabilities, and remote file editing, with many more tools to come.
 
 # Features
 - **SSH Terminal Access** - Full-featured terminal with split-screen support (up to 4 panels) and tab system
 - **SSH Tunnel Management** - Create and manage SSH tunnels with automatic reconnection and health monitoring
-- **Remote Config Editor** - Edit files directly on remote servers with syntax highlighting and file management
+- **Remote File Editor** - Edit files directly on remote servers with syntax highlighting, file management features (uploading, removing, renaming, deleting files)
 - **SSH Host Manager** - Save, organize, and manage your SSH connections with tags and folders
-- **User Authentication** - Secure user management with admin controls and OIDC support with more auth types planned
-- **Modern UI** - Clean interface built with React, Tailwind CSS, and the amazing Shadcn
+- **Server Stats** - View CPU, memory, and HDD usage on any SSH server
+- **User Authentication** - Secure user management with admin controls and OIDC and 2FA (TOTP) support
+- **Modern UI** - Clean interface built with React, Tailwind CSS, and Shadcn
+- **Languages** - Built-in support for English and Chinese
 
 # Planned Features
-- **Improved Admin Control** - Ability to manage admins, and give more fine-grained control over their permissions, share hosts, reset passwords, delete accounts, etc
-- **More auth types** - Add 2FA, TOTP, etc
-- **Theming** - Modify themeing for all tools
-- **Improved SFTP Support** - Ability to manage files easier with the config editor by uploading, creating, and removing files
+- **Improved Admin Control** - Give more fine-grained control over user and admin permissions, share hosts, etc
+- **Theming** - Modify theming for all tools
 - **Improved Terminal Support** - Add more terminal protocols such as VNC and RDP (anyone who has experience in integrating RDP into a web-application similar to Apache Guacamole, please contact me by creating an issue)
+- **Mobile Support** - Support a mobile app or version of the Termix website to manage servers from your phone
 
 # Installation
-Visit the Termix [Docs](https://docs.termix.site/docs) for more information on how to install Termix. Otherwise, view a sample docker-compose file here:
+Visit the Termix [Docs](https://docs.termix.site/install) for more information on how to install Termix. Otherwise, view a sample docker-compose file here:
 ```yaml
 services:
   termix:
@@ -78,7 +84,7 @@ If you need help with Termix, you can join the [Discord](https://discord.gg/jVQG
 </p>
 
 <p align="center">
-  <video src="https://github.com/user-attachments/assets/0f95495d-c5db-48f5-b18b-9ab48bb10d31" width="800" controls>
+  <video src="https://github.com/user-attachments/assets/f9caa061-10dc-4173-ae7d-c6d42f05cf56" width="800" controls>
     Your browser does not support the video tag.
   </video>
 </p>

docker/Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Install dependencies and build frontend
-FROM node:18-alpine AS deps
+FROM node:24-alpine AS deps
 WORKDIR /app
 
 RUN apk add --no-cache python3 make g++ 
@@ -26,7 +26,7 @@ COPY . .
 RUN npm run build:backend
 
 # Stage 4: Production dependencies
-FROM node:18-alpine AS production-deps
+FROM node:24-alpine AS production-deps
 WORKDIR /app
 
 COPY package*.json ./
@@ -35,7 +35,7 @@ RUN npm ci --only=production --ignore-scripts --force && \
     npm cache clean --force
 
 # Stage 5: Build native modules
-FROM node:18-alpine AS native-builder
+FROM node:24-alpine AS native-builder
 WORKDIR /app
 
 RUN apk add --no-cache python3 make g++ 
@@ -46,7 +46,7 @@ RUN npm ci --only=production bcryptjs better-sqlite3 --force && \
     npm cache clean --force
 
 # Stage 6: Final image
-FROM node:18-alpine
+FROM node:24-alpine
 ENV DATA_DIR=/app/data \
     PORT=8080 \
     NODE_ENV=production
@@ -57,6 +57,7 @@ RUN apk add --no-cache nginx gettext su-exec && \
 
 COPY docker/nginx.conf /etc/nginx/nginx.conf
 COPY --from=frontend-builder /app/dist /usr/share/nginx/html
+COPY --from=frontend-builder /app/public/locales /usr/share/nginx/html/locales
 RUN chown -R nginx:nginx /usr/share/nginx/html
 
 WORKDIR /app
@@ -72,8 +73,8 @@ RUN chown -R node:node /app
 
 VOLUME ["/app/data"]
 
-EXPOSE ${PORT} 8081 8082 8083 8084
+EXPOSE ${PORT} 8081 8082 8083 8084 8085
 
 COPY docker/entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
-CMD ["/entrypoint.sh"]
+CMD ["/entrypoint.sh"]

docker/nginx.conf

@@ -45,7 +45,16 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
 
-        location /ssh/db/ {
+        location /alerts/ {
+            proxy_pass http://127.0.0.1:8081;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /ssh/ {
             proxy_pass http://127.0.0.1:8081;
             proxy_http_version 1.1;
             proxy_set_header Host $host;
@@ -62,6 +71,14 @@ http {
             proxy_set_header Host $host;
             proxy_cache_bypass $http_upgrade;
 
+            proxy_read_timeout 300s;
+            proxy_send_timeout 300s;
+            proxy_connect_timeout 75s;
+            proxy_set_header Connection "";
+            
+            proxy_buffering off;
+            proxy_request_buffering off;
+            
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
@@ -76,7 +93,34 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
 
-        location /ssh/config_editor/ {
+        location /ssh/file_manager/recent {
+            proxy_pass http://127.0.0.1:8081;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /ssh/file_manager/pinned {
+            proxy_pass http://127.0.0.1:8081;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /ssh/file_manager/shortcuts {
+            proxy_pass http://127.0.0.1:8081;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /ssh/file_manager/ssh/ {
             proxy_pass http://127.0.0.1:8084;
             proxy_http_version 1.1;
             proxy_set_header Host $host;
@@ -85,8 +129,17 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
 
-        location ~ ^/ssh/config_editor/(recent|pinned|shortcuts) {
-            proxy_pass http://127.0.0.1:8081;
+        location /status/ {
+            proxy_pass http://127.0.0.1:8085;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /metrics/ {
+            proxy_pass http://127.0.0.1:8085;
             proxy_http_version 1.1;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;

package.json

@@ -17,10 +17,11 @@
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
@@ -28,10 +29,12 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.1.11",
     "@types/bcryptjs": "^2.4.6",
     "@types/multer": "^2.0.0",
+    "@types/qrcode": "^1.5.5",
+    "@types/speakeasy": "^2.0.10",
     "@uiw/codemirror-extensions-hyper-link": "^4.24.1",
     "@uiw/codemirror-extensions-langs": "^4.24.1",
     "@uiw/codemirror-themes": "^4.24.1",
@@ -54,17 +57,25 @@
     "dotenv": "^17.2.0",
     "drizzle-orm": "^0.44.3",
     "express": "^5.1.0",
+    "i18next": "^25.4.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-http-backend": "^3.0.2",
     "jose": "^5.2.3",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.525.0",
     "multer": "^2.0.2",
     "nanoid": "^5.1.5",
+    "next-themes": "^0.4.6",
     "node-fetch": "^3.3.2",
+    "qrcode": "^1.5.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.60.0",
+    "react-i18next": "^15.7.3",
     "react-resizable-panels": "^3.0.3",
     "react-xtermjs": "^1.0.10",
+    "sonner": "^2.0.7",
+    "speakeasy": "^2.0.0",
     "ssh2": "^1.16.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
@@ -73,26 +84,26 @@
     "zod": "^4.0.5"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.34.0",
     "@types/better-sqlite3": "^7.6.13",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.3",
     "@types/jsonwebtoken": "^9.0.10",
-    "@types/node": "^24.0.13",
+    "@types/node": "^24.3.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/ssh2": "^1.15.5",
     "@types/ws": "^8.18.1",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.30.1",
+    "eslint": "^9.34.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
     "ts-node": "^10.9.2",
     "tw-animate-css": "^1.3.5",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.4"
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3"
   }
 }

public/locales/en/translation.json

@@ -0,0 +1,814 @@
+{
+  "sshTools": {
+    "title": "SSH Tools",
+    "closeTools": "Close SSH Tools",
+    "keyRecording": "Key Recording",
+    "startKeyRecording": "Start Key Recording",
+    "stopKeyRecording": "Stop Key Recording",
+    "selectTerminals": "Select terminals:",
+    "typeCommands": "Type commands (all keys supported):",
+    "commandsWillBeSent": "Commands will be sent to {{count}} selected terminal(s).",
+    "settings": "Settings",
+    "enableRightClickCopyPaste": "Enable right‑click copy/paste",
+    "shareIdeas": "Have ideas for what should come next for ssh tools? Share them on"
+  },
+  "homepage": {
+    "loggedInTitle": "Logged in!",
+    "loggedInMessage": "You are logged in! Use the sidebar to access all available tools. To get started, create an SSH Host in the SSH Manager tab. Once created, you can connect to that host using the other apps in the sidebar.",
+    "failedToLoadAlerts": "Failed to load alerts",
+    "failedToDismissAlert": "Failed to dismiss alert"
+  },
+  "common": {
+    "close": "Close",
+    "online": "Online",
+    "offline": "Offline",
+    "maintenance": "Maintenance",
+    "degraded": "Degraded",
+    "discord": "Discord",
+    "error": "Error",
+    "warning": "Warning",
+    "info": "Info",
+    "success": "Success",
+    "loading": "Loading",
+    "required": "Required",
+    "optional": "Optional",
+    "toggleSidebar": "Toggle Sidebar",
+    "sidebar": "Sidebar",
+    "home": "Home",
+    "expired": "Expired",
+    "expiresToday": "Expires today",
+    "expiresTomorrow": "Expires tomorrow",
+    "expiresInDays": "Expires in {{days}} days",
+    "updateAvailable": "Update Available",
+    "sshPath": "SSH Path",
+    "localPath": "Local Path",
+    "loading": "Loading...",
+    "noAuthCredentials": "No authentication credentials available for this SSH host",
+    "noReleases": "No Releases",
+    "updatesAndReleases": "Updates & Releases",
+    "newVersionAvailable": "A new version ({{version}}) is available.",
+    "failedToFetchUpdateInfo": "Failed to fetch update information",
+    "preRelease": "Pre-release",
+    "noReleasesFound": "No releases found.",
+    "yourBackupCodes": "Your Backup Codes",
+    "sendResetCode": "Send Reset Code",
+    "verifyCode": "Verify Code",
+    "resetPassword": "Reset Password",
+    "resetCode": "Reset Code",
+    "newPassword": "New Password",
+    "sshPath": "SSH Path",
+    "localPath": "Local Path",
+    "folder": "Folder",
+    "file": "File",
+    "renamedSuccessfully": "renamed successfully",
+    "deletedSuccessfully": "deleted successfully",
+    "noAuthCredentials": "No authentication credentials available for this SSH host",
+    "noTunnelConnections": "No tunnel connections configured",
+    "sshTools": "SSH Tools",
+    "english": "English",
+    "chinese": "Chinese",
+    "login": "Login",
+    "logout": "Logout",
+    "register": "Register",
+    "username": "Username",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "back": "Back",
+    "email": "Email",
+    "submit": "Submit",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "add": "Add",
+    "search": "Search",
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "warning": "Warning",
+    "info": "Info",
+    "confirm": "Confirm",
+    "yes": "Yes",
+    "no": "No",
+    "ok": "OK",
+    "close": "Close",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "important": "Important",
+    "notEnabled": "Not Enabled",
+    "settingUp": "Setting up...",
+    "back": "Back",
+    "next": "Next",
+    "previous": "Previous",
+    "refresh": "Refresh",
+    "settings": "Settings",
+    "profile": "Profile",
+    "help": "Help",
+    "about": "About",
+    "language": "Language",
+    "autoDetect": "Auto-detect",
+    "changeAccountPassword": "Change your account password",
+    "enterSixDigitCode": "Enter the 6-digit code from the docker container logs for user:",
+    "enterNewPassword": "Enter your new password for user:",
+    "passwordsDoNotMatch": "Passwords do not match",
+    "passwordMinLength": "Password must be at least 6 characters long",
+    "passwordResetSuccess": "Password reset successfully! You can now log in with your new password.",
+    "failedToInitiatePasswordReset": "Failed to initiate password reset",
+    "failedToVerifyResetCode": "Failed to verify reset code",
+    "failedToCompletePasswordReset": "Failed to complete password reset"
+  },
+  "nav": {
+    "home": "Home",
+    "hosts": "Hosts",
+    "terminal": "Terminal",
+    "tunnels": "Tunnels",
+    "fileManager": "File Manager",
+    "serverStats": "Server Stats",
+    "admin": "Admin",
+    "tools": "Tools",
+    "newTab": "New Tab",
+    "splitScreen": "Split Screen",
+    "closeTab": "Close Tab",
+    "sshManager": "SSH Manager",
+    "hostManager": "Host Manager",
+    "cannotSplitTab": "Cannot split this tab"
+  },
+  "admin": {
+    "title": "Admin Settings",
+    "users": "Users",
+    "userManagement": "User Management",
+    "makeAdmin": "Make Admin",
+    "removeAdmin": "Remove Admin",
+    "deleteUser": "Delete User",
+    "allowRegistration": "Allow Registration",
+    "oidcSettings": "OIDC Settings",
+    "clientId": "Client ID",
+    "clientSecret": "Client Secret",
+    "issuerUrl": "Issuer URL",
+    "authorizationUrl": "Authorization URL",
+    "tokenUrl": "Token URL",
+    "updateSettings": "Update Settings",
+    "confirmDelete": "Are you sure you want to delete this user?",
+    "confirmMakeAdmin": "Are you sure you want to make this user an admin?",
+    "confirmRemoveAdmin": "Are you sure you want to remove admin privileges from this user?",
+    "externalAuthentication": "External Authentication (OIDC)",
+    "configureExternalProvider": "Configure external identity provider for OIDC/OAuth2 authentication.",
+    "userIdentifierPath": "User Identifier Path",
+    "displayNamePath": "Display Name Path",
+    "scopes": "Scopes",
+    "saving": "Saving...",
+    "saveConfiguration": "Save Configuration",
+    "reset": "Reset",
+    "success": "Success",
+    "loading": "Loading...",
+    "refresh": "Refresh",
+    "loadingUsers": "Loading users...",
+    "username": "Username",
+    "type": "Type",
+    "actions": "Actions",
+    "external": "External",
+    "local": "Local",
+    "adminManagement": "Admin Management",
+    "makeUserAdmin": "Make User Admin",
+    "adding": "Adding...",
+    "currentAdmins": "Current Admins",
+    "adminBadge": "Admin",
+    "removeAdminButton": "Remove Admin",
+    "general": "General",
+    "userRegistration": "User Registration",
+    "allowNewAccountRegistration": "Allow new account registration",
+    "missingRequiredFields": "Missing required fields: {{fields}}",
+    "oidcConfigurationUpdated": "OIDC configuration updated successfully!",
+    "failedToUpdateOidcConfig": "Failed to update OIDC configuration",
+    "enterUsernameToMakeAdmin": "Enter username to make admin",
+    "userIsNowAdmin": "User {{username}} is now an admin",
+    "failedToMakeUserAdmin": "Failed to make user admin",
+    "removeAdminStatus": "Remove admin status from {{username}}?",
+    "adminStatusRemoved": "Admin status removed from {{username}}",
+    "failedToRemoveAdminStatus": "Failed to remove admin status",
+    "deleteUser": "Delete user {{username}}? This cannot be undone.",
+    "userDeletedSuccessfully": "User {{username}} deleted successfully",
+    "failedToDeleteUser": "Failed to delete user",
+    "overrideUserInfoUrl": "Override User Info URL (not required)"
+  },
+  "hosts": {
+    "title": "Host Manager",
+    "sshHosts": "SSH Hosts",
+    "noHosts": "No SSH Hosts",
+    "noHostsMessage": "You haven't added any SSH hosts yet. Click \"Add Host\" to get started.",
+    "loadingHosts": "Loading hosts...",
+    "failedToLoadHosts": "Failed to load hosts",
+    "retry": "Retry",
+    "refresh": "Refresh",
+    "hostsCount": "{{count}} hosts",
+    "importJson": "Import JSON",
+    "importing": "Importing...",
+    "importJsonTitle": "Import SSH Hosts from JSON",
+    "importJsonDesc": "Upload a JSON file to bulk import multiple SSH hosts (max 100).",
+    "downloadSample": "Download Sample",
+    "formatGuide": "Format Guide",
+    "uncategorized": "Uncategorized",
+    "confirmDelete": "Are you sure you want to delete \"{{name}}\"?",
+    "failedToDeleteHost": "Failed to delete host",
+    "jsonMustContainHosts": "JSON must contain a \"hosts\" array or be an array of hosts",
+    "noHostsInJson": "No hosts found in JSON file",
+    "maxHostsAllowed": "Maximum 100 hosts allowed per import",
+    "importCompleted": "Import completed: {{success}} successful, {{failed}} failed",
+    "importFailed": "Import failed",
+    "importError": "Import error",
+    "failedToImportJson": "Failed to import JSON file",
+    "connectionDetails": "Connection Details",
+    "organization": "Organization",
+    "ipAddress": "IP Address",
+    "port": "Port",
+    "name": "Name",
+    "username": "Username",
+    "folder": "Folder",
+    "tags": "Tags",
+    "pin": "Pin",
+    "passwordRequired": "Password is required when using password authentication",
+    "sshKeyRequired": "SSH Private Key is required when using key authentication",
+    "keyTypeRequired": "Key Type is required when using key authentication",
+    "mustSelectValidSshConfig": "Must select a valid SSH configuration from the list",
+    "addHost": "Add Host",
+    "editHost": "Edit Host",
+    "updateHost": "Update Host",
+    "hostUpdatedSuccessfully": "Host \"{{name}}\" updated successfully!",
+    "hostAddedSuccessfully": "Host \"{{name}}\" added successfully!",
+    "hostDeletedSuccessfully": "Host \"{{name}}\" deleted successfully!",
+    "failedToSaveHost": "Failed to save host. Please try again.",
+    "enableTerminal": "Enable Terminal",
+    "enableTerminalDesc": "Enable/disable host visibility in Terminal tab",
+    "enableTunnel": "Enable Tunnel",
+    "enableTunnelDesc": "Enable/disable host visibility in Tunnel tab",
+    "enableFileManager": "Enable File Manager",
+    "enableFileManagerDesc": "Enable/disable host visibility in File Manager tab",
+    "defaultPath": "Default Path",
+    "defaultPathDesc": "Default directory when opening file manager for this host",
+    "tunnelConnections": "Tunnel Connections",
+    "connection": "Connection",
+    "remove": "Remove",
+    "sourcePort": "Source Port",
+    "sourcePortDesc": " (Source refers to the Current Connection Details in the General tab)",
+    "endpointPort": "Endpoint Port",
+    "endpointSshConfig": "Endpoint SSH Configuration",
+    "tunnelForwardDescription": "This tunnel will forward traffic from port {{sourcePort}} on the source machine (current connection details in general tab) to port {{endpointPort}} on the endpoint machine.",
+    "maxRetries": "Max Retries",
+    "maxRetriesDescription": "Maximum number of retry attempts for tunnel connection.",
+    "retryInterval": "Retry Interval (seconds)",
+    "retryIntervalDescription": "Time to wait between retry attempts.",
+    "autoStartContainer": "Auto Start on Container Launch",
+    "autoStartDesc": "Automatically start this tunnel when the container launches",
+    "addConnection": "Add Tunnel Connection",
+    "sshpassRequired": "Sshpass Required For Password Authentication",
+    "sshpassRequiredDesc": "For password authentication in tunnels, sshpass must be installed on the system.",
+    "otherInstallMethods": "Other installation methods:",
+    "centosRhelFedora": "CentOS/RHEL/Fedora",
+    "macos": "macOS",
+    "windows": "Windows",
+    "sshServerConfigRequired": "SSH Server Configuration Required",
+    "sshServerConfigDesc": "For tunnel connections, the SSH server must be configured to allow port forwarding:",
+    "gatewayPortsYes": "to bind remote ports to all interfaces",
+    "allowTcpForwardingYes": "to enable port forwarding",
+    "permitRootLoginYes": "if using root user for tunneling",
+    "editSshConfig": "Edit /etc/ssh/sshd_config and restart SSH: sudo systemctl restart sshd",
+    "upload": "Upload",
+    "authentication": "Authentication",
+    "password": "Password",
+    "key": "Key",
+    "sshPrivateKey": "SSH Private Key",
+    "keyPassword": "Key Password",
+    "keyType": "Key Type",
+    "autoDetect": "Auto-detect",
+    "rsa": "RSA",
+    "ed25519": "ED25519",
+    "ecdsaNistP256": "ECDSA NIST P-256",
+    "ecdsaNistP384": "ECDSA NIST P-384",
+    "ecdsaNistP521": "ECDSA NIST P-521",
+    "dsa": "DSA",
+    "rsaSha2256": "RSA SHA2-256",
+    "rsaSha2512": "RSA SHA2-512",
+    "updateKey": "Update Key",
+    "addTagsSpaceToAdd": "add tags (space to add)",
+    "terminalBadge": "Terminal",
+    "tunnelBadge": "Tunnel",
+    "fileManagerBadge": "File Manager",
+    "general": "General",
+    "terminal": "Terminal",
+    "tunnel": "Tunnel",
+    "fileManager": "File Manager",
+    "hostViewer": "Host Viewer"
+  },
+  "terminal": {
+    "title": "Terminal",
+    "connect": "Connect to Host",
+    "disconnect": "Disconnect",
+    "clear": "Clear",
+    "copy": "Copy",
+    "paste": "Paste",
+    "find": "Find",
+    "fullscreen": "Fullscreen",
+    "splitHorizontal": "Split Horizontal",
+    "splitVertical": "Split Vertical",
+    "closePanel": "Close Panel",
+    "reconnect": "Reconnect",
+    "sessionEnded": "Session Ended",
+    "connectionLost": "Connection Lost",
+    "error": "ERROR",
+    "disconnected": "Disconnected",
+    "connectionClosed": "Connection closed",
+    "connectionError": "Connection error"
+  },
+  "fileManager": {
+    "title": "File Manager",
+    "file": "File",
+    "folder": "Folder",
+    "connectToSsh": "Connect to SSH to use file operations",
+    "uploadFile": "Upload File",
+    "newFile": "New File",
+    "newFolder": "New Folder",
+    "rename": "Rename",
+    "renameItem": "Rename Item",
+    "deleteItem": "Delete Item",
+    "currentPath": "Current Path",
+    "uploadFileTitle": "Upload File",
+    "maxFileSize": "Max: 100MB (JSON) / 200MB (Binary)",
+    "removeFile": "Remove File",
+    "clickToSelectFile": "Click to select a file",
+    "chooseFile": "Choose File",
+    "uploading": "Uploading...",
+    "createNewFile": "Create New File",
+    "fileName": "File Name",
+    "creating": "Creating...",
+    "createFile": "Create File",
+    "createNewFolder": "Create New Folder",
+    "folderName": "Folder Name",
+    "createFolder": "Create Folder",
+    "warningCannotUndo": "Warning: This action cannot be undone",
+    "itemPath": "Item Path",
+    "thisIsDirectory": "This is a directory (will delete recursively)",
+    "deleting": "Deleting...",
+    "currentPathLabel": "Current Path",
+    "newName": "New Name",
+    "thisIsDirectoryRename": "This is a directory",
+    "renaming": "Renaming...",
+    "fileUploadedSuccessfully": "File \"{{name}}\" uploaded successfully",
+    "failedToUploadFile": "Failed to upload file",
+    "fileCreatedSuccessfully": "File \"{{name}}\" created successfully",
+    "failedToCreateFile": "Failed to create file",
+    "folderCreatedSuccessfully": "Folder \"{{name}}\" created successfully",
+    "failedToCreateFolder": "Failed to create folder",
+    "itemDeletedSuccessfully": "{{type}} deleted successfully",
+    "failedToDeleteItem": "Failed to delete item",
+    "itemRenamedSuccessfully": "{{type}} renamed successfully",
+    "failedToRenameItem": "Failed to rename item",
+    "upload": "Upload",
+    "download": "Download",
+    "newFile": "New File",
+    "newFolder": "New Folder",
+    "rename": "Rename",
+    "delete": "Delete",
+    "permissions": "Permissions",
+    "size": "Size",
+    "modified": "Modified",
+    "path": "Path",
+    "fileName": "File Name",
+    "folderName": "Folder Name",
+    "confirmDelete": "Are you sure you want to delete {{name}}?",
+    "uploadSuccess": "File uploaded successfully",
+    "uploadFailed": "File upload failed",
+    "downloadSuccess": "File downloaded successfully",
+    "downloadFailed": "File download failed",
+    "permissionDenied": "Permission denied",
+    "checkDockerLogs": "Check the Docker logs for detailed error information",
+    "internalServerError": "Internal server error occurred",
+    "serverError": "Server Error",
+    "error": "Error",
+    "requestFailed": "Request failed with status code",
+    "unknown": "unknown",
+    "cannotReadFile": "Cannot read file",
+    "noSshSessionId": "No SSH session ID available",
+    "noFilePath": "No file path available",
+    "noCurrentHost": "No current host available",
+    "fileSavedSuccessfully": "File saved successfully",
+    "saveTimeout": "Save operation timed out. The file may have been saved successfully, but the operation took too long to complete. Check the Docker logs for confirmation.",
+    "failedToSaveFile": "Failed to save file",
+    "folder": "Folder",
+    "file": "File",
+    "deletedSuccessfully": "deleted successfully",
+    "failedToDeleteItem": "Failed to delete item",
+    "connectToServer": "Connect to a Server",
+    "selectServerToEdit": "Select a server from the sidebar to start editing files",
+    "fileOperations": "File Operations",
+    "confirmDeleteMessage": "Are you sure you want to delete <strong>{{name}}</strong>?",
+    "deleteDirectoryWarning": "This will delete the folder and all its contents.",
+    "actionCannotBeUndone": "This action cannot be undone.",
+    "recent": "Recent",
+    "pinned": "Pinned",
+    "folderShortcuts": "Folder Shortcuts",
+    "noRecentFiles": "No recent files.",
+    "noPinnedFiles": "No pinned files.",
+    "enterFolderPath": "Enter folder path",
+    "noShortcuts": "No shortcuts.",
+    "searchFilesAndFolders": "Search files and folders...",
+    "noFilesOrFoldersFound": "No files or folders found.",
+    "failedToConnectSSH": "Failed to connect to SSH",
+    "failedToReconnectSSH": "Failed to reconnect SSH session",
+    "failedToListFiles": "Failed to list files",
+    "fetchHomeDataTimeout": "Fetch home data timed out",
+    "sshStatusCheckTimeout": "SSH status check timed out",
+    "sshReconnectionTimeout": "SSH reconnection timed out",
+    "saveOperationTimeout": "Save operation timed out",
+    "cannotSaveFile": "Cannot save file"
+  },
+  "tunnels": {
+    "title": "SSH Tunnels",
+    "noSshTunnels": "No SSH Tunnels",
+    "createFirstTunnelMessage": "You haven't created any SSH tunnels yet. Configure tunnel connections in the Host Manager to get started.",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "connecting": "Connecting...",
+    "disconnecting": "Disconnecting...",
+    "unknown": "Unknown",
+    "error": "Error",
+    "failed": "Failed",
+    "retrying": "Retrying",
+    "waiting": "Waiting",
+    "waitingForRetry": "Waiting for retry",
+    "retryingConnection": "Retrying connection",
+    "canceling": "Canceling...",
+    "connect": "Connect",
+    "disconnect": "Disconnect",
+    "cancel": "Cancel",
+    "port": "Port",
+    "attempt": "Attempt {{current}} of {{max}}",
+    "nextRetryIn": "Next retry in {{seconds}} seconds",
+    "checkDockerLogs": "Check your Docker logs for the error reason, join the",
+    "noTunnelConnections": "No tunnel connections configured",
+    "tunnelConnections": "Tunnel Connections",
+    "addTunnel": "Add Tunnel",
+    "editTunnel": "Edit Tunnel",
+    "deleteTunnel": "Delete Tunnel",
+    "tunnelName": "Tunnel Name",
+    "localPort": "Local Port",
+    "remoteHost": "Remote Host",
+    "remotePort": "Remote Port",
+    "autoStart": "Auto Start",
+    "status": "Status",
+    "active": "Active",
+    "inactive": "Inactive",
+    "start": "Start",
+    "stop": "Stop",
+    "restart": "Restart",
+    "connectionType": "Connection Type",
+    "local": "Local",
+    "remote": "Remote",
+    "dynamic": "Dynamic",
+    "noSshTunnels": "No SSH Tunnels",
+    "createFirstTunnelMessage": "Create your first SSH tunnel to get started. Use the SSH Manager to add hosts with tunnel connections.",
+    "unknown": "Unknown",
+    "connected": "Connected",
+    "connecting": "Connecting...",
+    "disconnecting": "Disconnecting...",
+    "disconnected": "Disconnected",
+    "portMapping": "Port {{sourcePort}} → {{endpointHost}}:{{endpointPort}}",
+    "disconnect": "Disconnect",
+    "connect": "Connect",
+    "canceling": "Canceling...",
+    "endpointHostNotFound": "Endpoint host not found"
+  },
+  "serverStats": {
+    "title": "Server Statistics",
+    "cpu": "CPU",
+    "memory": "Memory",
+    "disk": "Disk",
+    "network": "Network",
+    "uptime": "Uptime",
+    "loadAverage": "Load Average",
+    "processes": "Processes",
+    "connections": "Connections",
+    "usage": "Usage",
+    "available": "Available",
+    "total": "Total",
+    "free": "Free",
+    "used": "Used",
+    "percentage": "Percentage",
+    "refreshStatusAndMetrics": "Refresh status and metrics",
+    "refreshStatus": "Refresh Status",
+    "fileManagerAlreadyOpen": "File Manager already open for this host",
+    "openFileManager": "Open File Manager",
+    "cpuCores_one": "{{count}} CPU",
+    "cpuCores_other": "{{count}} CPUs",
+    "naCpus": "N/A CPU(s)",
+    "loadAverage": "Avg: {{avg1}}, {{avg5}}, {{avg15}}",
+    "loadAverageNA": "Avg: N/A",
+    "cpuUsage": "CPU Usage",
+    "memoryUsage": "Memory Usage",
+    "rootStorageSpace": "Root Storage Space",
+    "of": "of",
+    "feedbackMessage": "Have ideas for what should come next for server management? Share them on"
+  },
+  "auth": {
+    "loginTitle": "Login to Termix",
+    "registerTitle": "Create Account",
+    "loginButton": "Login",
+    "registerButton": "Register",
+    "forgotPassword": "Forgot Password?",
+    "rememberMe": "Remember Me",
+    "noAccount": "Don't have an account?",
+    "hasAccount": "Already have an account?",
+    "loginSuccess": "Login successful",
+    "loginFailed": "Login failed",
+    "registerSuccess": "Registration successful",
+    "registerFailed": "Registration failed",
+    "logoutSuccess": "Logged out successfully",
+    "invalidCredentials": "Invalid username or password",
+    "accountCreated": "Account created successfully",
+    "passwordReset": "Password reset link sent",
+    "twoFactorAuth": "Two-Factor Authentication",
+    "enterCode": "Enter verification code",
+    "backupCode": "Or use backup code",
+    "verifyCode": "Verify Code",
+    "enableTwoFactor": "Enable Two-Factor Authentication",
+    "disableTwoFactor": "Disable Two-Factor Authentication",
+    "scanQRCode": "Scan this QR code with your authenticator app",
+    "backupCodes": "Backup Codes",
+    "saveBackupCodes": "Save these backup codes in a safe place",
+    "twoFactorEnabledSuccess": "Two-factor authentication enabled successfully!",
+    "twoFactorDisabled": "Two-factor authentication disabled",
+    "newBackupCodesGenerated": "New backup codes generated",
+    "backupCodesDownloaded": "Backup codes downloaded",
+    "pleaseEnterSixDigitCode": "Please enter a 6-digit code",
+    "invalidVerificationCode": "Invalid verification code",
+    "failedToDisableTotp": "Failed to disable TOTP",
+    "failedToGenerateBackupCodes": "Failed to generate backup codes",
+    "enterPassword": "Enter your password",
+    "lockedOidcAuth": "Locked (OIDC Auth)",
+    "twoFactorTitle": "Two-Factor Authentication",
+    "twoFactorProtected": "Your account is protected with two-factor authentication",
+    "twoFactorActive": "Two-factor authentication is currently active on your account",
+    "disable2FA": "Disable 2FA",
+    "disableTwoFactorWarning": "Disabling two-factor authentication will make your account less secure",
+    "passwordOrTotpCode": "Password or TOTP Code",
+    "or": "Or",
+    "generateNewBackupCodesText": "Generate new backup codes if you've lost your existing ones",
+    "generateNewBackupCodes": "Generate New Backup Codes",
+    "yourBackupCodes": "Your Backup Codes",
+    "download": "Download",
+    "setupTwoFactorTitle": "Set Up Two-Factor Authentication",
+    "step1ScanQR": "Step 1: Scan the QR code with your authenticator app",
+    "manualEntryCode": "Manual Entry Code",
+    "cannotScanQRText": "If you can't scan the QR code, enter this code manually in your authenticator app",
+    "nextVerifyCode": "Next: Verify Code",
+    "verifyAuthenticator": "Verify Your Authenticator",
+    "step2EnterCode": "Step 2: Enter the 6-digit code from your authenticator app",
+    "verificationCode": "Verification Code",
+    "back": "Back",
+    "verifyAndEnable": "Verify and Enable",
+    "saveBackupCodesTitle": "Save Your Backup Codes",
+    "step3StoreCodesSecurely": "Step 3: Store these codes in a safe place",
+    "importantBackupCodesText": "Save these backup codes in a secure location. You can use them to access your account if you lose your authenticator device.",
+    "completeSetup": "Complete Setup",
+    "notEnabledText": "Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app when signing in.",
+    "enableTwoFactorButton": "Enable Two-Factor Authentication",
+    "addExtraSecurityLayer": "Add an extra layer of security to your account",
+    "firstUser": "First User",
+    "firstUserMessage": "You are the first user and will be made an admin. You can view admin settings in the sidebar user dropdown. If you think this is a mistake, check the docker logs, or create a",
+    "external": "External",
+    "loginWithExternal": "Login with External Provider",
+    "loginWithExternalDesc": "Login using your configured external identity provider",
+    "resetPasswordButton": "Reset Password",
+    "sendResetCode": "Send Reset Code",
+    "resetCodeDesc": "Enter your username to receive a password reset code. The code will be logged in the docker container logs.",
+    "resetCode": "Reset Code",
+    "verifyCodeButton": "Verify Code",
+    "enterResetCode": "Enter the 6-digit code from the docker container logs for user:",
+    "goToLogin": "Go to Login",
+    "newPassword": "New Password",
+    "confirmNewPassword": "Confirm Password",
+    "enterNewPassword": "Enter your new password for user:",
+    "passwordResetSuccess": "Success!",
+    "passwordResetSuccessDesc": "Your password has been successfully reset! You can now log in with your new password.",
+    "signUp": "Sign Up"
+  },
+  "errors": {
+    "notFound": "Page not found",
+    "unauthorized": "Unauthorized access",
+    "forbidden": "Access forbidden",
+    "serverError": "Server error",
+    "networkError": "Network error",
+    "databaseConnection": "Could not connect to the database. Please try again later.",
+    "unknownError": "Unknown error",
+    "failedPasswordReset": "Failed to initiate password reset",
+    "failedVerifyCode": "Failed to verify reset code",
+    "failedCompleteReset": "Failed to complete password reset",
+    "invalidTotpCode": "Invalid TOTP code",
+    "failedOidcLogin": "Failed to start OIDC login",
+    "failedUserInfo": "Failed to get user info after OIDC login",
+    "oidcAuthFailed": "OIDC authentication failed",
+    "noTokenReceived": "No token received from login",
+    "invalidAuthUrl": "Invalid authorization URL received from backend",
+    "connectionTimeout": "Connection timeout",
+    "invalidInput": "Invalid input",
+    "requiredField": "This field is required",
+    "minLength": "Minimum length is {{min}}",
+    "maxLength": "Maximum length is {{max}}",
+    "invalidEmail": "Invalid email address",
+    "passwordMismatch": "Passwords do not match",
+    "weakPassword": "Password is too weak",
+    "usernameExists": "Username already exists",
+    "emailExists": "Email already exists",
+    "loadFailed": "Failed to load data",
+    "saveError": "Failed to save"
+  },
+  "messages": {
+    "saveSuccess": "Saved successfully",
+    "saveError": "Failed to save",
+    "deleteSuccess": "Deleted successfully",
+    "deleteError": "Failed to delete",
+    "updateSuccess": "Updated successfully",
+    "updateError": "Failed to update",
+    "copySuccess": "Copied to clipboard",
+    "copyError": "Failed to copy",
+    "copiedToClipboard": "{{item}} copied to clipboard",
+    "connectionEstablished": "Connection established",
+    "connectionClosed": "Connection closed",
+    "reconnecting": "Reconnecting...",
+    "processing": "Processing...",
+    "pleaseWait": "Please wait...",
+    "registrationDisabled": "New account registration is currently disabled by an admin. Please log in or contact an administrator."
+  },
+  "profile": {
+    "title": "User Profile",
+    "description": "Manage your account settings and security",
+    "security": "Security",
+    "changePassword": "Change Password",
+    "twoFactorAuth": "Two-Factor Authentication",
+    "accountInfo": "Account Information",
+    "role": "Role",
+    "admin": "Administrator",
+    "user": "User",
+    "authMethod": "Authentication Method",
+    "local": "Local",
+    "external": "External (OIDC)",
+    "selectPreferredLanguage": "Select your preferred language for the interface"
+  },
+  "placeholders": {
+    "enterCode": "000000",
+    "ipAddress": "127.0.0.1",
+    "port": "22",
+    "maxRetries": "3",
+    "retryInterval": "10",
+    "language": "Language",
+    "username": "username",
+    "hostname": "host name",
+    "folder": "folder",
+    "password": "password",
+    "keyPassword": "key password",
+    "sshConfig": "endpoint ssh configuration",
+    "homePath": "/home",
+    "clientId": "your-client-id",
+    "clientSecret": "your-client-secret",
+    "authUrl": "https://your-provider.com/application/o/authorize/",
+    "redirectUrl": "https://your-provider.com/application/o/termix/",
+    "tokenUrl": "https://your-provider.com/application/o/token/",
+    "userIdField": "sub",
+    "usernameField": "name",
+    "scopes": "openid email profile",
+    "enterUsername": "Enter username to make admin",
+    "searchHosts": "Search hosts by name, username, IP, folder, tags...",
+    "enterPassword": "Enter your password",
+    "totpCode": "6-digit TOTP code",
+    "searchHostsAny": "Search hosts by any info...",
+    "confirmPassword": "Enter your password to confirm",
+    "typeHere": "Type here",
+    "fileName": "Enter file name (e.g., example.txt)",
+    "folderName": "Enter folder name",
+    "fullPath": "Enter full path to item",
+    "currentPath": "Enter current path to item",
+    "newName": "Enter new name"
+  },
+  "leftSidebar": {
+    "failedToLoadHosts": "Failed to load hosts",
+    "noFolder": "No Folder",
+    "passwordRequired": "Password is required",
+    "failedToDeleteAccount": "Failed to delete account",
+    "failedToMakeUserAdmin": "Failed to make user admin",
+    "userIsNowAdmin": "User {{username}} is now an admin",
+    "removeAdminConfirm": "Are you sure you want to remove admin status from {{username}}?",
+    "deleteUserConfirm": "Are you sure you want to delete user {{username}}? This action cannot be undone.",
+    "deleteAccount": "Delete Account",
+    "closeDeleteAccount": "Close Delete Account",
+    "deleteAccountWarning": "This action cannot be undone. This will permanently delete your account and all associated data.",
+    "deleteAccountWarningDetails": "Deleting your account will remove all your data including SSH hosts, configurations, and settings. This action is irreversible.",
+    "cannotDeleteAccount": "Cannot Delete Account",
+    "lastAdminWarning": "You are the last admin user. You cannot delete your account as this would leave the system without any administrators. Please make another user an admin first, or contact system support.",
+    "confirmPassword": "Confirm Password",
+    "deleting": "Deleting...",
+    "cancel": "Cancel"
+  },
+  "interface": {
+    "sidebar": "Sidebar",
+    "toggleSidebar": "Toggle Sidebar",
+    "close": "Close",
+    "online": "Online",
+    "offline": "Offline",
+    "maintenance": "Maintenance",
+    "degraded": "Degraded",
+    "noTunnelConnections": "No tunnel connections configured",
+    "discord": "Discord",
+    "connectToSshForOperations": "Connect to SSH to use file operations",
+    "uploadFile": "Upload File",
+    "newFile": "New File",
+    "newFolder": "New Folder",
+    "rename": "Rename",
+    "deleteItem": "Delete Item",
+    "createNewFile": "Create New File",
+    "createNewFolder": "Create New Folder",
+    "deleteItem": "Delete Item",
+    "renameItem": "Rename Item",
+    "clickToSelectFile": "Click to select a file",
+    "noSshHosts": "No SSH Hosts",
+    "sshHosts": "SSH Hosts",
+    "importSshHosts": "Import SSH Hosts from JSON",
+    "clientId": "Client ID",
+    "clientSecret": "Client Secret",
+    "error": "Error",
+    "warning": "Warning",
+    "deleteAccount": "Delete Account",
+    "closeDeleteAccount": "Close Delete Account",
+    "cannotDeleteAccount": "Cannot Delete Account",
+    "confirmPassword": "Confirm Password",
+    "deleting": "Deleting...",
+    "externalAuth": "External Authentication (OIDC)",
+    "configureExternalProvider": "Configure external identity provider for",
+    "waitingForRetry": "Waiting for retry",
+    "retryingConnection": "Retrying connection",
+    "resetSplitSizes": "Reset split sizes",
+    "sshManagerAlreadyOpen": "SSH Manager already open",
+    "disabledDuringSplitScreen": "Disabled during split screen",
+    "unknown": "Unknown",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "maxRetriesExhausted": "Max retries exhausted",
+    "endpointHostNotFound": "Endpoint host not found",
+    "administrator": "Administrator",
+    "user": "User",
+    "external": "External",
+    "local": "Local",
+    "saving": "Saving...",
+    "saveConfiguration": "Save Configuration",
+    "loading": "Loading...",
+    "refresh": "Refresh",
+    "adding": "Adding...",
+    "makeAdmin": "Make Admin",
+    "verifying": "Verifying...",
+    "verifyAndEnable": "Verify and Enable",
+    "secretKey": "Secret key",
+    "totpQrCode": "TOTP QR Code",
+    "passwordRequired": "Password is required when using password authentication",
+    "sshKeyRequired": "SSH Private Key is required when using key authentication",
+    "keyTypeRequired": "Key Type is required when using key authentication",
+    "validSshConfigRequired": "Must select a valid SSH configuration from the list",
+    "updateHost": "Update Host",
+    "addHost": "Add Host",
+    "editHost": "Edit Host",
+    "pinConnection": "Pin Connection",
+    "authentication": "Authentication",
+    "password": "Password",
+    "key": "Key",
+    "sshPrivateKey": "SSH Private Key",
+    "keyPassword": "Key Password",
+    "keyType": "Key Type",
+    "enableTerminal": "Enable Terminal",
+    "enableTunnel": "Enable Tunnel",
+    "enableFileManager": "Enable File Manager",
+    "defaultPath": "Default Path",
+    "tunnelConnections": "Tunnel Connections",
+    "maxRetries": "Max Retries",
+    "upload": "Upload",
+    "updateKey": "Update Key",
+    "productionFolder": "Production",
+    "databaseServer": "Database Server",
+    "unknownError": "Unknown error",
+    "failedToInitiatePasswordReset": "Failed to initiate password reset",
+    "failedToVerifyResetCode": "Failed to verify reset code",
+    "failedToCompletePasswordReset": "Failed to complete password reset",
+    "invalidTotpCode": "Invalid TOTP code",
+    "failedToStartOidcLogin": "Failed to start OIDC login",
+    "failedToGetUserInfoAfterOidc": "Failed to get user info after OIDC login",
+    "loginWithExternalProvider": "Login with external provider",
+    "loginWithExternal": "Login with External Provider",
+    "sendResetCode": "Send Reset Code",
+    "verifyCode": "Verify Code",
+    "resetPassword": "Reset Password",
+    "login": "Login",
+    "signUp": "Sign Up",
+    "failedToUpdateOidcConfig": "Failed to update OIDC configuration",
+    "failedToMakeUserAdmin": "Failed to make user admin",
+    "failedToStartTotpSetup": "Failed to start TOTP setup",
+    "invalidVerificationCode": "Invalid verification code",
+    "failedToDisableTotp": "Failed to disable TOTP",
+    "failedToGenerateBackupCodes": "Failed to generate backup codes"
+  }
+}

public/locales/zh/translation.json

@@ -0,0 +1,855 @@
+{
+  "sshTools": {
+    "title": "SSH 工具",
+    "closeTools": "关闭 SSH 工具",
+    "keyRecording": "按键录制",
+    "startKeyRecording": "开始按键录制",
+    "stopKeyRecording": "停止按键录制",
+    "selectTerminals": "选择终端：",
+    "typeCommands": "输入命令（支持所有按键）：",
+    "commandsWillBeSent": "命令将发送到 {{count}} 个选中的终端。",
+    "settings": "设置",
+    "enableRightClickCopyPaste": "启用右键复制/粘贴",
+    "shareIdeas": "对 SSH 工具有什么想法？在此分享"
+  },
+  "homepage": {
+    "loggedInTitle": "登录成功！",
+    "loggedInMessage": "您已登录！使用侧边栏访问所有可用工具。要开始使用，请在 SSH 管理器选项卡中创建 SSH 主机。创建后，您可以使用侧边栏中的其他应用程序连接到该主机。",
+    "failedToLoadAlerts": "加载警报失败",
+    "failedToDismissAlert": "关闭警报失败"
+  },
+  "common": {
+    "close": "关闭",
+    "online": "在线",
+    "offline": "离线",
+    "maintenance": "维护中",
+    "degraded": "降级",
+    "discord": "Discord",
+    "error": "错误",
+    "warning": "警告",
+    "info": "信息",
+    "success": "成功",
+    "loading": "加载中",
+    "required": "必填",
+    "optional": "可选",
+    "toggleSidebar": "切换侧边栏",
+    "sidebar": "侧边栏",
+    "home": "首页",
+    "expired": "已过期",
+    "expiresToday": "今天过期",
+    "expiresTomorrow": "明天过期",
+    "expiresInDays": "{{days}} 天后过期",
+    "updateAvailable": "有可用更新",
+    "sshPath": "SSH 路径",
+    "localPath": "本地路径",
+    "loading": "加载中...",
+    "noAuthCredentials": "此 SSH 主机没有可用的身份验证凭据",
+    "noReleases": "没有发布版本",
+    "updatesAndReleases": "更新与发布",
+    "newVersionAvailable": "有新版本 ({{version}}) 可用。",
+    "failedToFetchUpdateInfo": "获取更新信息失败",
+    "preRelease": "预发布版本",
+    "noReleasesFound": "未找到发布版本。",
+    "yourBackupCodes": "您的备份代码",
+    "sendResetCode": "发送重置代码",
+    "verifyCode": "验证代码",
+    "resetPassword": "重置密码",
+    "resetCode": "重置代码",
+    "newPassword": "新密码",
+    "sshPath": "SSH 路径",
+    "localPath": "本地路径",
+    "folder": "文件夹",
+    "file": "文件",
+    "renamedSuccessfully": "重命名成功",
+    "deletedSuccessfully": "删除成功",
+    "noAuthCredentials": "此 SSH 主机没有可用的认证凭据",
+    "noTunnelConnections": "没有配置隧道连接",
+    "sshTools": "SSH 工具",
+    "english": "英语",
+    "chinese": "中文",
+    "login": "登录",
+    "logout": "登出",
+    "register": "注册",
+    "username": "用户名",
+    "password": "密码",
+    "confirmPassword": "确认密码",
+    "back": "返回",
+    "email": "邮箱",
+    "submit": "提交",
+    "cancel": "取消",
+    "save": "保存",
+    "delete": "删除",
+    "edit": "编辑",
+    "add": "添加",
+    "search": "搜索",
+    "loading": "加载中...",
+    "error": "错误",
+    "success": "成功",
+    "warning": "警告",
+    "info": "信息",
+    "confirm": "确认",
+    "yes": "是",
+    "no": "否",
+    "ok": "确定",
+    "close": "关闭",
+    "enabled": "已启用",
+    "disabled": "已禁用",
+    "important": "重要",
+    "notEnabled": "未启用",
+    "settingUp": "设置中...",
+    "back": "返回",
+    "next": "下一步",
+    "previous": "上一步",
+    "refresh": "刷新",
+    "settings": "设置",
+    "profile": "个人资料",
+    "help": "帮助",
+    "about": "关于",
+    "language": "语言",
+    "autoDetect": "自动检测",
+    "changeAccountPassword": "修改您的账户密码",
+    "enterSixDigitCode": "输入来自 docker 容器日志中用户的 6 位数代码：",
+    "enterNewPassword": "为用户输入新密码：",
+    "passwordsDoNotMatch": "密码不匹配",
+    "passwordMinLength": "密码长度至少为 6 个字符",
+    "passwordResetSuccess": "密码重置成功！您现在可以使用新密码登录。",
+    "failedToInitiatePasswordReset": "启动密码重置失败",
+    "failedToVerifyResetCode": "验证重置代码失败",
+    "failedToCompletePasswordReset": "完成密码重置失败"
+  },
+  "nav": {
+    "home": "首页",
+    "hosts": "主机",
+    "terminal": "终端",
+    "tunnels": "隧道",
+    "fileManager": "文件管理器",
+    "serverStats": "服务器统计",
+    "admin": "管理员",
+    "tools": "工具",
+    "newTab": "新标签页",
+    "splitScreen": "分屏",
+    "closeTab": "关闭标签页",
+    "sshManager": "SSH 管理器",
+    "hostManager": "主机管理器",
+    "cannotSplitTab": "无法分割此标签页"
+  },
+  "admin": {
+    "title": "管理员设置",
+    "users": "用户",
+    "userManagement": "用户管理",
+    "makeAdmin": "设为管理员",
+    "removeAdmin": "移除管理员",
+    "deleteUser": "删除用户",
+    "allowRegistration": "允许注册",
+    "oidcSettings": "OIDC 设置",
+    "clientId": "客户端 ID",
+    "clientSecret": "客户端密钥",
+    "issuerUrl": "颁发者 URL",
+    "authorizationUrl": "授权 URL",
+    "tokenUrl": "令牌 URL",
+    "updateSettings": "更新设置",
+    "confirmDelete": "确定要删除此用户吗？",
+    "confirmMakeAdmin": "确定要将此用户设为管理员吗？",
+    "confirmRemoveAdmin": "确定要移除此用户的管理员权限吗？",
+    "externalAuthentication": "外部认证 (OIDC)",
+    "configureExternalProvider": "配置 OIDC/OAuth2 认证的外部身份提供者。",
+    "userIdentifierPath": "用户标识符路径",
+    "displayNamePath": "显示名称路径",
+    "scopes": "作用域",
+    "saving": "保存中...",
+    "saveConfiguration": "保存配置",
+    "reset": "重置",
+    "success": "成功",
+    "loading": "加载中...",
+    "refresh": "刷新",
+    "loadingUsers": "加载用户中...",
+    "username": "用户名",
+    "type": "类型",
+    "actions": "操作",
+    "external": "外部",
+    "local": "本地",
+    "adminManagement": "管理员管理",
+    "makeUserAdmin": "设置用户为管理员",
+    "adding": "添加中...",
+    "currentAdmins": "当前管理员",
+    "adminBadge": "管理员",
+    "removeAdminButton": "移除管理员",
+    "general": "常规",
+    "userRegistration": "用户注册",
+    "allowNewAccountRegistration": "允许新账户注册",
+    "missingRequiredFields": "缺少必填字段：{{fields}}",
+    "oidcConfigurationUpdated": "OIDC 配置更新成功！",
+    "failedToUpdateOidcConfig": "更新 OIDC 配置失败",
+    "enterUsernameToMakeAdmin": "输入用户名以设为管理员",
+    "userIsNowAdmin": "用户 {{username}} 现在是管理员",
+    "failedToMakeUserAdmin": "设为管理员失败",
+    "removeAdminStatus": "移除 {{username}} 的管理员权限吗？",
+    "adminStatusRemoved": "已移除 {{username}} 的管理员权限",
+    "failedToRemoveAdminStatus": "移除管理员权限失败",
+    "deleteUser": "删除用户 {{username}} 吗？此操作无法撤销。",
+    "userDeletedSuccessfully": "用户 {{username}} 删除成功",
+    "failedToDeleteUser": "删除用户失败",
+    "overrideUserInfoUrl": "覆盖用户信息 URL（非必填）"
+  },
+  "hosts": {
+    "title": "主机管理",
+    "sshHosts": "SSH 主机",
+    "noHosts": "没有 SSH 主机",
+    "noHostsMessage": "您还没有添加任何 SSH 主机。点击\"添加主机\"开始使用。",
+    "loadingHosts": "加载主机中...",
+    "failedToLoadHosts": "加载主机失败",
+    "retry": "重试",
+    "refresh": "刷新",
+    "hostsCount": "{{count}} 个主机",
+    "importJson": "导入 JSON",
+    "importing": "导入中...",
+    "importJsonTitle": "从 JSON 导入 SSH 主机",
+    "importJsonDesc": "上传 JSON 文件以批量导入多个 SSH 主机（最多 100 个）。",
+    "downloadSample": "下载示例",
+    "formatGuide": "格式指南",
+    "uncategorized": "未分类",
+    "confirmDelete": "确定要删除 \"{{name}}\" 吗？",
+    "failedToDeleteHost": "删除主机失败",
+    "jsonMustContainHosts": "JSON 必须包含 \"hosts\" 数组或是一个主机数组",
+    "noHostsInJson": "JSON 文件中未找到主机",
+    "maxHostsAllowed": "每次导入最多允许 100 个主机",
+    "importCompleted": "导入完成：{{success}} 个成功，{{failed}} 个失败",
+    "importFailed": "导入失败",
+    "importError": "导入错误",
+    "failedToImportJson": "导入 JSON 文件失败",
+    "connectionDetails": "连接详情",
+    "organization": "组织",
+    "ipAddress": "IP 地址",
+    "port": "端口",
+    "name": "名称",
+    "username": "用户名",
+    "folder": "文件夹",
+    "tags": "标签",
+    "passwordRequired": "使用密码认证时需要密码",
+    "sshKeyRequired": "使用密钥认证时需要 SSH 私钥",
+    "keyTypeRequired": "使用密钥认证时需要密钥类型",
+    "mustSelectValidSshConfig": "必须从列表中选择有效的 SSH 配置",
+    "addHost": "添加主机",
+    "editHost": "编辑主机",
+    "deleteHost": "删除主机",
+    "hostName": "主机名",
+    "ipAddress": "IP 地址",
+    "port": "端口",
+    "authType": "认证类型",
+    "passwordAuth": "密码",
+    "keyAuth": "SSH 密钥",
+    "keyPassword": "密钥密码",
+    "keyType": "密钥类型",
+    "folder": "文件夹",
+    "tags": "标签",
+    "pin": "固定",
+    "enableTerminal": "启用终端",
+    "enableTunnel": "启用隧道",
+    "enableFileManager": "启用文件管理器",
+    "defaultPath": "默认路径",
+    "testConnection": "测试连接",
+    "connect": "连接",
+    "disconnect": "断开连接",
+    "connected": "已连接",
+    "disconnected": "已断开",
+    "connecting": "连接中...",
+    "connectionFailed": "连接失败",
+    "connectionSuccess": "连接成功",
+    "connectionDetails": "连接详情",
+    "organization": "组织管理",
+    "addTags": "添加标签（空格添加）",
+    "sourcePort": "源端口",
+    "sourcePortDesc": "（源指通用标签页中的当前连接详情）",
+    "endpointPort": "目标端口",
+    "endpointSshConfig": "目标 SSH 配置",
+    "retryInterval": "重试间隔（秒）",
+    "connection": "连接",
+    "remove": "移除",
+    "addConnection": "添加连接",
+    "sshpassRequired": "密码认证需要安装 Sshpass",
+    "sshpassInstallCommand": "安装命令：sudo apt install sshpass",
+    "sshServerConfig": "需要配置 SSH 服务器",
+    "sshServerConfigInstructions": "运行以下命令以允许密码认证：",
+    "sshConfigCommand1": "sudo sed -i 's/#PasswordAuthentication yes/PasswordAuthentication yes/' /etc/ssh/sshd_config",
+    "sshConfigCommand2": "sudo systemctl restart sshd",
+    "localPortForwarding": "本地端口转发",
+    "localPortForwardingDesc": "通过 SSH 连接将本地端口转发到远程服务器",
+    "remotePortForwarding": "远程端口转发",
+    "remotePortForwardingDesc": "通过 SSH 连接将远程端口转发到本地服务器",
+    "dynamicPortForwarding": "动态端口转发（SOCKS 代理）",
+    "dynamicPortForwardingDesc": "在本地计算机上创建 SOCKS 代理，通过 SSH 连接路由流量",
+    "bindAddress": "绑定地址",
+    "hostViewer": "主机查看器",
+    "configuration": "配置",
+    "maxRetries": "最大重试次数",
+    "tunnelConnections": "隧道连接",
+    "enableTerminalDesc": "启用/禁用在终端选项卡中显示此主机",
+    "enableTunnelDesc": "启用/禁用在隧道选项卡中显示此主机",
+    "enableFileManagerDesc": "启用/禁用在文件管理器选项卡中显示此主机",
+    "autoStartDesc": "容器启动时自动启动此隧道",
+    "defaultPathDesc": "打开此主机文件管理器时的默认目录",
+    "tunnelForwardDescription": "此隧道将从源计算机（常规选项卡中的当前连接详情）的端口 {{sourcePort}} 转发流量到端点计算机的端口 {{endpointPort}}。",
+    "endpointSshConfiguration": "端点 SSH 配置",
+    "sourcePortDescription": "（源指的是常规选项卡中的当前连接详情）",
+    "autoStartContainer": "容器启动时自动启动",
+    "upload": "上传",
+    "authentication": "认证方式",
+    "password": "密码",
+    "key": "密钥",
+    "sshPrivateKey": "SSH 私钥",
+    "keyPassword": "密钥密码",
+    "keyType": "密钥类型",
+    "maxRetriesDescription": "隧道连接的最大重试次数。",
+    "retryIntervalDescription": "重试尝试之间的等待时间。",
+    "otherInstallMethods": "其他安装方法：",
+    "sshpassOSInstructions": {
+      "centos": "CentOS/RHEL/Fedora: sudo yum install sshpass 或 sudo dnf install sshpass",
+      "macos": "macOS: brew install hudochenkov/sshpass/sshpass",
+      "windows": "Windows: 使用 WSL 或考虑使用 SSH 密钥认证"
+    },
+    "sshServerConfigReverse": "对于反向 SSH 隧道，端点 SSH 服务器必须允许：",
+    "gatewayPorts": "GatewayPorts yes（绑定远程端口）",
+    "allowTcpForwarding": "AllowTcpForwarding yes（端口转发）",
+    "permitRootLogin": "PermitRootLogin yes（如果使用 root）",
+    "editSshConfig": "编辑 /etc/ssh/sshd_config 并重启 SSH: sudo systemctl restart sshd",
+    "updateHost": "更新主机",
+    "hostUpdatedSuccessfully": "主机 \"{{name}}\" 更新成功！",
+    "hostAddedSuccessfully": "主机 \"{{name}}\" 添加成功！",
+    "hostDeletedSuccessfully": "主机 \"{{name}}\" 删除成功！",
+    "failedToSaveHost": "保存主机失败，请重试。",
+    "autoDetect": "自动检测",
+    "rsa": "RSA",
+    "ed25519": "ED25519",
+    "ecdsaNistP256": "ECDSA NIST P-256",
+    "ecdsaNistP384": "ECDSA NIST P-384",
+    "ecdsaNistP521": "ECDSA NIST P-521",
+    "dsa": "DSA",
+    "rsaSha2256": "RSA SHA2-256",
+    "rsaSha2512": "RSA SHA2-512",
+    "updateKey": "更新密钥",
+    "addTagsSpaceToAdd": "添加标签（空格添加）",
+    "terminalBadge": "终端",
+    "tunnelBadge": "隧道",
+    "fileManagerBadge": "文件管理器",
+    "general": "常规",
+    "terminal": "终端",
+    "tunnel": "隧道",
+    "fileManager": "文件管理器"
+  },
+  "terminal": {
+    "title": "终端",
+    "connect": "连接主机",
+    "disconnect": "断开连接",
+    "clear": "清屏",
+    "copy": "复制",
+    "paste": "粘贴",
+    "find": "查找",
+    "fullscreen": "全屏",
+    "splitHorizontal": "水平分屏",
+    "splitVertical": "垂直分屏",
+    "closePanel": "关闭面板",
+    "reconnect": "重新连接",
+    "sessionEnded": "会话已结束",
+    "connectionLost": "连接已断开",
+    "error": "错误",
+    "disconnected": "已断开连接",
+    "connectionClosed": "连接已关闭",
+    "connectionError": "连接错误"
+  },
+  "fileManager": {
+    "title": "文件管理器",
+    "file": "文件",
+    "folder": "文件夹",
+    "connectToSsh": "连接 SSH 以使用文件操作",
+    "uploadFile": "上传文件",
+    "newFile": "新建文件",
+    "newFolder": "新建文件夹",
+    "rename": "重命名",
+    "renameItem": "重命名项目",
+    "deleteItem": "删除项目",
+    "currentPath": "当前路径",
+    "uploadFileTitle": "上传文件",
+    "maxFileSize": "最大：100MB（JSON）/ 200MB（二进制）",
+    "removeFile": "移除文件",
+    "clickToSelectFile": "点击选择文件",
+    "chooseFile": "选择文件",
+    "uploading": "上传中...",
+    "createNewFile": "创建新文件",
+    "fileName": "文件名",
+    "creating": "创建中...",
+    "createFile": "创建文件",
+    "createNewFolder": "创建新文件夹",
+    "folderName": "文件夹名",
+    "createFolder": "创建文件夹",
+    "warningCannotUndo": "警告：此操作无法撤销",
+    "itemPath": "项目路径",
+    "thisIsDirectory": "这是一个目录（将递归删除）",
+    "deleting": "删除中...",
+    "currentPathLabel": "当前路径",
+    "newName": "新名称",
+    "thisIsDirectoryRename": "这是一个目录",
+    "renaming": "重命名中...",
+    "fileUploadedSuccessfully": "文件 \"{{name}}\" 上传成功",
+    "failedToUploadFile": "上传文件失败",
+    "fileCreatedSuccessfully": "文件 \"{{name}}\" 创建成功",
+    "failedToCreateFile": "创建文件失败",
+    "folderCreatedSuccessfully": "文件夹 \"{{name}}\" 创建成功",
+    "failedToCreateFolder": "创建文件夹失败",
+    "itemDeletedSuccessfully": "{{type}}删除成功",
+    "failedToDeleteItem": "删除项目失败",
+    "itemRenamedSuccessfully": "{{type}}重命名成功",
+    "failedToRenameItem": "重命名项目失败",
+    "upload": "上传",
+    "download": "下载",
+    "newFile": "新建文件",
+    "newFolder": "新建文件夹",
+    "rename": "重命名",
+    "delete": "删除",
+    "permissions": "权限",
+    "size": "大小",
+    "modified": "修改时间",
+    "path": "路径",
+    "fileName": "文件名",
+    "folderName": "文件夹名",
+    "confirmDelete": "确定要删除 {{name}} 吗？",
+    "uploadSuccess": "文件上传成功",
+    "uploadFailed": "文件上传失败",
+    "downloadSuccess": "文件下载成功",
+    "downloadFailed": "文件下载失败",
+    "permissionDenied": "权限被拒绝",
+    "checkDockerLogs": "请检查 Docker 日志以获取详细的错误信息",
+    "internalServerError": "内部服务器错误发生",
+    "serverError": "服务器错误",
+    "error": "错误",
+    "requestFailed": "请求失败，状态码",
+    "unknown": "未知",
+    "cannotReadFile": "无法读取文件",
+    "noSshSessionId": "没有可用的 SSH 会话 ID",
+    "noFilePath": "没有可用的文件路径",
+    "noCurrentHost": "没有可用的当前主机",
+    "fileSavedSuccessfully": "文件保存成功",
+    "saveTimeout": "保存操作超时。文件可能已成功保存，但操作用时过长。请检查 Docker 日志以确认。",
+    "failedToSaveFile": "保存文件失败",
+    "folder": "文件夹",
+    "file": "文件",
+    "deletedSuccessfully": "删除成功",
+    "failedToDeleteItem": "删除项目失败",
+    "connectToServer": "连接到服务器",
+    "selectServerToEdit": "从侧边栏选择服务器以开始编辑文件",
+    "fileOperations": "文件操作",
+    "confirmDeleteMessage": "确定要删除 <strong>{{name}}</strong> 吗？",
+    "deleteDirectoryWarning": "这将删除文件夹及其所有内容。",
+    "actionCannotBeUndone": "此操作无法撤销。",
+    "recent": "最近的",
+    "pinned": "固定的",
+    "folderShortcuts": "文件夹快捷方式",
+    "noRecentFiles": "没有最近的文件。",
+    "noPinnedFiles": "没有固定的文件。",
+    "enterFolderPath": "输入文件夹路径",
+    "noShortcuts": "没有快捷方式。",
+    "searchFilesAndFolders": "搜索文件和文件夹...",
+    "noFilesOrFoldersFound": "没有找到文件或文件夹。",
+    "failedToConnectSSH": "连接 SSH 失败",
+    "failedToReconnectSSH": "重新连接 SSH 会话失败",
+    "failedToListFiles": "列出文件失败",
+    "fetchHomeDataTimeout": "获取主页数据超时",
+    "sshStatusCheckTimeout": "SSH 状态检查超时",
+    "sshReconnectionTimeout": "SSH 重新连接超时",
+    "saveOperationTimeout": "保存操作超时",
+    "cannotSaveFile": "无法保存文件"
+  },
+  "tunnels": {
+    "title": "SSH 隧道",
+    "noSshTunnels": "没有 SSH 隧道",
+    "createFirstTunnelMessage": "您还没有创建任何 SSH 隧道。在主机管理器中配置隧道连接以开始使用。",
+    "connected": "已连接",
+    "disconnected": "已断开",
+    "connecting": "连接中...",
+    "disconnecting": "断开中...",
+    "unknown": "未知",
+    "error": "错误",
+    "failed": "失败",
+    "retrying": "重试中",
+    "waiting": "等待中",
+    "waitingForRetry": "等待重试",
+    "retryingConnection": "重试连接",
+    "canceling": "取消中...",
+    "connect": "连接",
+    "disconnect": "断开连接",
+    "cancel": "取消",
+    "port": "端口",
+    "attempt": "第 {{current}} 次尝试，共 {{max}} 次",
+    "nextRetryIn": "{{seconds}} 秒后重试",
+    "checkDockerLogs": "查看 Docker 日志以了解错误原因，加入",
+    "noTunnelConnections": "未配置隧道连接",
+    "tunnelConnections": "隧道连接",
+    "addTunnel": "添加隧道",
+    "editTunnel": "编辑隧道",
+    "deleteTunnel": "删除隧道",
+    "tunnelName": "隧道名称",
+    "localPort": "本地端口",
+    "remoteHost": "远程主机",
+    "remotePort": "远程端口",
+    "autoStart": "自动启动",
+    "status": "状态",
+    "active": "活动",
+    "inactive": "未激活",
+    "start": "启动",
+    "stop": "停止",
+    "restart": "重启",
+    "connectionType": "连接类型",
+    "local": "本地",
+    "remote": "远程",
+    "dynamic": "动态",
+    "noSshTunnels": "没有 SSH 隧道",
+    "createFirstTunnelMessage": "创建您的第一个 SSH 隧道以开始使用。使用 SSH 管理器添加具有隧道连接的主机。",
+    "unknown": "未知",
+    "connected": "已连接",
+    "connecting": "连接中...",
+    "disconnecting": "断开连接中...",
+    "disconnected": "已断开连接",
+    "portMapping": "端口 {{sourcePort}} → {{endpointHost}}:{{endpointPort}}",
+    "disconnect": "断开连接",
+    "connect": "连接",
+    "canceling": "取消中...",
+    "endpointHostNotFound": "未找到端点主机"
+  },
+  "serverStats": {
+    "title": "服务器统计",
+    "cpu": "CPU",
+    "memory": "内存",
+    "disk": "磁盘",
+    "network": "网络",
+    "uptime": "运行时间",
+    "loadAverage": "平均负载",
+    "processes": "进程",
+    "connections": "连接",
+    "usage": "使用率",
+    "available": "可用",
+    "total": "总计",
+    "free": "空闲",
+    "used": "已用",
+    "percentage": "百分比",
+    "refreshStatusAndMetrics": "刷新状态和指标",
+    "refreshStatus": "刷新状态",
+    "fileManagerAlreadyOpen": "此主机的文件管理器已打开",
+    "openFileManager": "打开文件管理器",
+    "cpuCores_one": "{{count}} 个 CPU",
+    "cpuCores_other": "{{count}} 个 CPU",
+    "naCpus": "N/A CPU",
+    "loadAverage": "平均: {{avg1}}, {{avg5}}, {{avg15}}",
+    "loadAverageNA": "平均: N/A",
+    "cpuUsage": "CPU 使用率",
+    "memoryUsage": "内存使用率",
+    "rootStorageSpace": "根目录存储空间",
+    "of": "的",
+    "feedbackMessage": "对服务器管理的下一步功能有想法？在这里分享吧"
+  },
+  "auth": {
+    "loginTitle": "登录 Termix",
+    "registerTitle": "创建账户",
+    "loginButton": "登录",
+    "registerButton": "注册",
+    "forgotPassword": "忘记密码？",
+    "rememberMe": "记住我",
+    "noAccount": "还没有账户？",
+    "hasAccount": "已有账户？",
+    "loginSuccess": "登录成功",
+    "loginFailed": "登录失败",
+    "registerSuccess": "注册成功",
+    "registerFailed": "注册失败",
+    "logoutSuccess": "登出成功",
+    "invalidCredentials": "用户名或密码错误",
+    "accountCreated": "账户创建成功",
+    "passwordReset": "密码重置链接已发送",
+    "twoFactorAuth": "双因素认证",
+    "enterCode": "输入验证码",
+    "backupCode": "使用备用码",
+    "verifyCode": "验证码",
+    "enableTwoFactor": "启用双因素认证",
+    "disableTwoFactor": "禁用双因素认证",
+    "scanQRCode": "使用您的身份验证器应用扫描此二维码",
+    "backupCodes": "备用码",
+    "saveBackupCodes": "请将这些备用码保存在安全的地方",
+    "twoFactorEnabledSuccess": "双因素认证启用成功！",
+    "twoFactorDisabled": "双因素认证已禁用",
+    "newBackupCodesGenerated": "新备用码已生成",
+    "backupCodesDownloaded": "备用码已下载",
+    "pleaseEnterSixDigitCode": "请输入 6 位验证码",
+    "invalidVerificationCode": "无效的验证码",
+    "failedToDisableTotp": "禁用 TOTP 失败",
+    "failedToGenerateBackupCodes": "生成备用码失败",
+    "enterPassword": "输入您的密码",
+    "lockedOidcAuth": "已锁定 (OIDC 认证)",
+    "twoFactorTitle": "双因素认证",
+    "twoFactorProtected": "您的账户已启用双因素认证保护",
+    "twoFactorActive": "双因素认证当前在您的账户上处于活动状态",
+    "disable2FA": "禁用 2FA",
+    "disableTwoFactorWarning": "禁用双因素认证将降低您账户的安全性",
+    "passwordOrTotpCode": "密码或 TOTP 验证码",
+    "or": "或",
+    "generateNewBackupCodesText": "如果您丢失了现有的备用码，请生成新的备用码",
+    "generateNewBackupCodes": "生成新的备用码",
+    "yourBackupCodes": "您的备用码",
+    "download": "下载",
+    "setupTwoFactorTitle": "设置双因素认证",
+    "step1ScanQR": "步骤 1：使用您的身份验证器应用扫描二维码",
+    "manualEntryCode": "手动输入代码",
+    "cannotScanQRText": "如果无法扫描二维码，请在身份验证器应用中手动输入此代码",
+    "nextVerifyCode": "下一步：验证代码",
+    "verifyAuthenticator": "验证您的身份验证器",
+    "step2EnterCode": "步骤 2：输入身份验证器应用中的6位数代码",
+    "verificationCode": "验证码",
+    "back": "返回",
+    "verifyAndEnable": "验证并启用",
+    "saveBackupCodesTitle": "保存您的备用码",
+    "step3StoreCodesSecurely": "步骤 3：将这些代码保存在安全的地方",
+    "importantBackupCodesText": "请将这些备用码保存在安全的地方。如果您丢失了身份验证器设备，可以使用它们访问您的账户。",
+    "completeSetup": "完成设置",
+    "notEnabledText": "双因素认证通过在登录时要求来自身份验证器应用的代码，为您的账户增加额外的安全层。",
+    "enableTwoFactorButton": "启用双因素认证",
+    "addExtraSecurityLayer": "为您的账户添加额外的安全层",
+    "firstUser": "首位用户",
+    "firstUserMessage": "您是第一个用户，将被设为管理员。您可以在侧边栏用户下拉菜单中查看管理员设置。如果您认为这是错误，请检查 docker 日志，或创建",
+    "external": "外部",
+    "loginWithExternal": "使用外部提供商登录",
+    "loginWithExternalDesc": "使用您配置的外部身份提供商登录",
+    "resetPasswordButton": "重置密码",
+    "sendResetCode": "发送重置代码",
+    "resetCodeDesc": "输入您的用户名以接收密码重置代码。代码将记录在 docker 容器日志中。",
+    "resetCode": "重置代码",
+    "verifyCodeButton": "验证代码",
+    "enterResetCode": "输入来自 docker 容器日志中用户的 6 位数代码：",
+    "goToLogin": "转到登录",
+    "newPassword": "新密码",
+    "confirmNewPassword": "确认密码",
+    "enterNewPassword": "为用户输入新密码：",
+    "passwordResetSuccess": "成功！",
+    "passwordResetSuccessDesc": "您的密码已成功重置！您现在可以使用新密码登录。",
+    "signUp": "注册"
+  },
+  "errors": {
+    "notFound": "页面未找到",
+    "unauthorized": "未授权访问",
+    "forbidden": "访问被禁止",
+    "serverError": "服务器错误",
+    "networkError": "网络错误",
+    "databaseConnection": "无法连接到数据库。请稍后再试。",
+    "unknownError": "未知错误",
+    "failedPasswordReset": "无法启动密码重置",
+    "failedVerifyCode": "验证重置代码失败",
+    "failedCompleteReset": "无法完成密码重置",
+    "invalidTotpCode": "无效的 TOTP 代码",
+    "failedOidcLogin": "无法启动 OIDC 登录",
+    "failedUserInfo": "OIDC 登录后无法获取用户信息",
+    "oidcAuthFailed": "OIDC 认证失败",
+    "noTokenReceived": "登录未收到令牌",
+    "invalidAuthUrl": "从后端收到无效的授权 URL",
+    "connectionTimeout": "连接超时",
+    "invalidInput": "输入无效",
+    "requiredField": "此字段为必填项",
+    "minLength": "最小长度为 {{min}}",
+    "maxLength": "最大长度为 {{max}}",
+    "invalidEmail": "邮箱地址无效",
+    "passwordMismatch": "密码不匹配",
+    "weakPassword": "密码强度太弱",
+    "usernameExists": "用户名已存在",
+    "emailExists": "邮箱已存在",
+    "loadFailed": "加载数据失败",
+    "saveError": "保存失败"
+  },
+  "messages": {
+    "saveSuccess": "保存成功",
+    "saveError": "保存失败",
+    "deleteSuccess": "删除成功",
+    "deleteError": "删除失败",
+    "updateSuccess": "更新成功",
+    "updateError": "更新失败",
+    "copySuccess": "已复制到剪贴板",
+    "copyError": "复制失败",
+    "copiedToClipboard": "{{item}} 已复制到剪贴板",
+    "connectionEstablished": "连接已建立",
+    "connectionClosed": "连接已关闭",
+    "reconnecting": "重新连接中...",
+    "processing": "处理中...",
+    "pleaseWait": "请稍候...",
+    "registrationDisabled": "新用户注册已被管理员禁用。请登录或联系管理员。"
+  },
+  "profile": {
+    "title": "用户资料",
+    "description": "管理您的账户设置和安全",
+    "security": "安全",
+    "changePassword": "修改密码",
+    "twoFactorAuth": "双因素认证",
+    "accountInfo": "账户信息",
+    "role": "角色",
+    "admin": "管理员",
+    "user": "用户",
+    "authMethod": "认证方式",
+    "local": "本地",
+    "external": "外部 (OIDC)",
+    "selectPreferredLanguage": "选择您的界面首选语言"
+  },
+  "placeholders": {
+    "enterCode": "000000",
+    "ipAddress": "127.0.0.1",
+    "port": "22",
+    "maxRetries": "3",
+    "retryInterval": "10",
+    "language": "语言",
+    "username": "用户名",
+    "hostname": "主机名",
+    "folder": "文件夹",
+    "password": "密码",
+    "keyPassword": "密钥密码",
+    "sshConfig": "端点 SSH 配置",
+    "homePath": "/home",
+    "clientId": "您的客户端 ID",
+    "clientSecret": "您的客户端密钥",
+    "authUrl": "https://your-provider.com/application/o/authorize/",
+    "redirectUrl": "https://your-provider.com/application/o/termix/",
+    "tokenUrl": "https://your-provider.com/application/o/token/",
+    "userIdField": "sub",
+    "usernameField": "name",
+    "scopes": "openid email profile",
+    "enterUsername": "输入用户名以设为管理员",
+    "searchHosts": "按名称、用户名、IP、文件夹、标签搜索主机...",
+    "enterPassword": "输入您的密码",
+    "totpCode": "6 位 TOTP 验证码",
+    "searchHostsAny": "按任意信息搜索主机...",
+    "confirmPassword": "输入您的密码以确认",
+    "typeHere": "在此输入",
+    "fileName": "输入文件名（例如：example.txt）",
+    "folderName": "输入文件夹名",
+    "fullPath": "输入项目的完整路径",
+    "currentPath": "输入项目的当前路径",
+    "newName": "输入新名称"
+  },
+  "leftSidebar": {
+    "failedToLoadHosts": "加载主机失败",
+    "noFolder": "无文件夹",
+    "passwordRequired": "需要输入密码",
+    "failedToDeleteAccount": "删除账户失败",
+    "failedToMakeUserAdmin": "设为管理员失败",
+    "userIsNowAdmin": "用户 {{username}} 现在是管理员",
+    "removeAdminConfirm": "确定要移除 {{username}} 的管理员权限吗？",
+    "deleteUserConfirm": "确定要删除用户 {{username}} 吗？此操作无法撤销。",
+    "deleteAccount": "删除账户",
+    "closeDeleteAccount": "关闭删除账户",
+    "deleteAccountWarning": "此操作无法撤销。这将永久删除您的账户和所有相关数据。",
+    "deleteAccountWarningDetails": "删除您的账户将删除所有数据，包括 SSH 主机、配置和设置。此操作不可逆。",
+    "cannotDeleteAccount": "无法删除账户",
+    "lastAdminWarning": "您是最后一个管理员用户。您不能删除自己的账户，否则系统将没有任何管理员。请先将其他用户设为管理员，或联系系统支持。",
+    "confirmPassword": "确认密码",
+    "deleting": "删除中...",
+    "cancel": "取消"
+  },
+  "interface": {
+    "sidebar": "侧边栏",
+    "toggleSidebar": "切换侧边栏",
+    "close": "关闭",
+    "online": "在线",
+    "offline": "离线",
+    "maintenance": "维护中",
+    "degraded": "降级",
+    "noTunnelConnections": "未配置隧道连接",
+    "discord": "Discord",
+    "connectToSshForOperations": "连接 SSH 以使用文件操作",
+    "uploadFile": "上传文件",
+    "newFile": "新建文件",
+    "newFolder": "新建文件夹",
+    "rename": "重命名",
+    "deleteItem": "删除项目",
+    "createNewFile": "创建新文件",
+    "createNewFolder": "创建新文件夹",
+    "deleteItem": "删除项目",
+    "renameItem": "重命名项目",
+    "clickToSelectFile": "点击选择文件",
+    "noSshHosts": "没有 SSH 主机",
+    "sshHosts": "SSH 主机",
+    "importSshHosts": "从 JSON 导入 SSH 主机",
+    "clientId": "客户端 ID",
+    "clientSecret": "客户端密钥",
+    "error": "错误",
+    "warning": "警告",
+    "deleteAccount": "删除账户",
+    "closeDeleteAccount": "关闭删除账户",
+    "cannotDeleteAccount": "无法删除账户",
+    "confirmPassword": "确认密码",
+    "deleting": "删除中...",
+    "externalAuth": "外部认证 (OIDC)",
+    "configureExternalProvider": "配置外部身份提供者",
+    "waitingForRetry": "等待重试",
+    "retryingConnection": "重试连接中",
+    "resetSplitSizes": "重置分屏大小",
+    "sshManagerAlreadyOpen": "SSH 管理器已打开",
+    "disabledDuringSplitScreen": "分屏期间禁用",
+    "unknown": "未知",
+    "connected": "已连接",
+    "disconnected": "已断开连接",
+    "maxRetriesExhausted": "已达到最大重试次数",
+    "endpointHostNotFound": "未找到端点主机",
+    "administrator": "管理员",
+    "user": "用户",
+    "external": "外部",
+    "local": "本地",
+    "saving": "保存中...",
+    "saveConfiguration": "保存配置",
+    "loading": "加载中...",
+    "refresh": "刷新",
+    "adding": "添加中...",
+    "makeAdmin": "设为管理员",
+    "verifying": "验证中...",
+    "verifyAndEnable": "验证并启用",
+    "secretKey": "密钥",
+    "totpQrCode": "TOTP 二维码",
+    "passwordRequired": "使用密码认证时需要密码",
+    "sshKeyRequired": "使用密钥认证时需要 SSH 私钥",
+    "keyTypeRequired": "使用密钥认证时需要密钥类型",
+    "validSshConfigRequired": "必须从列表中选择有效的 SSH 配置",
+    "updateHost": "更新主机",
+    "addHost": "添加主机",
+    "editHost": "编辑主机",
+    "pinConnection": "固定连接",
+    "authentication": "认证",
+    "password": "密码",
+    "key": "密钥",
+    "sshPrivateKey": "SSH 私钥",
+    "keyPassword": "密钥密码",
+    "keyType": "密钥类型",
+    "enableTerminal": "启用终端",
+    "enableTunnel": "启用隧道",
+    "enableFileManager": "启用文件管理器",
+    "defaultPath": "默认路径",
+    "tunnelConnections": "隧道连接",
+    "maxRetries": "最大重试次数",
+    "upload": "上传",
+    "updateKey": "更新密钥",
+    "sshpassRequired": "密码认证需要 Sshpass",
+    "sshServerConfigRequired": "需要 SSH 服务器配置",
+    "sshManagerAlreadyOpen": "SSH 管理器已打开",
+    "disabledDuringSplitScreen": "分屏期间禁用",
+    "productionFolder": "生产环境",
+    "databaseServer": "数据库服务器",
+    "unknownError": "未知错误",
+    "failedToInitiatePasswordReset": "启动密码重置失败",
+    "failedToVerifyResetCode": "验证重置代码失败",
+    "failedToCompletePasswordReset": "完成密码重置失败",
+    "invalidTotpCode": "无效的 TOTP 代码",
+    "failedToStartOidcLogin": "启动 OIDC 登录失败",
+    "failedToGetUserInfoAfterOidc": "OIDC 登录后获取用户信息失败",
+    "loginWithExternalProvider": "使用外部提供者登录",
+    "loginWithExternal": "使用外部提供者登录",
+    "sendResetCode": "发送重置代码",
+    "verifyCode": "验证代码",
+    "resetPassword": "重置密码",
+    "login": "登录",
+    "signUp": "注册",
+    "failedToUpdateOidcConfig": "更新 OIDC 配置失败",
+    "failedToMakeUserAdmin": "设为管理员失败",
+    "failedToStartTotpSetup": "启动 TOTP 设置失败",
+    "invalidVerificationCode": "无效的验证码",
+    "failedToDisableTotp": "禁用 TOTP 失败",
+    "failedToGenerateBackupCodes": "生成备用码失败"
+  }
+}

src/App.tsx

@@ -1,14 +1,70 @@
-import React from "react"
+import React, {useState, useEffect} from "react"
+import {LeftSidebar} from "@/ui/Navigation/LeftSidebar.tsx"
+import {Homepage} from "@/ui/Homepage/Homepage.tsx"
+import {AppView} from "@/ui/Navigation/AppView.tsx"
+import {HostManager} from "@/ui/Apps/Host Manager/HostManager.tsx"
+import {TabProvider, useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx"
+import {TopNavbar} from "@/ui/Navigation/TopNavbar.tsx";
+import { AdminSettings } from "@/ui/Admin/AdminSettings";
+import { UserProfile } from "@/ui/User/UserProfile.tsx";
+import { Toaster } from "@/components/ui/sonner";
+import { getUserInfo } from "@/ui/main-axios.ts";
 
-import {Homepage} from "@/apps/Homepage/Homepage.tsx"
-import {Terminal} from "@/apps/SSH/Terminal/Terminal.tsx"
-import {SSHTunnel} from "@/apps/SSH/Tunnel/SSHTunnel.tsx";
-import {ConfigEditor} from "@/apps/SSH/Config Editor/ConfigEditor.tsx";
-import {SSHManager} from "@/apps/SSH/Manager/SSHManager.tsx"
+function getCookie(name: string) {
+    return document.cookie.split('; ').reduce((r, v) => {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+    }, "");
+}
 
-function App() {
-    const [view, setView] = React.useState<string>("homepage")
-    const [mountedViews, setMountedViews] = React.useState<Set<string>>(new Set(["homepage"]))
+function setCookie(name: string, value: string, days = 7) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
+}
+
+function AppContent() {
+    const [view, setView] = useState<string>("homepage")
+    const [mountedViews, setMountedViews] = useState<Set<string>>(new Set(["homepage"]))
+    const [isAuthenticated, setIsAuthenticated] = useState(false)
+    const [username, setUsername] = useState<string | null>(null)
+    const [isAdmin, setIsAdmin] = useState(false)
+    const [authLoading, setAuthLoading] = useState(true)
+    const [isTopbarOpen, setIsTopbarOpen] = useState<boolean>(true)
+    const {currentTab, tabs} = useTabs();
+
+    useEffect(() => {
+        const checkAuth = () => {
+            const jwt = getCookie("jwt");
+            if (jwt) {
+                setAuthLoading(true);
+                getUserInfo()
+                    .then((meRes) => {
+                        setIsAuthenticated(true);
+                        setIsAdmin(!!meRes.is_admin);
+                        setUsername(meRes.username || null);
+                    })
+                    .catch((err) => {
+                        setIsAuthenticated(false);
+                        setIsAdmin(false);
+                        setUsername(null);
+                        document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+                    })
+                    .finally(() => setAuthLoading(false));
+            } else {
+                setIsAuthenticated(false);
+                setIsAdmin(false);
+                setUsername(null);
+                setAuthLoading(false);
+            }
+        }
+
+        checkAuth()
+
+        const handleStorageChange = () => checkAuth()
+        window.addEventListener('storage', handleStorageChange)
+
+        return () => window.removeEventListener('storage', handleStorageChange)
+    }, [])
 
     const handleSelectView = (nextView: string) => {
         setMountedViews((prev) => {
@@ -20,37 +76,153 @@ function App() {
         setView(nextView)
     }
 
+    const handleAuthSuccess = (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => {
+        setIsAuthenticated(true)
+        setIsAdmin(authData.isAdmin)
+        setUsername(authData.username)
+    }
+
+    const currentTabData = tabs.find(tab => tab.id === currentTab);
+    const showTerminalView = currentTabData?.type === 'terminal' || currentTabData?.type === 'server' || currentTabData?.type === 'file_manager';
+    const showHome = currentTabData?.type === 'home';
+    const showSshManager = currentTabData?.type === 'ssh_manager';
+    const showAdmin = currentTabData?.type === 'admin';
+    const showProfile = currentTabData?.type === 'profile';
+
     return (
-        <div className="flex min-h-svh w-full">
-            <main className="flex-1 w-full">
-                {mountedViews.has("homepage") && (
-                    <div style={{display: view === "homepage" ? "block" : "none"}}>
-                        <Homepage onSelectView={handleSelectView} />
+        <div>
+            {!isAuthenticated && !authLoading && (
+                <div>
+                    <div className="absolute inset-0" style={{
+                        backgroundImage: `linear-gradient(
+                            135deg,
+                            transparent 0%,
+                            transparent 49%,
+                            rgba(255, 255, 255, 0.03) 49%,
+                            rgba(255, 255, 255, 0.03) 51%,
+                            transparent 51%,
+                            transparent 100%
+                        )`,
+                        backgroundSize: '80px 80px'
+                    }} />
+                </div>
+            )}
+
+            {!isAuthenticated && !authLoading && (
+                <div className="fixed inset-0 flex items-center justify-center z-[10000]">
+                    <Homepage 
+                        onSelectView={handleSelectView}
+                        isAuthenticated={isAuthenticated}
+                        authLoading={authLoading}
+                        onAuthSuccess={handleAuthSuccess}
+                        isTopbarOpen={isTopbarOpen}
+                    />
+                </div>
+            )}
+
+            {isAuthenticated && (
+                <LeftSidebar
+                    onSelectView={handleSelectView}
+                    disabled={!isAuthenticated || authLoading}
+                    isAdmin={isAdmin}
+                    username={username}
+                >
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showTerminalView ? "visible" : "hidden",
+                            pointerEvents: showTerminalView ? "auto" : "none",
+                            height: showTerminalView ? "100vh" : 0,
+                            width: showTerminalView ? "100%" : 0,
+                            position: showTerminalView ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <AppView isTopbarOpen={isTopbarOpen} />
                     </div>
-                )}
-                {mountedViews.has("ssh_manager") && (
-                    <div style={{display: view === "ssh_manager" ? "block" : "none"}}>
-                        <SSHManager onSelectView={handleSelectView} />
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showHome ? "visible" : "hidden",
+                            pointerEvents: showHome ? "auto" : "none",
+                            height: showHome ? "100vh" : 0,
+                            width: showHome ? "100%" : 0,
+                            position: showHome ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <Homepage 
+                            onSelectView={handleSelectView}
+                            isAuthenticated={isAuthenticated}
+                            authLoading={authLoading}
+                            onAuthSuccess={handleAuthSuccess}
+                            isTopbarOpen={isTopbarOpen}
+                        />
                     </div>
-                )}
-                {mountedViews.has("terminal") && (
-                    <div style={{display: view === "terminal" ? "block" : "none"}}>
-                        <Terminal onSelectView={handleSelectView} />
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showSshManager ? "visible" : "hidden",
+                            pointerEvents: showSshManager ? "auto" : "none",
+                            height: showSshManager ? "100vh" : 0,
+                            width: showSshManager ? "100%" : 0,
+                            position: showSshManager ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <HostManager onSelectView={handleSelectView} isTopbarOpen={isTopbarOpen} />
                     </div>
-                )}
-                {mountedViews.has("tunnel") && (
-                    <div style={{display: view === "tunnel" ? "block" : "none"}}>
-                        <SSHTunnel onSelectView={handleSelectView} />
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showAdmin ? "visible" : "hidden",
+                            pointerEvents: showAdmin ? "auto" : "none",
+                            height: showAdmin ? "100vh" : 0,
+                            width: showAdmin ? "100%" : 0,
+                            position: showAdmin ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <AdminSettings isTopbarOpen={isTopbarOpen} />
                     </div>
-                )}
-                {mountedViews.has("config_editor") && (
-                    <div style={{display: view === "config_editor" ? "block" : "none"}}>
-                        <ConfigEditor onSelectView={handleSelectView} />
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showProfile ? "visible" : "hidden",
+                            pointerEvents: showProfile ? "auto" : "none",
+                            height: showProfile ? "100vh" : 0,
+                            width: showProfile ? "100%" : 0,
+                            position: showProfile ? "static" : "absolute",
+                            overflow: "auto",
+                        }}
+                    >
+                        <UserProfile isTopbarOpen={isTopbarOpen} />
                     </div>
-                )}
-            </main>
+
+                    <TopNavbar isTopbarOpen={isTopbarOpen} setIsTopbarOpen={setIsTopbarOpen}/>
+                </LeftSidebar>
+            )}
+            <Toaster 
+                position="bottom-right"
+                richColors={false}
+                closeButton
+                duration={5000}
+                offset={20}
+            />
         </div>
     )
 }
 
+function App() {
+    return (
+        <TabProvider>
+            <AppContent />
+        </TabProvider>
+    );
+}
+
 export default App

src/apps/Homepage/Homepage.tsx

@@ -1,109 +0,0 @@
-import {HomepageSidebar} from "@/apps/Homepage/HomepageSidebar.tsx";
-import React, {useEffect, useState} from "react";
-import {HomepageAuth} from "@/apps/Homepage/HomepageAuth.tsx";
-import axios from "axios";
-import {HomepageUpdateLog} from "@/apps/Homepage/HompageUpdateLog.tsx";
-import {HomepageWelcomeCard} from "@/apps/Homepage/HomepageWelcomeCard.tsx";
-
-interface HomepageProps {
-    onSelectView: (view: string) => void;
-}
-
-function setCookie(name: string, value: string, days = 7) {
-    const expires = new Date(Date.now() + days * 864e5).toUTCString();
-    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
-}
-
-function getCookie(name: string) {
-    return document.cookie.split('; ').reduce((r, v) => {
-        const parts = v.split('=');
-        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
-    }, "");
-}
-
-const apiBase = import.meta.env.DEV ? "http://localhost:8081/users" : "/users";
-
-const API = axios.create({
-    baseURL: apiBase,
-});
-
-export function Homepage({onSelectView}: HomepageProps): React.ReactElement {
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [isAdmin, setIsAdmin] = useState(false);
-    const [username, setUsername] = useState<string | null>(null);
-    const [authLoading, setAuthLoading] = useState(true);
-    const [dbError, setDbError] = useState<string | null>(null);
-    const [showWelcomeCard, setShowWelcomeCard] = useState(true);
-
-    useEffect(() => {
-        const jwt = getCookie("jwt");
-        const welcomeHidden = getCookie("welcome_hidden");
-
-        if (jwt) {
-            setAuthLoading(true);
-            Promise.all([
-                API.get("/me", {headers: {Authorization: `Bearer ${jwt}`}}),
-                API.get("/db-health")
-            ])
-                .then(([meRes]) => {
-                    setLoggedIn(true);
-                    setIsAdmin(!!meRes.data.is_admin);
-                    setUsername(meRes.data.username || null);
-                    setDbError(null);
-                    setShowWelcomeCard(welcomeHidden !== "true");
-                })
-                .catch((err) => {
-                    setLoggedIn(false);
-                    setIsAdmin(false);
-                    setUsername(null);
-                    setCookie("jwt", "", -1);
-                    if (err?.response?.data?.error?.includes("Database")) {
-                        setDbError("Could not connect to the database. Please try again later.");
-                    } else {
-                        setDbError(null);
-                    }
-                })
-                .finally(() => setAuthLoading(false));
-        } else {
-            setAuthLoading(false);
-        }
-    }, []);
-
-    const handleHideWelcomeCard = () => {
-        setShowWelcomeCard(false);
-        setCookie("welcome_hidden", "true", 365 * 10);
-    };
-
-    return (
-        <HomepageSidebar
-            onSelectView={onSelectView}
-            disabled={!loggedIn || authLoading}
-            isAdmin={isAdmin}
-            username={loggedIn ? username : null}
-        >
-            <div className="w-full min-h-svh grid place-items-center">
-                <div className="flex flex-row items-center justify-center gap-8">
-                    <HomepageAuth
-                        setLoggedIn={setLoggedIn}
-                        setIsAdmin={setIsAdmin}
-                        setUsername={setUsername}
-                        loggedIn={loggedIn}
-                        authLoading={authLoading}
-                        dbError={dbError}
-                        setDbError={setDbError}
-                    />
-                    <HomepageUpdateLog
-                        loggedIn={loggedIn}
-                    />
-                </div>
-
-                {loggedIn && !authLoading && showWelcomeCard && (
-                    <div
-                        className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-10">
-                        <HomepageWelcomeCard onHidePermanently={handleHideWelcomeCard}/>
-                    </div>
-                )}
-            </div>
-        </HomepageSidebar>
-    );
-}

src/apps/Homepage/HomepageAuth.tsx

@@ -1,400 +0,0 @@
-import React, {useState, useEffect} from "react";
-import {cn} from "@/lib/utils";
-import {Button} from "@/components/ui/button";
-import {Input} from "@/components/ui/input";
-import {Label} from "@/components/ui/label";
-import {Alert, AlertTitle, AlertDescription} from "@/components/ui/alert";
-import {Separator} from "@/components/ui/separator";
-import axios from "axios";
-
-function setCookie(name: string, value: string, days = 7) {
-    const expires = new Date(Date.now() + days * 864e5).toUTCString();
-    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
-}
-
-function getCookie(name: string) {
-    return document.cookie.split('; ').reduce((r, v) => {
-        const parts = v.split('=');
-        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
-    }, "");
-}
-
-const apiBase = import.meta.env.DEV ? "http://localhost:8081/users" : "/users";
-
-const API = axios.create({
-    baseURL: apiBase,
-});
-
-interface HomepageAuthProps extends React.ComponentProps<"div"> {
-    setLoggedIn: (loggedIn: boolean) => void;
-    setIsAdmin: (isAdmin: boolean) => void;
-    setUsername: (username: string | null) => void;
-    loggedIn: boolean;
-    authLoading: boolean;
-    dbError: string | null;
-    setDbError: (error: string | null) => void;
-}
-
-export function HomepageAuth({
-                                 className,
-                                 setLoggedIn,
-                                 setIsAdmin,
-                                 setUsername,
-                                 loggedIn,
-                                 authLoading,
-                                 dbError,
-                                 setDbError,
-                                 ...props
-                             }: HomepageAuthProps) {
-    const [tab, setTab] = useState<"login" | "signup" | "external">("login");
-    const [localUsername, setLocalUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [oidcLoading, setOidcLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [internalLoggedIn, setInternalLoggedIn] = useState(false);
-    const [firstUser, setFirstUser] = useState(false);
-    const [registrationAllowed, setRegistrationAllowed] = useState(true);
-    const [oidcConfigured, setOidcConfigured] = useState(false);
-
-    useEffect(() => {
-        setInternalLoggedIn(loggedIn);
-    }, [loggedIn]);
-
-    useEffect(() => {
-        API.get("/registration-allowed").then(res => {
-            setRegistrationAllowed(res.data.allowed);
-        });
-    }, []);
-
-    useEffect(() => {
-        API.get("/oidc-config").then((response) => {
-            if (response.data) {
-                setOidcConfigured(true);
-            } else {
-                setOidcConfigured(false);
-            }
-        }).catch((error) => {
-            if (error.response?.status === 404) {
-                setOidcConfigured(false);
-            } else {
-                setOidcConfigured(false);
-            }
-        });
-    }, []);
-
-    useEffect(() => {
-        API.get("/count").then(res => {
-            if (res.data.count === 0) {
-                setFirstUser(true);
-                setTab("signup");
-            } else {
-                setFirstUser(false);
-            }
-            setDbError(null);
-        }).catch(() => {
-            setDbError("Could not connect to the database. Please try again later.");
-        });
-    }, [setDbError]);
-
-    async function handleSubmit(e: React.FormEvent) {
-        e.preventDefault();
-        setError(null);
-        setLoading(true);
-        try {
-            let res, meRes;
-            if (tab === "login") {
-                res = await API.post("/login", {username: localUsername, password});
-            } else {
-                await API.post("/create", {username: localUsername, password});
-                res = await API.post("/login", {username: localUsername, password});
-            }
-            setCookie("jwt", res.data.token);
-            [meRes] = await Promise.all([
-                API.get("/me", {headers: {Authorization: `Bearer ${res.data.token}`}}),
-                API.get("/db-health")
-            ]);
-            setInternalLoggedIn(true);
-            setLoggedIn(true);
-            setIsAdmin(!!meRes.data.is_admin);
-            setUsername(meRes.data.username || null);
-            setDbError(null);
-        } catch (err: any) {
-            setError(err?.response?.data?.error || "Unknown error");
-            setInternalLoggedIn(false);
-            setLoggedIn(false);
-            setIsAdmin(false);
-            setUsername(null);
-            setCookie("jwt", "", -1);
-            if (err?.response?.data?.error?.includes("Database")) {
-                setDbError("Could not connect to the database. Please try again later.");
-            } else {
-                setDbError(null);
-            }
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    async function handleOIDCLogin() {
-        setError(null);
-        setOidcLoading(true);
-        try {
-            const authResponse = await API.get("/oidc/authorize");
-            const {auth_url: authUrl} = authResponse.data;
-
-            if (!authUrl || authUrl === 'undefined') {
-                throw new Error('Invalid authorization URL received from backend');
-            }
-
-            window.location.replace(authUrl);
-        } catch (err: any) {
-            setError(err?.response?.data?.error || err?.message || "Failed to start OIDC login");
-            setOidcLoading(false);
-        }
-    }
-
-    useEffect(() => {
-        const urlParams = new URLSearchParams(window.location.search);
-        const success = urlParams.get('success');
-        const token = urlParams.get('token');
-        const error = urlParams.get('error');
-
-        if (error) {
-            setError(`OIDC authentication failed: ${error}`);
-            setOidcLoading(false);
-            window.history.replaceState({}, document.title, window.location.pathname);
-            return;
-        }
-
-        if (success && token) {
-            setOidcLoading(true);
-            setError(null);
-
-            setCookie("jwt", token);
-            API.get("/me", {headers: {Authorization: `Bearer ${token}`}})
-                .then(meRes => {
-                    setInternalLoggedIn(true);
-                    setLoggedIn(true);
-                    setIsAdmin(!!meRes.data.is_admin);
-                    setUsername(meRes.data.username || null);
-                    setDbError(null);
-                    window.history.replaceState({}, document.title, window.location.pathname);
-                })
-                .catch(err => {
-                    setError("Failed to get user info after OIDC login");
-                    setInternalLoggedIn(false);
-                    setLoggedIn(false);
-                    setIsAdmin(false);
-                    setUsername(null);
-                    setCookie("jwt", "", -1);
-                    window.history.replaceState({}, document.title, window.location.pathname);
-                })
-                .finally(() => {
-                    setOidcLoading(false);
-                });
-        }
-    }, []);
-
-    const Spinner = (
-        <svg className="animate-spin mr-2 h-4 w-4 text-white inline-block" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
-        </svg>
-    );
-
-    return (
-        <div
-            className={cn(
-                className
-            )}
-            {...props}
-        >
-            <div
-                className={`w-[420px] max-w-full bg-background rounded-xl shadow-lg p-6 flex flex-col ${internalLoggedIn ? '' : 'border border-border'}`}>
-                {dbError && (
-                    <Alert variant="destructive" className="mb-4">
-                        <AlertTitle>Error</AlertTitle>
-                        <AlertDescription>{dbError}</AlertDescription>
-                    </Alert>
-                )}
-                {firstUser && !dbError && !internalLoggedIn && (
-                    <Alert variant="default" className="mb-4">
-                        <AlertTitle>First User</AlertTitle>
-                        <AlertDescription className="inline">
-                            You are the first user and will be made an admin. You can view admin settings in the sidebar
-                            user dropdown. If you think this is a mistake, check the docker logs, or create a{" "}
-                            <a
-                                href="https://github.com/LukeGus/Termix/issues/new"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-blue-600 underline hover:text-blue-800 inline"
-                            >
-                                GitHub issue
-                            </a>.
-                        </AlertDescription>
-                    </Alert>
-                )}
-                {!registrationAllowed && !internalLoggedIn && (
-                    <Alert variant="destructive" className="mb-4">
-                        <AlertTitle>Registration Disabled</AlertTitle>
-                        <AlertDescription>
-                            New account registration is currently disabled by an admin. Please log in or contact an
-                            administrator.
-                        </AlertDescription>
-                    </Alert>
-                )}
-                {(internalLoggedIn || (authLoading && getCookie("jwt"))) && (
-                    <div className="flex flex-col items-center gap-4">
-                        <Alert className="my-2">
-                            <AlertTitle>Logged in!</AlertTitle>
-                            <AlertDescription>
-                                You are logged in! Use the sidebar to access all available tools. To get started,
-                                create an SSH Host in the SSH Manager tab. Once created, you can connect to that
-                                host using the other apps in the sidebar.
-                            </AlertDescription>
-                        </Alert>
-
-                        <div className="flex flex-row items-center gap-2">
-                            <Button
-                                variant="link"
-                                className="text-sm"
-                                onClick={() => window.open('https://github.com/LukeGus/Termix', '_blank')}
-                            >
-                                GitHub
-                            </Button>
-                            <div className="w-px h-4 bg-border"></div>
-                            <Button
-                                variant="link"
-                                className="text-sm"
-                                onClick={() => window.open('https://github.com/LukeGus/Termix/issues/new', '_blank')}
-                            >
-                                Feedback
-                            </Button>
-                            <div className="w-px h-4 bg-border"></div>
-                            <Button
-                                variant="link"
-                                className="text-sm"
-                                onClick={() => window.open('https://discord.com/invite/jVQGdvHDrf', '_blank')}
-                            >
-                                Discord
-                            </Button>
-                            <div className="w-px h-4 bg-border"></div>
-                            <Button
-                                variant="link"
-                                className="text-sm"
-                                onClick={() => window.open('https://github.com/sponsors/LukeGus', '_blank')}
-                            >
-                                Fund
-                            </Button>
-                        </div>
-                    </div>
-                )}
-                {(!internalLoggedIn && (!authLoading || !getCookie("jwt"))) && (
-                    <>
-                        <div className="flex gap-2 mb-6">
-                            <button
-                                type="button"
-                                className={cn(
-                                    "flex-1 py-2 text-base font-medium rounded-md transition-all",
-                                    tab === "login"
-                                        ? "bg-primary text-primary-foreground shadow"
-                                        : "bg-muted text-muted-foreground hover:bg-accent"
-                                )}
-                                onClick={() => setTab("login")}
-                                aria-selected={tab === "login"}
-                                disabled={loading || firstUser}
-                            >
-                                Login
-                            </button>
-                            <button
-                                type="button"
-                                className={cn(
-                                    "flex-1 py-2 text-base font-medium rounded-md transition-all",
-                                    tab === "signup"
-                                        ? "bg-primary text-primary-foreground shadow"
-                                        : "bg-muted text-muted-foreground hover:bg-accent"
-                                )}
-                                onClick={() => setTab("signup")}
-                                aria-selected={tab === "signup"}
-                                disabled={loading || !registrationAllowed}
-                            >
-                                Sign Up
-                            </button>
-                            {oidcConfigured && (
-                                <button
-                                    type="button"
-                                    className={cn(
-                                        "flex-1 py-2 text-base font-medium rounded-md transition-all",
-                                        tab === "external"
-                                            ? "bg-primary text-primary-foreground shadow"
-                                            : "bg-muted text-muted-foreground hover:bg-accent"
-                                    )}
-                                    onClick={() => setTab("external")}
-                                    aria-selected={tab === "external"}
-                                    disabled={oidcLoading}
-                                >
-                                    External
-                                </button>
-                            )}
-                        </div>
-                        <div className="mb-6 text-center">
-                            <h2 className="text-xl font-bold mb-1">
-                                {tab === "login" ? "Login to your account" :
-                                    tab === "signup" ? "Create a new account" :
-                                        "Login with external provider"}
-                            </h2>
-                        </div>
-
-                        {tab === "external" ? (
-                            <div className="flex flex-col gap-5">
-                                <div className="text-center text-muted-foreground mb-4">
-                                    <p>Login using your configured external identity provider</p>
-                                </div>
-                                <Button
-                                    type="button"
-                                    className="w-full h-11 mt-2 text-base font-semibold"
-                                    disabled={oidcLoading}
-                                    onClick={handleOIDCLogin}
-                                >
-                                    {oidcLoading ? Spinner : "Login with External Provider"}
-                                </Button>
-                            </div>
-                        ) : (
-                            <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
-                                <div className="flex flex-col gap-2">
-                                    <Label htmlFor="username">Username</Label>
-                                    <Input
-                                        id="username"
-                                        type="text"
-                                        required
-                                        className="h-11 text-base"
-                                        value={localUsername}
-                                        onChange={e => setLocalUsername(e.target.value)}
-                                        disabled={loading || internalLoggedIn}
-                                    />
-                                </div>
-                                <div className="flex flex-col gap-2">
-                                    <Label htmlFor="password">Password</Label>
-                                    <Input id="password" type="password" required className="h-11 text-base"
-                                           value={password} onChange={e => setPassword(e.target.value)}
-                                           disabled={loading || internalLoggedIn}/>
-                                </div>
-                                <Button type="submit" className="w-full h-11 mt-2 text-base font-semibold"
-                                        disabled={loading || internalLoggedIn}>
-                                    {loading ? Spinner : (tab === "login" ? "Login" : "Sign Up")}
-                                </Button>
-                            </form>
-                        )}
-                    </>
-                )}
-                {error && (
-                    <Alert variant="destructive" className="mt-4">
-                        <AlertTitle>Error</AlertTitle>
-                        <AlertDescription>{error}</AlertDescription>
-                    </Alert>
-                )}
-            </div>
-        </div>
-    );
-}

src/apps/Homepage/HomepageSidebar.tsx

@@ -1,438 +0,0 @@
-import React from 'react';
-import {
-    Computer,
-    Server,
-    File,
-    Hammer, ChevronUp, User2, HardDrive
-} from "lucide-react";
-
-import {
-    Sidebar,
-    SidebarContent, SidebarFooter,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem, SidebarProvider, SidebarInset,
-} from "@/components/ui/sidebar.tsx"
-
-import {
-    Separator,
-} from "@/components/ui/separator.tsx"
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@radix-ui/react-dropdown-menu";
-import {
-    Sheet,
-    SheetContent,
-    SheetDescription,
-    SheetFooter,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-    SheetClose
-} from "@/components/ui/sheet";
-import {Checkbox} from "@/components/ui/checkbox.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import {Label} from "@/components/ui/label.tsx";
-import {Button} from "@/components/ui/button.tsx";
-import {Alert, AlertTitle, AlertDescription} from "@/components/ui/alert.tsx";
-import axios from "axios";
-
-interface SidebarProps {
-    onSelectView: (view: string) => void;
-    getView?: () => string;
-    disabled?: boolean;
-    isAdmin?: boolean;
-    username?: string | null;
-    children?: React.ReactNode;
-}
-
-function handleLogout() {
-    document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-    window.location.reload();
-}
-
-function getCookie(name: string) {
-    return document.cookie.split('; ').reduce((r, v) => {
-        const parts = v.split('=');
-        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
-    }, "");
-}
-
-const apiBase = import.meta.env.DEV ? "http://localhost:8081/users" : "/users";
-
-const API = axios.create({
-    baseURL: apiBase,
-});
-
-export function HomepageSidebar({
-                                    onSelectView,
-                                    getView,
-                                    disabled,
-                                    isAdmin,
-                                    username,
-                                    children,
-                                }: SidebarProps): React.ReactElement {
-    const [adminSheetOpen, setAdminSheetOpen] = React.useState(false);
-    const [allowRegistration, setAllowRegistration] = React.useState(true);
-    const [regLoading, setRegLoading] = React.useState(false);
-    const [oidcConfig, setOidcConfig] = React.useState({
-        client_id: '',
-        client_secret: '',
-        issuer_url: '',
-        authorization_url: '',
-        token_url: '',
-        identifier_path: 'sub',
-        name_path: 'name',
-        scopes: 'openid email profile'
-    });
-    const [oidcLoading, setOidcLoading] = React.useState(false);
-    const [oidcError, setOidcError] = React.useState<string | null>(null);
-    const [oidcSuccess, setOidcSuccess] = React.useState<string | null>(null);
-
-    React.useEffect(() => {
-        if (adminSheetOpen) {
-            API.get("/registration-allowed").then(res => {
-                setAllowRegistration(res.data.allowed);
-            });
-
-            API.get("/oidc-config").then(res => {
-                if (res.data) {
-                    setOidcConfig(res.data);
-                }
-            }).catch((error) => {
-            });
-        }
-    }, [adminSheetOpen]);
-
-    const handleToggle = async (checked: boolean) => {
-        setRegLoading(true);
-        const jwt = getCookie("jwt");
-        try {
-            await API.patch(
-                "/registration-allowed",
-                {allowed: checked},
-                {headers: {Authorization: `Bearer ${jwt}`}}
-            );
-            setAllowRegistration(checked);
-        } catch (e) {
-        } finally {
-            setRegLoading(false);
-        }
-    };
-
-    const handleOIDCConfigSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setOidcLoading(true);
-        setOidcError(null);
-        setOidcSuccess(null);
-
-        const requiredFields = ['client_id', 'client_secret', 'issuer_url', 'authorization_url', 'token_url'];
-        const missingFields = requiredFields.filter(field => !oidcConfig[field as keyof typeof oidcConfig]);
-        
-        if (missingFields.length > 0) {
-            setOidcError(`Missing required fields: ${missingFields.join(', ')}`);
-            setOidcLoading(false);
-            return;
-        }
-        
-        const jwt = getCookie("jwt");
-        try {
-            await API.post(
-                "/oidc-config",
-                oidcConfig,
-                {headers: {Authorization: `Bearer ${jwt}`}}
-            );
-            setOidcSuccess("OIDC configuration updated successfully!");
-        } catch (err: any) {
-            setOidcError(err?.response?.data?.error || "Failed to update OIDC configuration");
-        } finally {
-            setOidcLoading(false);
-        }
-    };
-
-    const handleOIDCConfigChange = (field: string, value: string) => {
-        setOidcConfig(prev => ({
-            ...prev,
-            [field]: value
-        }));
-    };
-
-    return (
-        <div className="min-h-svh">
-            <SidebarProvider>
-                <Sidebar>
-                    <SidebarContent>
-                        <SidebarGroup>
-                            <SidebarGroupLabel className="text-lg font-bold text-white flex items-center gap-2">
-                                Termix
-                            </SidebarGroupLabel>
-                            <Separator className="p-0.25 mt-1 mb-1"/>
-                            <SidebarGroupContent>
-                                <SidebarMenu>
-                                    <SidebarMenuItem key={"SSH Manager"}>
-                                        <SidebarMenuButton onClick={() => onSelectView("ssh_manager")}
-                                                           disabled={disabled}>
-                                            <HardDrive/>
-                                            <span>SSH Manager</span>
-                                        </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                    <div className="ml-5">
-                                        <SidebarMenuItem key={"Terminal"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("terminal")}
-                                                               disabled={disabled}>
-                                                <Computer/>
-                                                <span>Terminal</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
-                                        <SidebarMenuItem key={"Tunnel"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("tunnel")}
-                                                               disabled={disabled}>
-                                                <Server/>
-                                                <span>Tunnel</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
-                                        <SidebarMenuItem key={"Config Editor"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("config_editor")}
-                                                               disabled={disabled}>
-                                                <File/>
-                                                <span>Config Editor</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
-                                    </div>
-                                    <SidebarMenuItem key={"Tools"}>
-                                        <SidebarMenuButton onClick={() => window.open("https://dashix.dev", "_blank")} disabled={disabled}>
-                                            <Hammer/>
-                                            <span>Tools</span>
-                                        </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                </SidebarMenu>
-                            </SidebarGroupContent>
-                        </SidebarGroup>
-                    </SidebarContent>
-                    <Separator className="p-0.25 mt-1 mb-1"/>
-                    <SidebarFooter>
-                        <SidebarMenu>
-                            <SidebarMenuItem>
-                                <DropdownMenu>
-                                    <DropdownMenuTrigger asChild>
-                                        <SidebarMenuButton
-                                            className="data-[state=open]:opacity-90 w-full"
-                                            style={{width: '100%'}}
-                                            disabled={disabled}
-                                        >
-                                            <User2/> {username ? username : 'Signed out'}
-                                            <ChevronUp className="ml-auto"/>
-                                        </SidebarMenuButton>
-                                    </DropdownMenuTrigger>
-                                    <DropdownMenuContent
-                                        side="top"
-                                        align="start"
-                                        sideOffset={6}
-                                        className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
-                                    >
-                                        {isAdmin && (
-                                            <DropdownMenuItem
-                                                className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
-                                                onSelect={() => setAdminSheetOpen(true)}>
-                                                <span>Admin Settings</span>
-                                            </DropdownMenuItem>
-                                        )}
-                                        <DropdownMenuItem
-                                            className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
-                                            onSelect={handleLogout}>
-                                            <span>Sign out</span>
-                                        </DropdownMenuItem>
-                                    </DropdownMenuContent>
-                                </DropdownMenu>
-                            </SidebarMenuItem>
-                        </SidebarMenu>
-                    </SidebarFooter>
-                    {/* Admin Settings Sheet (always rendered, only openable if isAdmin) */}
-                    {isAdmin && (
-                        <Sheet open={adminSheetOpen} onOpenChange={setAdminSheetOpen}>
-                            <SheetContent side="left" className="w-[400px] max-h-screen overflow-y-auto">
-                                <SheetHeader>
-                                    <SheetTitle>Admin Settings</SheetTitle>
-                                </SheetHeader>
-                                <div className="pt-1 pb-4 px-4 flex flex-col gap-6">
-                                    {/* Registration Settings */}
-                                    <div className="space-y-4">
-                                        <h3 className="text-lg font-semibold">User Registration</h3>
-                                        <label className="flex items-center gap-2">
-                                            <Checkbox checked={allowRegistration} onCheckedChange={handleToggle}
-                                                      disabled={regLoading}/>
-                                            Allow new account registration
-                                        </label>
-                                    </div>
-
-                                    <Separator className="p-0.25 mt-2 mb-2"/>
-                                    
-                                    {/* OIDC Configuration */}
-                                    <div className="space-y-4">
-                                        <h3 className="text-lg font-semibold">External Authentication (OIDC)</h3>
-                                        <p className="text-sm text-muted-foreground">
-                                            Configure external identity provider for OIDC/OAuth2 authentication. 
-                                            Users will see an "External" login option once configured.
-                                        </p>
-                                        
-                                        {oidcError && (
-                                            <Alert variant="destructive">
-                                                <AlertTitle>Error</AlertTitle>
-                                                <AlertDescription>{oidcError}</AlertDescription>
-                                            </Alert>
-                                        )}
-                                        
-                                        <form onSubmit={handleOIDCConfigSubmit} className="space-y-4">
-                                            <div className="space-y-2">
-                                                <Label htmlFor="client_id">Client ID</Label>
-                                                <Input
-                                                    id="client_id"
-                                                    value={oidcConfig.client_id}
-                                                    onChange={(e) => handleOIDCConfigChange('client_id', e.target.value)}
-                                                    placeholder="your-client-id"
-                                                    required
-                                                />
-                                            </div>
-                                            
-                                            <div className="space-y-2">
-                                                <Label htmlFor="client_secret">Client Secret</Label>
-                                                <Input
-                                                    id="client_secret"
-                                                    type="password"
-                                                    value={oidcConfig.client_secret}
-                                                    onChange={(e) => handleOIDCConfigChange('client_secret', e.target.value)}
-                                                    placeholder="your-client-secret"
-                                                    required
-                                                />
-                                            </div>
-
-                                            <div className="space-y-2">
-                                                <Label htmlFor="authorization_url">Authorization URL</Label>
-                                                <Input
-                                                    id="authorization_url"
-                                                    value={oidcConfig.authorization_url}
-                                                    onChange={(e) => handleOIDCConfigChange('authorization_url', e.target.value)}
-                                                    placeholder="https://your-provider.com/application/o/authorize/"
-                                                    required
-                                                />
-                                            </div>
-                                            
-                                            <div className="space-y-2">
-                                                <Label htmlFor="issuer_url">Issuer URL</Label>
-                                                <Input
-                                                    id="issuer_url"
-                                                    value={oidcConfig.issuer_url}
-                                                    onChange={(e) => handleOIDCConfigChange('issuer_url', e.target.value)}
-                                                    placeholder="https://your-provider.com/application/o/termix/"
-                                                    required
-                                                />
-                                            </div>
-                                            
-                                            <div className="space-y-2">
-                                                <Label htmlFor="token_url">Token URL</Label>
-                                                <Input
-                                                    id="token_url"
-                                                    value={oidcConfig.token_url}
-                                                    onChange={(e) => handleOIDCConfigChange('token_url', e.target.value)}
-                                                    placeholder="http://100.98.3.50:9000/application/o/token/"
-                                                    required
-                                                />
-                                            </div>
-                                            
-                                            <div className="space-y-2">
-                                                <Label htmlFor="identifier_path">User Identifier Path</Label>
-                                                <Input
-                                                    id="identifier_path"
-                                                    value={oidcConfig.identifier_path}
-                                                    onChange={(e) => handleOIDCConfigChange('identifier_path', e.target.value)}
-                                                    placeholder="sub"
-                                                    required
-                                                />
-                                                <p className="text-xs text-muted-foreground">
-                                                    JSON path to extract user ID from JWT (e.g., "sub", "email", "preferred_username")
-                                                </p>
-                                            </div>
-                                            
-                                            <div className="space-y-2">
-                                                <Label htmlFor="name_path">Display Name Path</Label>
-                                                <Input
-                                                    id="name_path"
-                                                    value={oidcConfig.name_path}
-                                                    onChange={(e) => handleOIDCConfigChange('name_path', e.target.value)}
-                                                    placeholder="name"
-                                                    required
-                                                />
-                                                <p className="text-xs text-muted-foreground">
-                                                    JSON path to extract display name from JWT (e.g., "name", "preferred_username")
-                                                </p>
-                                            </div>
-                                            
-                                            <div className="space-y-2">
-                                                <Label htmlFor="scopes">Scopes</Label>
-                                                <Input
-                                                    id="scopes"
-                                                    value={oidcConfig.scopes}
-                                                    onChange={(e) => handleOIDCConfigChange('scopes', e.target.value)}
-                                                    placeholder="openid email profile"
-                                                    required
-                                                />
-                                                <p className="text-xs text-muted-foreground">
-                                                    Space-separated list of OAuth2 scopes to request
-                                                </p>
-                                            </div>
-                                            
-                                            <div className="flex gap-2">
-                                                <Button 
-                                                    type="submit" 
-                                                    className="flex-1"
-                                                    disabled={oidcLoading}
-                                                >
-                                                    {oidcLoading ? "Saving..." : "Save Configuration"}
-                                                </Button>
-                                                <Button 
-                                                    type="button"
-                                                    variant="outline"
-                                                    onClick={() => {
-                                                        setOidcConfig({
-                                                            client_id: '',
-                                                            client_secret: '',
-                                                            issuer_url: '',
-                                                            authorization_url: '',
-                                                            token_url: '',
-                                                            identifier_path: 'sub',
-                                                            name_path: 'name',
-                                                            scopes: 'openid email profile'
-                                                        });
-                                                    }}
-                                                >
-                                                    Reset
-                                                </Button>
-                                            </div>
-
-                                            {oidcSuccess && (
-                                                <Alert>
-                                                    <AlertTitle>Success</AlertTitle>
-                                                    <AlertDescription>{oidcSuccess}</AlertDescription>
-                                                </Alert>
-                                            )}
-                                        </form>
-                                    </div>
-                                </div>
-                                <SheetFooter className="px-4 pt-1 pb-4">
-                                    <Separator className="p-0.25 mt-2 mb-2"/>
-                                    <SheetClose asChild>
-                                        <Button variant="outline">Close</Button>
-                                    </SheetClose>
-                                </SheetFooter>
-                            </SheetContent>
-                        </Sheet>
-                    )}
-                </Sidebar>
-                <SidebarInset>
-                    {children}
-                </SidebarInset>
-            </SidebarProvider>
-        </div>
-    )
-}

src/apps/Homepage/HomepageWelcomeCard.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
-import {Button} from "@/components/ui/button";
-
-interface HomepageWelcomeCardProps {
-    onHidePermanently: () => void;
-}
-
-export function HomepageWelcomeCard({onHidePermanently}: HomepageWelcomeCardProps): React.ReactElement {
-    return (
-        <Card className="w-full max-w-2xl mx-auto">
-            <CardHeader>
-                <CardTitle className="text-2xl font-bold text-center">
-                    The Future of Termix
-                </CardTitle>
-            </CardHeader>
-            <CardContent>
-                <p className="text-muted-foreground text-center leading-relaxed">
-                    Please checkout the linked survey{" "}
-                    <a
-                        href="https://docs.google.com/forms/d/e/1FAIpQLSeGvnQODFtnpjmJsMKgASbaQ87CLQEBCcnzK_Vuw5TdfbfIyA/viewform?usp=sharing&ouid=107601685503825301492"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary hover:underline hover:text-primary/80 transition-colors"
-                    >
-                        here
-                    </a>
-                    . The purpose of this survey is to gather feedback from users on what the future UI of Termix could
-                    look like to optimize server management. Please take a minute or two to read the survey questions
-                    and answer them to the best of your ability. Thank you!
-                </p>
-                <p className="text-muted-foreground text-center leading-relaxed mt-6">
-                    A special thanks to those in Asia who recently joined Termix through various forum posts, keep
-                    sharing it! A Chinese translation is planned for Termix, but since I don’t speak Chinese, I’ll need
-                    to hire someone to help with the translation. If you’d like to support me financially, you can do
-                    so{" "}
-                    <a
-                        href="https://github.com/sponsors/LukeGus"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary hover:underline hover:text-primary/80 transition-colors"
-                    >
-                        here.
-                    </a>
-                </p>
-            </CardContent>
-            <CardFooter className="justify-center">
-                <Button
-                    variant="outline"
-                    onClick={onHidePermanently}
-                    className="w-full max-w-xs"
-                >
-                    Hide Permanently
-                </Button>
-            </CardFooter>
-        </Card>
-    );
-}

src/apps/SSH/Config Editor/ConfigEditor.tsx

@@ -1,608 +0,0 @@
-import React, {useState, useEffect, useRef} from "react";
-import {ConfigEditorSidebar} from "@/apps/SSH/Config Editor/ConfigEditorSidebar.tsx";
-import {ConfigTabList} from "@/apps/SSH/Config Editor/ConfigTabList.tsx";
-import {ConfigHomeView} from "@/apps/SSH/Config Editor/ConfigHomeView.tsx";
-import {ConfigCodeEditor} from "@/apps/SSH/Config Editor/ConfigCodeEditor.tsx";
-import {Button} from '@/components/ui/button.tsx';
-import {ConfigTopbar} from "@/apps/SSH/Config Editor/ConfigTopbar.tsx";
-import {cn} from '@/lib/utils.ts';
-import {
-    getConfigEditorRecent,
-    getConfigEditorPinned,
-    getConfigEditorShortcuts,
-    addConfigEditorRecent,
-    removeConfigEditorRecent,
-    addConfigEditorPinned,
-    removeConfigEditorPinned,
-    addConfigEditorShortcut,
-    removeConfigEditorShortcut,
-    readSSHFile,
-    writeSSHFile,
-    getSSHStatus,
-    connectSSH
-} from '@/apps/SSH/ssh-axios.ts';
-
-interface Tab {
-    id: string | number;
-    title: string;
-    fileName: string;
-    content: string;
-    isSSH?: boolean;
-    sshSessionId?: string;
-    filePath?: string;
-    loading?: boolean;
-    error?: string;
-    success?: string;
-    dirty?: boolean;
-}
-
-interface SSHHost {
-    id: number;
-    name: string;
-    ip: string;
-    port: number;
-    username: string;
-    folder: string;
-    tags: string[];
-    pin: boolean;
-    authType: string;
-    password?: string;
-    key?: string;
-    keyPassword?: string;
-    keyType?: string;
-    enableTerminal: boolean;
-    enableTunnel: boolean;
-    enableConfigEditor: boolean;
-    defaultPath: string;
-    tunnelConnections: any[];
-    createdAt: string;
-    updatedAt: string;
-}
-
-export function ConfigEditor({onSelectView}: { onSelectView: (view: string) => void }): React.ReactElement {
-    const [tabs, setTabs] = useState<Tab[]>([]);
-    const [activeTab, setActiveTab] = useState<string | number>('home');
-    const [recent, setRecent] = useState<any[]>([]);
-    const [pinned, setPinned] = useState<any[]>([]);
-    const [shortcuts, setShortcuts] = useState<any[]>([]);
-
-    const [currentHost, setCurrentHost] = useState<SSHHost | null>(null);
-    const [isSaving, setIsSaving] = useState(false);
-
-    const sidebarRef = useRef<any>(null);
-
-    useEffect(() => {
-        if (currentHost) {
-            fetchHomeData();
-        } else {
-            setRecent([]);
-            setPinned([]);
-            setShortcuts([]);
-        }
-    }, [currentHost]);
-
-    useEffect(() => {
-        if (activeTab === 'home' && currentHost) {
-            fetchHomeData();
-        }
-    }, [activeTab, currentHost]);
-
-    useEffect(() => {
-        if (activeTab === 'home' && currentHost) {
-            const interval = setInterval(() => {
-                fetchHomeData();
-            }, 2000);
-
-            return () => clearInterval(interval);
-        }
-    }, [activeTab, currentHost]);
-
-    async function fetchHomeData() {
-        if (!currentHost) return;
-
-        try {
-            const homeDataPromise = Promise.all([
-                getConfigEditorRecent(currentHost.id),
-                getConfigEditorPinned(currentHost.id),
-                getConfigEditorShortcuts(currentHost.id),
-            ]);
-
-            const timeoutPromise = new Promise((_, reject) =>
-                setTimeout(() => reject(new Error('Fetch home data timed out')), 15000)
-            );
-
-            const [recentRes, pinnedRes, shortcutsRes] = await Promise.race([homeDataPromise, timeoutPromise]);
-
-            const recentWithPinnedStatus = (recentRes || []).map(file => ({
-                ...file,
-                type: 'file',
-                isPinned: (pinnedRes || []).some(pinnedFile =>
-                    pinnedFile.path === file.path && pinnedFile.name === file.name
-                )
-            }));
-
-            const pinnedWithType = (pinnedRes || []).map(file => ({
-                ...file,
-                type: 'file'
-            }));
-
-            setRecent(recentWithPinnedStatus);
-            setPinned(pinnedWithType);
-            setShortcuts((shortcutsRes || []).map(shortcut => ({
-                ...shortcut,
-                type: 'directory'
-            })));
-        } catch (err: any) {
-        }
-    }
-
-    const formatErrorMessage = (err: any, defaultMessage: string): string => {
-        if (typeof err === 'object' && err !== null && 'response' in err) {
-            const axiosErr = err as any;
-            if (axiosErr.response?.status === 403) {
-                return `Permission denied. ${defaultMessage}. Check the Docker logs for detailed error information.`;
-            } else if (axiosErr.response?.status === 500) {
-                const backendError = axiosErr.response?.data?.error || 'Internal server error occurred';
-                return `Server Error (500): ${backendError}. Check the Docker logs for detailed error information.`;
-            } else if (axiosErr.response?.data?.error) {
-                const backendError = axiosErr.response.data.error;
-                return `${axiosErr.response?.status ? `Error ${axiosErr.response.status}: ` : ''}${backendError}. Check the Docker logs for detailed error information.`;
-            } else {
-                return `Request failed with status code ${axiosErr.response?.status || 'unknown'}. Check the Docker logs for detailed error information.`;
-            }
-        } else if (err instanceof Error) {
-            return `${err.message}. Check the Docker logs for detailed error information.`;
-        } else {
-            return `${defaultMessage}. Check the Docker logs for detailed error information.`;
-        }
-    };
-
-    const handleOpenFile = async (file: any) => {
-        const tabId = file.path;
-
-        if (!tabs.find(t => t.id === tabId)) {
-            const currentSshSessionId = currentHost?.id.toString();
-
-            setTabs([...tabs, {
-                id: tabId,
-                title: file.name,
-                fileName: file.name,
-                content: '',
-                filePath: file.path,
-                isSSH: true,
-                sshSessionId: currentSshSessionId,
-                loading: true
-            }]);
-            try {
-                const res = await readSSHFile(currentSshSessionId, file.path);
-                setTabs(tabs => tabs.map(t => t.id === tabId ? {
-                    ...t,
-                    content: res.content,
-                    loading: false,
-                    error: undefined
-                } : t));
-                await addConfigEditorRecent({
-                    name: file.name,
-                    path: file.path,
-                    isSSH: true,
-                    sshSessionId: currentSshSessionId,
-                    hostId: currentHost?.id
-                });
-                fetchHomeData();
-            } catch (err: any) {
-                const errorMessage = formatErrorMessage(err, 'Cannot read file');
-                setTabs(tabs => tabs.map(t => t.id === tabId ? {...t, loading: false, error: errorMessage} : t));
-            }
-        }
-        setActiveTab(tabId);
-    };
-
-    const handleRemoveRecent = async (file: any) => {
-        try {
-            await removeConfigEditorRecent({
-                name: file.name,
-                path: file.path,
-                isSSH: true,
-                sshSessionId: file.sshSessionId,
-                hostId: currentHost?.id
-            });
-            fetchHomeData();
-        } catch (err) {
-        }
-    };
-
-    const handlePinFile = async (file: any) => {
-        try {
-            await addConfigEditorPinned({
-                name: file.name,
-                path: file.path,
-                isSSH: true,
-                sshSessionId: file.sshSessionId,
-                hostId: currentHost?.id
-            });
-            fetchHomeData();
-            if (sidebarRef.current && sidebarRef.current.fetchFiles) {
-                sidebarRef.current.fetchFiles();
-            }
-        } catch (err) {
-        }
-    };
-
-    const handleUnpinFile = async (file: any) => {
-        try {
-            await removeConfigEditorPinned({
-                name: file.name,
-                path: file.path,
-                isSSH: true,
-                sshSessionId: file.sshSessionId,
-                hostId: currentHost?.id
-            });
-            fetchHomeData();
-            if (sidebarRef.current && sidebarRef.current.fetchFiles) {
-                sidebarRef.current.fetchFiles();
-            }
-        } catch (err) {
-        }
-    };
-
-    const handleOpenShortcut = async (shortcut: any) => {
-        if (sidebarRef.current?.isOpeningShortcut) {
-            return;
-        }
-
-        if (sidebarRef.current && sidebarRef.current.openFolder) {
-            try {
-                sidebarRef.current.isOpeningShortcut = true;
-
-                const normalizedPath = shortcut.path.startsWith('/') ? shortcut.path : `/${shortcut.path}`;
-
-                await sidebarRef.current.openFolder(currentHost, normalizedPath);
-            } catch (err) {
-            } finally {
-                if (sidebarRef.current) {
-                    sidebarRef.current.isOpeningShortcut = false;
-                }
-            }
-        } else {
-        }
-    };
-
-    const handleAddShortcut = async (folderPath: string) => {
-        try {
-            const name = folderPath.split('/').pop() || folderPath;
-            await addConfigEditorShortcut({
-                name,
-                path: folderPath,
-                isSSH: true,
-                sshSessionId: currentHost?.id.toString(),
-                hostId: currentHost?.id
-            });
-            fetchHomeData();
-        } catch (err) {
-        }
-    };
-
-    const handleRemoveShortcut = async (shortcut: any) => {
-        try {
-            await removeConfigEditorShortcut({
-                name: shortcut.name,
-                path: shortcut.path,
-                isSSH: true,
-                sshSessionId: currentHost?.id.toString(),
-                hostId: currentHost?.id
-            });
-            fetchHomeData();
-        } catch (err) {
-        }
-    };
-
-    const closeTab = (tabId: string | number) => {
-        const idx = tabs.findIndex(t => t.id === tabId);
-        const newTabs = tabs.filter(t => t.id !== tabId);
-        setTabs(newTabs);
-        if (activeTab === tabId) {
-            if (newTabs.length > 0) setActiveTab(newTabs[Math.max(0, idx - 1)].id);
-            else setActiveTab('home');
-        }
-        if (currentHost) {
-            fetchHomeData();
-        }
-    };
-
-    const setTabContent = (tabId: string | number, content: string) => {
-        setTabs(tabs => tabs.map(t => t.id === tabId ? {
-            ...t,
-            content,
-            dirty: true,
-            error: undefined,
-            success: undefined
-        } : t));
-    };
-
-    const handleSave = async (tab: Tab) => {
-        if (isSaving) {
-            return;
-        }
-
-        setIsSaving(true);
-
-        try {
-            if (!tab.sshSessionId) {
-                throw new Error('No SSH session ID available');
-            }
-
-            if (!tab.filePath) {
-                throw new Error('No file path available');
-            }
-
-            if (!currentHost?.id) {
-                throw new Error('No current host available');
-            }
-
-            try {
-                const statusPromise = getSSHStatus(tab.sshSessionId);
-                const statusTimeoutPromise = new Promise((_, reject) =>
-                    setTimeout(() => reject(new Error('SSH status check timed out')), 10000)
-                );
-
-                const status = await Promise.race([statusPromise, statusTimeoutPromise]);
-
-                if (!status.connected) {
-                    const connectPromise = connectSSH(tab.sshSessionId, {
-                        ip: currentHost.ip,
-                        port: currentHost.port,
-                        username: currentHost.username,
-                        password: currentHost.password,
-                        sshKey: currentHost.key,
-                        keyPassword: currentHost.keyPassword
-                    });
-                    const connectTimeoutPromise = new Promise((_, reject) =>
-                        setTimeout(() => reject(new Error('SSH reconnection timed out')), 15000)
-                    );
-
-                    await Promise.race([connectPromise, connectTimeoutPromise]);
-                }
-            } catch (statusErr) {
-            }
-
-            const savePromise = writeSSHFile(tab.sshSessionId, tab.filePath, tab.content);
-            const timeoutPromise = new Promise((_, reject) =>
-                setTimeout(() => {
-                    reject(new Error('Save operation timed out'));
-                }, 30000)
-            );
-
-            const result = await Promise.race([savePromise, timeoutPromise]);
-            setTabs(tabs => tabs.map(t => t.id === tab.id ? {
-                ...t,
-                dirty: false,
-                success: 'File saved successfully'
-            } : t));
-
-            setTimeout(() => {
-                setTabs(tabs => tabs.map(t => t.id === tab.id ? {...t, success: undefined} : t));
-            }, 3000);
-
-            Promise.allSettled([
-                (async () => {
-                    try {
-                        await addConfigEditorRecent({
-                            name: tab.fileName,
-                            path: tab.filePath,
-                            isSSH: true,
-                            sshSessionId: tab.sshSessionId,
-                            hostId: currentHost.id
-                        });
-                    } catch (recentErr) {
-                    }
-                })(),
-                (async () => {
-                    try {
-                        await fetchHomeData();
-                    } catch (refreshErr) {
-                    }
-                })()
-            ]).then(() => {
-            });
-
-        } catch (err) {
-            let errorMessage = formatErrorMessage(err, 'Cannot save file');
-
-            if (errorMessage.includes('timed out') || errorMessage.includes('timeout')) {
-                errorMessage = `Save operation timed out. The file may have been saved successfully, but the operation took too long to complete. Check the Docker logs for confirmation.`;
-            }
-
-            setTabs(tabs => {
-                const updatedTabs = tabs.map(t => t.id === tab.id ? {
-                    ...t,
-                    error: `Failed to save file: ${errorMessage}`
-                } : t);
-                return updatedTabs;
-            });
-
-            setTimeout(() => {
-                setTabs(currentTabs => [...currentTabs]);
-            }, 100);
-        } finally {
-            setIsSaving(false);
-        }
-    };
-
-    const handleHostChange = (host: SSHHost | null) => {
-        setCurrentHost(host);
-        setTabs([]);
-        setActiveTab('home');
-    };
-
-    if (!currentHost) {
-        return (
-            <div style={{position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden'}}>
-                <div style={{position: 'absolute', top: 0, left: 0, width: 256, height: '100vh', zIndex: 20}}>
-                    <ConfigEditorSidebar
-                        onSelectView={onSelectView}
-                        onOpenFile={handleOpenFile}
-                        tabs={tabs}
-                        ref={sidebarRef}
-                        onHostChange={handleHostChange}
-                    />
-                </div>
-                <div style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 256,
-                    right: 0,
-                    bottom: 0,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    background: '#09090b'
-                }}>
-                    <div className="text-center">
-                        <h2 className="text-xl font-semibold text-white mb-2">Connect to a Server</h2>
-                        <p className="text-muted-foreground">Select a server from the sidebar to start editing files</p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div style={{position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden'}}>
-            <div style={{position: 'absolute', top: 0, left: 0, width: 256, height: '100vh', zIndex: 20}}>
-                <ConfigEditorSidebar
-                    onSelectView={onSelectView}
-                    onOpenFile={handleOpenFile}
-                    tabs={tabs}
-                    ref={sidebarRef}
-                    onHostChange={handleHostChange}
-                />
-            </div>
-            <div style={{position: 'absolute', top: 0, left: 256, right: 0, height: 44, zIndex: 30}}>
-                <div className="flex items-center w-full bg-[#18181b] border-b border-[#222224] h-11 relative px-4"
-                     style={{height: 44}}>
-                    {/* Tab list scrollable area */}
-                    <div className="flex-1 min-w-0 h-full flex items-center">
-                        <div
-                            className="h-9 w-full bg-[#09090b] border border-[#23232a] rounded-md flex items-center overflow-x-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent"
-                            style={{minWidth: 0}}>
-                            <ConfigTopbar
-                                tabs={tabs.map(t => ({id: t.id, title: t.title}))}
-                                activeTab={activeTab}
-                                setActiveTab={setActiveTab}
-                                closeTab={closeTab}
-                                onHomeClick={() => {
-                                    setActiveTab('home');
-                                    if (currentHost) {
-                                        fetchHomeData();
-                                    }
-                                }}
-                            />
-                        </div>
-                    </div>
-                    {/* Save button - always visible */}
-                    <Button
-                        className={cn(
-                            'ml-4 px-4 py-1.5 border rounded-md text-sm font-medium transition-colors',
-                            'border-[#2d2d30] text-white bg-transparent hover:bg-[#23232a] active:bg-[#23232a] focus:bg-[#23232a]',
-                            activeTab === 'home' || !tabs.find(t => t.id === activeTab)?.dirty || isSaving ? 'opacity-60 cursor-not-allowed' : 'hover:border-[#2d2d30]'
-                        )}
-                        disabled={activeTab === 'home' || !tabs.find(t => t.id === activeTab)?.dirty || isSaving}
-                        onClick={() => {
-                            const tab = tabs.find(t => t.id === activeTab);
-                            if (tab && !isSaving) handleSave(tab);
-                        }}
-                        type="button"
-                        style={{height: 36, alignSelf: 'center'}}
-                    >
-                        {isSaving ? 'Saving...' : 'Save'}
-                    </Button>
-                </div>
-            </div>
-            <div style={{
-                position: 'absolute',
-                top: 44,
-                left: 256,
-                right: 0,
-                bottom: 0,
-                overflow: 'hidden',
-                zIndex: 10,
-                background: '#101014',
-                display: 'flex',
-                flexDirection: 'column'
-            }}>
-                {activeTab === 'home' ? (
-                    <ConfigHomeView
-                        recent={recent}
-                        pinned={pinned}
-                        shortcuts={shortcuts}
-                        onOpenFile={handleOpenFile}
-                        onRemoveRecent={handleRemoveRecent}
-                        onPinFile={handlePinFile}
-                        onUnpinFile={handleUnpinFile}
-                        onOpenShortcut={handleOpenShortcut}
-                        onRemoveShortcut={handleRemoveShortcut}
-                        onAddShortcut={handleAddShortcut}
-                    />
-                ) : (
-                    (() => {
-                        const tab = tabs.find(t => t.id === activeTab);
-                        if (!tab) return null;
-                        return (
-                            <div className="flex flex-col h-full" style={{flex: 1, minHeight: 0}}>
-                                {/* Error display */}
-                                {tab.error && (
-                                    <div
-                                        className="bg-red-900/20 border border-red-500/30 text-red-300 px-4 py-3 text-sm">
-                                        <div className="flex items-center justify-between">
-                                            <div className="flex items-center gap-2">
-                                                <span className="text-red-400">⚠️</span>
-                                                <span>{tab.error}</span>
-                                            </div>
-                                            <button
-                                                onClick={() => setTabs(tabs => tabs.map(t => t.id === tab.id ? {
-                                                    ...t,
-                                                    error: undefined
-                                                } : t))}
-                                                className="text-red-400 hover:text-red-300 transition-colors"
-                                            >
-                                                ✕
-                                            </button>
-                                        </div>
-                                    </div>
-                                )}
-                                {/* Success display */}
-                                {tab.success && (
-                                    <div
-                                        className="bg-green-900/20 border border-green-500/30 text-green-300 px-4 py-3 text-sm">
-                                        <div className="flex items-center justify-between">
-                                            <div className="flex items-center gap-2">
-                                                <span className="text-green-400">✓</span>
-                                                <span>{tab.success}</span>
-                                            </div>
-                                            <button
-                                                onClick={() => setTabs(tabs => tabs.map(t => t.id === tab.id ? {
-                                                    ...t,
-                                                    success: undefined
-                                                } : t))}
-                                                className="text-green-400 hover:text-green-300 transition-colors"
-                                            >
-                                                ✕
-                                            </button>
-                                        </div>
-                                    </div>
-                                )}
-                                <div className="flex-1 min-h-0">
-                                    <ConfigCodeEditor
-                                        content={tab.content}
-                                        fileName={tab.fileName}
-                                        onContentChange={content => setTabContent(tab.id, content)}
-                                    />
-                                </div>
-                            </div>
-                        );
-                    })()
-                )}
-            </div>
-        </div>
-    );
-}

src/apps/SSH/Config Editor/ConfigEditorSidebar.tsx

@@ -1,594 +0,0 @@
-import React, {useEffect, useState, useRef, forwardRef, useImperativeHandle} from 'react';
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel, SidebarMenu, SidebarMenuItem,
-    SidebarProvider
-} from '@/components/ui/sidebar.tsx';
-import {Separator} from '@/components/ui/separator.tsx';
-import {CornerDownLeft, Folder, File, Server, ArrowUp, Pin} from 'lucide-react';
-import {ScrollArea} from '@/components/ui/scroll-area.tsx';
-import {cn} from '@/lib/utils.ts';
-import {Input} from '@/components/ui/input.tsx';
-import {Button} from '@/components/ui/button.tsx';
-import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from '@/components/ui/accordion.tsx';
-import {
-    getSSHHosts,
-    listSSHFiles,
-    connectSSH,
-    getSSHStatus,
-    getConfigEditorPinned,
-    addConfigEditorPinned,
-    removeConfigEditorPinned
-} from '@/apps/SSH/ssh-axios.ts';
-
-interface SSHHost {
-    id: number;
-    name: string;
-    ip: string;
-    port: number;
-    username: string;
-    folder: string;
-    tags: string[];
-    pin: boolean;
-    authType: string;
-    password?: string;
-    key?: string;
-    keyPassword?: string;
-    keyType?: string;
-    enableTerminal: boolean;
-    enableTunnel: boolean;
-    enableConfigEditor: boolean;
-    defaultPath: string;
-    tunnelConnections: any[];
-    createdAt: string;
-    updatedAt: string;
-}
-
-const ConfigEditorSidebar = forwardRef(function ConfigEditorSidebar(
-    {onSelectView, onOpenFile, tabs, onHostChange}: {
-        onSelectView: (view: string) => void;
-        onOpenFile: (file: any) => void;
-        tabs: any[];
-        onHostChange?: (host: SSHHost | null) => void;
-    },
-    ref
-) {
-    const [sshConnections, setSSHConnections] = useState<SSHHost[]>([]);
-    const [loadingSSH, setLoadingSSH] = useState(false);
-    const [errorSSH, setErrorSSH] = useState<string | undefined>(undefined);
-    const [view, setView] = useState<'servers' | 'files'>('servers');
-    const [activeServer, setActiveServer] = useState<SSHHost | null>(null);
-    const [currentPath, setCurrentPath] = useState('/');
-    const [files, setFiles] = useState<any[]>([]);
-    const pathInputRef = useRef<HTMLInputElement>(null);
-
-    const [search, setSearch] = useState('');
-    const [debouncedSearch, setDebouncedSearch] = useState('');
-    const [fileSearch, setFileSearch] = useState('');
-    const [debouncedFileSearch, setDebouncedFileSearch] = useState('');
-    useEffect(() => {
-        const handler = setTimeout(() => setDebouncedSearch(search), 200);
-        return () => clearTimeout(handler);
-    }, [search]);
-    useEffect(() => {
-        const handler = setTimeout(() => setDebouncedFileSearch(fileSearch), 200);
-        return () => clearTimeout(handler);
-    }, [fileSearch]);
-
-    const [sshSessionId, setSshSessionId] = useState<string | null>(null);
-    const [filesLoading, setFilesLoading] = useState(false);
-    const [filesError, setFilesError] = useState<string | null>(null);
-    const [connectingSSH, setConnectingSSH] = useState(false);
-    const [connectionCache, setConnectionCache] = useState<Record<string, {
-        sessionId: string;
-        timestamp: number
-    }>>({});
-    const [fetchingFiles, setFetchingFiles] = useState(false);
-
-    useEffect(() => {
-        fetchSSH();
-    }, []);
-
-    async function fetchSSH() {
-        setLoadingSSH(true);
-        setErrorSSH(undefined);
-        try {
-            const hosts = await getSSHHosts();
-            const configEditorHosts = hosts.filter(host => host.enableConfigEditor);
-
-            if (configEditorHosts.length > 0) {
-                const firstHost = configEditorHosts[0];
-            }
-
-            setSSHConnections(configEditorHosts);
-        } catch (err: any) {
-            setErrorSSH('Failed to load SSH connections');
-        } finally {
-            setLoadingSSH(false);
-        }
-    }
-
-    async function connectToSSH(server: SSHHost): Promise<string | null> {
-        const sessionId = server.id.toString();
-
-        const cached = connectionCache[sessionId];
-        if (cached && Date.now() - cached.timestamp < 30000) {
-            setSshSessionId(cached.sessionId);
-            return cached.sessionId;
-        }
-
-        if (connectingSSH) {
-            return null;
-        }
-
-        setConnectingSSH(true);
-
-        try {
-            if (!server.password && !server.key) {
-                setFilesError('No authentication credentials available for this SSH host');
-                return null;
-            }
-
-            const connectionConfig = {
-                ip: server.ip,
-                port: server.port,
-                username: server.username,
-                password: server.password,
-                sshKey: server.key,
-                keyPassword: server.keyPassword,
-            };
-
-            await connectSSH(sessionId, connectionConfig);
-
-            setSshSessionId(sessionId);
-
-            setConnectionCache(prev => ({
-                ...prev,
-                [sessionId]: {sessionId, timestamp: Date.now()}
-            }));
-
-            return sessionId;
-        } catch (err: any) {
-            setFilesError(err?.response?.data?.error || 'Failed to connect to SSH');
-            setSshSessionId(null);
-            return null;
-        } finally {
-            setConnectingSSH(false);
-        }
-    }
-
-    async function fetchFiles() {
-        if (fetchingFiles) {
-            return;
-        }
-
-        setFetchingFiles(true);
-        setFiles([]);
-        setFilesLoading(true);
-        setFilesError(null);
-
-        try {
-            let pinnedFiles: any[] = [];
-            try {
-                if (activeServer) {
-                    pinnedFiles = await getConfigEditorPinned(activeServer.id);
-                }
-            } catch (err) {
-            }
-
-            if (activeServer && sshSessionId) {
-                let res: any[] = [];
-
-                try {
-                    const status = await getSSHStatus(sshSessionId);
-                    if (!status.connected) {
-                        const newSessionId = await connectToSSH(activeServer);
-                        if (newSessionId) {
-                            setSshSessionId(newSessionId);
-                            res = await listSSHFiles(newSessionId, currentPath);
-                        } else {
-                            throw new Error('Failed to reconnect SSH session');
-                        }
-                    } else {
-                        res = await listSSHFiles(sshSessionId, currentPath);
-                    }
-                } catch (sessionErr) {
-                    const newSessionId = await connectToSSH(activeServer);
-                    if (newSessionId) {
-                        setSshSessionId(newSessionId);
-                        res = await listSSHFiles(newSessionId, currentPath);
-                    } else {
-                        throw sessionErr;
-                    }
-                }
-
-                const processedFiles = (res || []).map((f: any) => {
-                    const filePath = currentPath + (currentPath.endsWith('/') ? '' : '/') + f.name;
-                    const isPinned = pinnedFiles.some(pinned => pinned.path === filePath);
-                    return {
-                        ...f,
-                        path: filePath,
-                        isPinned,
-                        isSSH: true,
-                        sshSessionId: sshSessionId
-                    };
-                });
-
-                setFiles(processedFiles);
-            }
-        } catch (err: any) {
-            setFiles([]);
-            setFilesError(err?.response?.data?.error || err?.message || 'Failed to list files');
-        } finally {
-            setFilesLoading(false);
-            setFetchingFiles(false);
-        }
-    }
-
-    useEffect(() => {
-        if (view === 'files' && activeServer && sshSessionId && !connectingSSH && !fetchingFiles) {
-            const timeoutId = setTimeout(() => {
-                fetchFiles();
-            }, 100);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [currentPath, view, activeServer, sshSessionId]);
-
-    async function handleSelectServer(server: SSHHost) {
-        if (connectingSSH) {
-            return;
-        }
-
-        setFetchingFiles(false);
-        setFilesLoading(false);
-        setFilesError(null);
-        setFiles([]);
-
-        setActiveServer(server);
-        setCurrentPath(server.defaultPath || '/');
-        setView('files');
-
-        const sessionId = await connectToSSH(server);
-        if (sessionId) {
-            setSshSessionId(sessionId);
-            if (onHostChange) {
-                onHostChange(server);
-            }
-        } else {
-            w
-            setView('servers');
-            setActiveServer(null);
-        }
-    }
-
-    useImperativeHandle(ref, () => ({
-        openFolder: async (server: SSHHost, path: string) => {
-            if (connectingSSH || fetchingFiles) {
-                return;
-            }
-
-            if (activeServer?.id === server.id && currentPath === path) {
-                setTimeout(() => fetchFiles(), 100);
-                return;
-            }
-
-            setFetchingFiles(false);
-            setFilesLoading(false);
-            setFilesError(null);
-            setFiles([]);
-
-            setActiveServer(server);
-            setCurrentPath(path);
-            setView('files');
-
-            if (!sshSessionId || activeServer?.id !== server.id) {
-                const sessionId = await connectToSSH(server);
-                if (sessionId) {
-                    setSshSessionId(sessionId);
-                    if (onHostChange && activeServer?.id !== server.id) {
-                        onHostChange(server);
-                    }
-                } else {
-                    setView('servers');
-                    setActiveServer(null);
-                }
-            } else {
-                if (onHostChange && activeServer?.id !== server.id) {
-                    onHostChange(server);
-                }
-            }
-        },
-        fetchFiles: () => {
-            if (activeServer && sshSessionId) {
-                fetchFiles();
-            }
-        }
-    }));
-
-    useEffect(() => {
-        if (pathInputRef.current) {
-            pathInputRef.current.scrollLeft = pathInputRef.current.scrollWidth;
-        }
-    }, [currentPath]);
-
-    const sshByFolder: Record<string, SSHHost[]> = {};
-    sshConnections.forEach(conn => {
-        const folder = conn.folder && conn.folder.trim() ? conn.folder : 'No Folder';
-        if (!sshByFolder[folder]) sshByFolder[folder] = [];
-        sshByFolder[folder].push(conn);
-    });
-
-    const sortedFolders = Object.keys(sshByFolder);
-    if (sortedFolders.includes('No Folder')) {
-        sortedFolders.splice(sortedFolders.indexOf('No Folder'), 1);
-        sortedFolders.unshift('No Folder');
-    }
-
-    const filteredSshByFolder: Record<string, SSHHost[]> = {};
-    Object.entries(sshByFolder).forEach(([folder, hosts]) => {
-        filteredSshByFolder[folder] = hosts.filter(conn => {
-            const q = debouncedSearch.trim().toLowerCase();
-            if (!q) return true;
-            return (conn.name || '').toLowerCase().includes(q) || (conn.ip || '').toLowerCase().includes(q) ||
-                (conn.username || '').toLowerCase().includes(q) || (conn.folder || '').toLowerCase().includes(q) ||
-                (conn.tags || []).join(' ').toLowerCase().includes(q);
-        });
-    });
-
-    const filteredFiles = files.filter(file => {
-        const q = debouncedFileSearch.trim().toLowerCase();
-        if (!q) return true;
-        return file.name.toLowerCase().includes(q);
-    });
-
-    return (
-        <SidebarProvider>
-            <Sidebar style={{height: '100vh', maxHeight: '100vh', overflow: 'hidden'}}>
-                <SidebarContent style={{height: '100vh', maxHeight: '100vh', overflow: 'hidden'}}>
-                    <SidebarGroup className="flex flex-col flex-grow h-full overflow-hidden">
-                        <SidebarGroupLabel className="text-lg font-bold text-white flex items-center gap-2">
-                            Termix / Config
-                        </SidebarGroupLabel>
-                        <Separator className="p-0.25 mt-1 mb-1"/>
-                        <SidebarGroupContent className="flex flex-col flex-grow min-h-0">
-                            <SidebarMenu>
-                                <SidebarMenuItem key={"Homepage"}>
-                                    <Button className="w-full mt-2 mb-2 h-8" onClick={() => onSelectView("homepage")}
-                                            variant="outline">
-                                        <CornerDownLeft/>
-                                        Return
-                                    </Button>
-                                    <Separator className="p-0.25 mt-1 mb-1"/>
-                                </SidebarMenuItem>
-                            </SidebarMenu>
-                            <div
-                                className="flex-1 w-full flex flex-col rounded-md bg-[#09090b] border border-[#434345] overflow-hidden p-0 relative min-h-0 mt-1">
-                                {view === 'servers' && (
-                                    <>
-                                        <div
-                                            className="w-full px-2 pt-2 pb-2 bg-[#09090b] z-10 border-b border-[#23232a]">
-                                            <Input
-                                                value={search}
-                                                onChange={e => setSearch(e.target.value)}
-                                                placeholder="Search hosts by name, username, IP, folder, tags..."
-                                                className="w-full h-8 text-sm bg-[#18181b] border border-[#23232a] text-white placeholder:text-muted-foreground rounded"
-                                                autoComplete="off"
-                                            />
-                                        </div>
-                                        <ScrollArea className="flex-1 w-full h-full"
-                                                    style={{height: '100%', maxHeight: '100%'}}>
-                                            <div className="flex flex-col h-full">
-                                                <div
-                                                    className="w-full flex-grow overflow-hidden p-0 m-0 relative flex flex-col min-h-0">
-                                                    <div style={{display: 'flex', justifyContent: 'center'}}>
-                                                        <Separator className="w-full h-px bg-[#434345] my-2"
-                                                                   style={{maxWidth: 213, margin: '0 auto'}}/>
-                                                    </div>
-                                                    <div className="mx-auto" style={{maxWidth: '213px', width: '100%'}}>
-                                                        <div className="flex-1 min-h-0">
-                                                            <Accordion type="multiple" className="w-full"
-                                                                       value={sortedFolders}>
-                                                                {sortedFolders.map((folder, idx) => (
-                                                                    <React.Fragment key={folder}>
-                                                                        <AccordionItem value={folder}
-                                                                                       className="mt-0 w-full !border-b-transparent">
-                                                                            <AccordionTrigger
-                                                                                className="text-base font-semibold rounded-t-none py-2 w-full">{folder}</AccordionTrigger>
-                                                                            <AccordionContent
-                                                                                className="flex flex-col gap-1 pb-2 pt-1 w-full">
-                                                                                {filteredSshByFolder[folder].map(conn => (
-                                                                                    <Button
-                                                                                        key={conn.id}
-                                                                                        variant="outline"
-                                                                                        className="w-full h-10 px-2 bg-[#18181b] border border-[#434345] hover:bg-[#2d2d30] transition-colors text-left justify-start"
-                                                                                        onClick={() => handleSelectServer(conn)}
-                                                                                    >
-                                                                                        <div
-                                                                                            className="flex items-center w-full">
-                                                                                            {conn.pin && <Pin
-                                                                                                className="w-0.5 h-0.5 text-yellow-400 mr-1 flex-shrink-0"/>}
-                                                                                            <span
-                                                                                                className="font-medium truncate">{conn.name || conn.ip}</span>
-                                                                                        </div>
-                                                                                    </Button>
-                                                                                ))}
-                                                                            </AccordionContent>
-                                                                        </AccordionItem>
-                                                                        {idx < sortedFolders.length - 1 && (
-                                                                            <div style={{
-                                                                                display: 'flex',
-                                                                                justifyContent: 'center'
-                                                                            }}>
-                                                                                <Separator
-                                                                                    className="h-px bg-[#434345] my-1"
-                                                                                    style={{width: 213}}/>
-                                                                            </div>
-                                                                        )}
-                                                                    </React.Fragment>
-                                                                ))}
-                                                            </Accordion>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </ScrollArea>
-                                    </>
-                                )}
-                                {view === 'files' && activeServer && (
-                                    <div className="flex flex-col h-full w-full" style={{maxWidth: 260}}>
-                                        <div
-                                            className="flex items-center gap-2 px-2 py-2 border-b border-[#23232a] bg-[#18181b] z-20"
-                                            style={{maxWidth: 260}}>
-                                            <Button
-                                                size="icon"
-                                                variant="outline"
-                                                className="h-8 w-8 bg-[#18181b] border border-[#23232a] rounded-md hover:bg-[#2d2d30] focus:outline-none focus:ring-2 focus:ring-ring"
-                                                onClick={() => {
-                                                    let path = currentPath;
-                                                    if (path && path !== '/' && path !== '') {
-                                                        if (path.endsWith('/')) path = path.slice(0, -1);
-                                                        const lastSlash = path.lastIndexOf('/');
-                                                        if (lastSlash > 0) {
-                                                            setCurrentPath(path.slice(0, lastSlash));
-                                                        } else {
-                                                            setCurrentPath('/');
-                                                        }
-                                                    } else {
-                                                        setView('servers');
-                                                        if (onHostChange) {
-                                                            onHostChange(null);
-                                                        }
-                                                    }
-                                                }}
-                                            >
-                                                <ArrowUp className="w-4 h-4"/>
-                                            </Button>
-                                            <Input ref={pathInputRef} value={currentPath}
-                                                   onChange={e => setCurrentPath(e.target.value)}
-                                                   className="flex-1 bg-[#18181b] border border-[#434345] text-white truncate rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-ring hover:border-[#5a5a5d]"
-                                            />
-                                        </div>
-                                        <div className="px-2 py-2 border-b border-[#23232a] bg-[#18181b]">
-                                            <Input
-                                                placeholder="Search files and folders..."
-                                                className="w-full h-7 text-sm bg-[#23232a] border border-[#434345] text-white placeholder:text-muted-foreground rounded"
-                                                autoComplete="off"
-                                                value={fileSearch}
-                                                onChange={e => setFileSearch(e.target.value)}
-                                            />
-                                        </div>
-                                        <div className="flex-1 w-full h-full bg-[#09090b] border-t border-[#23232a]">
-                                            <ScrollArea className="w-full h-full bg-[#09090b]" style={{
-                                                height: '100%',
-                                                maxHeight: '100%',
-                                                paddingRight: 8,
-                                                scrollbarGutter: 'stable',
-                                                background: '#09090b'
-                                            }}>
-                                                <div className="p-2 pr-2">
-                                                    {connectingSSH || filesLoading ? (
-                                                        <div className="text-xs text-muted-foreground">Loading...</div>
-                                                    ) : filesError ? (
-                                                        <div className="text-xs text-red-500">{filesError}</div>
-                                                    ) : filteredFiles.length === 0 ? (
-                                                        <div className="text-xs text-muted-foreground">No files or
-                                                            folders found.</div>
-                                                    ) : (
-                                                        <div className="flex flex-col gap-1">
-                                                            {filteredFiles.map((item: any) => {
-                                                                const isOpen = (tabs || []).some((t: any) => t.id === item.path);
-                                                                return (
-                                                                    <div
-                                                                        key={item.path}
-                                                                        className={cn(
-                                                                            "flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded group max-w-full",
-                                                                            isOpen && "opacity-60 cursor-not-allowed pointer-events-none"
-                                                                        )}
-                                                                        style={{maxWidth: 220, marginBottom: 8}}
-                                                                    >
-                                                                        <div
-                                                                            className="flex items-center gap-2 flex-1 cursor-pointer min-w-0"
-                                                                            onClick={() => !isOpen && (item.type === 'directory' ? setCurrentPath(item.path) : onOpenFile({
-                                                                                name: item.name,
-                                                                                path: item.path,
-                                                                                isSSH: item.isSSH,
-                                                                                sshSessionId: item.sshSessionId
-                                                                            }))}
-                                                                        >
-                                                                            {item.type === 'directory' ?
-                                                                                <Folder
-                                                                                    className="w-4 h-4 text-blue-400"/> :
-                                                                                <File
-                                                                                    className="w-4 h-4 text-muted-foreground"/>}
-                                                                            <span
-                                                                                className="text-sm text-white truncate max-w-[120px]">{item.name}</span>
-                                                                        </div>
-                                                                        <div className="flex items-center gap-1">
-                                                                            {item.type === 'file' && (
-                                                                                <Button size="icon" variant="ghost"
-                                                                                        className="h-7 w-7"
-                                                                                        disabled={isOpen}
-                                                                                        onClick={async (e) => {
-                                                                                            e.stopPropagation();
-                                                                                            try {
-                                                                                                if (item.isPinned) {
-                                                                                                    await removeConfigEditorPinned({
-                                                                                                        name: item.name,
-                                                                                                        path: item.path,
-                                                                                                        hostId: activeServer?.id,
-                                                                                                        isSSH: true,
-                                                                                                        sshSessionId: activeServer?.id.toString()
-                                                                                                    });
-                                                                                                    setFiles(files.map(f =>
-                                                                                                        f.path === item.path ? {
-                                                                                                            ...f,
-                                                                                                            isPinned: false
-                                                                                                        } : f
-                                                                                                    ));
-                                                                                                } else {
-                                                                                                    await addConfigEditorPinned({
-                                                                                                        name: item.name,
-                                                                                                        path: item.path,
-                                                                                                        hostId: activeServer?.id,
-                                                                                                        isSSH: true,
-                                                                                                        sshSessionId: activeServer?.id.toString()
-                                                                                                    });
-                                                                                                    setFiles(files.map(f =>
-                                                                                                        f.path === item.path ? {
-                                                                                                            ...f,
-                                                                                                            isPinned: true
-                                                                                                        } : f
-                                                                                                    ));
-                                                                                                }
-                                                                                            } catch (err) {
-                                                                                                console.error('Failed to pin/unpin file:', err);
-                                                                                            }
-                                                                                        }}
-                                                                                >
-                                                                                    <Pin
-                                                                                        className={`w-1 h-1 ${item.isPinned ? 'text-yellow-400 fill-current' : 'text-muted-foreground'}`}/>
-                                                                                </Button>
-                                                                            )}
-                                                                        </div>
-                                                                    </div>
-                                                                );
-                                                            })}
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            </ScrollArea>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        </SidebarGroupContent>
-                    </SidebarGroup>
-                </SidebarContent>
-            </Sidebar>
-        </SidebarProvider>
-    );
-});
-export {ConfigEditorSidebar};

src/apps/SSH/Config Editor/ConfigFileSidebarViewer.tsx

@@ -1,149 +0,0 @@
-import React from 'react';
-import {Button} from '@/components/ui/button.tsx';
-import {Card} from '@/components/ui/card.tsx';
-import {Separator} from '@/components/ui/separator.tsx';
-import {Plus, Folder, File, Star, Trash2, Edit, Link2, Server, Pin} from 'lucide-react';
-
-interface SSHConnection {
-    id: string;
-    name: string;
-    ip: string;
-    port: number;
-    username: string;
-    isPinned?: boolean;
-}
-
-interface FileItem {
-    name: string;
-    type: 'file' | 'directory' | 'link';
-    path: string;
-    isStarred?: boolean;
-}
-
-interface ConfigFileSidebarViewerProps {
-    sshConnections: SSHConnection[];
-    onAddSSH: () => void;
-    onConnectSSH: (conn: SSHConnection) => void;
-    onEditSSH: (conn: SSHConnection) => void;
-    onDeleteSSH: (conn: SSHConnection) => void;
-    onPinSSH: (conn: SSHConnection) => void;
-    currentPath: string;
-    files: FileItem[];
-    onOpenFile: (file: FileItem) => void;
-    onOpenFolder: (folder: FileItem) => void;
-    onStarFile: (file: FileItem) => void;
-    onDeleteFile: (file: FileItem) => void;
-    isLoading?: boolean;
-    error?: string;
-    isSSHMode: boolean;
-    onSwitchToLocal: () => void;
-    onSwitchToSSH: (conn: SSHConnection) => void;
-    currentSSH?: SSHConnection;
-}
-
-export function ConfigFileSidebarViewer({
-                                            sshConnections,
-                                            onAddSSH,
-                                            onConnectSSH,
-                                            onEditSSH,
-                                            onDeleteSSH,
-                                            onPinSSH,
-                                            currentPath,
-                                            files,
-                                            onOpenFile,
-                                            onOpenFolder,
-                                            onStarFile,
-                                            onDeleteFile,
-                                            isLoading,
-                                            error,
-                                            isSSHMode,
-                                            onSwitchToLocal,
-                                            onSwitchToSSH,
-                                            currentSSH,
-                                        }: ConfigFileSidebarViewerProps) {
-    return (
-        <div className="flex flex-col h-full">
-            {/* SSH Connections */}
-            <div className="p-2 bg-[#18181b] border-b border-[#23232a]">
-                <div className="flex items-center justify-between mb-2">
-                    <span className="text-xs text-muted-foreground font-semibold">SSH Connections</span>
-                    <Button size="icon" variant="outline" onClick={onAddSSH} className="ml-2 h-7 w-7">
-                        <Plus className="w-4 h-4"/>
-                    </Button>
-                </div>
-                <div className="flex flex-col gap-1">
-                    <Button
-                        variant={!isSSHMode ? 'secondary' : 'ghost'}
-                        className="w-full justify-start text-left px-2 py-1.5 rounded"
-                        onClick={onSwitchToLocal}
-                    >
-                        <Server className="w-4 h-4 mr-2"/> Local Files
-                    </Button>
-                    {sshConnections.map((conn) => (
-                        <div key={conn.id} className="flex items-center gap-1 group">
-                            <Button
-                                variant={isSSHMode && currentSSH?.id === conn.id ? 'secondary' : 'ghost'}
-                                className="flex-1 justify-start text-left px-2 py-1.5 rounded"
-                                onClick={() => onSwitchToSSH(conn)}
-                            >
-                                <Link2 className="w-4 h-4 mr-2"/>
-                                {conn.name || conn.ip}
-                                {conn.isPinned && <Pin className="w-3 h-3 ml-1 text-yellow-400"/>}
-                            </Button>
-                            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onPinSSH(conn)}>
-                                <Pin
-                                    className={`w-4 h-4 ${conn.isPinned ? 'text-yellow-400' : 'text-muted-foreground'}`}/>
-                            </Button>
-                            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onEditSSH(conn)}>
-                                <Edit className="w-4 h-4"/>
-                            </Button>
-                            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onDeleteSSH(conn)}>
-                                <Trash2 className="w-4 h-4 text-red-500"/>
-                            </Button>
-                        </div>
-                    ))}
-                </div>
-            </div>
-            {/* File/Folder Viewer */}
-            <div className="flex-1 bg-[#09090b] p-2 overflow-y-auto">
-                <div className="mb-2 flex items-center gap-2">
-                    <span
-                        className="text-xs text-muted-foreground font-semibold">{isSSHMode ? 'SSH Path' : 'Local Path'}</span>
-                    <span className="text-xs text-white truncate">{currentPath}</span>
-                </div>
-                {isLoading ? (
-                    <div className="text-xs text-muted-foreground">Loading...</div>
-                ) : error ? (
-                    <div className="text-xs text-red-500">{error}</div>
-                ) : (
-                    <div className="flex flex-col gap-1">
-                        {files.map((item) => (
-                            <Card key={item.path}
-                                  className="flex items-center gap-2 px-2 py-1 bg-[#18181b] border border-[#23232a] rounded">
-                                <div className="flex items-center gap-2 flex-1 cursor-pointer"
-                                     onClick={() => item.type === 'directory' ? onOpenFolder(item) : onOpenFile(item)}>
-                                    {item.type === 'directory' ? <Folder className="w-4 h-4 text-blue-400"/> :
-                                        <File className="w-4 h-4 text-muted-foreground"/>}
-                                    <span className="text-sm text-white truncate">{item.name}</span>
-                                </div>
-                                <div className="flex items-center gap-1">
-                                    <Button size="icon" variant="ghost" className="h-7 w-7"
-                                            onClick={() => onStarFile(item)}>
-                                        <Pin
-                                            className={`w-4 h-4 ${item.isStarred ? 'text-yellow-400' : 'text-muted-foreground'}`}/>
-                                    </Button>
-                                    <Button size="icon" variant="ghost" className="h-7 w-7"
-                                            onClick={() => onDeleteFile(item)}>
-                                        <Trash2 className="w-4 h-4 text-red-500"/>
-                                    </Button>
-                                </div>
-                            </Card>
-                        ))}
-                        {files.length === 0 &&
-                            <div className="text-xs text-muted-foreground">No files or folders found.</div>}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-} 

src/apps/SSH/Config Editor/ConfigTabList.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import {Button} from '@/components/ui/button.tsx';
-import {X, Home} from 'lucide-react';
-
-interface ConfigTab {
-    id: string | number;
-    title: string;
-}
-
-interface ConfigTabListProps {
-    tabs: ConfigTab[];
-    activeTab: string | number;
-    setActiveTab: (tab: string | number) => void;
-    closeTab: (tab: string | number) => void;
-    onHomeClick: () => void;
-}
-
-export function ConfigTabList({tabs, activeTab, setActiveTab, closeTab, onHomeClick}: ConfigTabListProps) {
-    return (
-        <div className="inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
-            <Button
-                onClick={onHomeClick}
-                variant="outline"
-                className={`h-7 mr-[0.5rem] rounded-md flex items-center ${activeTab === 'home' ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
-            >
-                <Home className="w-4 h-4"/>
-            </Button>
-            {tabs.map((tab, index) => {
-                const isActive = tab.id === activeTab;
-                return (
-                    <div
-                        key={tab.id}
-                        className={index < tabs.length - 1 ? "mr-[0.5rem]" : ""}
-                    >
-                        <div className="inline-flex rounded-md shadow-sm" role="group">
-                            <Button
-                                onClick={() => setActiveTab(tab.id)}
-                                variant="outline"
-                                className={`h-7 rounded-r-none ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
-                            >
-                                {tab.title}
-                            </Button>
-
-                            <Button
-                                onClick={() => closeTab(tab.id)}
-                                variant="outline"
-                                className="h-7 rounded-l-none p-0 !w-9"
-                            >
-                                <X className="!w-5 !h-5" strokeWidth={2.5}/>
-                            </Button>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-} 

src/apps/SSH/Config Editor/ConfigTopbar.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { ConfigTabList } from "./ConfigTabList.tsx";
-
-export function ConfigTopbar(props: any): React.ReactElement {
-    return (
-        <ConfigTabList {...props} />
-    )
-}

src/apps/SSH/Manager/SSHManagerSidebar.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-
-import {
-    CornerDownLeft
-} from "lucide-react"
-
-import {
-    Button
-} from "@/components/ui/button.tsx"
-
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarMenu,
-    SidebarMenuItem, SidebarProvider,
-} from "@/components/ui/sidebar.tsx"
-
-import {
-    Separator,
-} from "@/components/ui/separator.tsx"
-
-interface SidebarProps {
-    onSelectView: (view: string) => void;
-}
-
-export function SSHManagerSidebar({onSelectView}: SidebarProps): React.ReactElement {
-    return (
-        <SidebarProvider>
-            <Sidebar>
-                <SidebarContent>
-                    <SidebarGroup>
-                        <SidebarGroupLabel className="text-lg font-bold text-white flex items-center gap-2">
-                            Termix / SSH Manager
-                        </SidebarGroupLabel>
-                        <Separator className="p-0.25 mt-1 mb-1"/>
-                        <SidebarGroupContent className="flex flex-col flex-grow">
-                            <SidebarMenu>
-
-                                {/* Sidebar Items */}
-                                <SidebarMenuItem key={"Homepage"}>
-                                    <Button className="w-full mt-2 mb-2 h-8" onClick={() => onSelectView("homepage")}
-                                            variant="outline">
-                                        <CornerDownLeft/>
-                                        Return
-                                    </Button>
-                                    <Separator className="p-0.25 mt-1 mb-1"/>
-                                </SidebarMenuItem>
-
-                            </SidebarMenu>
-                        </SidebarGroupContent>
-                    </SidebarGroup>
-                </SidebarContent>
-            </Sidebar>
-        </SidebarProvider>
-    )
-}

src/apps/SSH/Terminal/Terminal.tsx

@@ -1,784 +0,0 @@
-import React, {useState, useRef, useEffect} from "react";
-import {TerminalSidebar} from "@/apps/SSH/Terminal/TerminalSidebar.tsx";
-import {TerminalComponent} from "./TerminalComponent.tsx";
-import {TerminalTopbar} from "@/apps/SSH/Terminal/TerminalTopbar.tsx";
-import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
-import * as ResizablePrimitive from "react-resizable-panels";
-import {ChevronDown, ChevronRight} from "lucide-react";
-
-interface ConfigEditorProps {
-    onSelectView: (view: string) => void;
-}
-
-type Tab = {
-    id: number;
-    title: string;
-    hostConfig: any;
-    terminalRef: React.RefObject<any>;
-};
-
-export function Terminal({onSelectView}: ConfigEditorProps): React.ReactElement {
-    const [allTabs, setAllTabs] = useState<Tab[]>([]);
-    const [currentTab, setCurrentTab] = useState<number | null>(null);
-    const [allSplitScreenTab, setAllSplitScreenTab] = useState<number[]>([]);
-    const nextTabId = useRef(1);
-
-    const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
-    const [isTopbarOpen, setIsTopbarOpen] = useState<boolean>(true);
-    const SIDEBAR_WIDTH = 256;
-    const HANDLE_THICKNESS = 10;
-
-    const [panelRects, setPanelRects] = useState<Record<string, DOMRect | null>>({});
-    const panelRefs = useRef<Record<string, HTMLDivElement | null>>({});
-    const panelGroupRefs = useRef<{ [key: string]: any }>({});
-
-    const setActiveTab = (tabId: number) => {
-        setCurrentTab(tabId);
-    };
-
-    const fitVisibleTerminals = () => {
-        allTabs.forEach((terminal) => {
-            const isVisible =
-                (allSplitScreenTab.length === 0 && terminal.id === currentTab) ||
-                (allSplitScreenTab.length > 0 && (terminal.id === currentTab || allSplitScreenTab.includes(terminal.id)));
-            if (isVisible && terminal.terminalRef && terminal.terminalRef.current && typeof terminal.terminalRef.current.fit === 'function') {
-                terminal.terminalRef.current.fit();
-            }
-        });
-    };
-
-    const setSplitScreenTab = (tabId: number) => {
-        fitVisibleTerminals();
-        setAllSplitScreenTab((prev) => {
-            let next;
-            if (prev.includes(tabId)) {
-                next = prev.filter((id) => id !== tabId);
-            } else if (prev.length < 3) {
-                next = [...prev, tabId];
-            } else {
-                next = prev;
-            }
-            setTimeout(() => fitVisibleTerminals(), 0);
-            return next;
-        });
-    };
-
-    const setCloseTab = (tabId: number) => {
-        const tab = allTabs.find((t) => t.id === tabId);
-        if (tab && tab.terminalRef && tab.terminalRef.current && typeof tab.terminalRef.current.disconnect === "function") {
-            tab.terminalRef.current.disconnect();
-        }
-        setAllTabs((prev) => prev.filter((tab) => tab.id !== tabId));
-        setAllSplitScreenTab((prev) => prev.filter((id) => id !== tabId));
-        if (currentTab === tabId) {
-            const remainingTabs = allTabs.filter((tab) => tab.id !== tabId);
-            setCurrentTab(remainingTabs.length > 0 ? remainingTabs[0].id : null);
-        }
-    };
-
-    const updatePanelRects = () => {
-        setPanelRects((prev) => {
-            const next: Record<string, DOMRect | null> = {...prev};
-            Object.entries(panelRefs.current).forEach(([id, ref]) => {
-                if (ref) {
-                    next[id] = ref.getBoundingClientRect();
-                }
-            });
-            return next;
-        });
-    };
-
-    useEffect(() => {
-        const observers: ResizeObserver[] = [];
-        Object.entries(panelRefs.current).forEach(([id, ref]) => {
-            if (ref) {
-                const observer = new ResizeObserver(() => updatePanelRects());
-                observer.observe(ref);
-                observers.push(observer);
-            }
-        });
-        updatePanelRects();
-        return () => {
-            observers.forEach((observer) => observer.disconnect());
-        };
-    }, [allSplitScreenTab, currentTab, allTabs.length]);
-
-    const renderAllTerminals = () => {
-        const layoutStyles: Record<number, React.CSSProperties> = {};
-        const splitTabs = allTabs.filter((tab) => allSplitScreenTab.includes(tab.id));
-        const mainTab = allTabs.find((tab) => tab.id === currentTab);
-        const layoutTabs = [mainTab, ...splitTabs.filter((t) => t && t.id !== (mainTab && mainTab.id))].filter((t): t is Tab => !!t);
-        if (allSplitScreenTab.length === 0 && mainTab) {
-            layoutStyles[mainTab.id] = {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                zIndex: 20,
-                display: 'block',
-                pointerEvents: 'auto',
-            };
-        } else {
-            layoutTabs.forEach((tab) => {
-                const rect = panelRects[String(tab.id)];
-                if (rect) {
-                    const parentRect = panelRefs.current['parent']?.getBoundingClientRect();
-                    let top = rect.top, left = rect.left, width = rect.width, height = rect.height;
-                    if (parentRect) {
-                        top = rect.top - parentRect.top;
-                        left = rect.left - parentRect.left;
-                    }
-                    layoutStyles[tab.id] = {
-                        position: 'absolute',
-                        top: top + 28,
-                        left,
-                        width,
-                        height: height - 28,
-                        zIndex: 20,
-                        display: 'block',
-                        pointerEvents: 'auto',
-                    };
-                }
-            });
-        }
-        return (
-            <div ref={el => {
-                panelRefs.current['parent'] = el;
-            }} style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                zIndex: 1,
-                overflow: 'hidden'
-            }}>
-                {allTabs.map((tab) => {
-                    const style = layoutStyles[tab.id]
-                        ? {...layoutStyles[tab.id], overflow: 'hidden'}
-                        : {display: 'none', overflow: 'hidden'};
-                    const isVisible = !!layoutStyles[tab.id];
-                    return (
-                        <div key={tab.id} style={style} data-terminal-id={tab.id}>
-                            <TerminalComponent
-                                key={tab.id}
-                                ref={tab.terminalRef}
-                                hostConfig={tab.hostConfig}
-                                isVisible={isVisible}
-                                title={tab.title}
-                                showTitle={false}
-                                splitScreen={allSplitScreenTab.length > 0}
-                            />
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    };
-
-    const renderSplitOverlays = () => {
-        const splitTabs = allTabs.filter((tab) => allSplitScreenTab.includes(tab.id));
-        const mainTab = allTabs.find((tab) => tab.id === currentTab);
-        const layoutTabs = [mainTab, ...splitTabs.filter((t) => t && t.id !== (mainTab && mainTab.id))].filter((t): t is Tab => !!t);
-        if (allSplitScreenTab.length === 0) return null;
-
-        if (layoutTabs.length === 2) {
-            const [tab1, tab2] = layoutTabs;
-            return (
-                <div style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%',
-                    zIndex: 10,
-                    pointerEvents: 'none'
-                }}>
-                    <ResizablePrimitive.PanelGroup
-                        ref={el => {
-                            panelGroupRefs.current['main'] = el;
-                        }}
-                        direction="horizontal"
-                        className="h-full w-full"
-                        id="main-horizontal"
-                    >
-                        <ResizablePanel key={tab1.id} defaultSize={50} minSize={20}
-                                        className="!overflow-hidden h-full w-full" id={`panel-${tab1.id}`} order={1}>
-                            <div ref={el => {
-                                panelRefs.current[String(tab1.id)] = el;
-                            }} style={{
-                                height: '100%',
-                                width: '100%',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                background: 'transparent',
-                                margin: 0,
-                                padding: 0,
-                                position: 'relative'
-                            }}>
-                                <div style={{
-                                    background: '#18181b',
-                                    color: '#fff',
-                                    fontSize: 13,
-                                    height: 28,
-                                    lineHeight: '28px',
-                                    padding: '0 10px',
-                                    borderBottom: '1px solid #222224',
-                                    letterSpacing: 1,
-                                    margin: 0,
-                                    pointerEvents: 'auto',
-                                    zIndex: 11,
-                                }}>{tab1.title}</div>
-                            </div>
-                        </ResizablePanel>
-                        <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
-                        <ResizablePanel key={tab2.id} defaultSize={50} minSize={20}
-                                        className="!overflow-hidden h-full w-full" id={`panel-${tab2.id}`} order={2}>
-                            <div ref={el => {
-                                panelRefs.current[String(tab2.id)] = el;
-                            }} style={{
-                                height: '100%',
-                                width: '100%',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                background: 'transparent',
-                                margin: 0,
-                                padding: 0,
-                                position: 'relative'
-                            }}>
-                                <div style={{
-                                    background: '#18181b',
-                                    color: '#fff',
-                                    fontSize: 13,
-                                    height: 28,
-                                    lineHeight: '28px',
-                                    padding: '0 10px',
-                                    borderBottom: '1px solid #222224',
-                                    letterSpacing: 1,
-                                    margin: 0,
-                                    pointerEvents: 'auto',
-                                    zIndex: 11,
-                                }}>{tab2.title}</div>
-                            </div>
-                        </ResizablePanel>
-                    </ResizablePrimitive.PanelGroup>
-                </div>
-            );
-        }
-        if (layoutTabs.length === 3) {
-            return (
-                <div style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%',
-                    zIndex: 10,
-                    pointerEvents: 'none'
-                }}>
-                    <ResizablePrimitive.PanelGroup
-                        ref={el => {
-                            panelGroupRefs.current['main'] = el;
-                        }}
-                        direction="vertical"
-                        className="h-full w-full"
-                        id="main-vertical"
-                    >
-                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
-                                        id="top-panel" order={1}>
-                            <ResizablePanelGroup ref={el => {
-                                panelGroupRefs.current['top'] = el;
-                            }} direction="horizontal" className="h-full w-full" id="top-horizontal">
-                                <ResizablePanel key={layoutTabs[0].id} defaultSize={50} minSize={20}
-                                                className="!overflow-hidden h-full w-full"
-                                                id={`panel-${layoutTabs[0].id}`} order={1}>
-                                    <div ref={el => {
-                                        panelRefs.current[String(layoutTabs[0].id)] = el;
-                                    }} style={{
-                                        height: '100%',
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        background: 'transparent',
-                                        margin: 0,
-                                        padding: 0,
-                                        position: 'relative'
-                                    }}>
-                                        <div style={{
-                                            background: '#18181b',
-                                            color: '#fff',
-                                            fontSize: 13,
-                                            height: 28,
-                                            lineHeight: '28px',
-                                            padding: '0 10px',
-                                            borderBottom: '1px solid #222224',
-                                            letterSpacing: 1,
-                                            margin: 0,
-                                            pointerEvents: 'auto',
-                                            zIndex: 11,
-                                        }}>{layoutTabs[0].title}</div>
-                                    </div>
-                                </ResizablePanel>
-                                <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
-                                <ResizablePanel key={layoutTabs[1].id} defaultSize={50} minSize={20}
-                                                className="!overflow-hidden h-full w-full"
-                                                id={`panel-${layoutTabs[1].id}`} order={2}>
-                                    <div ref={el => {
-                                        panelRefs.current[String(layoutTabs[1].id)] = el;
-                                    }} style={{
-                                        height: '100%',
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        background: 'transparent',
-                                        margin: 0,
-                                        padding: 0,
-                                        position: 'relative'
-                                    }}>
-                                        <div style={{
-                                            background: '#18181b',
-                                            color: '#fff',
-                                            fontSize: 13,
-                                            height: 28,
-                                            lineHeight: '28px',
-                                            padding: '0 10px',
-                                            borderBottom: '1px solid #222224',
-                                            letterSpacing: 1,
-                                            margin: 0,
-                                            pointerEvents: 'auto',
-                                            zIndex: 11,
-                                        }}>{layoutTabs[1].title}</div>
-                                    </div>
-                                </ResizablePanel>
-                            </ResizablePanelGroup>
-                        </ResizablePanel>
-                        <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
-                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
-                                        id="bottom-panel" order={2}>
-                            <div ref={el => {
-                                panelRefs.current[String(layoutTabs[2].id)] = el;
-                            }} style={{
-                                height: '100%',
-                                width: '100%',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                background: 'transparent',
-                                margin: 0,
-                                padding: 0,
-                                position: 'relative'
-                            }}>
-                                <div style={{
-                                    background: '#18181b',
-                                    color: '#fff',
-                                    fontSize: 13,
-                                    height: 28,
-                                    lineHeight: '28px',
-                                    padding: '0 10px',
-                                    borderBottom: '1px solid #222224',
-                                    letterSpacing: 1,
-                                    margin: 0,
-                                    pointerEvents: 'auto',
-                                    zIndex: 11,
-                                }}>{layoutTabs[2].title}</div>
-                            </div>
-                        </ResizablePanel>
-                    </ResizablePrimitive.PanelGroup>
-                </div>
-            );
-        }
-        if (layoutTabs.length === 4) {
-            return (
-                <div style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%',
-                    zIndex: 10,
-                    pointerEvents: 'none'
-                }}>
-                    <ResizablePrimitive.PanelGroup
-                        ref={el => {
-                            panelGroupRefs.current['main'] = el;
-                        }}
-                        direction="vertical"
-                        className="h-full w-full"
-                        id="main-vertical"
-                    >
-                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
-                                        id="top-panel" order={1}>
-                            <ResizablePanelGroup ref={el => {
-                                panelGroupRefs.current['top'] = el;
-                            }} direction="horizontal" className="h-full w-full" id="top-horizontal">
-                                <ResizablePanel key={layoutTabs[0].id} defaultSize={50} minSize={20}
-                                                className="!overflow-hidden h-full w-full"
-                                                id={`panel-${layoutTabs[0].id}`} order={1}>
-                                    <div ref={el => {
-                                        panelRefs.current[String(layoutTabs[0].id)] = el;
-                                    }} style={{
-                                        height: '100%',
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        background: 'transparent',
-                                        margin: 0,
-                                        padding: 0,
-                                        position: 'relative'
-                                    }}>
-                                        <div style={{
-                                            background: '#18181b',
-                                            color: '#fff',
-                                            fontSize: 13,
-                                            height: 28,
-                                            lineHeight: '28px',
-                                            padding: '0 10px',
-                                            borderBottom: '1px solid #222224',
-                                            letterSpacing: 1,
-                                            margin: 0,
-                                            pointerEvents: 'auto',
-                                            zIndex: 11,
-                                        }}>{layoutTabs[0].title}</div>
-                                    </div>
-                                </ResizablePanel>
-                                <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
-                                <ResizablePanel key={layoutTabs[1].id} defaultSize={50} minSize={20}
-                                                className="!overflow-hidden h-full w-full"
-                                                id={`panel-${layoutTabs[1].id}`} order={2}>
-                                    <div ref={el => {
-                                        panelRefs.current[String(layoutTabs[1].id)] = el;
-                                    }} style={{
-                                        height: '100%',
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        background: 'transparent',
-                                        margin: 0,
-                                        padding: 0,
-                                        position: 'relative'
-                                    }}>
-                                        <div style={{
-                                            background: '#18181b',
-                                            color: '#fff',
-                                            fontSize: 13,
-                                            height: 28,
-                                            lineHeight: '28px',
-                                            padding: '0 10px',
-                                            borderBottom: '1px solid #222224',
-                                            letterSpacing: 1,
-                                            margin: 0,
-                                            pointerEvents: 'auto',
-                                            zIndex: 11,
-                                        }}>{layoutTabs[1].title}</div>
-                                    </div>
-                                </ResizablePanel>
-                            </ResizablePanelGroup>
-                        </ResizablePanel>
-                        <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
-                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
-                                        id="bottom-panel" order={2}>
-                            <ResizablePanelGroup ref={el => {
-                                panelGroupRefs.current['bottom'] = el;
-                            }} direction="horizontal" className="h-full w-full" id="bottom-horizontal">
-                                <ResizablePanel key={layoutTabs[2].id} defaultSize={50} minSize={20}
-                                                className="!overflow-hidden h-full w-full"
-                                                id={`panel-${layoutTabs[2].id}`} order={1}>
-                                    <div ref={el => {
-                                        panelRefs.current[String(layoutTabs[2].id)] = el;
-                                    }} style={{
-                                        height: '100%',
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        background: 'transparent',
-                                        margin: 0,
-                                        padding: 0,
-                                        position: 'relative'
-                                    }}>
-                                        <div style={{
-                                            background: '#18181b',
-                                            color: '#fff',
-                                            fontSize: 13,
-                                            height: 28,
-                                            lineHeight: '28px',
-                                            padding: '0 10px',
-                                            borderBottom: '1px solid #222224',
-                                            letterSpacing: 1,
-                                            margin: 0,
-                                            pointerEvents: 'auto',
-                                            zIndex: 11,
-                                        }}>{layoutTabs[2].title}</div>
-                                    </div>
-                                </ResizablePanel>
-                                <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
-                                <ResizablePanel key={layoutTabs[3].id} defaultSize={50} minSize={20}
-                                                className="!overflow-hidden h-full w-full"
-                                                id={`panel-${layoutTabs[3].id}`} order={2}>
-                                    <div ref={el => {
-                                        panelRefs.current[String(layoutTabs[3].id)] = el;
-                                    }} style={{
-                                        height: '100%',
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        background: 'transparent',
-                                        margin: 0,
-                                        padding: 0,
-                                        position: 'relative'
-                                    }}>
-                                        <div style={{
-                                            background: '#18181b',
-                                            color: '#fff',
-                                            fontSize: 13,
-                                            height: 28,
-                                            lineHeight: '28px',
-                                            padding: '0 10px',
-                                            borderBottom: '1px solid #222224',
-                                            letterSpacing: 1,
-                                            margin: 0,
-                                            pointerEvents: 'auto',
-                                            zIndex: 11,
-                                        }}>{layoutTabs[3].title}</div>
-                                    </div>
-                                </ResizablePanel>
-                            </ResizablePanelGroup>
-                        </ResizablePanel>
-                    </ResizablePrimitive.PanelGroup>
-                </div>
-            );
-        }
-        return null;
-    };
-
-    const onAddHostSubmit = (data: any) => {
-        const id = nextTabId.current++;
-        const title = `${data.ip || "Host"}:${data.port || 22}`;
-        const terminalRef = React.createRef<any>();
-        const newTab: Tab = {
-            id,
-            title,
-            hostConfig: data,
-            terminalRef,
-        };
-        setAllTabs((prev) => [...prev, newTab]);
-        setCurrentTab(id);
-        setAllSplitScreenTab((prev) => prev.filter((tid) => tid !== id));
-    };
-
-    const getUniqueTabTitle = (baseTitle: string) => {
-        let title = baseTitle;
-        let count = 1;
-        const existingTitles = allTabs.map(t => t.title);
-        while (existingTitles.includes(title)) {
-            title = `${baseTitle} (${count})`;
-            count++;
-        }
-        return title;
-    };
-
-    const onHostConnect = (hostConfig: any) => {
-        const baseTitle = hostConfig.name?.trim() ? hostConfig.name : `${hostConfig.ip || "Host"}:${hostConfig.port || 22}`;
-        const title = getUniqueTabTitle(baseTitle);
-        const terminalRef = React.createRef<any>();
-        const id = nextTabId.current++;
-        const newTab: Tab = {
-            id,
-            title,
-            hostConfig,
-            terminalRef,
-        };
-        setAllTabs((prev) => [...prev, newTab]);
-        setCurrentTab(id);
-        setAllSplitScreenTab((prev) => prev.filter((tid) => tid !== id));
-    };
-
-    return (
-        <div style={{display: 'flex', width: '100vw', height: '100vh', overflow: 'hidden', position: 'relative'}}>
-            <div
-                style={{
-                    width: isSidebarOpen ? SIDEBAR_WIDTH : 0,
-                    flexShrink: 0,
-                    height: '100vh',
-                    position: 'relative',
-                    zIndex: 2,
-                    margin: 0,
-                    padding: 0,
-                    border: 'none',
-                    overflow: 'hidden',
-                    transition: 'width 240ms ease-in-out',
-                    willChange: 'width',
-                }}
-            >
-                <TerminalSidebar
-                    onSelectView={onSelectView}
-                    onHostConnect={onHostConnect}
-                    allTabs={allTabs}
-                    runCommandOnTabs={(tabIds: number[], command: string) => {
-                        allTabs.forEach(tab => {
-                            if (tabIds.includes(tab.id) && tab.terminalRef?.current?.sendInput) {
-                                tab.terminalRef.current.sendInput(command);
-                            }
-                        });
-                    }}
-                    onCloseSidebar={() => setIsSidebarOpen(false)}
-                    open={isSidebarOpen}
-                    onOpenChange={setIsSidebarOpen}
-                />
-            </div>
-
-            <div
-                className="terminal-container"
-                style={{
-                    flex: 1,
-                    height: '100vh',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    margin: 0,
-                    padding: 0,
-                    paddingLeft: isSidebarOpen ? 0 : HANDLE_THICKNESS,
-                    paddingTop: isTopbarOpen ? 0 : HANDLE_THICKNESS,
-                    border: 'none',
-                    transition: 'padding-left 240ms ease-in-out, padding-top 240ms ease-in-out',
-                    willChange: 'padding',
-                }}
-            >
-                <div
-                    style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        height: isTopbarOpen ? 46 : 0,
-                        overflow: 'hidden',
-                        zIndex: 10,
-                        transition: 'height 240ms ease-in-out',
-                        willChange: 'height',
-                    }}
-                >
-                    <TerminalTopbar
-                        allTabs={allTabs}
-                        currentTab={currentTab ?? -1}
-                        setActiveTab={setActiveTab}
-                        allSplitScreenTab={allSplitScreenTab}
-                        setSplitScreenTab={setSplitScreenTab}
-                        setCloseTab={setCloseTab}
-                        onHideTopbar={() => setIsTopbarOpen(false)}
-                    />
-                </div>
-                {!isTopbarOpen && (
-                    <div
-                        onClick={() => setIsTopbarOpen(true)}
-                        style={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            width: '100%',
-                            height: HANDLE_THICKNESS,
-                            background: '#222224',
-                            cursor: 'pointer',
-                            zIndex: 12,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                        title="Show top bar">
-                        <ChevronDown size={HANDLE_THICKNESS} />
-                    </div>
-                )}
-
-                <div
-                    style={{
-                        height: isTopbarOpen ? 'calc(100% - 46px)' : '100%',
-                        marginTop: isTopbarOpen ? 46 : 0,
-                        position: 'relative',
-                        transition: 'margin-top 240ms ease-in-out, height 240ms ease-in-out',
-                    }}
-                >
-                    {allTabs.length === 0 && (
-                        <div style={{
-                            position: 'absolute',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            background: '#18181b',
-                            border: '1px solid #434345',
-                            borderRadius: '8px',
-                            padding: '24px',
-                            textAlign: 'center',
-                            color: '#f7f7f7',
-                            maxWidth: '400px',
-                            zIndex: 30
-                        }}>
-                            <div style={{fontSize: '18px', fontWeight: 'bold', marginBottom: '12px'}}>
-                                Welcome to Termix SSH
-                            </div>
-                            <div style={{fontSize: '14px', color: '#a1a1aa', lineHeight: '1.5'}}>
-                                Click on any host title in the sidebar to open a terminal connection, or use the "Add
-                                Host" button to create a new connection.
-                            </div>
-                        </div>
-                    )}
-                    {allSplitScreenTab.length > 0 && (
-                        <div style={{position: 'absolute', top: 0, right: 0, zIndex: 20, height: 28}}>
-                            <button
-                                style={{
-                                    background: '#18181b',
-                                    color: '#fff',
-                                    borderLeft: '1px solid #222224',
-                                    borderRight: '1px solid #222224',
-                                    borderTop: 'none',
-                                    borderBottom: '1px solid #222224',
-                                    borderRadius: 0,
-                                    padding: '2px 10px',
-                                    cursor: 'pointer',
-                                    fontSize: 13,
-                                    margin: 0,
-                                    height: 28,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                }}
-                                onClick={() => {
-                                    if (allSplitScreenTab.length === 1) {
-                                        panelGroupRefs.current['main']?.setLayout([50, 50]);
-                                    } else if (allSplitScreenTab.length === 2) {
-                                        panelGroupRefs.current['main']?.setLayout([50, 50]);
-                                        panelGroupRefs.current['top']?.setLayout([50, 50]);
-                                    } else if (allSplitScreenTab.length === 3) {
-                                        panelGroupRefs.current['main']?.setLayout([50, 50]);
-                                        panelGroupRefs.current['top']?.setLayout([50, 50]);
-                                        panelGroupRefs.current['bottom']?.setLayout([50, 50]);
-                                    }
-                                }}
-                            >
-                                Reset Split Sizes
-                            </button>
-                        </div>
-                    )}
-                    {renderAllTerminals()}
-                    {renderSplitOverlays()}
-                </div>
-            </div>
-
-            {!isSidebarOpen && (
-                <div
-                    onClick={() => setIsSidebarOpen(true)}
-                    style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: HANDLE_THICKNESS,
-                        height: '100%',
-                        background: '#222224',
-                        cursor: 'pointer',
-                        zIndex: 20,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}
-                    title="Show sidebar">
-                    <ChevronRight size={HANDLE_THICKNESS} />
-                </div>
-            )}
-        </div>
-    );
-}

src/apps/SSH/Terminal/TerminalSidebar.tsx

@@ -1,440 +0,0 @@
-import React, {useState} from 'react';
-
-import {
-    CornerDownLeft,
-    Hammer, Pin, Menu
-} from "lucide-react"
-
-import {
-    Button
-} from "@/components/ui/button.tsx"
-
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarMenu,
-    SidebarMenuItem, SidebarProvider,
-} from "@/components/ui/sidebar.tsx"
-
-import {
-    Separator,
-} from "@/components/ui/separator.tsx"
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger
-} from "@/components/ui/sheet.tsx";
-import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
-} from "@/components/ui/accordion.tsx";
-import {ScrollArea} from "@/components/ui/scroll-area.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import {getSSHHosts} from "@/apps/SSH/ssh-axios";
-import {Checkbox} from "@/components/ui/checkbox.tsx";
-
-interface SSHHost {
-    id: number;
-    name: string;
-    ip: string;
-    port: number;
-    username: string;
-    folder: string;
-    tags: string[];
-    pin: boolean;
-    authType: string;
-    password?: string;
-    key?: string;
-    keyPassword?: string;
-    keyType?: string;
-    enableTerminal: boolean;
-    enableTunnel: boolean;
-    enableConfigEditor: boolean;
-    defaultPath: string;
-    tunnelConnections: any[];
-    createdAt: string;
-    updatedAt: string;
-}
-
-export interface SidebarProps {
-    onSelectView: (view: string) => void;
-    onHostConnect: (hostConfig: any) => void;
-    allTabs: { id: number; title: string; terminalRef: React.RefObject<any> }[];
-    runCommandOnTabs: (tabIds: number[], command: string) => void;
-    onCloseSidebar?: () => void;
-    onAddHostSubmit?: (data: any) => void;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-
-export function TerminalSidebar({
-                               onSelectView,
-                               onHostConnect,
-                               allTabs,
-                               runCommandOnTabs,
-                               onCloseSidebar,
-                               open,
-                               onOpenChange
-                           }: SidebarProps): React.ReactElement {
-    const [hosts, setHosts] = useState<SSHHost[]>([]);
-    const [hostsLoading, setHostsLoading] = useState(false);
-    const [hostsError, setHostsError] = useState<string | null>(null);
-    const prevHostsRef = React.useRef<SSHHost[]>([]);
-
-    const fetchHosts = React.useCallback(async () => {
-        setHostsLoading(true);
-        setHostsError(null);
-        try {
-            const newHosts = await getSSHHosts();
-            const terminalHosts = newHosts.filter(host => host.enableTerminal);
-
-            const prevHosts = prevHostsRef.current;
-            const isSame =
-                terminalHosts.length === prevHosts.length &&
-                terminalHosts.every((h: SSHHost, i: number) => {
-                    const prev = prevHosts[i];
-                    if (!prev) return false;
-                    return (
-                        h.id === prev.id &&
-                        h.name === prev.name &&
-                        h.folder === prev.folder &&
-                        h.ip === prev.ip &&
-                        h.port === prev.port &&
-                        h.username === prev.username &&
-                        h.password === prev.password &&
-                        h.authType === prev.authType &&
-                        h.key === prev.key &&
-                        h.pin === prev.pin &&
-                        JSON.stringify(h.tags) === JSON.stringify(prev.tags)
-                    );
-                });
-            if (!isSame) {
-                setHosts(terminalHosts);
-                prevHostsRef.current = terminalHosts;
-            }
-        } catch (err: any) {
-            setHostsError('Failed to load hosts');
-        } finally {
-            setHostsLoading(false);
-        }
-    }, []);
-
-    React.useEffect(() => {
-        fetchHosts();
-        const interval = setInterval(fetchHosts, 10000);
-        return () => clearInterval(interval);
-    }, [fetchHosts]);
-
-    const [search, setSearch] = useState("");
-    const [debouncedSearch, setDebouncedSearch] = useState("");
-    React.useEffect(() => {
-        const handler = setTimeout(() => setDebouncedSearch(search), 200);
-        return () => clearTimeout(handler);
-    }, [search]);
-
-    const filteredHosts = React.useMemo(() => {
-        if (!debouncedSearch.trim()) return hosts;
-        const q = debouncedSearch.trim().toLowerCase();
-        return hosts.filter(h => {
-            const searchableText = [
-                h.name || '',
-                h.username,
-                h.ip,
-                h.folder || '',
-                ...(h.tags || []),
-                h.authType,
-                h.defaultPath || ''
-            ].join(' ').toLowerCase();
-            return searchableText.includes(q);
-        });
-    }, [hosts, debouncedSearch]);
-
-    const hostsByFolder = React.useMemo(() => {
-        const map: Record<string, SSHHost[]> = {};
-        filteredHosts.forEach(h => {
-            const folder = h.folder && h.folder.trim() ? h.folder : 'No Folder';
-            if (!map[folder]) map[folder] = [];
-            map[folder].push(h);
-        });
-        return map;
-    }, [filteredHosts]);
-
-    const sortedFolders = React.useMemo(() => {
-        const folders = Object.keys(hostsByFolder);
-        folders.sort((a, b) => {
-            if (a === 'No Folder') return -1;
-            if (b === 'No Folder') return 1;
-            return a.localeCompare(b);
-        });
-        return folders;
-    }, [hostsByFolder]);
-
-    const getSortedHosts = (arr: SSHHost[]) => {
-        const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-        const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-        return [...pinned, ...rest];
-    };
-
-    const [toolsSheetOpen, setToolsSheetOpen] = useState(false);
-    const [toolsCommand, setToolsCommand] = useState("");
-    const [selectedTabIds, setSelectedTabIds] = useState<number[]>([]);
-
-    const handleTabToggle = (tabId: number) => {
-        setSelectedTabIds(prev => prev.includes(tabId) ? prev.filter(id => id !== tabId) : [...prev, tabId]);
-    };
-
-    const handleRunCommand = () => {
-        if (selectedTabIds.length && toolsCommand.trim()) {
-            let cmd = toolsCommand;
-            if (!cmd.endsWith("\n")) cmd += "\n";
-            runCommandOnTabs(selectedTabIds, cmd);
-            setToolsCommand("");
-        }
-    };
-
-    function getCookie(name: string) {
-        return document.cookie.split('; ').reduce((r, v) => {
-            const parts = v.split('=');
-            return parts[0] === name ? decodeURIComponent(parts[1]) : r;
-        }, "");
-    }
-
-    const updateRightClickCopyPaste = (checked) => {
-        document.cookie = `rightClickCopyPaste=${checked}; expires=2147483647; path=/`;
-    }
-
-    return (
-        <SidebarProvider open={open} onOpenChange={onOpenChange}>
-            <Sidebar className="h-full flex flex-col overflow-hidden">
-                <SidebarContent className="flex flex-col flex-grow h-full overflow-hidden">
-                    <SidebarGroup className="flex flex-col flex-grow h-full overflow-hidden">
-                        <SidebarGroupLabel
-                            className="text-lg font-bold text-white flex items-center justify-between gap-2 w-full">
-                            <span>Termix / Terminal</span>
-                            <button
-                                type="button"
-                                onClick={() => onCloseSidebar?.()}
-                                title="Hide sidebar"
-                                style={{
-                                    height: 28,
-                                    width: 28,
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    background: 'hsl(240 5% 9%)',
-                                    color: 'hsl(240 5% 64.9%)',
-                                    border: '1px solid hsl(240 3.7% 15.9%)',
-                                    borderRadius: 6,
-                                    cursor: 'pointer',
-                                }}
-                            >
-                                <Menu className="h-4 w-4"/>
-                            </button>
-                        </SidebarGroupLabel>
-                        <Separator className="p-0.25 mt-1 mb-1"/>
-                        <SidebarGroupContent className="flex flex-col flex-grow h-full overflow-hidden">
-                            <SidebarMenu className="flex flex-col flex-grow h-full overflow-hidden">
-
-                                <SidebarMenuItem key="Homepage">
-                                    <Button
-                                        className="w-full mt-2 mb-2 h-8"
-                                        onClick={() => onSelectView("homepage")}
-                                        variant="outline"
-                                    >
-                                        <CornerDownLeft/>
-                                        Return
-                                    </Button>
-                                    <Separator className="p-0.25 mt-1 mb-1"/>
-                                </SidebarMenuItem>
-
-                                <SidebarMenuItem key="Main" className="flex flex-col flex-grow overflow-hidden">
-                                    <div
-                                        className="w-full flex-grow rounded-md bg-[#09090b] border border-[#434345] overflow-hidden p-0 m-0 relative flex flex-col min-h-0">
-                                        <div className="w-full px-2 pt-2 pb-2 bg-[#09090b] z-10">
-                                            <Input
-                                                value={search}
-                                                onChange={e => setSearch(e.target.value)}
-                                                placeholder="Search hosts by name, username, IP, folder, tags..."
-                                                className="w-full h-8 text-sm bg-background border border-border rounded"
-                                                autoComplete="off"
-                                            />
-                                        </div>
-                                        <div style={{display: 'flex', justifyContent: 'center'}}>
-                                            <Separator className="w-full h-px bg-[#434345] my-2"
-                                                       style={{maxWidth: 213, margin: '0 auto'}}/>
-                                        </div>
-                                        {hostsError && (
-                                            <div className="px-2 py-1 mt-2">
-                                                <div
-                                                    className="text-xs text-red-500 bg-red-500/10 rounded px-2 py-1 border border-red-500/20">{hostsError}</div>
-                                            </div>
-                                        )}
-                                        <div className="flex-1 min-h-0">
-                                            <ScrollArea className="w-full h-full">
-                                                <Accordion key={`host-accordion-${sortedFolders.length}`}
-                                                           type="multiple" className="w-full"
-                                                           defaultValue={sortedFolders.length > 0 ? sortedFolders : undefined}>
-                                                    {sortedFolders.map((folder, idx) => (
-                                                        <React.Fragment key={folder}>
-                                                            <AccordionItem value={folder}
-                                                                           className={idx === 0 ? "mt-0 !border-b-transparent" : "mt-2 !border-b-transparent"}>
-                                                                <AccordionTrigger
-                                                                    className="text-base font-semibold rounded-t-none px-3 py-2"
-                                                                    style={{marginTop: idx === 0 ? 0 : undefined}}>{folder}</AccordionTrigger>
-                                                                <AccordionContent
-                                                                    className="flex flex-col gap-1 px-3 pb-2 pt-1">
-                                                                    {getSortedHosts(hostsByFolder[folder]).map(host => (
-                                                                        <div key={host.id}
-                                                                             className="w-full overflow-hidden">
-                                                                            <HostMenuItem
-                                                                                host={host}
-                                                                                onHostConnect={onHostConnect}
-                                                                            />
-                                                                        </div>
-                                                                    ))}
-                                                                </AccordionContent>
-                                                            </AccordionItem>
-                                                            {idx < sortedFolders.length - 1 && (
-                                                                <div
-                                                                    style={{display: 'flex', justifyContent: 'center'}}>
-                                                                    <Separator className="h-px bg-[#434345] my-1"
-                                                                               style={{width: 213}}/>
-                                                                </div>
-                                                            )}
-                                                        </React.Fragment>
-                                                    ))}
-                                                </Accordion>
-                                            </ScrollArea>
-                                        </div>
-                                    </div>
-                                </SidebarMenuItem>
-                            </SidebarMenu>
-                        </SidebarGroupContent>
-                        <div className="bg-sidebar">
-                            <Sheet open={toolsSheetOpen} onOpenChange={setToolsSheetOpen}>
-                                <SheetTrigger asChild>
-                                    <Button
-                                        className="w-full h-8 mt-2"
-                                        variant="outline"
-                                        onClick={() => setToolsSheetOpen(true)}
-                                    >
-                                        <Hammer className="mr-2 h-4 w-4"/>
-                                        Tools
-                                    </Button>
-                                </SheetTrigger>
-                                <SheetContent side="left"
-                                              className="w-[256px] fixed top-0 left-0 h-full z-[100] flex flex-col">
-                                    <SheetHeader className="pb-0.5">
-                                        <SheetTitle>Tools</SheetTitle>
-                                    </SheetHeader>
-                                    <div className="flex-1 overflow-y-auto px-2 pt-2">
-                                        <Accordion type="single" collapsible defaultValue="multiwindow">
-                                            <AccordionItem value="multiwindow">
-                                                <AccordionTrigger className="text-base font-semibold">Run multiwindow
-                                                    commands</AccordionTrigger>
-                                                <AccordionContent>
-                                                    <textarea
-                                                        className="w-full min-h-[120px] max-h-48 rounded-md border border-input text-foreground p-2 text-sm font-mono resize-vertical focus:outline-none focus:ring-0"
-                                                        placeholder="Enter command(s) to run on selected tabs..."
-                                                        value={toolsCommand}
-                                                        onChange={e => setToolsCommand(e.target.value)}
-                                                        style={{
-                                                            fontFamily: 'monospace',
-                                                            marginBottom: 8,
-                                                            background: '#141416'
-                                                        }}
-                                                    />
-                                                    <div className="flex flex-wrap gap-2 mb-2">
-                                                        {allTabs.map(tab => (
-                                                            <Button
-                                                                key={tab.id}
-                                                                type="button"
-                                                                variant={selectedTabIds.includes(tab.id) ? "secondary" : "outline"}
-                                                                size="sm"
-                                                                className="rounded-full px-3 py-1 text-xs flex items-center gap-1"
-                                                                onClick={() => handleTabToggle(tab.id)}
-                                                            >
-                                                                {tab.title}
-                                                            </Button>
-                                                        ))}
-                                                    </div>
-                                                    <Button
-                                                        className="w-full"
-                                                        variant="outline"
-                                                        onClick={handleRunCommand}
-                                                        disabled={!toolsCommand.trim() || !selectedTabIds.length}
-                                                    >
-                                                        Run Command
-                                                    </Button>
-                                                </AccordionContent>
-                                            </AccordionItem>
-                                        </Accordion>
-
-                                        <Separator className="p-0.25"/>
-
-                                        <div className="flex items-center space-x-2 mt-5">
-                                            <Checkbox id="enable-copy-paste" onCheckedChange={updateRightClickCopyPaste}
-                                                      defaultChecked={getCookie("rightClickCopyPaste") === "true"}/>
-                                            <label
-                                                htmlFor="enable-paste"
-                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                            >
-                                                Enable right‑click copy/paste
-                                            </label>
-                                        </div>
-                                    </div>
-                                </SheetContent>
-                            </Sheet>
-                        </div>
-                    </SidebarGroup>
-                </SidebarContent>
-            </Sidebar>
-        </SidebarProvider>
-    );
-}
-
-const HostMenuItem = React.memo(function HostMenuItem({host, onHostConnect}: {
-    host: SSHHost;
-    onHostConnect: (hostConfig: any) => void
-}) {
-    const tags = Array.isArray(host.tags) ? host.tags : [];
-    const hasTags = tags.length > 0;
-    return (
-        <div className="relative group flex flex-col mb-1 w-full overflow-hidden">
-            <div className={`flex flex-col w-full rounded overflow-hidden border border-[#434345] bg-[#18181b] h-full`}>
-                <div className="flex w-full h-10">
-                    <div
-                        className="flex items-center h-full px-2 w-full hover:bg-muted transition-colors cursor-pointer"
-                        onClick={() => onHostConnect(host)}
-                    >
-                        <div className="flex items-center w-full">
-                            {host.pin &&
-                                <Pin className="h-4.5 mr-1 w-4.5 mt-0.5 text-yellow-500 flex-shrink-0"/>
-                            }
-                            <span className="font-medium truncate">{host.name || host.ip}</span>
-                        </div>
-                    </div>
-                </div>
-                {hasTags && (
-                    <div
-                        className="border-t border-border bg-[#18181b] flex items-center gap-1 px-2 py-2 overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent"
-                        style={{height: 30}}>
-                        {tags.map((tag: string) => (
-                            <span key={tag}
-                                  className="bg-muted-foreground/10 text-xs rounded-full px-2 py-0.5 text-muted-foreground whitespace-nowrap border border-border flex-shrink-0 hover:bg-muted transition-colors">
-                                {tag}
-                            </span>
-                        ))}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-});

src/apps/SSH/Terminal/TerminalTabList.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import {Button} from "@/components/ui/button.tsx";
-import {X, SeparatorVertical} from "lucide-react"
-
-interface TerminalTab {
-    id: number;
-    title: string;
-}
-
-interface SSHTabListProps {
-    allTabs: TerminalTab[];
-    currentTab: number;
-    setActiveTab: (tab: number) => void;
-    allSplitScreenTab: number[];
-    setSplitScreenTab: (tab: number) => void;
-    setCloseTab: (tab: number) => void;
-}
-
-export function TerminalTabList({
-                               allTabs,
-                               currentTab,
-                               setActiveTab,
-                               allSplitScreenTab = [],
-                               setSplitScreenTab,
-                               setCloseTab,
-                           }: SSHTabListProps): React.ReactElement {
-    const isSplitScreenActive = allSplitScreenTab.length > 0;
-
-    return (
-        <div className="inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
-            {allTabs.map((terminal, index) => {
-                const isActive = terminal.id === currentTab;
-                const isSplit = allSplitScreenTab.includes(terminal.id);
-                const isSplitButtonDisabled =
-                    (isActive && !isSplitScreenActive) ||
-                    (allSplitScreenTab.length >= 3 && !isSplit);
-
-                return (
-                    <div
-                        key={terminal.id}
-                        className={index < allTabs.length - 1 ? "mr-[0.5rem]" : ""}
-                    >
-                        <div className="inline-flex rounded-md shadow-sm" role="group">
-                            <Button
-                                onClick={() => setActiveTab(terminal.id)}
-                                disabled={isSplit}
-                                variant="outline"
-                                className={`rounded-r-none ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
-                            >
-                                {terminal.title}
-                            </Button>
-
-                            <Button
-                                onClick={() => setSplitScreenTab(terminal.id)}
-                                disabled={isSplitButtonDisabled || isActive}
-                                variant="outline"
-                                className="rounded-none p-0 !w-9 !h-9"
-                            >
-                                <SeparatorVertical className="!w-5 !h-5" strokeWidth={2.5}/>
-                            </Button>
-
-                            <Button
-                                onClick={() => setCloseTab(terminal.id)}
-                                disabled={(isSplitScreenActive && isActive) || isSplit}
-                                variant="outline"
-                                className="rounded-l-none p-0 !w-9 !h-9"
-                            >
-                                <X className="!w-5 !h-5" strokeWidth={2.5}/>
-                            </Button>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-}

src/apps/SSH/Terminal/TerminalTopbar.tsx

@@ -1,73 +0,0 @@
-import {TerminalTabList} from "@/apps/SSH/Terminal/TerminalTabList.tsx";
-import React from "react";
-import {ChevronUp} from "lucide-react";
-
-interface TerminalTab {
-    id: number;
-    title: string;
-}
-
-interface SSHTopbarProps {
-    allTabs: TerminalTab[];
-    currentTab: number;
-    setActiveTab: (tab: number) => void;
-    allSplitScreenTab: number[];
-    setSplitScreenTab: (tab: number) => void;
-    setCloseTab: (tab: number) => void;
-    onHideTopbar?: () => void;
-}
-
-export function TerminalTopbar({
-                              allTabs,
-                              currentTab,
-                              setActiveTab,
-                              allSplitScreenTab,
-                              setSplitScreenTab,
-                              setCloseTab,
-                              onHideTopbar
-                          }: SSHTopbarProps): React.ReactElement {
-    return (
-        <div className="flex h-11.5 z-100" style={{
-            position: 'absolute',
-            left: 0,
-            width: '100%',
-            backgroundColor: '#18181b',
-            borderBottom: '1px solid #222224',
-            display: 'flex',
-            alignItems: 'center',
-        }}>
-            <div style={{flex: 1, minWidth: 0, height: '100%', overflowX: 'auto'}}>
-                <div style={{minWidth: 'max-content', height: '100%', paddingLeft: 8, overflowY: 'hidden'}}>
-                    <TerminalTabList
-                        allTabs={allTabs}
-                        currentTab={currentTab}
-                        setActiveTab={setActiveTab}
-                        allSplitScreenTab={allSplitScreenTab}
-                        setSplitScreenTab={setSplitScreenTab}
-                        setCloseTab={setCloseTab}
-                    />
-                </div>
-            </div>
-            <div style={{flex: '0 0 auto', paddingRight: 8, paddingLeft: 16}}>
-                <button
-                    onClick={() => onHideTopbar?.()}
-                    style={{
-                        height: 28,
-                        width: 28,
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        background: 'hsl(240 5% 9%)',
-                        color: 'hsl(240 5% 64.9%)',
-                        border: '1px solid hsl(240 3.7% 15.9%)',
-                        borderRadius: 6,
-                        cursor: 'pointer',
-                    }}
-                    title="Hide top bar"
-                >
-                    <ChevronUp size={16} strokeWidth={2}/>
-                </button>
-            </div>
-        </div>
-    )
-}

src/apps/SSH/Tunnel/SSHTunnelSidebar.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-
-import {
-    CornerDownLeft,
-    Settings
-} from "lucide-react"
-
-import {
-    Button
-} from "@/components/ui/button.tsx"
-
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarMenu,
-    SidebarMenuItem, SidebarProvider,
-} from "@/components/ui/sidebar.tsx"
-
-import {
-    Separator,
-} from "@/components/ui/separator.tsx"
-
-interface SidebarProps {
-    onSelectView: (view: string) => void;
-}
-
-export function SSHTunnelSidebar({onSelectView}: SidebarProps): React.ReactElement {
-    return (
-        <SidebarProvider>
-            <Sidebar>
-                <SidebarContent>
-                    <SidebarGroup>
-                        <SidebarGroupLabel className="text-lg font-bold text-white flex items-center gap-2">
-                            Termix / Tunnel
-                        </SidebarGroupLabel>
-                        <Separator className="p-0.25 mt-1 mb-1"/>
-                        <SidebarGroupContent className="flex flex-col flex-grow">
-                            <SidebarMenu>
-
-                                <SidebarMenuItem key={"Homepage"}>
-                                    <Button className="w-full mt-2 mb-2 h-8" onClick={() => onSelectView("homepage")}
-                                            variant="outline">
-                                        <CornerDownLeft className="h-4 w-4 mr-2"/>
-                                        Return
-                                    </Button>
-                                    <Separator className="p-0.25 mt-1 mb-1"/>
-                                </SidebarMenuItem>
-
-                            </SidebarMenu>
-                        </SidebarGroupContent>
-                    </SidebarGroup>
-                </SidebarContent>
-            </Sidebar>
-        </SidebarProvider>
-    )
-}

src/apps/SSH/Tunnel/SSHTunnelViewer.tsx

@@ -1,184 +0,0 @@
-import React from "react";
-import {SSHTunnelObject} from "./SSHTunnelObject.tsx";
-import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
-import {Separator} from "@/components/ui/separator.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import {Search} from "lucide-react";
-
-interface TunnelConnection {
-    sourcePort: number;
-    endpointPort: number;
-    endpointHost: string;
-    maxRetries: number;
-    retryInterval: number;
-    autoStart: boolean;
-}
-
-interface SSHHost {
-    id: number;
-    name: string;
-    ip: string;
-    port: number;
-    username: string;
-    folder: string;
-    tags: string[];
-    pin: boolean;
-    authType: string;
-    enableTerminal: boolean;
-    enableTunnel: boolean;
-    enableConfigEditor: boolean;
-    defaultPath: string;
-    tunnelConnections: TunnelConnection[];
-    createdAt: string;
-    updatedAt: string;
-}
-
-interface TunnelStatus {
-    status: string;
-    reason?: string;
-    errorType?: string;
-    retryCount?: number;
-    maxRetries?: number;
-    nextRetryIn?: number;
-    retryExhausted?: boolean;
-}
-
-interface SSHTunnelViewerProps {
-    hosts: SSHHost[];
-    tunnelStatuses: Record<string, TunnelStatus>;
-    tunnelActions: Record<string, boolean>;
-    onTunnelAction: (action: 'connect' | 'disconnect' | 'cancel', host: SSHHost, tunnelIndex: number) => Promise<any>;
-}
-
-export function SSHTunnelViewer({
-                                    hosts = [],
-                                    tunnelStatuses = {},
-                                    tunnelActions = {},
-                                    onTunnelAction
-                                }: SSHTunnelViewerProps): React.ReactElement {
-    const [searchQuery, setSearchQuery] = React.useState("");
-    const [debouncedSearch, setDebouncedSearch] = React.useState("");
-
-    React.useEffect(() => {
-        const handler = setTimeout(() => setDebouncedSearch(searchQuery), 200);
-        return () => clearTimeout(handler);
-    }, [searchQuery]);
-
-    const filteredHosts = React.useMemo(() => {
-        if (!debouncedSearch.trim()) return hosts;
-
-        const query = debouncedSearch.trim().toLowerCase();
-        return hosts.filter(host => {
-            const searchableText = [
-                host.name || '',
-                host.username,
-                host.ip,
-                host.folder || '',
-                ...(host.tags || []),
-                host.authType,
-                host.defaultPath || ''
-            ].join(' ').toLowerCase();
-            return searchableText.includes(query);
-        });
-    }, [hosts, debouncedSearch]);
-
-    const tunnelHosts = React.useMemo(() => {
-        return filteredHosts.filter(host =>
-            host.enableTunnel &&
-            host.tunnelConnections &&
-            host.tunnelConnections.length > 0
-        );
-    }, [filteredHosts]);
-
-    const hostsByFolder = React.useMemo(() => {
-        const map: Record<string, SSHHost[]> = {};
-        tunnelHosts.forEach(host => {
-            const folder = host.folder && host.folder.trim() ? host.folder : 'Uncategorized';
-            if (!map[folder]) map[folder] = [];
-            map[folder].push(host);
-        });
-        return map;
-    }, [tunnelHosts]);
-
-    const sortedFolders = React.useMemo(() => {
-        const folders = Object.keys(hostsByFolder);
-        folders.sort((a, b) => {
-            if (a === 'Uncategorized') return -1;
-            if (b === 'Uncategorized') return 1;
-            return a.localeCompare(b);
-        });
-        return folders;
-    }, [hostsByFolder]);
-
-    const getSortedHosts = (arr: SSHHost[]) => {
-        const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-        const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-        return [...pinned, ...rest];
-    };
-
-    return (
-        <div className="w-full p-6" style={{width: 'calc(100vw - 256px)', maxWidth: 'none'}}>
-            <div className="w-full min-w-0" style={{width: '100%', maxWidth: 'none'}}>
-                <div className="mb-6">
-                    <h1 className="text-2xl font-bold text-foreground mb-2">
-                        SSH Tunnels
-                    </h1>
-                    <p className="text-muted-foreground">
-                        Manage your SSH tunnel connections
-                    </p>
-                </div>
-
-                <div className="relative mb-3">
-                    <Search
-                        className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"/>
-                    <Input
-                        placeholder="Search hosts by name, username, IP, folder, tags..."
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                        className="pl-10"
-                    />
-                </div>
-
-                {tunnelHosts.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-12 text-center">
-                        <h3 className="text-lg font-semibold text-foreground mb-2">
-                            No SSH Tunnels
-                        </h3>
-                        <p className="text-muted-foreground max-w-md">
-                            {searchQuery.trim() ?
-                                "No hosts match your search criteria." :
-                                "Create your first SSH tunnel to get started. Use the SSH Manager to add hosts with tunnel connections."
-                            }
-                        </p>
-                    </div>
-                ) : (
-                    <Accordion type="multiple" className="w-full" defaultValue={sortedFolders}>
-                        {sortedFolders.map((folder, idx) => (
-                            <AccordionItem value={folder} key={`folder-${folder}`}
-                                           className={idx === 0 ? "mt-0" : "mt-2"}>
-                                <AccordionTrigger className="text-base font-semibold rounded-t-none px-3 py-2"
-                                                  style={{marginTop: idx === 0 ? 0 : undefined}}>
-                                    {folder}
-                                </AccordionTrigger>
-                                <AccordionContent className="flex flex-col gap-1 px-3 pb-2 pt-1">
-                                    <div className="grid grid-cols-4 gap-6 w-full">
-                                        {getSortedHosts(hostsByFolder[folder]).map((host, hostIndex) => (
-                                            <div key={host.id} className="w-full">
-                                                <SSHTunnelObject
-                                                    host={host}
-                                                    tunnelStatuses={tunnelStatuses}
-                                                    tunnelActions={tunnelActions}
-                                                    onTunnelAction={onTunnelAction}
-                                                />
-                                            </div>
-                                        ))}
-                                    </div>
-                                </AccordionContent>
-                            </AccordionItem>
-                        ))}
-                    </Accordion>
-                )}
-            </div>
-        </div>
-    );
-}

src/apps/SSH/ssh-axios.ts

@@ -1,520 +0,0 @@
-import axios from 'axios';
-
-interface SSHHostData {
-    name?: string;
-    ip: string;
-    port: number;
-    username: string;
-    folder?: string;
-    tags?: string[];
-    pin?: boolean;
-    authType: 'password' | 'key';
-    password?: string;
-    key?: File | null;
-    keyPassword?: string;
-    keyType?: string;
-    enableTerminal?: boolean;
-    enableTunnel?: boolean;
-    enableConfigEditor?: boolean;
-    defaultPath?: string;
-    tunnelConnections?: any[];
-}
-
-interface SSHHost {
-    id: number;
-    name: string;
-    ip: string;
-    port: number;
-    username: string;
-    folder: string;
-    tags: string[];
-    pin: boolean;
-    authType: string;
-    password?: string;
-    key?: string;
-    keyPassword?: string;
-    keyType?: string;
-    enableTerminal: boolean;
-    enableTunnel: boolean;
-    enableConfigEditor: boolean;
-    defaultPath: string;
-    tunnelConnections: any[];
-    createdAt: string;
-    updatedAt: string;
-}
-
-interface TunnelConfig {
-    name: string;
-    hostName: string;
-    sourceIP: string;
-    sourceSSHPort: number;
-    sourceUsername: string;
-    sourcePassword?: string;
-    sourceAuthMethod: string;
-    sourceSSHKey?: string;
-    sourceKeyPassword?: string;
-    sourceKeyType?: string;
-    endpointIP: string;
-    endpointSSHPort: number;
-    endpointUsername: string;
-    endpointPassword?: string;
-    endpointAuthMethod: string;
-    endpointSSHKey?: string;
-    endpointKeyPassword?: string;
-    endpointKeyType?: string;
-    sourcePort: number;
-    endpointPort: number;
-    maxRetries: number;
-    retryInterval: number;
-    autoStart: boolean;
-    isPinned: boolean;
-}
-
-interface TunnelStatus {
-    status: string;
-    reason?: string;
-    errorType?: string;
-    retryCount?: number;
-    maxRetries?: number;
-    nextRetryIn?: number;
-    retryExhausted?: boolean;
-}
-
-interface ConfigEditorFile {
-    name: string;
-    path: string;
-    type?: 'file' | 'directory';
-    isSSH?: boolean;
-    sshSessionId?: string;
-}
-
-interface ConfigEditorShortcut {
-    name: string;
-    path: string;
-}
-
-const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-
-const sshHostApi = axios.create({
-    baseURL: isLocalhost ? 'http://localhost:8081' : window.location.origin,
-    headers: {
-        'Content-Type': 'application/json',
-    },
-});
-
-const tunnelApi = axios.create({
-    baseURL: isLocalhost ? 'http://localhost:8083' : window.location.origin,
-    headers: {
-        'Content-Type': 'application/json',
-    },
-});
-
-const configEditorApi = axios.create({
-    baseURL: isLocalhost ? 'http://localhost:8084' : window.location.origin,
-    headers: {
-        'Content-Type': 'application/json',
-    }
-})
-
-function getCookie(name: string): string | undefined {
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length === 2) return parts.pop()?.split(';').shift();
-}
-
-sshHostApi.interceptors.request.use((config) => {
-    const token = getCookie('jwt');
-    if (token) {
-        config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-});
-
-tunnelApi.interceptors.request.use((config) => {
-    const token = getCookie('jwt');
-    if (token) {
-        config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-});
-
-configEditorApi.interceptors.request.use((config) => {
-    const token = getCookie('jwt');
-    if (token) {
-        config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-});
-
-export async function getSSHHosts(): Promise<SSHHost[]> {
-    try {
-        const response = await sshHostApi.get('/ssh/db/host');
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function createSSHHost(hostData: SSHHostData): Promise<SSHHost> {
-    try {
-        const submitData = {
-            name: hostData.name || '',
-            ip: hostData.ip,
-            port: parseInt(hostData.port.toString()) || 22,
-            username: hostData.username,
-            folder: hostData.folder || '',
-            tags: hostData.tags || [],
-            pin: hostData.pin || false,
-            authMethod: hostData.authType,
-            password: hostData.authType === 'password' ? hostData.password : '',
-            key: hostData.authType === 'key' ? hostData.key : null,
-            keyPassword: hostData.authType === 'key' ? hostData.keyPassword : '',
-            keyType: hostData.authType === 'key' ? hostData.keyType : '',
-            enableTerminal: hostData.enableTerminal !== false,
-            enableTunnel: hostData.enableTunnel !== false,
-            enableConfigEditor: hostData.enableConfigEditor !== false,
-            defaultPath: hostData.defaultPath || '/',
-            tunnelConnections: hostData.tunnelConnections || [],
-        };
-
-        if (!submitData.enableTunnel) {
-            submitData.tunnelConnections = [];
-        }
-
-        if (!submitData.enableConfigEditor) {
-            submitData.defaultPath = '';
-        }
-
-        if (hostData.authType === 'key' && hostData.key instanceof File) {
-            const formData = new FormData();
-            formData.append('key', hostData.key);
-
-            const dataWithoutFile = {...submitData};
-            delete dataWithoutFile.key;
-            formData.append('data', JSON.stringify(dataWithoutFile));
-
-            const response = await sshHostApi.post('/ssh/db/host', formData, {
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            });
-
-            return response.data;
-        } else {
-            const response = await sshHostApi.post('/ssh/db/host', submitData);
-            return response.data;
-        }
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function updateSSHHost(hostId: number, hostData: SSHHostData): Promise<SSHHost> {
-    try {
-        const submitData = {
-            name: hostData.name || '',
-            ip: hostData.ip,
-            port: parseInt(hostData.port.toString()) || 22,
-            username: hostData.username,
-            folder: hostData.folder || '',
-            tags: hostData.tags || [],
-            pin: hostData.pin || false,
-            authMethod: hostData.authType,
-            password: hostData.authType === 'password' ? hostData.password : '',
-            key: hostData.authType === 'key' ? hostData.key : null,
-            keyPassword: hostData.authType === 'key' ? hostData.keyPassword : '',
-            keyType: hostData.authType === 'key' ? hostData.keyType : '',
-            enableTerminal: hostData.enableTerminal !== false,
-            enableTunnel: hostData.enableTunnel !== false,
-            enableConfigEditor: hostData.enableConfigEditor !== false,
-            defaultPath: hostData.defaultPath || '/',
-            tunnelConnections: hostData.tunnelConnections || [],
-        };
-
-        if (!submitData.enableTunnel) {
-            submitData.tunnelConnections = [];
-        }
-        if (!submitData.enableConfigEditor) {
-            submitData.defaultPath = '';
-        }
-
-        if (hostData.authType === 'key' && hostData.key instanceof File) {
-            const formData = new FormData();
-            formData.append('key', hostData.key);
-
-            const dataWithoutFile = {...submitData};
-            delete dataWithoutFile.key;
-            formData.append('data', JSON.stringify(dataWithoutFile));
-
-            const response = await sshHostApi.put(`/ssh/db/host/${hostId}`, formData, {
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            });
-
-            return response.data;
-        } else {
-            const response = await sshHostApi.put(`/ssh/db/host/${hostId}`, submitData);
-            return response.data;
-        }
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function deleteSSHHost(hostId: number): Promise<any> {
-    try {
-        const response = await sshHostApi.delete(`/ssh/db/host/${hostId}`);
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function getSSHHostById(hostId: number): Promise<SSHHost> {
-    try {
-        const response = await sshHostApi.get(`/ssh/db/host/${hostId}`);
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function getTunnelStatuses(): Promise<Record<string, TunnelStatus>> {
-    try {
-        const response = await tunnelApi.get('/ssh/tunnel/status');
-        return response.data || {};
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function getTunnelStatusByName(tunnelName: string): Promise<TunnelStatus | undefined> {
-    const statuses = await getTunnelStatuses();
-    return statuses[tunnelName];
-}
-
-export async function connectTunnel(tunnelConfig: TunnelConfig): Promise<any> {
-    try {
-        const response = await tunnelApi.post('/ssh/tunnel/connect', tunnelConfig);
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function disconnectTunnel(tunnelName: string): Promise<any> {
-    try {
-        const response = await tunnelApi.post('/ssh/tunnel/disconnect', {tunnelName});
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function cancelTunnel(tunnelName: string): Promise<any> {
-    try {
-        const response = await tunnelApi.post('/ssh/tunnel/cancel', {tunnelName});
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function getConfigEditorRecent(hostId: number): Promise<ConfigEditorFile[]> {
-    try {
-        const response = await sshHostApi.get(`/ssh/config_editor/recent?hostId=${hostId}`);
-        return response.data || [];
-    } catch (error) {
-        return [];
-    }
-}
-
-export async function addConfigEditorRecent(file: {
-    name: string;
-    path: string;
-    isSSH: boolean;
-    sshSessionId?: string;
-    hostId: number
-}): Promise<any> {
-    try {
-        const response = await sshHostApi.post('/ssh/config_editor/recent', file);
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function removeConfigEditorRecent(file: {
-    name: string;
-    path: string;
-    isSSH: boolean;
-    sshSessionId?: string;
-    hostId: number
-}): Promise<any> {
-    try {
-        const response = await sshHostApi.delete('/ssh/config_editor/recent', {data: file});
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function getConfigEditorPinned(hostId: number): Promise<ConfigEditorFile[]> {
-    try {
-        const response = await sshHostApi.get(`/ssh/config_editor/pinned?hostId=${hostId}`);
-        return response.data || [];
-    } catch (error) {
-        return [];
-    }
-}
-
-export async function addConfigEditorPinned(file: {
-    name: string;
-    path: string;
-    isSSH: boolean;
-    sshSessionId?: string;
-    hostId: number
-}): Promise<any> {
-    try {
-        const response = await sshHostApi.post('/ssh/config_editor/pinned', file);
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function removeConfigEditorPinned(file: {
-    name: string;
-    path: string;
-    isSSH: boolean;
-    sshSessionId?: string;
-    hostId: number
-}): Promise<any> {
-    try {
-        const response = await sshHostApi.delete('/ssh/config_editor/pinned', {data: file});
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function getConfigEditorShortcuts(hostId: number): Promise<ConfigEditorShortcut[]> {
-    try {
-        const response = await sshHostApi.get(`/ssh/config_editor/shortcuts?hostId=${hostId}`);
-        return response.data || [];
-    } catch (error) {
-        return [];
-    }
-}
-
-export async function addConfigEditorShortcut(shortcut: {
-    name: string;
-    path: string;
-    isSSH: boolean;
-    sshSessionId?: string;
-    hostId: number
-}): Promise<any> {
-    try {
-        const response = await sshHostApi.post('/ssh/config_editor/shortcuts', shortcut);
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function removeConfigEditorShortcut(shortcut: {
-    name: string;
-    path: string;
-    isSSH: boolean;
-    sshSessionId?: string;
-    hostId: number
-}): Promise<any> {
-    try {
-        const response = await sshHostApi.delete('/ssh/config_editor/shortcuts', {data: shortcut});
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function connectSSH(sessionId: string, config: {
-    ip: string;
-    port: number;
-    username: string;
-    password?: string;
-    sshKey?: string;
-    keyPassword?: string;
-}): Promise<any> {
-    try {
-        const response = await configEditorApi.post('/ssh/config_editor/ssh/connect', {
-            sessionId,
-            ...config
-        });
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function disconnectSSH(sessionId: string): Promise<any> {
-    try {
-        const response = await configEditorApi.post('/ssh/config_editor/ssh/disconnect', {sessionId});
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function getSSHStatus(sessionId: string): Promise<{ connected: boolean }> {
-    try {
-        const response = await configEditorApi.get('/ssh/config_editor/ssh/status', {
-            params: {sessionId}
-        });
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function listSSHFiles(sessionId: string, path: string): Promise<any[]> {
-    try {
-        const response = await configEditorApi.get('/ssh/config_editor/ssh/listFiles', {
-            params: {sessionId, path}
-        });
-        return response.data || [];
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function readSSHFile(sessionId: string, path: string): Promise<{ content: string; path: string }> {
-    try {
-        const response = await configEditorApi.get('/ssh/config_editor/ssh/readFile', {
-            params: {sessionId, path}
-        });
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function writeSSHFile(sessionId: string, path: string, content: string): Promise<any> {
-    try {
-        const response = await configEditorApi.post('/ssh/config_editor/ssh/writeFile', {
-            sessionId,
-            path,
-            content
-        });
-
-        if (response.data && (response.data.message === 'File written successfully' || response.status === 200)) {
-            return response.data;
-        } else {
-            throw new Error('File write operation did not return success status');
-        }
-    } catch (error) {
-        throw error;
-    }
-}
-
-export {sshHostApi, tunnelApi, configEditorApi};

src/apps/Template/Template.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import {TemplateSidebar} from "@/apps/Template/TemplateSidebar.tsx";
-
-interface ConfigEditorProps {
-    onSelectView: (view: string) => void;
-}
-
-export function Template({onSelectView}: ConfigEditorProps): React.ReactElement {
-    return (
-        <div>
-            <TemplateSidebar
-                onSelectView={onSelectView}
-            />
-
-            Template
-        </div>
-    )
-}

src/apps/Template/TemplateSidebar.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import {
-    CornerDownLeft
-} from "lucide-react"
-
-import {
-    Button
-} from "@/components/ui/button.tsx"
-
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarMenu,
-    SidebarMenuItem, SidebarProvider,
-} from "@/components/ui/sidebar.tsx"
-
-import {
-    Separator,
-} from "@/components/ui/separator.tsx"
-
-interface SidebarProps {
-    onSelectView: (view: string) => void;
-}
-
-export function TemplateSidebar({onSelectView}: SidebarProps): React.ReactElement {
-    return (
-        <SidebarProvider>
-            <Sidebar>
-                <SidebarContent>
-                    <SidebarGroup>
-                        <SidebarGroupLabel className="text-lg font-bold text-white flex items-center gap-2">
-                            Termix / Template
-                        </SidebarGroupLabel>
-                        <Separator className="p-0.25 mt-1 mb-1"/>
-                        <SidebarGroupContent className="flex flex-col flex-grow">
-                            <SidebarMenu>
-
-                                <SidebarMenuItem key={"Homepage"}>
-                                    <Button className="w-full mt-2 mb-2 h-8" onClick={() => onSelectView("homepage")}
-                                            variant="outline">
-                                        <CornerDownLeft/>
-                                        Return
-                                    </Button>
-                                    <Separator className="p-0.25 mt-1 mb-1"/>
-                                </SidebarMenuItem>
-
-                            </SidebarMenu>
-                        </SidebarGroupContent>
-                    </SidebarGroup>
-                </SidebarContent>
-            </Sidebar>
-        </SidebarProvider>
-    )
-}

src/backend/config_editor/config_editor.ts

@@ -1,439 +0,0 @@
-import express from 'express';
-import cors from 'cors';
-import {Client as SSHClient} from 'ssh2';
-import chalk from "chalk";
-
-const app = express();
-
-app.use(cors({
-    origin: '*',
-    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
-    allowedHeaders: ['Content-Type', 'Authorization']
-}));
-app.use(express.json());
-
-const sshIconSymbol = '📁';
-const getTimeStamp = (): string => chalk.gray(`[${new Date().toLocaleTimeString()}]`);
-const formatMessage = (level: string, colorFn: chalk.Chalk, message: string): string => {
-    return `${getTimeStamp()} ${colorFn(`[${level.toUpperCase()}]`)} ${chalk.hex('#1e3a8a')(`[${sshIconSymbol}]`)} ${message}`;
-};
-const logger = {
-    info: (msg: string): void => {
-        console.log(formatMessage('info', chalk.cyan, msg));
-    },
-    warn: (msg: string): void => {
-        console.warn(formatMessage('warn', chalk.yellow, msg));
-    },
-    error: (msg: string, err?: unknown): void => {
-        console.error(formatMessage('error', chalk.redBright, msg));
-        if (err) console.error(err);
-    },
-    success: (msg: string): void => {
-        console.log(formatMessage('success', chalk.greenBright, msg));
-    },
-    debug: (msg: string): void => {
-        if (process.env.NODE_ENV !== 'production') {
-            console.debug(formatMessage('debug', chalk.magenta, msg));
-        }
-    }
-};
-
-interface SSHSession {
-    client: SSHClient;
-    isConnected: boolean;
-    lastActive: number;
-    timeout?: NodeJS.Timeout;
-}
-
-const sshSessions: Record<string, SSHSession> = {};
-const SESSION_TIMEOUT_MS = 10 * 60 * 1000;
-
-function cleanupSession(sessionId: string) {
-    const session = sshSessions[sessionId];
-    if (session) {
-        try {
-            session.client.end();
-        } catch {
-        }
-        clearTimeout(session.timeout);
-        delete sshSessions[sessionId];
-    }
-}
-
-function scheduleSessionCleanup(sessionId: string) {
-    const session = sshSessions[sessionId];
-    if (session) {
-        if (session.timeout) clearTimeout(session.timeout);
-        session.timeout = setTimeout(() => cleanupSession(sessionId), SESSION_TIMEOUT_MS);
-    }
-}
-
-app.post('/ssh/config_editor/ssh/connect', (req, res) => {
-    const {sessionId, ip, port, username, password, sshKey, keyPassword} = req.body;
-    if (!sessionId || !ip || !username || !port) {
-        return res.status(400).json({error: 'Missing SSH connection parameters'});
-    }
-
-    if (sshSessions[sessionId]?.isConnected) cleanupSession(sessionId);
-    const client = new SSHClient();
-    const config: any = {
-        host: ip,
-        port: port || 22,
-        username,
-        readyTimeout: 20000,
-        keepaliveInterval: 10000,
-        keepaliveCountMax: 3,
-        algorithms: {
-            kex: [
-                'diffie-hellman-group14-sha256',
-                'diffie-hellman-group14-sha1',
-                'diffie-hellman-group1-sha1',
-                'diffie-hellman-group-exchange-sha256',
-                'diffie-hellman-group-exchange-sha1',
-                'ecdh-sha2-nistp256',
-                'ecdh-sha2-nistp384',
-                'ecdh-sha2-nistp521'
-            ],
-            cipher: [
-                'aes128-ctr',
-                'aes192-ctr',
-                'aes256-ctr',
-                'aes128-gcm@openssh.com',
-                'aes256-gcm@openssh.com',
-                'aes128-cbc',
-                'aes192-cbc',
-                'aes256-cbc',
-                '3des-cbc'
-            ],
-            hmac: [
-                'hmac-sha2-256',
-                'hmac-sha2-512',
-                'hmac-sha1',
-                'hmac-md5'
-            ],
-            compress: [
-                'none',
-                'zlib@openssh.com',
-                'zlib'
-            ]
-        }
-    };
-
-    if (sshKey && sshKey.trim()) {
-        config.privateKey = sshKey;
-        if (keyPassword) config.passphrase = keyPassword;
-    } else if (password && password.trim()) {
-        config.password = password;
-    } else {
-        return res.status(400).json({error: 'Either password or SSH key must be provided'});
-    }
-
-    let responseSent = false;
-
-    client.on('ready', () => {
-        if (responseSent) return;
-        responseSent = true;
-        sshSessions[sessionId] = {client, isConnected: true, lastActive: Date.now()};
-        scheduleSessionCleanup(sessionId);
-        res.json({status: 'success', message: 'SSH connection established'});
-    });
-
-    client.on('error', (err) => {
-        if (responseSent) return;
-        responseSent = true;
-        logger.error(`SSH connection error for session ${sessionId}:`, err.message);
-        res.status(500).json({status: 'error', message: err.message});
-    });
-
-    client.on('close', () => {
-        if (sshSessions[sessionId]) sshSessions[sessionId].isConnected = false;
-        cleanupSession(sessionId);
-    });
-
-    client.connect(config);
-});
-
-app.post('/ssh/config_editor/ssh/disconnect', (req, res) => {
-    const {sessionId} = req.body;
-    cleanupSession(sessionId);
-    res.json({status: 'success', message: 'SSH connection disconnected'});
-});
-
-app.get('/ssh/config_editor/ssh/status', (req, res) => {
-    const sessionId = req.query.sessionId as string;
-    const isConnected = !!sshSessions[sessionId]?.isConnected;
-    res.json({status: 'success', connected: isConnected});
-});
-
-app.get('/ssh/config_editor/ssh/listFiles', (req, res) => {
-    const sessionId = req.query.sessionId as string;
-    const sshConn = sshSessions[sessionId];
-    const sshPath = decodeURIComponent((req.query.path as string) || '/');
-
-    if (!sessionId) {
-        return res.status(400).json({error: 'Session ID is required'});
-    }
-
-    if (!sshConn?.isConnected) {
-        return res.status(400).json({error: 'SSH connection not established'});
-    }
-
-    sshConn.lastActive = Date.now();
-    scheduleSessionCleanup(sessionId);
-
-    const escapedPath = sshPath.replace(/'/g, "'\"'\"'");
-    sshConn.client.exec(`ls -la '${escapedPath}'`, (err, stream) => {
-        if (err) {
-            logger.error('SSH listFiles error:', err);
-            return res.status(500).json({error: err.message});
-        }
-
-        let data = '';
-        let errorData = '';
-
-        stream.on('data', (chunk: Buffer) => {
-            data += chunk.toString();
-        });
-
-        stream.stderr.on('data', (chunk: Buffer) => {
-            errorData += chunk.toString();
-        });
-
-        stream.on('close', (code) => {
-            if (code !== 0) {
-                logger.error(`SSH listFiles command failed with code ${code}: ${errorData.replace(/\n/g, ' ').trim()}`);
-                return res.status(500).json({error: `Command failed: ${errorData}`});
-            }
-
-            const lines = data.split('\n').filter(line => line.trim());
-            const files = [];
-
-            for (let i = 1; i < lines.length; i++) {
-                const line = lines[i];
-                const parts = line.split(/\s+/);
-                if (parts.length >= 9) {
-                    const permissions = parts[0];
-                    const name = parts.slice(8).join(' ');
-                    const isDirectory = permissions.startsWith('d');
-                    const isLink = permissions.startsWith('l');
-
-                    if (name === '.' || name === '..') continue;
-
-                    files.push({
-                        name,
-                        type: isDirectory ? 'directory' : (isLink ? 'link' : 'file')
-                    });
-                }
-            }
-
-            res.json(files);
-        });
-    });
-});
-
-app.get('/ssh/config_editor/ssh/readFile', (req, res) => {
-    const sessionId = req.query.sessionId as string;
-    const sshConn = sshSessions[sessionId];
-    const filePath = decodeURIComponent(req.query.path as string);
-
-    if (!sessionId) {
-        return res.status(400).json({error: 'Session ID is required'});
-    }
-
-    if (!sshConn?.isConnected) {
-        return res.status(400).json({error: 'SSH connection not established'});
-    }
-
-    if (!filePath) {
-        return res.status(400).json({error: 'File path is required'});
-    }
-
-    sshConn.lastActive = Date.now();
-    scheduleSessionCleanup(sessionId);
-
-    const escapedPath = filePath.replace(/'/g, "'\"'\"'");
-    sshConn.client.exec(`cat '${escapedPath}'`, (err, stream) => {
-        if (err) {
-            logger.error('SSH readFile error:', err);
-            return res.status(500).json({error: err.message});
-        }
-
-        let data = '';
-        let errorData = '';
-
-        stream.on('data', (chunk: Buffer) => {
-            data += chunk.toString();
-        });
-
-        stream.stderr.on('data', (chunk: Buffer) => {
-            errorData += chunk.toString();
-        });
-
-        stream.on('close', (code) => {
-            if (code !== 0) {
-                logger.error(`SSH readFile command failed with code ${code}: ${errorData.replace(/\n/g, ' ').trim()}`);
-                return res.status(500).json({error: `Command failed: ${errorData}`});
-            }
-
-            res.json({content: data, path: filePath});
-        });
-    });
-});
-
-app.post('/ssh/config_editor/ssh/writeFile', (req, res) => {
-    const {sessionId, path: filePath, content} = req.body;
-    const sshConn = sshSessions[sessionId];
-
-    if (!sessionId) {
-        return res.status(400).json({error: 'Session ID is required'});
-    }
-
-    if (!sshConn?.isConnected) {
-        return res.status(400).json({error: 'SSH connection not established'});
-    }
-
-    if (!filePath) {
-        return res.status(400).json({error: 'File path is required'});
-    }
-
-    if (content === undefined) {
-        return res.status(400).json({error: 'File content is required'});
-    }
-
-    sshConn.lastActive = Date.now();
-    scheduleSessionCleanup(sessionId);
-
-    const tempFile = `/tmp/temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const escapedTempFile = tempFile.replace(/'/g, "'\"'\"'");
-    const escapedFilePath = filePath.replace(/'/g, "'\"'\"'");
-
-    const base64Content = Buffer.from(content, 'utf8').toString('base64');
-
-    const commandTimeout = setTimeout(() => {
-        logger.error(`SSH writeFile command timed out for session: ${sessionId}`);
-        if (!res.headersSent) {
-            res.status(500).json({error: 'SSH command timed out'});
-        }
-    }, 15000);
-
-    const checkCommand = `ls -la '${escapedFilePath}' 2>/dev/null || echo "File does not exist"`;
-
-    sshConn.client.exec(checkCommand, (checkErr, checkStream) => {
-        if (checkErr) {
-            return res.status(500).json({error: `File check failed: ${checkErr.message}`});
-        }
-
-        let checkResult = '';
-        checkStream.on('data', (chunk: Buffer) => {
-            checkResult += chunk.toString();
-        });
-
-        checkStream.on('close', (checkCode) => {
-            const writeCommand = `echo '${base64Content}' > '${escapedTempFile}' && base64 -d '${escapedTempFile}' > '${escapedFilePath}' && rm -f '${escapedTempFile}' && echo "SUCCESS" && exit 0`;
-
-            sshConn.client.exec(writeCommand, (err, stream) => {
-                if (err) {
-                    clearTimeout(commandTimeout);
-                    logger.error('SSH writeFile error:', err);
-                    if (!res.headersSent) {
-                        return res.status(500).json({error: err.message});
-                    }
-                    return;
-                }
-
-                let outputData = '';
-                let errorData = '';
-
-                stream.on('data', (chunk: Buffer) => {
-                    outputData += chunk.toString();
-                });
-
-                stream.stderr.on('data', (chunk: Buffer) => {
-                    errorData += chunk.toString();
-
-                    if (chunk.toString().includes('Permission denied')) {
-                        clearTimeout(commandTimeout);
-                        logger.error(`Permission denied writing to file: ${filePath}`);
-                        if (!res.headersSent) {
-                            return res.status(403).json({
-                                error: `Permission denied: Cannot write to ${filePath}. Check file ownership and permissions. Use 'ls -la ${filePath}' to verify.`
-                            });
-                        }
-                        return;
-                    }
-                });
-
-                stream.on('close', (code) => {
-                    clearTimeout(commandTimeout);
-
-                    if (outputData.includes('SUCCESS')) {
-                        const verifyCommand = `ls -la '${escapedFilePath}' 2>/dev/null | awk '{print $5}'`;
-
-                        sshConn.client.exec(verifyCommand, (verifyErr, verifyStream) => {
-                            if (verifyErr) {
-                                if (!res.headersSent) {
-                                    res.json({message: 'File written successfully', path: filePath});
-                                }
-                                return;
-                            }
-
-                            let verifyResult = '';
-                            verifyStream.on('data', (chunk: Buffer) => {
-                                verifyResult += chunk.toString();
-                            });
-
-                            verifyStream.on('close', (verifyCode) => {
-                                const fileSize = Number(verifyResult.trim());
-
-                                if (fileSize > 0) {
-                                    if (!res.headersSent) {
-                                        res.json({message: 'File written successfully', path: filePath});
-                                    }
-                                } else {
-                                    if (!res.headersSent) {
-                                        res.status(500).json({error: 'File write operation may have failed - file appears empty'});
-                                    }
-                                }
-                            });
-                        });
-                        return;
-                    }
-
-                    if (code !== 0) {
-                        logger.error(`SSH writeFile command failed with code ${code}: ${errorData.replace(/\n/g, ' ').trim()}`);
-                        if (!res.headersSent) {
-                            return res.status(500).json({error: `Command failed: ${errorData}`});
-                        }
-                        return;
-                    }
-
-                    if (!res.headersSent) {
-                        res.json({message: 'File written successfully', path: filePath});
-                    }
-                });
-
-                stream.on('error', (streamErr) => {
-                    clearTimeout(commandTimeout);
-                    logger.error('SSH writeFile stream error:', streamErr);
-                    if (!res.headersSent) {
-                        res.status(500).json({error: `Stream error: ${streamErr.message}`});
-                    }
-                });
-            });
-        });
-    });
-});
-
-process.on('SIGINT', () => {
-    Object.keys(sshSessions).forEach(cleanupSession);
-    process.exit(0);
-});
-
-process.on('SIGTERM', () => {
-    Object.keys(sshSessions).forEach(cleanupSession);
-    process.exit(0);
-});
-
-const PORT = 8084;
-app.listen(PORT, () => {
-});

src/backend/database/database.ts

@@ -2,6 +2,7 @@ import express from 'express';
 import bodyParser from 'body-parser';
 import userRoutes from './routes/users.js';
 import sshRoutes from './routes/ssh.js';
+import alertRoutes from './routes/alerts.js';
 import chalk from 'chalk';
 import cors from 'cors';
 import fetch from 'node-fetch';
@@ -101,10 +102,10 @@ interface GitHubRelease {
 async function fetchGitHubAPI(endpoint: string, cacheKey: string): Promise<any> {
     const cachedData = githubCache.get(cacheKey);
     if (cachedData) {
-        return { 
-            data: cachedData, 
-            cached: true, 
-            cache_age: Date.now() - cachedData.timestamp 
+        return {
+            data: cachedData,
+            cached: true,
+            cache_age: Date.now() - cachedData.timestamp
         };
     }
 
@@ -124,10 +125,10 @@ async function fetchGitHubAPI(endpoint: string, cacheKey: string): Promise<any>
         const data = await response.json();
 
         githubCache.set(cacheKey, data);
-        
-        return { 
-            data: data, 
-            cached: false 
+
+        return {
+            data: data,
+            cached: false
         };
     } catch (error) {
         logger.error(`Failed to fetch from GitHub API: ${endpoint}`, error);
@@ -227,12 +228,16 @@ app.get('/releases/rss', async (req, res) => {
         res.json(response);
     } catch (error) {
         logger.error('Failed to generate RSS format', error)
-        res.status(500).json({ error: 'Failed to generate RSS format', details: error instanceof Error ? error.message : 'Unknown error' });
+        res.status(500).json({
+            error: 'Failed to generate RSS format',
+            details: error instanceof Error ? error.message : 'Unknown error'
+        });
     }
 });
 
 app.use('/users', userRoutes);
 app.use('/ssh', sshRoutes);
+app.use('/alerts', alertRoutes);
 
 app.use((err: unknown, req: express.Request, res: express.Response, next: express.NextFunction) => {
     logger.error('Unhandled error:', err);
@@ -240,4 +245,5 @@ app.use((err: unknown, req: express.Request, res: express.Response, next: expres
 });
 
 const PORT = 8081;
-app.listen(PORT, () => {});
+app.listen(PORT, () => {
+});

src/backend/database/db/index.ts

@@ -41,86 +41,340 @@ const dbPath = path.join(dataDir, 'db.sqlite');
 const sqlite = new Database(dbPath);
 
 sqlite.exec(`
-    CREATE TABLE IF NOT EXISTS users (
-        id TEXT PRIMARY KEY,
-        username TEXT NOT NULL,
-        password_hash TEXT NOT NULL,
-        is_admin INTEGER NOT NULL DEFAULT 0,
-        
-        is_oidc INTEGER NOT NULL DEFAULT 0,
-        client_id TEXT NOT NULL,
-        client_secret  TEXT NOT NULL,
-        issuer_url TEXT NOT NULL,
-        authorization_url TEXT NOT NULL,
-        token_url TEXT NOT NULL,
-        redirect_uri TEXT,
-        identifier_path TEXT NOT NULL,
-        name_path TEXT NOT NULL,
-        scopes TEXT NOT NULL
+    CREATE TABLE IF NOT EXISTS users
+    (
+        id
+        TEXT
+        PRIMARY
+        KEY,
+        username
+        TEXT
+        NOT
+        NULL,
+        password_hash
+        TEXT
+        NOT
+        NULL,
+        is_admin
+        INTEGER
+        NOT
+        NULL
+        DEFAULT
+        0,
+
+        is_oidc
+        INTEGER
+        NOT
+        NULL
+        DEFAULT
+        0,
+        client_id
+        TEXT
+        NOT
+        NULL,
+        client_secret
+        TEXT
+        NOT
+        NULL,
+        issuer_url
+        TEXT
+        NOT
+        NULL,
+        authorization_url
+        TEXT
+        NOT
+        NULL,
+        token_url
+        TEXT
+        NOT
+        NULL,
+        redirect_uri
+        TEXT,
+        identifier_path
+        TEXT
+        NOT
+        NULL,
+        name_path
+        TEXT
+        NOT
+        NULL,
+        scopes
+        TEXT
+        NOT
+        NULL
     );
 
-    CREATE TABLE IF NOT EXISTS settings (
-        key TEXT PRIMARY KEY,
-        value TEXT NOT NULL
+    CREATE TABLE IF NOT EXISTS settings
+    (
+        key
+        TEXT
+        PRIMARY
+        KEY,
+        value
+        TEXT
+        NOT
+        NULL
     );
 
-    CREATE TABLE IF NOT EXISTS ssh_data (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id TEXT NOT NULL,
-        name TEXT,
-        ip TEXT NOT NULL,
-        port INTEGER NOT NULL,
-        username TEXT NOT NULL,
-        folder TEXT,
-        tags TEXT,
-        pin INTEGER NOT NULL DEFAULT 0,
-        auth_type TEXT NOT NULL,
-        password TEXT,
-        key TEXT,
-        key_password TEXT,
-        key_type TEXT,
-        enable_terminal INTEGER NOT NULL DEFAULT 1,
-        enable_tunnel INTEGER NOT NULL DEFAULT 1,
-        tunnel_connections TEXT,
-        enable_config_editor INTEGER NOT NULL DEFAULT 1,
-        default_path TEXT,
-        created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
-        updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (user_id) REFERENCES users(id)
-    );
+    CREATE TABLE IF NOT EXISTS ssh_data
+    (
+        id
+        INTEGER
+        PRIMARY
+        KEY
+        AUTOINCREMENT,
+        user_id
+        TEXT
+        NOT
+        NULL,
+        name
+        TEXT,
+        ip
+        TEXT
+        NOT
+        NULL,
+        port
+        INTEGER
+        NOT
+        NULL,
+        username
+        TEXT
+        NOT
+        NULL,
+        folder
+        TEXT,
+        tags
+        TEXT,
+        pin
+        INTEGER
+        NOT
+        NULL
+        DEFAULT
+        0,
+        auth_type
+        TEXT
+        NOT
+        NULL,
+        password
+        TEXT,
+        key
+        TEXT,
+        key_password
+        TEXT,
+        key_type
+        TEXT,
+        enable_terminal
+        INTEGER
+        NOT
+        NULL
+        DEFAULT
+        1,
+        enable_tunnel
+        INTEGER
+        NOT
+        NULL
+        DEFAULT
+        1,
+        tunnel_connections
+        TEXT,
+        enable_file_manager
+        INTEGER
+        NOT
+        NULL
+        DEFAULT
+        1,
+        default_path
+        TEXT,
+        created_at
+        TEXT
+        NOT
+        NULL
+        DEFAULT
+        CURRENT_TIMESTAMP,
+        updated_at
+        TEXT
+        NOT
+        NULL
+        DEFAULT
+        CURRENT_TIMESTAMP,
+        FOREIGN
+        KEY
+    (
+        user_id
+    ) REFERENCES users
+    (
+        id
+    )
+        );
 
-    CREATE TABLE IF NOT EXISTS config_editor_recent (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id TEXT NOT NULL,
-        host_id INTEGER NOT NULL,
-        name TEXT NOT NULL,
-        path TEXT NOT NULL,
-        last_opened TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (user_id) REFERENCES users(id),
-        FOREIGN KEY (host_id) REFERENCES ssh_data(id)
-    );
+    CREATE TABLE IF NOT EXISTS file_manager_recent
+    (
+        id
+        INTEGER
+        PRIMARY
+        KEY
+        AUTOINCREMENT,
+        user_id
+        TEXT
+        NOT
+        NULL,
+        host_id
+        INTEGER
+        NOT
+        NULL,
+        name
+        TEXT
+        NOT
+        NULL,
+        path
+        TEXT
+        NOT
+        NULL,
+        last_opened
+        TEXT
+        NOT
+        NULL
+        DEFAULT
+        CURRENT_TIMESTAMP,
+        FOREIGN
+        KEY
+    (
+        user_id
+    ) REFERENCES users
+    (
+        id
+    ),
+        FOREIGN KEY
+    (
+        host_id
+    ) REFERENCES ssh_data
+    (
+        id
+    )
+        );
 
-    CREATE TABLE IF NOT EXISTS config_editor_pinned (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id TEXT NOT NULL,
-        host_id INTEGER NOT NULL,
-        name TEXT NOT NULL,
-        path TEXT NOT NULL,
-        pinned_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (user_id) REFERENCES users(id),
-        FOREIGN KEY (host_id) REFERENCES ssh_data(id)
-    );
+    CREATE TABLE IF NOT EXISTS file_manager_pinned
+    (
+        id
+        INTEGER
+        PRIMARY
+        KEY
+        AUTOINCREMENT,
+        user_id
+        TEXT
+        NOT
+        NULL,
+        host_id
+        INTEGER
+        NOT
+        NULL,
+        name
+        TEXT
+        NOT
+        NULL,
+        path
+        TEXT
+        NOT
+        NULL,
+        pinned_at
+        TEXT
+        NOT
+        NULL
+        DEFAULT
+        CURRENT_TIMESTAMP,
+        FOREIGN
+        KEY
+    (
+        user_id
+    ) REFERENCES users
+    (
+        id
+    ),
+        FOREIGN KEY
+    (
+        host_id
+    ) REFERENCES ssh_data
+    (
+        id
+    )
+        );
 
-    CREATE TABLE IF NOT EXISTS config_editor_shortcuts (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id TEXT NOT NULL,
-        host_id INTEGER NOT NULL,
-        name TEXT NOT NULL,
-        path TEXT NOT NULL,
-        created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (user_id) REFERENCES users(id),
-        FOREIGN KEY (host_id) REFERENCES ssh_data(id)
-    );
+    CREATE TABLE IF NOT EXISTS file_manager_shortcuts
+    (
+        id
+        INTEGER
+        PRIMARY
+        KEY
+        AUTOINCREMENT,
+        user_id
+        TEXT
+        NOT
+        NULL,
+        host_id
+        INTEGER
+        NOT
+        NULL,
+        name
+        TEXT
+        NOT
+        NULL,
+        path
+        TEXT
+        NOT
+        NULL,
+        created_at
+        TEXT
+        NOT
+        NULL
+        DEFAULT
+        CURRENT_TIMESTAMP,
+        FOREIGN
+        KEY
+    (
+        user_id
+    ) REFERENCES users
+    (
+        id
+    ),
+        FOREIGN KEY
+    (
+        host_id
+    ) REFERENCES ssh_data
+    (
+        id
+    )
+        );
+
+    CREATE TABLE IF NOT EXISTS dismissed_alerts
+    (
+        id
+        INTEGER
+        PRIMARY
+        KEY
+        AUTOINCREMENT,
+        user_id
+        TEXT
+        NOT
+        NULL,
+        alert_id
+        TEXT
+        NOT
+        NULL,
+        dismissed_at
+        TEXT
+        NOT
+        NULL
+        DEFAULT
+        CURRENT_TIMESTAMP,
+        FOREIGN
+        KEY
+    (
+        user_id
+    ) REFERENCES users
+    (
+        id
+    )
+        );
 `);
 
 const addColumnIfNotExists = (table: string, column: string, definition: string) => {
@@ -151,14 +405,17 @@ const migrateSchema = () => {
     addColumnIfNotExists('users', 'token_url', 'TEXT');
     try {
         sqlite.prepare(`ALTER TABLE users DROP COLUMN redirect_uri`).run();
-        logger.info('Removed redirect_uri column from users table');
     } catch (e) {
     }
-    
+
     addColumnIfNotExists('users', 'identifier_path', 'TEXT');
     addColumnIfNotExists('users', 'name_path', 'TEXT');
     addColumnIfNotExists('users', 'scopes', 'TEXT');
 
+    addColumnIfNotExists('users', 'totp_secret', 'TEXT');
+    addColumnIfNotExists('users', 'totp_enabled', 'INTEGER NOT NULL DEFAULT 0');
+    addColumnIfNotExists('users', 'totp_backup_codes', 'TEXT');
+
     addColumnIfNotExists('ssh_data', 'name', 'TEXT');
     addColumnIfNotExists('ssh_data', 'folder', 'TEXT');
     addColumnIfNotExists('ssh_data', 'tags', 'TEXT');
@@ -171,14 +428,14 @@ const migrateSchema = () => {
     addColumnIfNotExists('ssh_data', 'enable_terminal', 'INTEGER NOT NULL DEFAULT 1');
     addColumnIfNotExists('ssh_data', 'enable_tunnel', 'INTEGER NOT NULL DEFAULT 1');
     addColumnIfNotExists('ssh_data', 'tunnel_connections', 'TEXT');
-    addColumnIfNotExists('ssh_data', 'enable_config_editor', 'INTEGER NOT NULL DEFAULT 1');
+    addColumnIfNotExists('ssh_data', 'enable_file_manager', 'INTEGER NOT NULL DEFAULT 1');
     addColumnIfNotExists('ssh_data', 'default_path', 'TEXT');
     addColumnIfNotExists('ssh_data', 'created_at', 'TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP');
     addColumnIfNotExists('ssh_data', 'updated_at', 'TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP');
 
-    addColumnIfNotExists('config_editor_recent', 'host_id', 'INTEGER NOT NULL');
-    addColumnIfNotExists('config_editor_pinned', 'host_id', 'INTEGER NOT NULL');
-    addColumnIfNotExists('config_editor_shortcuts', 'host_id', 'INTEGER NOT NULL');
+    addColumnIfNotExists('file_manager_recent', 'host_id', 'INTEGER NOT NULL');
+    addColumnIfNotExists('file_manager_pinned', 'host_id', 'INTEGER NOT NULL');
+    addColumnIfNotExists('file_manager_shortcuts', 'host_id', 'INTEGER NOT NULL');
 
     logger.success('Schema migration completed');
 };

src/backend/database/db/schema.ts

@@ -17,6 +17,10 @@ export const users = sqliteTable('users', {
     identifier_path: text('identifier_path'),
     name_path: text('name_path'),
     scopes: text().default("openid email profile"),
+    
+    totp_secret: text('totp_secret'),
+    totp_enabled: integer('totp_enabled', {mode: 'boolean'}).notNull().default(false),
+    totp_backup_codes: text('totp_backup_codes'),
 });
 
 export const settings = sqliteTable('settings', {
@@ -42,13 +46,13 @@ export const sshData = sqliteTable('ssh_data', {
     enableTerminal: integer('enable_terminal', {mode: 'boolean'}).notNull().default(true),
     enableTunnel: integer('enable_tunnel', {mode: 'boolean'}).notNull().default(true),
     tunnelConnections: text('tunnel_connections'),
-    enableConfigEditor: integer('enable_config_editor', {mode: 'boolean'}).notNull().default(true),
+    enableFileManager: integer('enable_file_manager', {mode: 'boolean'}).notNull().default(true),
     defaultPath: text('default_path'),
     createdAt: text('created_at').notNull().default(sql`CURRENT_TIMESTAMP`),
     updatedAt: text('updated_at').notNull().default(sql`CURRENT_TIMESTAMP`),
 });
 
-export const configEditorRecent = sqliteTable('config_editor_recent', {
+export const fileManagerRecent = sqliteTable('file_manager_recent', {
     id: integer('id').primaryKey({autoIncrement: true}),
     userId: text('user_id').notNull().references(() => users.id),
     hostId: integer('host_id').notNull().references(() => sshData.id),
@@ -57,7 +61,7 @@ export const configEditorRecent = sqliteTable('config_editor_recent', {
     lastOpened: text('last_opened').notNull().default(sql`CURRENT_TIMESTAMP`),
 });
 
-export const configEditorPinned = sqliteTable('config_editor_pinned', {
+export const fileManagerPinned = sqliteTable('file_manager_pinned', {
     id: integer('id').primaryKey({autoIncrement: true}),
     userId: text('user_id').notNull().references(() => users.id),
     hostId: integer('host_id').notNull().references(() => sshData.id),
@@ -66,11 +70,18 @@ export const configEditorPinned = sqliteTable('config_editor_pinned', {
     pinnedAt: text('pinned_at').notNull().default(sql`CURRENT_TIMESTAMP`),
 });
 
-export const configEditorShortcuts = sqliteTable('config_editor_shortcuts', {
+export const fileManagerShortcuts = sqliteTable('file_manager_shortcuts', {
     id: integer('id').primaryKey({autoIncrement: true}),
     userId: text('user_id').notNull().references(() => users.id),
     hostId: integer('host_id').notNull().references(() => sshData.id),
     name: text('name').notNull(),
     path: text('path').notNull(),
     createdAt: text('created_at').notNull().default(sql`CURRENT_TIMESTAMP`),
+});
+
+export const dismissedAlerts = sqliteTable('dismissed_alerts', {
+    id: integer('id').primaryKey({autoIncrement: true}),
+    userId: text('user_id').notNull().references(() => users.id),
+    alertId: text('alert_id').notNull(),
+    dismissedAt: text('dismissed_at').notNull().default(sql`CURRENT_TIMESTAMP`),
 });

src/backend/database/routes/alerts.ts

@@ -0,0 +1,270 @@
+import express from 'express';
+import {db} from '../db/index.js';
+import {dismissedAlerts} from '../db/schema.js';
+import {eq, and} from 'drizzle-orm';
+import chalk from 'chalk';
+import fetch from 'node-fetch';
+import type {Request, Response, NextFunction} from 'express';
+
+const dbIconSymbol = '🚨';
+const getTimeStamp = (): string => chalk.gray(`[${new Date().toLocaleTimeString()}]`);
+const formatMessage = (level: string, colorFn: chalk.Chalk, message: string): string => {
+    return `${getTimeStamp()} ${colorFn(`[${level.toUpperCase()}]`)} ${chalk.hex('#dc2626')(`[${dbIconSymbol}]`)} ${message}`;
+};
+const logger = {
+    info: (msg: string): void => {
+        console.log(formatMessage('info', chalk.cyan, msg));
+    },
+    warn: (msg: string): void => {
+        console.warn(formatMessage('warn', chalk.yellow, msg));
+    },
+    error: (msg: string, err?: unknown): void => {
+        console.error(formatMessage('error', chalk.redBright, msg));
+        if (err) console.error(err);
+    },
+    success: (msg: string): void => {
+        console.log(formatMessage('success', chalk.greenBright, msg));
+    },
+    debug: (msg: string): void => {
+        if (process.env.NODE_ENV !== 'production') {
+            console.debug(formatMessage('debug', chalk.magenta, msg));
+        }
+    }
+};
+
+interface CacheEntry {
+    data: any;
+    timestamp: number;
+    expiresAt: number;
+}
+
+class AlertCache {
+    private cache: Map<string, CacheEntry> = new Map();
+    private readonly CACHE_DURATION = 5 * 60 * 1000;
+
+    set(key: string, data: any): void {
+        const now = Date.now();
+        this.cache.set(key, {
+            data,
+            timestamp: now,
+            expiresAt: now + this.CACHE_DURATION
+        });
+    }
+
+    get(key: string): any | null {
+        const entry = this.cache.get(key);
+        if (!entry) {
+            return null;
+        }
+
+        if (Date.now() > entry.expiresAt) {
+            this.cache.delete(key);
+            return null;
+        }
+
+        return entry.data;
+    }
+}
+
+const alertCache = new AlertCache();
+
+const GITHUB_RAW_BASE = 'https://raw.githubusercontent.com';
+const REPO_OWNER = 'LukeGus';
+const REPO_NAME = 'Termix-Docs';
+const ALERTS_FILE = 'main/termix-alerts.json';
+
+interface TermixAlert {
+    id: string;
+    title: string;
+    message: string;
+    expiresAt: string;
+    priority?: 'low' | 'medium' | 'high' | 'critical';
+    type?: 'info' | 'warning' | 'error' | 'success';
+    actionUrl?: string;
+    actionText?: string;
+}
+
+async function fetchAlertsFromGitHub(): Promise<TermixAlert[]> {
+    const cacheKey = 'termix_alerts';
+    const cachedData = alertCache.get(cacheKey);
+    if (cachedData) {
+        return cachedData;
+    }
+
+    try {
+        const url = `${GITHUB_RAW_BASE}/${REPO_OWNER}/${REPO_NAME}/${ALERTS_FILE}`;
+
+        const response = await fetch(url, {
+            headers: {
+                'Accept': 'application/json',
+                'User-Agent': 'TermixAlertChecker/1.0'
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error(`GitHub raw content error: ${response.status} ${response.statusText}`);
+        }
+
+        const alerts: TermixAlert[] = await response.json() as TermixAlert[];
+
+        const now = new Date();
+
+        const validAlerts = alerts.filter(alert => {
+            const expiryDate = new Date(alert.expiresAt);
+            const isValid = expiryDate > now;
+            return isValid;
+        });
+
+        alertCache.set(cacheKey, validAlerts);
+        return validAlerts;
+    } catch (error) {
+        logger.error('Failed to fetch alerts from GitHub', error);
+        return [];
+    }
+}
+
+const router = express.Router();
+
+// Route: Get all active alerts
+// GET /alerts
+router.get('/', async (req, res) => {
+    try {
+        const alerts = await fetchAlertsFromGitHub();
+        res.json({
+            alerts,
+            cached: alertCache.get('termix_alerts') !== null,
+            total_count: alerts.length
+        });
+    } catch (error) {
+        logger.error('Failed to get alerts', error);
+        res.status(500).json({error: 'Failed to fetch alerts'});
+    }
+});
+
+// Route: Get alerts for a specific user (excluding dismissed ones)
+// GET /alerts/user/:userId
+router.get('/user/:userId', async (req, res) => {
+    try {
+        const {userId} = req.params;
+
+        if (!userId) {
+            return res.status(400).json({error: 'User ID is required'});
+        }
+
+        const allAlerts = await fetchAlertsFromGitHub();
+
+        const dismissedAlertRecords = await db
+            .select({alertId: dismissedAlerts.alertId})
+            .from(dismissedAlerts)
+            .where(eq(dismissedAlerts.userId, userId));
+
+        const dismissedAlertIds = new Set(dismissedAlertRecords.map(record => record.alertId));
+
+        const userAlerts = allAlerts.filter(alert => !dismissedAlertIds.has(alert.id));
+
+        res.json({
+            alerts: userAlerts,
+            total_count: userAlerts.length,
+            dismissed_count: dismissedAlertIds.size
+        });
+    } catch (error) {
+        logger.error('Failed to get user alerts', error);
+        res.status(500).json({error: 'Failed to fetch user alerts'});
+    }
+});
+
+// Route: Dismiss an alert for a user
+// POST /alerts/dismiss
+router.post('/dismiss', async (req, res) => {
+    try {
+        const {userId, alertId} = req.body;
+
+        if (!userId || !alertId) {
+            logger.warn('Missing userId or alertId in dismiss request');
+            return res.status(400).json({error: 'User ID and Alert ID are required'});
+        }
+
+        const existingDismissal = await db
+            .select()
+            .from(dismissedAlerts)
+            .where(and(
+                eq(dismissedAlerts.userId, userId),
+                eq(dismissedAlerts.alertId, alertId)
+            ));
+
+        if (existingDismissal.length > 0) {
+            logger.warn(`Alert ${alertId} already dismissed by user ${userId}`);
+            return res.status(409).json({error: 'Alert already dismissed'});
+        }
+
+        const result = await db.insert(dismissedAlerts).values({
+            userId,
+            alertId
+        });
+
+        logger.success(`Alert ${alertId} dismissed by user ${userId}. Insert result: ${JSON.stringify(result)}`);
+        res.json({message: 'Alert dismissed successfully'});
+    } catch (error) {
+        logger.error('Failed to dismiss alert', error);
+        res.status(500).json({error: 'Failed to dismiss alert'});
+    }
+});
+
+// Route: Get dismissed alerts for a user
+// GET /alerts/dismissed/:userId
+router.get('/dismissed/:userId', async (req, res) => {
+    try {
+        const {userId} = req.params;
+
+        if (!userId) {
+            return res.status(400).json({error: 'User ID is required'});
+        }
+
+        const dismissedAlertRecords = await db
+            .select({
+                alertId: dismissedAlerts.alertId,
+                dismissedAt: dismissedAlerts.dismissedAt
+            })
+            .from(dismissedAlerts)
+            .where(eq(dismissedAlerts.userId, userId));
+
+        res.json({
+            dismissed_alerts: dismissedAlertRecords,
+            total_count: dismissedAlertRecords.length
+        });
+    } catch (error) {
+        logger.error('Failed to get dismissed alerts', error);
+        res.status(500).json({error: 'Failed to fetch dismissed alerts'});
+    }
+});
+
+// Route: Undismiss an alert for a user (remove from dismissed list)
+// DELETE /alerts/dismiss
+router.delete('/dismiss', async (req, res) => {
+    try {
+        const {userId, alertId} = req.body;
+
+        if (!userId || !alertId) {
+            return res.status(400).json({error: 'User ID and Alert ID are required'});
+        }
+
+        const result = await db
+            .delete(dismissedAlerts)
+            .where(and(
+                eq(dismissedAlerts.userId, userId),
+                eq(dismissedAlerts.alertId, alertId)
+            ));
+
+        if (result.changes === 0) {
+            return res.status(404).json({error: 'Dismissed alert not found'});
+        }
+
+        logger.success(`Alert ${alertId} undismissed by user ${userId}`);
+        res.json({message: 'Alert undismissed successfully'});
+    } catch (error) {
+        logger.error('Failed to undismiss alert', error);
+        res.status(500).json({error: 'Failed to undismiss alert'});
+    }
+});
+
+export default router;

src/backend/database/routes/ssh.ts

@@ -1,6 +1,6 @@
 import express from 'express';
 import {db} from '../db/index.js';
-import {sshData, configEditorRecent, configEditorPinned, configEditorShortcuts} from '../db/schema.js';
+import {sshData, fileManagerRecent, fileManagerPinned, fileManagerShortcuts} from '../db/schema.js';
 import {eq, and, desc} from 'drizzle-orm';
 import chalk from 'chalk';
 import jwt from 'jsonwebtoken';
@@ -94,7 +94,6 @@ router.get('/db/host/internal', async (req: Request, res: Response) => {
     }
     try {
         const data = await db.select().from(sshData);
-        // Convert tags to array, booleans to bool, tunnelConnections to array
         const result = data.map((row: any) => ({
             ...row,
             tags: typeof row.tags === 'string' ? (row.tags ? row.tags.split(',').filter(Boolean) : []) : [],
@@ -102,7 +101,7 @@ router.get('/db/host/internal', async (req: Request, res: Response) => {
             enableTerminal: !!row.enableTerminal,
             enableTunnel: !!row.enableTunnel,
             tunnelConnections: row.tunnelConnections ? JSON.parse(row.tunnelConnections) : [],
-            enableConfigEditor: !!row.enableConfigEditor,
+            enableFileManager: !!row.enableFileManager,
         }));
         res.json(result);
     } catch (err) {
@@ -116,9 +115,7 @@ router.get('/db/host/internal', async (req: Request, res: Response) => {
 router.post('/db/host', authenticateJWT, upload.single('key'), async (req: Request, res: Response) => {
     let hostData: any;
 
-    // Check if this is a multipart form data request (file upload)
     if (req.headers['content-type']?.includes('multipart/form-data')) {
-        // Parse the JSON data from the 'data' field
         if (req.body.data) {
             try {
                 hostData = JSON.parse(req.body.data);
@@ -131,12 +128,10 @@ router.post('/db/host', authenticateJWT, upload.single('key'), async (req: Reque
             return res.status(400).json({error: 'Missing data field'});
         }
 
-        // Add the file data if present
         if (req.file) {
             hostData.key = req.file.buffer.toString('utf8');
         }
     } else {
-        // Regular JSON request
         hostData = req.body;
     }
 
@@ -155,7 +150,7 @@ router.post('/db/host', authenticateJWT, upload.single('key'), async (req: Reque
         pin,
         enableTerminal,
         enableTunnel,
-        enableConfigEditor,
+        enableFileManager,
         defaultPath,
         tunnelConnections
     } = hostData;
@@ -178,7 +173,7 @@ router.post('/db/host', authenticateJWT, upload.single('key'), async (req: Reque
         enableTerminal: !!enableTerminal ? 1 : 0,
         enableTunnel: !!enableTunnel ? 1 : 0,
         tunnelConnections: Array.isArray(tunnelConnections) ? JSON.stringify(tunnelConnections) : null,
-        enableConfigEditor: !!enableConfigEditor ? 1 : 0,
+        enableFileManager: !!enableFileManager ? 1 : 0,
         defaultPath: defaultPath || null,
     };
 
@@ -243,7 +238,7 @@ router.put('/db/host/:id', authenticateJWT, upload.single('key'), async (req: Re
         pin,
         enableTerminal,
         enableTunnel,
-        enableConfigEditor,
+        enableFileManager,
         defaultPath,
         tunnelConnections
     } = hostData;
@@ -266,7 +261,7 @@ router.put('/db/host/:id', authenticateJWT, upload.single('key'), async (req: Re
         enableTerminal: !!enableTerminal ? 1 : 0,
         enableTunnel: !!enableTunnel ? 1 : 0,
         tunnelConnections: Array.isArray(tunnelConnections) ? JSON.stringify(tunnelConnections) : null,
-        enableConfigEditor: !!enableConfigEditor ? 1 : 0,
+        enableFileManager: !!enableFileManager ? 1 : 0,
         defaultPath: defaultPath || null,
     };
 
@@ -313,7 +308,7 @@ router.get('/db/host', authenticateJWT, async (req: Request, res: Response) => {
             enableTerminal: !!row.enableTerminal,
             enableTunnel: !!row.enableTunnel,
             tunnelConnections: row.tunnelConnections ? JSON.parse(row.tunnelConnections) : [],
-            enableConfigEditor: !!row.enableConfigEditor,
+            enableFileManager: !!row.enableFileManager,
         }));
         res.json(result);
     } catch (err) {
@@ -351,7 +346,7 @@ router.get('/db/host/:id', authenticateJWT, async (req: Request, res: Response)
             enableTerminal: !!host.enableTerminal,
             enableTunnel: !!host.enableTunnel,
             tunnelConnections: host.tunnelConnections ? JSON.parse(host.tunnelConnections) : [],
-            enableConfigEditor: !!host.enableConfigEditor,
+            enableFileManager: !!host.enableFileManager,
         };
 
         res.json(result);
@@ -411,8 +406,8 @@ router.delete('/db/host/:id', authenticateJWT, async (req: Request, res: Respons
 });
 
 // Route: Get recent files (requires JWT)
-// GET /ssh/config_editor/recent
-router.get('/config_editor/recent', authenticateJWT, async (req: Request, res: Response) => {
+// GET /ssh/file_manager/recent
+router.get('/file_manager/recent', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const hostId = req.query.hostId ? parseInt(req.query.hostId as string) : null;
 
@@ -429,12 +424,12 @@ router.get('/config_editor/recent', authenticateJWT, async (req: Request, res: R
     try {
         const recentFiles = await db
             .select()
-            .from(configEditorRecent)
+            .from(fileManagerRecent)
             .where(and(
-                eq(configEditorRecent.userId, userId),
-                eq(configEditorRecent.hostId, hostId)
+                eq(fileManagerRecent.userId, userId),
+                eq(fileManagerRecent.hostId, hostId)
             ))
-            .orderBy(desc(configEditorRecent.lastOpened));
+            .orderBy(desc(fileManagerRecent.lastOpened));
         res.json(recentFiles);
     } catch (err) {
         logger.error('Failed to fetch recent files', err);
@@ -443,8 +438,8 @@ router.get('/config_editor/recent', authenticateJWT, async (req: Request, res: R
 });
 
 // Route: Add file to recent (requires JWT)
-// POST /ssh/config_editor/recent
-router.post('/config_editor/recent', authenticateJWT, async (req: Request, res: Response) => {
+// POST /ssh/file_manager/recent
+router.post('/file_manager/recent', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const {name, path, hostId} = req.body;
     if (!isNonEmptyString(userId) || !name || !path || !hostId) {
@@ -453,24 +448,23 @@ router.post('/config_editor/recent', authenticateJWT, async (req: Request, res:
     }
     try {
         const conditions = [
-            eq(configEditorRecent.userId, userId),
-            eq(configEditorRecent.path, path),
-            eq(configEditorRecent.hostId, hostId)
+            eq(fileManagerRecent.userId, userId),
+            eq(fileManagerRecent.path, path),
+            eq(fileManagerRecent.hostId, hostId)
         ];
 
         const existing = await db
             .select()
-            .from(configEditorRecent)
+            .from(fileManagerRecent)
             .where(and(...conditions));
 
         if (existing.length > 0) {
             await db
-                .update(configEditorRecent)
+                .update(fileManagerRecent)
                 .set({lastOpened: new Date().toISOString()})
                 .where(and(...conditions));
         } else {
-            // Add new recent file
-            await db.insert(configEditorRecent).values({
+            await db.insert(fileManagerRecent).values({
                 userId,
                 hostId,
                 name,
@@ -486,8 +480,8 @@ router.post('/config_editor/recent', authenticateJWT, async (req: Request, res:
 });
 
 // Route: Remove file from recent (requires JWT)
-// DELETE /ssh/config_editor/recent
-router.delete('/config_editor/recent', authenticateJWT, async (req: Request, res: Response) => {
+// DELETE /ssh/file_manager/recent
+router.delete('/file_manager/recent', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const {name, path, hostId} = req.body;
     if (!isNonEmptyString(userId) || !name || !path || !hostId) {
@@ -496,13 +490,13 @@ router.delete('/config_editor/recent', authenticateJWT, async (req: Request, res
     }
     try {
         const conditions = [
-            eq(configEditorRecent.userId, userId),
-            eq(configEditorRecent.path, path),
-            eq(configEditorRecent.hostId, hostId)
+            eq(fileManagerRecent.userId, userId),
+            eq(fileManagerRecent.path, path),
+            eq(fileManagerRecent.hostId, hostId)
         ];
 
         const result = await db
-            .delete(configEditorRecent)
+            .delete(fileManagerRecent)
             .where(and(...conditions));
         res.json({message: 'File removed from recent'});
     } catch (err) {
@@ -512,8 +506,8 @@ router.delete('/config_editor/recent', authenticateJWT, async (req: Request, res
 });
 
 // Route: Get pinned files (requires JWT)
-// GET /ssh/config_editor/pinned
-router.get('/config_editor/pinned', authenticateJWT, async (req: Request, res: Response) => {
+// GET /ssh/file_manager/pinned
+router.get('/file_manager/pinned', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const hostId = req.query.hostId ? parseInt(req.query.hostId as string) : null;
 
@@ -530,12 +524,12 @@ router.get('/config_editor/pinned', authenticateJWT, async (req: Request, res: R
     try {
         const pinnedFiles = await db
             .select()
-            .from(configEditorPinned)
+            .from(fileManagerPinned)
             .where(and(
-                eq(configEditorPinned.userId, userId),
-                eq(configEditorPinned.hostId, hostId)
+                eq(fileManagerPinned.userId, userId),
+                eq(fileManagerPinned.hostId, hostId)
             ))
-            .orderBy(configEditorPinned.pinnedAt);
+            .orderBy(fileManagerPinned.pinnedAt);
         res.json(pinnedFiles);
     } catch (err) {
         logger.error('Failed to fetch pinned files', err);
@@ -544,8 +538,8 @@ router.get('/config_editor/pinned', authenticateJWT, async (req: Request, res: R
 });
 
 // Route: Add file to pinned (requires JWT)
-// POST /ssh/config_editor/pinned
-router.post('/config_editor/pinned', authenticateJWT, async (req: Request, res: Response) => {
+// POST /ssh/file_manager/pinned
+router.post('/file_manager/pinned', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const {name, path, hostId} = req.body;
     if (!isNonEmptyString(userId) || !name || !path || !hostId) {
@@ -554,18 +548,18 @@ router.post('/config_editor/pinned', authenticateJWT, async (req: Request, res:
     }
     try {
         const conditions = [
-            eq(configEditorPinned.userId, userId),
-            eq(configEditorPinned.path, path),
-            eq(configEditorPinned.hostId, hostId)
+            eq(fileManagerPinned.userId, userId),
+            eq(fileManagerPinned.path, path),
+            eq(fileManagerPinned.hostId, hostId)
         ];
 
         const existing = await db
             .select()
-            .from(configEditorPinned)
+            .from(fileManagerPinned)
             .where(and(...conditions));
 
         if (existing.length === 0) {
-            await db.insert(configEditorPinned).values({
+            await db.insert(fileManagerPinned).values({
                 userId,
                 hostId,
                 name,
@@ -581,8 +575,8 @@ router.post('/config_editor/pinned', authenticateJWT, async (req: Request, res:
 });
 
 // Route: Remove file from pinned (requires JWT)
-// DELETE /ssh/config_editor/pinned
-router.delete('/config_editor/pinned', authenticateJWT, async (req: Request, res: Response) => {
+// DELETE /ssh/file_manager/pinned
+router.delete('/file_manager/pinned', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const {name, path, hostId} = req.body;
     if (!isNonEmptyString(userId) || !name || !path || !hostId) {
@@ -591,13 +585,13 @@ router.delete('/config_editor/pinned', authenticateJWT, async (req: Request, res
     }
     try {
         const conditions = [
-            eq(configEditorPinned.userId, userId),
-            eq(configEditorPinned.path, path),
-            eq(configEditorPinned.hostId, hostId)
+            eq(fileManagerPinned.userId, userId),
+            eq(fileManagerPinned.path, path),
+            eq(fileManagerPinned.hostId, hostId)
         ];
 
         const result = await db
-            .delete(configEditorPinned)
+            .delete(fileManagerPinned)
             .where(and(...conditions));
         res.json({message: 'File unpinned successfully'});
     } catch (err) {
@@ -607,8 +601,8 @@ router.delete('/config_editor/pinned', authenticateJWT, async (req: Request, res
 });
 
 // Route: Get folder shortcuts (requires JWT)
-// GET /ssh/config_editor/shortcuts
-router.get('/config_editor/shortcuts', authenticateJWT, async (req: Request, res: Response) => {
+// GET /ssh/file_manager/shortcuts
+router.get('/file_manager/shortcuts', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const hostId = req.query.hostId ? parseInt(req.query.hostId as string) : null;
 
@@ -623,12 +617,12 @@ router.get('/config_editor/shortcuts', authenticateJWT, async (req: Request, res
     try {
         const shortcuts = await db
             .select()
-            .from(configEditorShortcuts)
+            .from(fileManagerShortcuts)
             .where(and(
-                eq(configEditorShortcuts.userId, userId),
-                eq(configEditorShortcuts.hostId, hostId)
+                eq(fileManagerShortcuts.userId, userId),
+                eq(fileManagerShortcuts.hostId, hostId)
             ))
-            .orderBy(configEditorShortcuts.createdAt);
+            .orderBy(fileManagerShortcuts.createdAt);
         res.json(shortcuts);
     } catch (err) {
         logger.error('Failed to fetch shortcuts', err);
@@ -637,8 +631,8 @@ router.get('/config_editor/shortcuts', authenticateJWT, async (req: Request, res
 });
 
 // Route: Add folder shortcut (requires JWT)
-// POST /ssh/config_editor/shortcuts
-router.post('/config_editor/shortcuts', authenticateJWT, async (req: Request, res: Response) => {
+// POST /ssh/file_manager/shortcuts
+router.post('/file_manager/shortcuts', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const {name, path, hostId} = req.body;
     if (!isNonEmptyString(userId) || !name || !path || !hostId) {
@@ -646,18 +640,18 @@ router.post('/config_editor/shortcuts', authenticateJWT, async (req: Request, re
     }
     try {
         const conditions = [
-            eq(configEditorShortcuts.userId, userId),
-            eq(configEditorShortcuts.path, path),
-            eq(configEditorShortcuts.hostId, hostId)
+            eq(fileManagerShortcuts.userId, userId),
+            eq(fileManagerShortcuts.path, path),
+            eq(fileManagerShortcuts.hostId, hostId)
         ];
 
         const existing = await db
             .select()
-            .from(configEditorShortcuts)
+            .from(fileManagerShortcuts)
             .where(and(...conditions));
 
         if (existing.length === 0) {
-            await db.insert(configEditorShortcuts).values({
+            await db.insert(fileManagerShortcuts).values({
                 userId,
                 hostId,
                 name,
@@ -673,8 +667,8 @@ router.post('/config_editor/shortcuts', authenticateJWT, async (req: Request, re
 });
 
 // Route: Remove folder shortcut (requires JWT)
-// DELETE /ssh/config_editor/shortcuts
-router.delete('/config_editor/shortcuts', authenticateJWT, async (req: Request, res: Response) => {
+// DELETE /ssh/file_manager/shortcuts
+router.delete('/file_manager/shortcuts', authenticateJWT, async (req: Request, res: Response) => {
     const userId = (req as any).userId;
     const {name, path, hostId} = req.body;
     if (!isNonEmptyString(userId) || !name || !path || !hostId) {
@@ -682,13 +676,13 @@ router.delete('/config_editor/shortcuts', authenticateJWT, async (req: Request,
     }
     try {
         const conditions = [
-            eq(configEditorShortcuts.userId, userId),
-            eq(configEditorShortcuts.path, path),
-            eq(configEditorShortcuts.hostId, hostId)
+            eq(fileManagerShortcuts.userId, userId),
+            eq(fileManagerShortcuts.path, path),
+            eq(fileManagerShortcuts.hostId, hostId)
         ];
 
         const result = await db
-            .delete(configEditorShortcuts)
+            .delete(fileManagerShortcuts)
             .where(and(...conditions));
         res.json({message: 'Shortcut removed successfully'});
     } catch (err) {
@@ -697,4 +691,116 @@ router.delete('/config_editor/shortcuts', authenticateJWT, async (req: Request,
     }
 });
 
+// Route: Bulk import SSH hosts from JSON (requires JWT)
+// POST /ssh/bulk-import
+router.post('/bulk-import', authenticateJWT, async (req: Request, res: Response) => {
+    const userId = (req as any).userId;
+    const {hosts} = req.body;
+
+    if (!Array.isArray(hosts) || hosts.length === 0) {
+        logger.warn('Invalid bulk import data - hosts array is required and must not be empty');
+        return res.status(400).json({error: 'Hosts array is required and must not be empty'});
+    }
+
+    if (hosts.length > 100) {
+        logger.warn(`Bulk import attempted with too many hosts: ${hosts.length}`);
+        return res.status(400).json({error: 'Maximum 100 hosts allowed per import'});
+    }
+
+    const results = {
+        success: 0,
+        failed: 0,
+        errors: [] as string[]
+    };
+
+    for (let i = 0; i < hosts.length; i++) {
+        const hostData = hosts[i];
+
+        try {
+            if (!isNonEmptyString(hostData.ip) || !isValidPort(hostData.port) || !isNonEmptyString(hostData.username)) {
+                results.failed++;
+                results.errors.push(`Host ${i + 1}: Missing or invalid required fields (ip, port, username)`);
+                continue;
+            }
+
+            if (hostData.authType !== 'password' && hostData.authType !== 'key') {
+                results.failed++;
+                results.errors.push(`Host ${i + 1}: Invalid authType. Must be 'password' or 'key'`);
+                continue;
+            }
+
+            if (hostData.authType === 'password' && !isNonEmptyString(hostData.password)) {
+                results.failed++;
+                results.errors.push(`Host ${i + 1}: Password required for password authentication`);
+                continue;
+            }
+
+            if (hostData.authType === 'key' && !isNonEmptyString(hostData.key)) {
+                results.failed++;
+                results.errors.push(`Host ${i + 1}: SSH key required for key authentication`);
+                continue;
+            }
+
+            if (hostData.enableTunnel && Array.isArray(hostData.tunnelConnections)) {
+                for (let j = 0; j < hostData.tunnelConnections.length; j++) {
+                    const conn = hostData.tunnelConnections[j];
+                    if (!isValidPort(conn.sourcePort) || !isValidPort(conn.endpointPort) || !isNonEmptyString(conn.endpointHost)) {
+                        results.failed++;
+                        results.errors.push(`Host ${i + 1}, Tunnel ${j + 1}: Invalid tunnel connection data`);
+                        break;
+                    }
+                }
+            }
+
+            const sshDataObj: any = {
+                userId: userId,
+                name: hostData.name || '',
+                folder: hostData.folder || '',
+                tags: Array.isArray(hostData.tags) ? hostData.tags.join(',') : (hostData.tags || ''),
+                ip: hostData.ip,
+                port: hostData.port,
+                username: hostData.username,
+                authType: hostData.authType,
+                pin: !!hostData.pin ? 1 : 0,
+                enableTerminal: !!hostData.enableTerminal ? 1 : 0,
+                enableTunnel: !!hostData.enableTunnel ? 1 : 0,
+                tunnelConnections: Array.isArray(hostData.tunnelConnections) ? JSON.stringify(hostData.tunnelConnections) : null,
+                enableFileManager: !!hostData.enableFileManager ? 1 : 0,
+                defaultPath: hostData.defaultPath || null,
+            };
+
+            if (hostData.authType === 'password') {
+                sshDataObj.password = hostData.password;
+                sshDataObj.key = null;
+                sshDataObj.keyPassword = null;
+                sshDataObj.keyType = null;
+            } else if (hostData.authType === 'key') {
+                sshDataObj.key = hostData.key;
+                sshDataObj.keyPassword = hostData.keyPassword || null;
+                sshDataObj.keyType = hostData.keyType || null;
+                sshDataObj.password = null;
+            }
+
+            await db.insert(sshData).values(sshDataObj);
+            results.success++;
+
+        } catch (err) {
+            results.failed++;
+            results.errors.push(`Host ${i + 1}: ${err instanceof Error ? err.message : 'Unknown error'}`);
+            logger.error(`Failed to import host ${i + 1}:`, err);
+        }
+    }
+
+    if (results.success > 0) {
+        logger.success(`Bulk import completed: ${results.success} successful, ${results.failed} failed`);
+    } else {
+        logger.warn(`Bulk import failed: ${results.failed} failed`);
+    }
+
+    res.json({
+        message: `Import completed: ${results.success} successful, ${results.failed} failed`,
+        ...results
+    });
+});
+
 export default router; 

src/backend/ssh/server-stats.ts

@@ -0,0 +1,454 @@
+import express from 'express';
+import chalk from 'chalk';
+import fetch from 'node-fetch';
+import net from 'net';
+import cors from 'cors';
+import {Client, type ConnectConfig} from 'ssh2';
+
+type HostRecord = {
+    id: number;
+    ip: string;
+    port: number;
+    username?: string;
+    authType?: 'password' | 'key' | string;
+    password?: string | null;
+    key?: string | null;
+    keyPassword?: string | null;
+    keyType?: string | null;
+};
+
+type HostStatus = 'online' | 'offline';
+
+type StatusEntry = {
+    status: HostStatus;
+    lastChecked: string;
+};
+
+const app = express();
+app.use(cors({
+    origin: '*',
+    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
+    allowedHeaders: ['Content-Type', 'Authorization']
+}));
+app.use((req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
+    if (req.method === 'OPTIONS') {
+        return res.sendStatus(204);
+    }
+    next();
+});
+app.use(express.json());
+
+const statsIconSymbol = '📡';
+const getTimeStamp = (): string => chalk.gray(`[${new Date().toLocaleTimeString()}]`);
+const formatMessage = (level: string, colorFn: chalk.Chalk, message: string): string => {
+    return `${getTimeStamp()} ${colorFn(`[${level.toUpperCase()}]`)} ${chalk.hex('#22c55e')(`[${statsIconSymbol}]`)} ${message}`;
+};
+const logger = {
+    info: (msg: string): void => {
+        console.log(formatMessage('info', chalk.cyan, msg));
+    },
+    warn: (msg: string): void => {
+        console.warn(formatMessage('warn', chalk.yellow, msg));
+    },
+    error: (msg: string, err?: unknown): void => {
+        console.error(formatMessage('error', chalk.redBright, msg));
+        if (err) console.error(err);
+    },
+    success: (msg: string): void => {
+        console.log(formatMessage('success', chalk.greenBright, msg));
+    },
+    debug: (msg: string): void => {
+        if (process.env.NODE_ENV !== 'production') {
+            console.debug(formatMessage('debug', chalk.magenta, msg));
+        }
+    }
+};
+
+const hostStatuses: Map<number, StatusEntry> = new Map();
+
+async function fetchAllHosts(): Promise<HostRecord[]> {
+    const url = 'http://localhost:8081/ssh/db/host/internal';
+    try {
+        const resp = await fetch(url, {
+            headers: {'x-internal-request': '1'}
+        });
+        if (!resp.ok) {
+            throw new Error(`DB service error: ${resp.status} ${resp.statusText}`);
+        }
+        const data = await resp.json();
+        const hosts: HostRecord[] = (Array.isArray(data) ? data : []).map((h: any) => ({
+            id: Number(h.id),
+            ip: String(h.ip),
+            port: Number(h.port) || 22,
+            username: h.username,
+            authType: h.authType,
+            password: h.password ?? null,
+            key: h.key ?? null,
+            keyPassword: h.keyPassword ?? null,
+            keyType: h.keyType ?? null,
+        })).filter(h => !!h.id && !!h.ip && !!h.port);
+        return hosts;
+    } catch (err) {
+        logger.error('Failed to fetch hosts from database service', err);
+        return [];
+    }
+}
+
+async function fetchHostById(id: number): Promise<HostRecord | undefined> {
+    const all = await fetchAllHosts();
+    return all.find(h => h.id === id);
+}
+
+function buildSshConfig(host: HostRecord): ConnectConfig {
+    const base: ConnectConfig = {
+        host: host.ip,
+        port: host.port || 22,
+        username: host.username || 'root',
+        readyTimeout: 10_000,
+        algorithms: {}
+    } as ConnectConfig;
+
+    if (host.authType === 'password') {
+        (base as any).password = host.password || '';
+    } else if (host.authType === 'key') {
+        if (host.key) {
+            try {
+                if (!host.key.includes('-----BEGIN') || !host.key.includes('-----END')) {
+                    throw new Error('Invalid private key format');
+                }
+                
+                const cleanKey = host.key.trim().replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+                
+                (base as any).privateKey = Buffer.from(cleanKey, 'utf8');
+                
+                if (host.keyPassword) {
+                    (base as any).passphrase = host.keyPassword;
+                }
+
+            } catch (keyError) {
+                logger.error(`SSH key format error for host ${host.ip}: ${keyError.message}`);
+                if (host.password) {
+                    (base as any).password = host.password;
+                } else {
+                    throw new Error(`Invalid SSH key format for host ${host.ip}`);
+                }
+            }
+        }
+    }
+    return base;
+}
+
+async function withSshConnection<T>(host: HostRecord, fn: (client: Client) => Promise<T>): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+        const client = new Client();
+        let settled = false;
+
+        const onError = (err: Error) => {
+            if (!settled) {
+                settled = true;
+                try {
+                    client.end();
+                } catch {
+                }
+                reject(err);
+            }
+        };
+
+        client.on('ready', async () => {
+            try {
+                const result = await fn(client);
+                if (!settled) {
+                    settled = true;
+                    try {
+                        client.end();
+                    } catch {
+                    }
+                    resolve(result);
+                }
+            } catch (err: any) {
+                onError(err);
+            }
+        });
+
+        client.on('error', onError);
+        client.on('timeout', () => onError(new Error('SSH connection timeout')));
+        try {
+            client.connect(buildSshConfig(host));
+        } catch (err: any) {
+            onError(err);
+        }
+    });
+}
+
+function execCommand(client: Client, command: string): Promise<{
+    stdout: string;
+    stderr: string;
+    code: number | null;
+}> {
+    return new Promise((resolve, reject) => {
+        client.exec(command, {pty: false}, (err, stream) => {
+            if (err) return reject(err);
+            let stdout = '';
+            let stderr = '';
+            let exitCode: number | null = null;
+            stream.on('close', (code: number | undefined) => {
+                exitCode = typeof code === 'number' ? code : null;
+                resolve({stdout, stderr, code: exitCode});
+            }).on('data', (data: Buffer) => {
+                stdout += data.toString('utf8');
+            }).stderr.on('data', (data: Buffer) => {
+                stderr += data.toString('utf8');
+            });
+        });
+    });
+}
+
+function parseCpuLine(cpuLine: string): { total: number; idle: number } | undefined {
+    const parts = cpuLine.trim().split(/\s+/);
+    if (parts[0] !== 'cpu') return undefined;
+    const nums = parts.slice(1).map(n => Number(n)).filter(n => Number.isFinite(n));
+    if (nums.length < 4) return undefined;
+    const idle = (nums[3] ?? 0) + (nums[4] ?? 0);
+    const total = nums.reduce((a, b) => a + b, 0);
+    return {total, idle};
+}
+
+function toFixedNum(n: number | null | undefined, digits = 2): number | null {
+    if (typeof n !== 'number' || !Number.isFinite(n)) return null;
+    return Number(n.toFixed(digits));
+}
+
+function kibToGiB(kib: number): number {
+    return kib / (1024 * 1024);
+}
+
+async function collectMetrics(host: HostRecord): Promise<{
+    cpu: { percent: number | null; cores: number | null; load: [number, number, number] | null };
+    memory: { percent: number | null; usedGiB: number | null; totalGiB: number | null };
+    disk: { percent: number | null; usedHuman: string | null; totalHuman: string | null };
+}> {
+    return withSshConnection(host, async (client) => {
+        let cpuPercent: number | null = null;
+        let cores: number | null = null;
+        let loadTriplet: [number, number, number] | null = null;
+        try {
+            const stat1 = await execCommand(client, 'cat /proc/stat');
+            await new Promise(r => setTimeout(r, 500));
+            const stat2 = await execCommand(client, 'cat /proc/stat');
+            const loadAvgOut = await execCommand(client, 'cat /proc/loadavg');
+            const coresOut = await execCommand(client, 'nproc 2>/dev/null || grep -c ^processor /proc/cpuinfo');
+
+            const cpuLine1 = (stat1.stdout.split('\n').find(l => l.startsWith('cpu ')) || '').trim();
+            const cpuLine2 = (stat2.stdout.split('\n').find(l => l.startsWith('cpu ')) || '').trim();
+            const a = parseCpuLine(cpuLine1);
+            const b = parseCpuLine(cpuLine2);
+            if (a && b) {
+                const totalDiff = b.total - a.total;
+                const idleDiff = b.idle - a.idle;
+                const used = totalDiff - idleDiff;
+                if (totalDiff > 0) cpuPercent = Math.max(0, Math.min(100, (used / totalDiff) * 100));
+            }
+
+            const laParts = loadAvgOut.stdout.trim().split(/\s+/);
+            if (laParts.length >= 3) {
+                loadTriplet = [Number(laParts[0]), Number(laParts[1]), Number(laParts[2])].map(v => Number.isFinite(v) ? Number(v) : 0) as [number, number, number];
+            }
+
+            const coresNum = Number((coresOut.stdout || '').trim());
+            cores = Number.isFinite(coresNum) && coresNum > 0 ? coresNum : null;
+        } catch (e) {
+            cpuPercent = null;
+            cores = null;
+            loadTriplet = null;
+        }
+
+        let memPercent: number | null = null;
+        let usedGiB: number | null = null;
+        let totalGiB: number | null = null;
+        try {
+            const memInfo = await execCommand(client, 'cat /proc/meminfo');
+            const lines = memInfo.stdout.split('\n');
+            const getVal = (key: string) => {
+                const line = lines.find(l => l.startsWith(key));
+                if (!line) return null;
+                const m = line.match(/\d+/);
+                return m ? Number(m[0]) : null;
+            };
+            const totalKb = getVal('MemTotal:');
+            const availKb = getVal('MemAvailable:');
+            if (totalKb && availKb && totalKb > 0) {
+                const usedKb = totalKb - availKb;
+                memPercent = Math.max(0, Math.min(100, (usedKb / totalKb) * 100));
+                usedGiB = kibToGiB(usedKb);
+                totalGiB = kibToGiB(totalKb);
+            }
+        } catch (e) {
+            memPercent = null;
+            usedGiB = null;
+            totalGiB = null;
+        }
+
+        let diskPercent: number | null = null;
+        let usedHuman: string | null = null;
+        let totalHuman: string | null = null;
+        try {
+            // Get both human-readable and bytes format for accurate calculation
+            const diskOutHuman = await execCommand(client, 'df -h -P / | tail -n +2');
+            const diskOutBytes = await execCommand(client, 'df -B1 -P / | tail -n +2');
+            
+            const humanLine = diskOutHuman.stdout.split('\n').map(l => l.trim()).filter(Boolean)[0] || '';
+            const bytesLine = diskOutBytes.stdout.split('\n').map(l => l.trim()).filter(Boolean)[0] || '';
+            
+            const humanParts = humanLine.split(/\s+/);
+            const bytesParts = bytesLine.split(/\s+/);
+            
+            if (humanParts.length >= 6 && bytesParts.length >= 6) {
+                totalHuman = humanParts[1] || null;
+                usedHuman = humanParts[2] || null;
+                
+                // Calculate our own percentage using bytes for accuracy
+                const totalBytes = Number(bytesParts[1]);
+                const usedBytes = Number(bytesParts[2]);
+                
+                if (Number.isFinite(totalBytes) && Number.isFinite(usedBytes) && totalBytes > 0) {
+                    diskPercent = Math.max(0, Math.min(100, (usedBytes / totalBytes) * 100));
+                }
+            }
+        } catch (e) {
+            diskPercent = null;
+            usedHuman = null;
+            totalHuman = null;
+        }
+
+        return {
+            cpu: {percent: toFixedNum(cpuPercent, 0), cores, load: loadTriplet},
+            memory: {
+                percent: toFixedNum(memPercent, 0),
+                usedGiB: usedGiB ? toFixedNum(usedGiB, 2) : null,
+                totalGiB: totalGiB ? toFixedNum(totalGiB, 2) : null
+            },
+            disk: {percent: toFixedNum(diskPercent, 0), usedHuman, totalHuman},
+        };
+    });
+}
+
+function tcpPing(host: string, port: number, timeoutMs = 5000): Promise<boolean> {
+    return new Promise((resolve) => {
+        const socket = new net.Socket();
+        let settled = false;
+
+        const onDone = (result: boolean) => {
+            if (settled) return;
+            settled = true;
+            try {
+                socket.destroy();
+            } catch {
+            }
+            resolve(result);
+        };
+
+        socket.setTimeout(timeoutMs);
+
+        socket.once('connect', () => onDone(true));
+        socket.once('timeout', () => onDone(false));
+        socket.once('error', () => onDone(false));
+        socket.connect(port, host);
+    });
+}
+
+async function pollStatusesOnce(): Promise<void> {
+    const hosts = await fetchAllHosts();
+    if (hosts.length === 0) {
+        logger.warn('No hosts retrieved for status polling');
+        return;
+    }
+
+    const now = new Date().toISOString();
+
+    const checks = hosts.map(async (h) => {
+        const isOnline = await tcpPing(h.ip, h.port, 5000);
+        const now = new Date().toISOString();
+        const statusEntry: StatusEntry = {status: isOnline ? 'online' : 'offline', lastChecked: now};
+        hostStatuses.set(h.id, statusEntry);
+        return isOnline;
+    });
+
+    const results = await Promise.allSettled(checks);
+    const onlineCount = results.filter(r => r.status === 'fulfilled' && r.value === true).length;
+    const offlineCount = hosts.length - onlineCount;
+}
+
+app.get('/status', async (req, res) => {
+    if (hostStatuses.size === 0) {
+        await pollStatusesOnce();
+    }
+    const result: Record<number, StatusEntry> = {};
+    for (const [id, entry] of hostStatuses.entries()) {
+        result[id] = entry;
+    }
+    res.json(result);
+});
+
+app.get('/status/:id', async (req, res) => {
+    const id = Number(req.params.id);
+    if (!id) {
+        return res.status(400).json({error: 'Invalid id'});
+    }
+
+    try {
+        const host = await fetchHostById(id);
+        if (!host) {
+            return res.status(404).json({error: 'Host not found'});
+        }
+        
+        const isOnline = await tcpPing(host.ip, host.port, 5000);
+        const now = new Date().toISOString();
+        const statusEntry: StatusEntry = {status: isOnline ? 'online' : 'offline', lastChecked: now};
+        
+        hostStatuses.set(id, statusEntry);
+        res.json(statusEntry);
+    } catch (err) {
+        logger.error('Failed to check host status', err);
+        res.status(500).json({error: 'Failed to check host status'});
+    }
+});
+
+app.post('/refresh', async (req, res) => {
+    await pollStatusesOnce();
+    res.json({message: 'Refreshed'});
+});
+
+app.get('/metrics/:id', async (req, res) => {
+    const id = Number(req.params.id);
+    if (!id) {
+        return res.status(400).json({error: 'Invalid id'});
+    }
+    try {
+        const host = await fetchHostById(id);
+        if (!host) {
+            return res.status(404).json({error: 'Host not found'});
+        }
+        const metrics = await collectMetrics(host);
+        res.json({...metrics, lastChecked: new Date().toISOString()});
+    } catch (err) {
+        logger.error('Failed to collect metrics', err);
+        return res.json({
+            cpu: {percent: null, cores: null, load: null},
+            memory: {percent: null, usedGiB: null, totalGiB: null},
+            disk: {percent: null, usedHuman: null, totalHuman: null},
+            lastChecked: new Date().toISOString()
+        });
+    }
+});
+
+const PORT = 8085;
+app.listen(PORT, async () => {
+    try {
+        await pollStatusesOnce();
+    } catch (err) {
+        logger.error('Initial poll failed', err);
+    }
+});

src/backend/ssh/terminal.ts

@@ -4,6 +4,9 @@ import chalk from 'chalk';
 
 const wss = new WebSocketServer({port: 8082});
 
+
+
+
 const sshIconSymbol = '🖥️';
 const getTimeStamp = (): string => chalk.gray(`[${new Date().toLocaleTimeString()}]`);
 const formatMessage = (level: string, colorFn: chalk.Chalk, message: string): string => {
@@ -30,16 +33,22 @@ const logger = {
     }
 };
 
+
+
 wss.on('connection', (ws: WebSocket) => {
     let sshConn: Client | null = null;
     let sshStream: ClientChannel | null = null;
     let pingInterval: NodeJS.Timeout | null = null;
 
+
+
     ws.on('close', () => {
         cleanupSSH();
     });
 
     ws.on('message', (msg: RawData) => {
+
+
         let parsed: any;
         try {
             parsed = JSON.parse(msg.toString());
@@ -128,38 +137,17 @@ wss.on('connection', (ws: WebSocket) => {
                 ws.send(JSON.stringify({type: 'error', message: 'SSH connection timeout'}));
                 cleanupSSH(connectionTimeout);
             }
-        }, 15000);
+        }, 60000);
 
         sshConn.on('ready', () => {
             clearTimeout(connectionTimeout);
-            const pseudoTtyOpts: PseudoTtyOptions = {
-                term: 'xterm-256color',
-                cols,
-                rows,
-                modes: {
-                    ECHO: 1,
-                    ECHOCTL: 0,
-                    ICANON: 1,
-                    ISIG: 1,
-                    ICRNL: 1,
-                    IXON: 1,
-                    IXOFF: 0,
-                    ISTRIP: 0,
-                    OPOST: 1,
-                    ONLCR: 1,
-                    OCRNL: 0,
-                    ONOCR: 0,
-                    ONLRET: 0,
-                    CS7: 0,
-                    CS8: 1,
-                    PARENB: 0,
-                    PARODD: 0,
-                    TTY_OP_ISPEED: 38400,
-                    TTY_OP_OSPEED: 38400,
-                }
-            };
 
-            sshConn!.shell(pseudoTtyOpts, (err, stream) => {
+
+            sshConn!.shell({
+                rows: data.rows,
+                cols: data.cols,
+                term: 'xterm-256color'
+            } as PseudoTtyOptions, (err, stream) => {
                 if (err) {
                     logger.error('Shell error: ' + err.message);
                     ws.send(JSON.stringify({type: 'error', message: 'Shell error: ' + err.message}));
@@ -168,34 +156,18 @@ wss.on('connection', (ws: WebSocket) => {
 
                 sshStream = stream;
 
-                stream.on('data', (chunk: Buffer) => {
-                    let data: string;
-                    try {
-                        data = chunk.toString('utf8');
-                    } catch (e) {
-                        data = chunk.toString('binary');
-                    }
-
-                    ws.send(JSON.stringify({type: 'data', data}));
+                stream.on('data', (data: Buffer) => {
+                    ws.send(JSON.stringify({type: 'data', data: data.toString()}));
                 });
 
                 stream.on('close', () => {
-                    cleanupSSH(connectionTimeout);
+
+                    ws.send(JSON.stringify({type: 'disconnected', message: 'Connection lost'}));
                 });
 
                 stream.on('error', (err: Error) => {
                     logger.error('SSH stream error: ' + err.message);
-
-                    const isConnectionError = err.message.includes('ECONNRESET') ||
-                        err.message.includes('EPIPE') ||
-                        err.message.includes('ENOTCONN') ||
-                        err.message.includes('ETIMEDOUT');
-
-                    if (isConnectionError) {
-                        ws.send(JSON.stringify({type: 'disconnected', message: 'Connection lost'}));
-                    } else {
-                        ws.send(JSON.stringify({type: 'error', message: 'SSH stream error: ' + err.message}));
-                    }
+                    ws.send(JSON.stringify({type: 'error', message: 'SSH stream error: ' + err.message}));
                 });
 
                 setupPingInterval();
@@ -233,18 +205,22 @@ wss.on('connection', (ws: WebSocket) => {
 
         sshConn.on('close', () => {
             clearTimeout(connectionTimeout);
+
             cleanupSSH(connectionTimeout);
         });
 
+
+
         const connectConfig: any = {
             host: ip,
             port,
             username,
             keepaliveInterval: 30000,
             keepaliveCountMax: 3,
-            readyTimeout: 10000,
+            readyTimeout: 60000,
             tcpKeepAlive: true,
             tcpKeepAliveInitialDelay: 30000,
+
             env: {
                 TERM: 'xterm-256color',
                 LANG: 'en_US.UTF-8',
@@ -294,12 +270,26 @@ wss.on('connection', (ws: WebSocket) => {
             }
         };
         if (authType === 'key' && key) {
-            connectConfig.privateKey = key;
-            if (keyPassword) {
-                connectConfig.passphrase = keyPassword;
-            }
-            if (keyType && keyType !== 'auto') {
-                connectConfig.privateKeyType = keyType;
+            try {
+                if (!key.includes('-----BEGIN') || !key.includes('-----END')) {
+                    throw new Error('Invalid private key format');
+                }
+             
+                const cleanKey = key.trim().replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+                
+                connectConfig.privateKey = Buffer.from(cleanKey, 'utf8');
+                
+                if (keyPassword) {
+                    connectConfig.passphrase = keyPassword;
+                }
+                
+                if (keyType && keyType !== 'auto') {
+                    connectConfig.privateKeyType = keyType;
+                }
+            } catch (keyError) {
+                logger.error('SSH key format error: ' + keyError.message);
+                ws.send(JSON.stringify({type: 'error', message: 'SSH key format error: Invalid private key format'}));
+                return;
             }
         } else if (authType === 'key') {
             logger.error('SSH key authentication requested but no key provided');
@@ -360,4 +350,6 @@ wss.on('connection', (ws: WebSocket) => {
             }
         }, 60000);
     }
+
+
 });

src/backend/ssh/tunnel.ts

@@ -78,7 +78,7 @@ interface SSHHost {
     keyType?: string;
     enableTerminal: boolean;
     enableTunnel: boolean;
-    enableConfigEditor: boolean;
+    enableFileManager: boolean;
     defaultPath: string;
     tunnelConnections: TunnelConnection[];
     createdAt: string;
@@ -197,7 +197,8 @@ function classifyError(errorMessage: string): ErrorType {
 
     if (message.includes("connect etimedout") ||
         message.includes("timeout") ||
-        message.includes("timed out")) {
+        message.includes("timed out") ||
+        message.includes("keepalive timeout")) {
         return ERROR_TYPES.TIMEOUT;
     }
 
@@ -267,7 +268,8 @@ function cleanupTunnelResources(tunnelName: string): void {
         tunnelName,
         `${tunnelName}_confirm`,
         `${tunnelName}_retry`,
-        `${tunnelName}_verify_retry`
+        `${tunnelName}_verify_retry`,
+        `${tunnelName}_ping`
     ];
 
     timerKeys.forEach(key => {
@@ -302,7 +304,7 @@ function resetRetryState(tunnelName: string): void {
         countdownIntervals.delete(tunnelName);
     }
 
-    ['', '_confirm', '_retry', '_verify_retry'].forEach(suffix => {
+    ['', '_confirm', '_retry', '_verify_retry', '_ping'].forEach(suffix => {
         const timerKey = `${tunnelName}${suffix}`;
         if (verificationTimers.has(timerKey)) {
             clearTimeout(verificationTimers.get(timerKey)!);
@@ -353,7 +355,8 @@ function handleDisconnect(tunnelName: string, tunnelConfig: TunnelConfig | null,
         const maxRetries = tunnelConfig.maxRetries || 3;
         const retryInterval = tunnelConfig.retryInterval || 5000;
 
-        let retryCount = (retryCounters.get(tunnelName) || 0) + 1;
+        let retryCount = retryCounters.get(tunnelName) || 0;
+        retryCount = retryCount + 1;
 
         if (retryCount > maxRetries) {
             logger.error(`All ${maxRetries} retries failed for ${tunnelName}`);
@@ -420,7 +423,6 @@ function handleDisconnect(tunnelName: string, tunnelConfig: TunnelConfig | null,
 
                 if (!manualDisconnects.has(tunnelName)) {
                     activeTunnels.delete(tunnelName);
-
                     connectSSHTunnel(tunnelConfig, retryCount);
                 }
             }, retryInterval);
@@ -438,264 +440,43 @@ function handleDisconnect(tunnelName: string, tunnelConfig: TunnelConfig | null,
 }
 
 function verifyTunnelConnection(tunnelName: string, tunnelConfig: TunnelConfig, isPeriodic = false): void {
-    if (manualDisconnects.has(tunnelName) || !activeTunnels.has(tunnelName)) {
-        return;
-    }
-
-    if (tunnelVerifications.has(tunnelName)) {
-        return;
-    }
-
-    const conn = activeTunnels.get(tunnelName);
-    if (!conn) return;
-
-    broadcastTunnelStatus(tunnelName, {
-        connected: false,
-        status: CONNECTION_STATES.VERIFYING
-    });
-
-    const verificationConn = new Client();
-    tunnelVerifications.set(tunnelName, {
-        conn: verificationConn,
-        timeout: setTimeout(() => {
-            logger.error(`Verification timeout for '${tunnelName}'`);
-            cleanupVerification(false, "Verification timeout");
-        }, 10000)
-    });
-
-    function cleanupVerification(isSuccessful: boolean, failureReason = "Unknown verification failure") {
-        const verification = tunnelVerifications.get(tunnelName);
-        if (verification) {
-            clearTimeout(verification.timeout);
-            try {
-                verification.conn.end();
-            } catch (e) {
-            }
-            tunnelVerifications.delete(tunnelName);
-        }
-
-        if (isSuccessful) {
+    if (isPeriodic) {
+        if (!activeTunnels.has(tunnelName)) {
             broadcastTunnelStatus(tunnelName, {
-                connected: true,
-                status: CONNECTION_STATES.CONNECTED
+                connected: false,
+                status: CONNECTION_STATES.DISCONNECTED,
+                reason: 'Tunnel connection lost'
             });
-
-            if (!isPeriodic) {
-                setupPingInterval(tunnelName, tunnelConfig);
-            }
-        } else {
-            logger.warn(`Verification failed for '${tunnelName}': ${failureReason}`);
-
-            if (failureReason.includes('command failed') || failureReason.includes('connection error') || failureReason.includes('timeout')) {
-                if (!manualDisconnects.has(tunnelName)) {
-                    broadcastTunnelStatus(tunnelName, {
-                        connected: false,
-                        status: CONNECTION_STATES.FAILED,
-                        reason: failureReason
-                    });
-                }
-                activeTunnels.delete(tunnelName);
-                handleDisconnect(tunnelName, tunnelConfig, !manualDisconnects.has(tunnelName));
-            } else {
-                logger.info(`Assuming tunnel '${tunnelName}' is working despite verification warning: ${failureReason}`);
-                cleanupVerification(true);
-            }
         }
     }
-
-    function attemptVerification() {
-        const testCmd = `timeout 3 bash -c 'nc -z ${tunnelConfig.endpointIP} ${tunnelConfig.endpointPort}'`;
-
-        verificationConn.exec(testCmd, (err, stream) => {
-            if (err) {
-                logger.error(`Verification command failed for '${tunnelName}': ${err.message}`);
-                cleanupVerification(false, `Verification command failed: ${err.message}`);
-                return;
-            }
-
-            let output = '';
-            let errorOutput = '';
-
-            stream.on('data', (data: Buffer) => {
-                output += data.toString();
-            });
-
-            stream.stderr?.on('data', (data: Buffer) => {
-                errorOutput += data.toString();
-            });
-
-            stream.on('close', (code: number) => {
-                if (code === 0) {
-                    cleanupVerification(true);
-                } else {
-                    const isTimeout = errorOutput.includes('timeout') || errorOutput.includes('Connection timed out');
-                    const isConnectionRefused = errorOutput.includes('Connection refused') || errorOutput.includes('No route to host');
-
-                    let failureReason = `Cannot connect to ${tunnelConfig.endpointIP}:${tunnelConfig.endpointPort}`;
-                    if (isTimeout) {
-                        failureReason = `Tunnel verification timeout - cannot reach ${tunnelConfig.endpointIP}:${tunnelConfig.endpointPort}`;
-                    } else if (isConnectionRefused) {
-                        failureReason = `Connection refused to ${tunnelConfig.endpointIP}:${tunnelConfig.endpointPort} - tunnel may not be established`;
-                    }
-
-                    cleanupVerification(false, failureReason);
-                }
-            });
-
-            stream.on('error', (err: Error) => {
-                logger.error(`Verification stream error for '${tunnelName}': ${err.message}`);
-                cleanupVerification(false, `Verification stream error: ${err.message}`);
-            });
-        });
-    }
-
-    verificationConn.on('ready', () => {
-        setTimeout(() => {
-            attemptVerification();
-        }, 2000);
-    });
-
-    verificationConn.on('error', (err: Error) => {
-        cleanupVerification(false, `Verification connection error: ${err.message}`);
-    });
-
-    verificationConn.on('close', () => {
-        if (tunnelVerifications.has(tunnelName)) {
-            cleanupVerification(false, "Verification connection closed");
-        }
-    });
-
-    const connOptions: any = {
-        host: tunnelConfig.sourceIP,
-        port: tunnelConfig.sourceSSHPort,
-        username: tunnelConfig.sourceUsername,
-        readyTimeout: 10000,
-        keepaliveInterval: 30000,
-        keepaliveCountMax: 3,
-        tcpKeepAlive: true,
-        tcpKeepAliveInitialDelay: 30000,
-        algorithms: {
-            kex: [
-                'diffie-hellman-group14-sha256',
-                'diffie-hellman-group14-sha1',
-                'diffie-hellman-group1-sha1',
-                'diffie-hellman-group-exchange-sha256',
-                'diffie-hellman-group-exchange-sha1',
-                'ecdh-sha2-nistp256',
-                'ecdh-sha2-nistp384',
-                'ecdh-sha2-nistp521'
-            ],
-            cipher: [
-                'aes128-ctr',
-                'aes192-ctr',
-                'aes256-ctr',
-                'aes128-gcm@openssh.com',
-                'aes256-gcm@openssh.com',
-                'aes128-cbc',
-                'aes192-cbc',
-                'aes256-cbc',
-                '3des-cbc'
-            ],
-            hmac: [
-                'hmac-sha2-256',
-                'hmac-sha2-512',
-                'hmac-sha1',
-                'hmac-md5'
-            ],
-            compress: [
-                'none',
-                'zlib@openssh.com',
-                'zlib'
-            ]
-        }
-    };
-
-    if (tunnelConfig.sourceAuthMethod === "key" && tunnelConfig.sourceSSHKey) {
-        connOptions.privateKey = tunnelConfig.sourceSSHKey;
-        if (tunnelConfig.sourceKeyPassword) {
-            connOptions.passphrase = tunnelConfig.sourceKeyPassword;
-        }
-        if (tunnelConfig.sourceKeyType && tunnelConfig.sourceKeyType !== 'auto') {
-            connOptions.privateKeyType = tunnelConfig.sourceKeyType;
-        }
-    } else if (tunnelConfig.sourceAuthMethod === "key") {
-        logger.error(`SSH key authentication requested but no key provided for tunnel '${tunnelName}'`);
-        broadcastTunnelStatus(tunnelName, {
-            connected: false,
-            status: CONNECTION_STATES.FAILED,
-            reason: "SSH key authentication requested but no key provided"
-        });
-        return;
-    } else {
-        connOptions.password = tunnelConfig.sourcePassword;
-    }
-
-    verificationConn.connect(connOptions);
 }
 
 function setupPingInterval(tunnelName: string, tunnelConfig: TunnelConfig): void {
+    const pingKey = `${tunnelName}_ping`;
+    if (verificationTimers.has(pingKey)) {
+        clearInterval(verificationTimers.get(pingKey)!);
+        verificationTimers.delete(pingKey);
+    }
+    
     const pingInterval = setInterval(() => {
-        if (!activeTunnels.has(tunnelName) || manualDisconnects.has(tunnelName)) {
-            clearInterval(pingInterval);
-            return;
-        }
-
-        const conn = activeTunnels.get(tunnelName);
-        if (!conn) {
-            clearInterval(pingInterval);
-            return;
-        }
-
-        conn.exec('echo "ping"', (err, stream) => {
-            if (err) {
+        const currentStatus = connectionStatus.get(tunnelName);
+        if (currentStatus?.status === CONNECTION_STATES.CONNECTED) {
+            if (!activeTunnels.has(tunnelName)) {
+                broadcastTunnelStatus(tunnelName, {
+                    connected: false,
+                    status: CONNECTION_STATES.DISCONNECTED,
+                    reason: 'Tunnel connection lost'
+                });
                 clearInterval(pingInterval);
-
-                if (!manualDisconnects.has(tunnelName)) {
-                    broadcastTunnelStatus(tunnelName, {
-                        connected: false,
-                        status: CONNECTION_STATES.UNSTABLE,
-                        reason: "Ping failed"
-                    });
-                }
-
-                activeTunnels.delete(tunnelName);
-                handleDisconnect(tunnelName, tunnelConfig, !manualDisconnects.has(tunnelName));
-                return;
+                verificationTimers.delete(pingKey);
             }
-
-            stream.on('close', (code: number) => {
-                if (code !== 0) {
-                    clearInterval(pingInterval);
-
-                    if (!manualDisconnects.has(tunnelName)) {
-                        broadcastTunnelStatus(tunnelName, {
-                            connected: false,
-                            status: CONNECTION_STATES.UNSTABLE,
-                            reason: "Ping command failed"
-                        });
-                    }
-
-                    activeTunnels.delete(tunnelName);
-                    handleDisconnect(tunnelName, tunnelConfig, !manualDisconnects.has(tunnelName));
-                }
-            });
-
-            stream.on('error', (err: Error) => {
-                clearInterval(pingInterval);
-
-                if (!manualDisconnects.has(tunnelName)) {
-                    broadcastTunnelStatus(tunnelName, {
-                        connected: false,
-                        status: CONNECTION_STATES.UNSTABLE,
-                        reason: "Ping stream error"
-                    });
-                }
-
-                activeTunnels.delete(tunnelName);
-                handleDisconnect(tunnelName, tunnelConfig, !manualDisconnects.has(tunnelName));
-            });
-        });
-    }, 60000);
+        } else {
+            clearInterval(pingInterval);
+            verificationTimers.delete(pingKey);
+        }
+    }, 120000);
+    
+    verificationTimers.set(pingKey, pingInterval);
 }
 
 function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
@@ -751,7 +532,7 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
                 handleDisconnect(tunnelName, tunnelConfig, !manualDisconnects.has(tunnelName));
             }
         }
-    }, 15000);
+    }, 60000);
 
     conn.on("error", (err) => {
         clearTimeout(connectionTimeout);
@@ -778,6 +559,8 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
             errorType === ERROR_TYPES.PORT ||
             errorType === ERROR_TYPES.PERMISSION ||
             manualDisconnects.has(tunnelName);
+        
+
 
         handleDisconnect(tunnelName, tunnelConfig, !shouldNotRetry);
     });
@@ -841,7 +624,11 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
 
             setTimeout(() => {
                 if (!manualDisconnects.has(tunnelName) && activeTunnels.has(tunnelName)) {
-                    verifyTunnelConnection(tunnelName, tunnelConfig, false);
+                    broadcastTunnelStatus(tunnelName, {
+                        connected: true,
+                        status: CONNECTION_STATES.CONNECTED
+                    });
+                    setupPingInterval(tunnelName, tunnelConfig);
                 }
             }, 2000);
 
@@ -901,7 +688,6 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
 
             stream.stderr.on("data", (data) => {
                 const errorMsg = data.toString().trim();
-                logger.debug(`Tunnel stderr for '${tunnelName}': ${errorMsg}`);
             });
         });
     });
@@ -910,11 +696,11 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
         host: tunnelConfig.sourceIP,
         port: tunnelConfig.sourceSSHPort,
         username: tunnelConfig.sourceUsername,
-        keepaliveInterval: 30000,
+        keepaliveInterval: 30000, 
         keepaliveCountMax: 3,
-        readyTimeout: 10000,
+        readyTimeout: 60000,
         tcpKeepAlive: true,
-        tcpKeepAliveInitialDelay: 30000,
+        tcpKeepAliveInitialDelay: 15000,
         algorithms: {
             kex: [
                 'diffie-hellman-group14-sha256',
@@ -952,8 +738,8 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
     };
 
     if (tunnelConfig.sourceAuthMethod === "key" && tunnelConfig.sourceSSHKey) {
-        if (!tunnelConfig.sourceSSHKey.includes('-----BEGIN')) {
-            logger.error(`Invalid SSH key format for tunnel '${tunnelName}'. Key should start with '-----BEGIN'`);
+        if (!tunnelConfig.sourceSSHKey.includes('-----BEGIN') || !tunnelConfig.sourceSSHKey.includes('-----END')) {
+            logger.error(`Invalid SSH key format for tunnel '${tunnelName}'. Key should contain both BEGIN and END markers`);
             broadcastTunnelStatus(tunnelName, {
                 connected: false,
                 status: CONNECTION_STATES.FAILED,
@@ -962,7 +748,8 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
             return;
         }
 
-        connOptions.privateKey = tunnelConfig.sourceSSHKey;
+        const cleanKey = tunnelConfig.sourceSSHKey.trim().replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        connOptions.privateKey = Buffer.from(cleanKey, 'utf8');
         if (tunnelConfig.sourceKeyPassword) {
             connOptions.passphrase = tunnelConfig.sourceKeyPassword;
         }
@@ -981,43 +768,16 @@ function connectSSHTunnel(tunnelConfig: TunnelConfig, retryAttempt = 0): void {
         connOptions.password = tunnelConfig.sourcePassword;
     }
 
-    const testSocket = new net.Socket();
-    testSocket.setTimeout(5000);
-
-    testSocket.on('connect', () => {
-        testSocket.destroy();
-
-        const currentStatus = connectionStatus.get(tunnelName);
-        if (!currentStatus || currentStatus.status !== CONNECTION_STATES.WAITING) {
-            broadcastTunnelStatus(tunnelName, {
-                connected: false,
-                status: CONNECTION_STATES.CONNECTING,
-                retryCount: retryAttempt > 0 ? retryAttempt : undefined
-            });
-        }
-
-        conn.connect(connOptions);
-    });
-
-    testSocket.on('timeout', () => {
-        testSocket.destroy();
+    const finalStatus = connectionStatus.get(tunnelName);
+    if (!finalStatus || finalStatus.status !== CONNECTION_STATES.WAITING) {
         broadcastTunnelStatus(tunnelName, {
             connected: false,
-            status: CONNECTION_STATES.FAILED,
-            reason: "Network connectivity test failed - server not reachable"
+            status: CONNECTION_STATES.CONNECTING,
+            retryCount: retryAttempt > 0 ? retryAttempt : undefined
         });
-    });
+    }
 
-    testSocket.on('error', (err: any) => {
-        testSocket.destroy();
-        broadcastTunnelStatus(tunnelName, {
-            connected: false,
-            status: CONNECTION_STATES.FAILED,
-            reason: `Network connectivity test failed - ${err.message}`
-        });
-    });
-
-    testSocket.connect(tunnelConfig.sourceSSHPort, tunnelConfig.sourceIP);
+    conn.connect(connOptions);
 }
 
 function killRemoteTunnelByMarker(tunnelConfig: TunnelConfig, tunnelName: string, callback: (err?: Error) => void) {
@@ -1029,9 +789,9 @@ function killRemoteTunnelByMarker(tunnelConfig: TunnelConfig, tunnelName: string
         username: tunnelConfig.sourceUsername,
         keepaliveInterval: 30000,
         keepaliveCountMax: 3,
-        readyTimeout: 10000,
+        readyTimeout: 60000,
         tcpKeepAlive: true,
-        tcpKeepAliveInitialDelay: 30000,
+        tcpKeepAliveInitialDelay: 15000,
         algorithms: {
             kex: [
                 'diffie-hellman-group14-sha256',
@@ -1068,7 +828,13 @@ function killRemoteTunnelByMarker(tunnelConfig: TunnelConfig, tunnelName: string
         }
     };
     if (tunnelConfig.sourceAuthMethod === "key" && tunnelConfig.sourceSSHKey) {
-        connOptions.privateKey = tunnelConfig.sourceSSHKey;
+        if (!tunnelConfig.sourceSSHKey.includes('-----BEGIN') || !tunnelConfig.sourceSSHKey.includes('-----END')) {
+            callback(new Error('Invalid SSH key format'));
+            return;
+        }
+        
+        const cleanKey = tunnelConfig.sourceSSHKey.trim().replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        connOptions.privateKey = Buffer.from(cleanKey, 'utf8');
         if (tunnelConfig.sourceKeyPassword) {
             connOptions.passphrase = tunnelConfig.sourceKeyPassword;
         }

src/backend/starter.ts

@@ -2,9 +2,10 @@
 //  node ./dist/backend/starter.js
 
 import './database/database.js'
-import './ssh/ssh.js';
-import './ssh_tunnel/ssh_tunnel.js';
-import './config_editor/config_editor.js';
+import './ssh/terminal.js';
+import './ssh/tunnel.js';
+import './ssh/file-manager.js';
+import './ssh/server-stats.js';
 import chalk from 'chalk';
 
 const fixedIconSymbol = '🚀';

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,44 @@
+// Language switcher component for changing UI language
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Globe } from 'lucide-react';
+
+const languages = [
+  { code: 'en', name: 'English', nativeName: 'English' },
+  { code: 'zh', name: 'Chinese', nativeName: '中文' },
+];
+
+export function LanguageSwitcher() {
+  const { i18n, t } = useTranslation();
+
+  const handleLanguageChange = (value: string) => {
+    i18n.changeLanguage(value);
+    // Save to localStorage for persistence
+    localStorage.setItem('i18nextLng', value);
+  };
+
+  return (
+    <div className="flex items-center gap-2 relative" style={{ zIndex: 99999 }}>
+      <Globe className="h-4 w-4 text-muted-foreground" />
+      <Select value={i18n.language} onValueChange={handleLanguageChange}>
+        <SelectTrigger className="w-[120px]">
+          <SelectValue placeholder={t('placeholders.language')} />
+        </SelectTrigger>
+        <SelectContent style={{ zIndex: 99999 }}>
+          {languages.map((lang) => (
+            <SelectItem key={lang.code} value={lang.code}>
+              {lang.nativeName}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

src/components/ui/button-group.tsx

@@ -0,0 +1,58 @@
+import { Children, ReactElement, cloneElement, isValidElement } from 'react';
+
+import { ButtonProps } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ButtonGroupProps {
+  className?: string;
+  orientation?: 'horizontal' | 'vertical';
+  children: ReactElement<ButtonProps>[] | React.ReactNode;
+}
+
+export const ButtonGroup = ({
+  className,
+  orientation = 'horizontal',
+  children,
+}: ButtonGroupProps) => {
+  const isHorizontal = orientation === 'horizontal';
+  const isVertical = orientation === 'vertical';
+
+  // Normalize and filter only valid React elements
+  const childArray = Children.toArray(children).filter((child): child is ReactElement<ButtonProps> =>
+    isValidElement(child)
+  );
+  const totalButtons = childArray.length;
+
+  return (
+    <div
+      className={cn(
+        'flex',
+        {
+          'flex-col': isVertical,
+          'w-fit': isVertical,
+        },
+        className
+      )}
+    >
+      {childArray.map((child, index) => {
+        const isFirst = index === 0;
+        const isLast = index === totalButtons - 1;
+
+        return cloneElement(child, {
+          className: cn(
+            {
+              'rounded-l-none': isHorizontal && !isFirst,
+              'rounded-r-none': isHorizontal && !isLast,
+              'border-l-0': isHorizontal && !isFirst,
+
+              'rounded-t-none': isVertical && !isFirst,
+              'rounded-b-none': isVertical && !isLast,
+              'border-t-0': isVertical && !isFirst,
+            },
+            child.props.className
+          ),
+        });
+      })}
+    </div>
+  );
+};

src/components/ui/progress.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

src/components/ui/shadcn-io/status/index.tsx

@@ -0,0 +1,66 @@
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+
+export type StatusProps = ComponentProps<typeof Badge> & {
+  status: 'online' | 'offline' | 'maintenance' | 'degraded';
+};
+
+export const Status = ({ className, status, ...props }: StatusProps) => (
+  <Badge
+    className={cn('flex items-center gap-2', 'group', status, className)}
+    variant="secondary"
+    {...props}
+  />
+);
+
+export type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement>;
+
+export const StatusIndicator = ({
+  className,
+  ...props
+}: StatusIndicatorProps) => (
+  <span className="relative flex h-2 w-2" {...props}>
+    <span
+      className={cn(
+        'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+        'group-[.online]:bg-emerald-500',
+        'group-[.offline]:bg-red-500',
+        'group-[.maintenance]:bg-blue-500',
+        'group-[.degraded]:bg-amber-500'
+      )}
+    />
+    <span
+      className={cn(
+        'relative inline-flex h-2 w-2 rounded-full',
+        'group-[.online]:bg-emerald-500',
+        'group-[.offline]:bg-red-500',
+        'group-[.maintenance]:bg-blue-500',
+        'group-[.degraded]:bg-amber-500'
+      )}
+    />
+  </span>
+);
+
+export type StatusLabelProps = HTMLAttributes<HTMLSpanElement>;
+
+export const StatusLabel = ({
+  className,
+  children,
+  ...props
+}: StatusLabelProps) => {
+  const { t } = useTranslation();
+  return (
+    <span className={cn('text-muted-foreground', className)} {...props}>
+      {children ?? (
+        <>
+          <span className="hidden group-[.online]:block">{t('common.online')}</span>
+          <span className="hidden group-[.offline]:block">{t('common.offline')}</span>
+          <span className="hidden group-[.maintenance]:block">{t('common.maintenance')}</span>
+          <span className="hidden group-[.degraded]:block">{t('common.degraded')}</span>
+        </>
+      )}
+    </span>
+  );
+};

src/components/ui/sheet.tsx

@@ -34,7 +34,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:pointer-events-none",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:pointer-events-none",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&

src/components/ui/sidebar.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, VariantProps } from "class-variance-authority"
 import { PanelLeftIcon } from "lucide-react"
 
 import { useIsMobile } from "@/hooks/use-mobile"
@@ -137,7 +137,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-full w-full",
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
             className
           )}
           {...props}
@@ -178,34 +178,35 @@ function Sidebar({
     )
   }
 
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
+  // Commented out mobile behavior to keep sidebar always visible
+  // if (isMobile) {
+  //   return (
+  //     <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+  //       <SheetContent
+  //         data-sidebar="sidebar"
+  //         data-slot="sidebar"
+  //         data-mobile="true"
+  //         className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+  //         style={
+  //           {
+  //             "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+  //           } as React.CSSProperties
+  //         }
+  //         side={side}
+  //       >
+  //         <SheetHeader className="sr-only">
+  //           <SheetTitle>Sidebar</SheetTitle>
+  //           <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+  //         </SheetHeader>
+  //         <div className="flex h-full w-full flex-col">{children}</div>
+  //       </SheetContent>
+  //     </Sheet>
+  //   )
+  // }
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer text-sidebar-foreground block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -227,7 +228,7 @@ function Sidebar({
       <div
         data-slot="sidebar-container"
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          "fixed inset-y-0 z-10 flex h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear",
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -242,7 +243,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border-2 group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>
@@ -720,6 +721,5 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
-  // eslint-disable-next-line react-refresh/only-export-components
   useSidebar,
 }

src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/ui/tooltip.tsx

@@ -52,7 +52,6 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

src/i18n/i18n.ts

@@ -0,0 +1,40 @@
+// i18n configuration for multi-language support
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpApi from 'i18next-http-backend';
+
+// Initialize i18n
+i18n
+  .use(HttpApi) // Load translations using http
+  .use(LanguageDetector) // Detect user language
+  .use(initReactI18next) // Pass i18n instance to react-i18next
+  .init({
+    supportedLngs: ['en', 'zh'], // Supported languages
+    fallbackLng: 'en', // Fallback language
+    debug: false,
+    
+    // Detection options - disabled to always use English by default
+    detection: {
+      order: ['localStorage', 'cookie'], // Only check user's saved preference
+      caches: ['localStorage', 'cookie'],
+      lookupLocalStorage: 'i18nextLng',
+      lookupCookie: 'i18nextLng',
+      checkWhitelist: true,
+    },
+    
+    // Backend options
+    backend: {
+      loadPath: '/locales/{{lng}}/translation.json',
+    },
+    
+    interpolation: {
+      escapeValue: false, // React already escapes values
+    },
+    
+    react: {
+      useSuspense: false, // Disable suspense for SSR compatibility
+    },
+  });
+
+export default i18n;

src/index.css

@@ -130,4 +130,48 @@
     body {
         @apply bg-background text-foreground;
     }
+}
+
+.thin-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #303032 transparent;
+}
+
+.thin-scrollbar::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #303032;
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+}
+
+.thin-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-track {
+  background: #18181b;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  background: #434345;
+  border-radius: 3px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #5a5a5d;
+}
+
+.thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #434345 #18181b;
 }

src/main.tsx

@@ -3,6 +3,7 @@ import {createRoot} from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import {ThemeProvider} from "@/components/theme-provider"
+import './i18n/i18n' // Initialize i18n
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>

src/ui/Admin/AdminSettings.tsx

@@ -0,0 +1,450 @@
+import React from "react";
+import {useSidebar} from "@/components/ui/sidebar";
+import {Separator} from "@/components/ui/separator.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
+import {Checkbox} from "@/components/ui/checkbox.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Label} from "@/components/ui/label.tsx";
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table.tsx";
+import {Shield, Trash2, Users} from "lucide-react";
+import {toast} from "sonner";
+import {useTranslation} from "react-i18next";
+import {
+    getOIDCConfig,
+    getRegistrationAllowed,
+    getUserList,
+    updateRegistrationAllowed,
+    updateOIDCConfig,
+    makeUserAdmin,
+    removeAdminStatus,
+    deleteUser
+} from "@/ui/main-axios.ts";
+
+function getCookie(name: string) {
+    return document.cookie.split('; ').reduce((r, v) => {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+    }, "");
+}
+
+interface AdminSettingsProps {
+    isTopbarOpen?: boolean;
+}
+
+export function AdminSettings({isTopbarOpen = true}: AdminSettingsProps): React.ReactElement {
+    const {t} = useTranslation();
+    const {state: sidebarState} = useSidebar();
+
+    const [allowRegistration, setAllowRegistration] = React.useState(true);
+    const [regLoading, setRegLoading] = React.useState(false);
+
+    const [oidcConfig, setOidcConfig] = React.useState({
+        client_id: '',
+        client_secret: '',
+        issuer_url: '',
+        authorization_url: '',
+        token_url: '',
+        identifier_path: 'sub',
+        name_path: 'name',
+        scopes: 'openid email profile',
+        userinfo_url: ''
+    });
+    const [oidcLoading, setOidcLoading] = React.useState(false);
+    const [oidcError, setOidcError] = React.useState<string | null>(null);
+
+    const [users, setUsers] = React.useState<Array<{
+        id: string;
+        username: string;
+        is_admin: boolean;
+        is_oidc: boolean
+    }>>([]);
+    const [usersLoading, setUsersLoading] = React.useState(false);
+    const [newAdminUsername, setNewAdminUsername] = React.useState("");
+    const [makeAdminLoading, setMakeAdminLoading] = React.useState(false);
+    const [makeAdminError, setMakeAdminError] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        const jwt = getCookie("jwt");
+        if (!jwt) return;
+        getOIDCConfig()
+            .then(res => {
+                if (res) setOidcConfig(res);
+            })
+            .catch(() => {
+            });
+        fetchUsers();
+    }, []);
+
+    React.useEffect(() => {
+        getRegistrationAllowed()
+            .then(res => {
+                if (typeof res?.allowed === 'boolean') {
+                    setAllowRegistration(res.allowed);
+                }
+            })
+            .catch(() => {
+            });
+    }, []);
+
+    const fetchUsers = async () => {
+        const jwt = getCookie("jwt");
+        if (!jwt) return;
+        setUsersLoading(true);
+        try {
+            const response = await getUserList();
+            setUsers(response.users);
+        } finally {
+            setUsersLoading(false);
+        }
+    };
+
+    const handleToggleRegistration = async (checked: boolean) => {
+        setRegLoading(true);
+        const jwt = getCookie("jwt");
+        try {
+            await updateRegistrationAllowed(checked);
+            setAllowRegistration(checked);
+        } finally {
+            setRegLoading(false);
+        }
+    };
+
+    const handleOIDCConfigSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setOidcLoading(true);
+        setOidcError(null);
+
+        const required = ['client_id', 'client_secret', 'issuer_url', 'authorization_url', 'token_url'];
+        const missing = required.filter(f => !oidcConfig[f as keyof typeof oidcConfig]);
+        if (missing.length > 0) {
+            setOidcError(t('admin.missingRequiredFields', { fields: missing.join(', ') }));
+            setOidcLoading(false);
+            return;
+        }
+
+        const jwt = getCookie("jwt");
+        try {
+            await updateOIDCConfig(oidcConfig);
+            toast.success(t('admin.oidcConfigurationUpdated'));
+        } catch (err: any) {
+            setOidcError(err?.response?.data?.error || t('admin.failedToUpdateOidcConfig'));
+        } finally {
+            setOidcLoading(false);
+        }
+    };
+
+    const handleOIDCConfigChange = (field: string, value: string) => {
+        setOidcConfig(prev => ({...prev, [field]: value}));
+    };
+
+    const handleMakeUserAdmin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!newAdminUsername.trim()) return;
+        setMakeAdminLoading(true);
+        setMakeAdminError(null);
+        const jwt = getCookie("jwt");
+        try {
+            await makeUserAdmin(newAdminUsername.trim());
+            toast.success(t('admin.userIsNowAdmin', { username: newAdminUsername }));
+            setNewAdminUsername("");
+            fetchUsers();
+        } catch (err: any) {
+            setMakeAdminError(err?.response?.data?.error || t('admin.failedToMakeUserAdmin'));
+        } finally {
+            setMakeAdminLoading(false);
+        }
+    };
+
+    const handleRemoveAdminStatus = async (username: string) => {
+        if (!confirm(t('admin.removeAdminStatus', { username }))) return;
+        const jwt = getCookie("jwt");
+        try {
+            await removeAdminStatus(username);
+            toast.success(t('admin.adminStatusRemoved', { username }));
+            fetchUsers();
+        } catch (err: any) {
+            console.error('Failed to remove admin status:', err);
+            toast.error(t('admin.failedToRemoveAdminStatus'));
+        }
+    };
+
+    const handleDeleteUser = async (username: string) => {
+        if (!confirm(t('admin.deleteUser', { username }))) return;
+        const jwt = getCookie("jwt");
+        try {
+            await deleteUser(username);
+            toast.success(t('admin.userDeletedSuccessfully', { username }));
+            fetchUsers();
+        } catch (err: any) {
+            console.error('Failed to delete user:', err);
+            toast.error(t('admin.failedToDeleteUser'));
+        }
+    };
+
+    const topMarginPx = isTopbarOpen ? 74 : 26;
+    const leftMarginPx = sidebarState === 'collapsed' ? 26 : 8;
+    const bottomMarginPx = 8;
+    const wrapperStyle: React.CSSProperties = {
+        marginLeft: leftMarginPx,
+        marginRight: 17,
+        marginTop: topMarginPx,
+        marginBottom: bottomMarginPx,
+        height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`
+    };
+
+    return (
+        <div style={wrapperStyle}
+             className="bg-[#18181b] text-white rounded-lg border-2 border-[#303032] overflow-hidden">
+            <div className="h-full w-full flex flex-col">
+                <div className="flex items-center justify-between px-3 pt-2 pb-2">
+                    <h1 className="font-bold text-lg">{t('admin.title')}</h1>
+                </div>
+                <Separator className="p-0.25 w-full"/>
+
+                <div className="px-6 py-4 overflow-auto">
+                    <Tabs defaultValue="registration" className="w-full">
+                        <TabsList className="mb-4 bg-[#18181b] border-2 border-[#303032]">
+                            <TabsTrigger value="registration" className="flex items-center gap-2">
+                                <Users className="h-4 w-4"/>
+                                {t('admin.general')}
+                            </TabsTrigger>
+                            <TabsTrigger value="oidc" className="flex items-center gap-2">
+                                <Shield className="h-4 w-4"/>
+                                OIDC
+                            </TabsTrigger>
+                            <TabsTrigger value="users" className="flex items-center gap-2">
+                                <Users className="h-4 w-4"/>
+                                {t('admin.users')}
+                            </TabsTrigger>
+                            <TabsTrigger value="admins" className="flex items-center gap-2">
+                                <Shield className="h-4 w-4"/>
+                                {t('admin.adminManagement')}
+                            </TabsTrigger>
+                        </TabsList>
+
+                        <TabsContent value="registration" className="space-y-6">
+                            <div className="space-y-4">
+                                <h3 className="text-lg font-semibold">{t('admin.userRegistration')}</h3>
+                                <label className="flex items-center gap-2">
+                                    <Checkbox checked={allowRegistration} onCheckedChange={handleToggleRegistration}
+                                              disabled={regLoading}/>
+                                    {t('admin.allowNewAccountRegistration')}
+                                </label>
+                            </div>
+                        </TabsContent>
+
+                        <TabsContent value="oidc" className="space-y-6">
+                            <div className="space-y-4">
+                                <h3 className="text-lg font-semibold">{t('admin.externalAuthentication')}</h3>
+                                <p className="text-sm text-muted-foreground">{t('admin.configureExternalProvider')}</p>
+
+                                {oidcError && (
+                                    <Alert variant="destructive">
+                                        <AlertTitle>{t('common.error')}</AlertTitle>
+                                        <AlertDescription>{oidcError}</AlertDescription>
+                                    </Alert>
+                                )}
+
+                                <form onSubmit={handleOIDCConfigSubmit} className="space-y-4">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="client_id">{t('admin.clientId')}</Label>
+                                        <Input id="client_id" value={oidcConfig.client_id}
+                                               onChange={(e) => handleOIDCConfigChange('client_id', e.target.value)}
+                                               placeholder={t('placeholders.clientId')} required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="client_secret">{t('admin.clientSecret')}</Label>
+                                        <Input id="client_secret" type="password" value={oidcConfig.client_secret}
+                                               onChange={(e) => handleOIDCConfigChange('client_secret', e.target.value)}
+                                               placeholder={t('placeholders.clientSecret')} required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="authorization_url">{t('admin.authorizationUrl')}</Label>
+                                        <Input id="authorization_url" value={oidcConfig.authorization_url}
+                                               onChange={(e) => handleOIDCConfigChange('authorization_url', e.target.value)}
+                                               placeholder={t('placeholders.authUrl')}
+                                               required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="issuer_url">{t('admin.issuerUrl')}</Label>
+                                        <Input id="issuer_url" value={oidcConfig.issuer_url}
+                                               onChange={(e) => handleOIDCConfigChange('issuer_url', e.target.value)}
+                                               placeholder={t('placeholders.redirectUrl')} required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="token_url">{t('admin.tokenUrl')}</Label>
+                                        <Input id="token_url" value={oidcConfig.token_url}
+                                               onChange={(e) => handleOIDCConfigChange('token_url', e.target.value)}
+                                               placeholder={t('placeholders.tokenUrl')} required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="identifier_path">{t('admin.userIdentifierPath')}</Label>
+                                        <Input id="identifier_path" value={oidcConfig.identifier_path}
+                                               onChange={(e) => handleOIDCConfigChange('identifier_path', e.target.value)}
+                                               placeholder={t('placeholders.userIdField')} required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="name_path">{t('admin.displayNamePath')}</Label>
+                                        <Input id="name_path" value={oidcConfig.name_path}
+                                               onChange={(e) => handleOIDCConfigChange('name_path', e.target.value)}
+                                               placeholder={t('placeholders.usernameField')} required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="scopes">{t('admin.scopes')}</Label>
+                                        <Input id="scopes" value={oidcConfig.scopes}
+                                               onChange={(e) => handleOIDCConfigChange('scopes', e.target.value)}
+                                               placeholder={t('placeholders.scopes')} required/>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="userinfo_url">{t('admin.overrideUserInfoUrl')}</Label>
+                                        <Input id="userinfo_url" value={oidcConfig.userinfo_url}
+                                               onChange={(e) => handleOIDCConfigChange('userinfo_url', e.target.value)}
+                                               placeholder="https://your-provider.com/application/o/userinfo/"/>
+                                    </div>
+                                    <div className="flex gap-2 pt-2">
+                                        <Button type="submit" className="flex-1"
+                                                disabled={oidcLoading}>{oidcLoading ? t('admin.saving') : t('admin.saveConfiguration')}</Button>
+                                        <Button type="button" variant="outline" onClick={() => setOidcConfig({
+                                            client_id: '',
+                                            client_secret: '',
+                                            issuer_url: '',
+                                            authorization_url: '',
+                                            token_url: '',
+                                            identifier_path: 'sub',
+                                            name_path: 'name',
+                                            scopes: 'openid email profile',
+                                            userinfo_url: ''
+                                        })}>{t('admin.reset')}</Button>
+                                    </div>
+                                </form>
+                            </div>
+                        </TabsContent>
+
+                        <TabsContent value="users" className="space-y-6">
+                            <div className="space-y-4">
+                                <div className="flex items-center justify-between">
+                                    <h3 className="text-lg font-semibold">{t('admin.userManagement')}</h3>
+                                    <Button onClick={fetchUsers} disabled={usersLoading} variant="outline"
+                                            size="sm">{usersLoading ? t('admin.loading') : t('admin.refresh')}</Button>
+                                </div>
+                                {usersLoading ? (
+                                    <div className="text-center py-8 text-muted-foreground">{t('admin.loadingUsers')}</div>
+                                ) : (
+                                    <div className="border rounded-md overflow-hidden">
+                                        <Table>
+                                            <TableHeader>
+                                                <TableRow>
+                                                    <TableHead className="px-4">{t('admin.username')}</TableHead>
+                                                    <TableHead className="px-4">{t('admin.type')}</TableHead>
+                                                    <TableHead className="px-4">{t('admin.actions')}</TableHead>
+                                                </TableRow>
+                                            </TableHeader>
+                                            <TableBody>
+                                                {users.map((user) => (
+                                                    <TableRow key={user.id}>
+                                                        <TableCell className="px-4 font-medium">
+                                                            {user.username}
+                                                            {user.is_admin && (
+                                                                <span
+                                                                    className="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-muted/50 text-muted-foreground border border-border">{t('admin.adminBadge')}</span>
+                                                            )}
+                                                        </TableCell>
+                                                        <TableCell
+                                                            className="px-4">{user.is_oidc ? t('admin.external') : t('admin.local')}</TableCell>
+                                                        <TableCell className="px-4">
+                                                            <Button variant="ghost" size="sm"
+                                                                    onClick={() => handleDeleteUser(user.username)}
+                                                                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                                                                    disabled={user.is_admin}>
+                                                                <Trash2 className="h-4 w-4"/>
+                                                            </Button>
+                                                        </TableCell>
+                                                    </TableRow>
+                                                ))}
+                                            </TableBody>
+                                        </Table>
+                                    </div>
+                                )}
+                            </div>
+                        </TabsContent>
+
+                        <TabsContent value="admins" className="space-y-6">
+                            <div className="space-y-6">
+                                <h3 className="text-lg font-semibold">{t('admin.adminManagement')}</h3>
+                                <div className="space-y-4 p-6 border rounded-md bg-muted/50">
+                                    <h4 className="font-medium">{t('admin.makeUserAdmin')}</h4>
+                                    <form onSubmit={handleMakeUserAdmin} className="space-y-4">
+                                        <div className="space-y-2">
+                                            <Label htmlFor="new-admin-username">{t('admin.username')}</Label>
+                                            <div className="flex gap-2">
+                                                <Input id="new-admin-username" value={newAdminUsername}
+                                                       onChange={(e) => setNewAdminUsername(e.target.value)}
+                                                       placeholder={t('admin.enterUsernameToMakeAdmin')} required/>
+                                                <Button type="submit"
+                                                        disabled={makeAdminLoading || !newAdminUsername.trim()}>{makeAdminLoading ? t('admin.adding') : t('admin.makeAdmin')}</Button>
+                                            </div>
+                                        </div>
+                                        {makeAdminError && (
+                                            <Alert variant="destructive">
+                                                <AlertTitle>{t('common.error')}</AlertTitle>
+                                                <AlertDescription>{makeAdminError}</AlertDescription>
+                                            </Alert>
+                                        )}
+
+                                    </form>
+                                </div>
+
+                                <div className="space-y-4">
+                                    <h4 className="font-medium">{t('admin.currentAdmins')}</h4>
+                                    <div className="border rounded-md overflow-hidden">
+                                        <Table>
+                                            <TableHeader>
+                                                <TableRow>
+                                                    <TableHead className="px-4">{t('admin.username')}</TableHead>
+                                                    <TableHead className="px-4">{t('admin.type')}</TableHead>
+                                                    <TableHead className="px-4">{t('admin.actions')}</TableHead>
+                                                </TableRow>
+                                            </TableHeader>
+                                            <TableBody>
+                                                {users.filter(u => u.is_admin).map((admin) => (
+                                                    <TableRow key={admin.id}>
+                                                        <TableCell className="px-4 font-medium">
+                                                            {admin.username}
+                                                            <span
+                                                                className="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-muted/50 text-muted-foreground border border-border">{t('admin.adminBadge')}</span>
+                                                        </TableCell>
+                                                        <TableCell
+                                                            className="px-4">{admin.is_oidc ? t('admin.external') : t('admin.local')}</TableCell>
+                                                        <TableCell className="px-4">
+                                                            <Button variant="ghost" size="sm"
+                                                                    onClick={() => handleRemoveAdminStatus(admin.username)}
+                                                                    className="text-orange-600 hover:text-orange-700 hover:bg-orange-50">
+                                                                <Shield className="h-4 w-4"/>
+                                                                {t('admin.removeAdminButton')}
+                                                            </Button>
+                                                        </TableCell>
+                                                    </TableRow>
+                                                ))}
+                                            </TableBody>
+                                        </Table>
+                                    </div>
+                                </div>
+                            </div>
+                        </TabsContent>
+                    </Tabs>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default AdminSettings;

src/ui/Apps/File Manager/FIleManagerTopNavbar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { FileManagerTabList } from "./FileManagerTabList.tsx";
+
+interface FileManagerTopNavbarProps {
+    tabs: {id: string | number, title: string}[];
+    activeTab: string | number;
+    setActiveTab: (tab: string | number) => void;
+    closeTab: (tab: string | number) => void;
+    onHomeClick: () => void;
+}
+
+export function FIleManagerTopNavbar(props: FileManagerTopNavbarProps): React.ReactElement {
+    const { tabs, activeTab, setActiveTab, closeTab, onHomeClick } = props;
+    
+    return (
+        <FileManagerTabList
+            tabs={tabs}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            closeTab={closeTab}
+            onHomeClick={onHomeClick}
+        />
+    );
+}

src/ui/Apps/File Manager/FileManager.tsx

@@ -0,0 +1,692 @@
+import React, {useState, useEffect, useRef} from "react";
+import {FileManagerLeftSidebar} from "@/ui/Apps/File Manager/FileManagerLeftSidebar.tsx";
+import {FileManagerTabList} from "@/ui/Apps/File Manager/FileManagerTabList.tsx";
+import {FileManagerHomeView} from "@/ui/Apps/File Manager/FileManagerHomeView.tsx";
+import {FileManagerFileEditor} from "@/ui/Apps/File Manager/FileManagerFileEditor.tsx";
+import {FileManagerOperations} from "@/ui/Apps/File Manager/FileManagerOperations.tsx";
+import {Button} from '@/components/ui/button.tsx';
+import {FIleManagerTopNavbar} from "@/ui/Apps/File Manager/FIleManagerTopNavbar.tsx";
+import {cn} from '@/lib/utils.ts';
+import {Save, RefreshCw, Settings, Trash2} from 'lucide-react';
+import {Separator} from '@/components/ui/separator.tsx';
+import {toast} from 'sonner';
+import {useTranslation} from 'react-i18next';
+import {
+    getFileManagerRecent,
+    getFileManagerPinned,
+    getFileManagerShortcuts,
+    addFileManagerRecent,
+    removeFileManagerRecent,
+    addFileManagerPinned,
+    removeFileManagerPinned,
+    addFileManagerShortcut,
+    removeFileManagerShortcut,
+    readSSHFile,
+    writeSSHFile,
+    getSSHStatus,
+    connectSSH
+} from '@/ui/main-axios.ts';
+
+interface Tab {
+    id: string | number;
+    title: string;
+    fileName: string;
+    content: string;
+    isSSH?: boolean;
+    sshSessionId?: string;
+    filePath?: string;
+    loading?: boolean;
+    dirty?: boolean;
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableFileManager: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+export function FileManager({onSelectView, embedded = false, initialHost = null}: {
+    onSelectView?: (view: string) => void,
+    embedded?: boolean,
+    initialHost?: SSHHost | null
+}): React.ReactElement {
+    const {t} = useTranslation();
+    const [tabs, setTabs] = useState<Tab[]>([]);
+    const [activeTab, setActiveTab] = useState<string | number>('home');
+    const [recent, setRecent] = useState<any[]>([]);
+    const [pinned, setPinned] = useState<any[]>([]);
+    const [shortcuts, setShortcuts] = useState<any[]>([]);
+
+    const [currentHost, setCurrentHost] = useState<SSHHost | null>(null);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const [showOperations, setShowOperations] = useState(false);
+    const [currentPath, setCurrentPath] = useState('/');
+
+    const [deletingItem, setDeletingItem] = useState<any | null>(null);
+
+    const sidebarRef = useRef<any>(null);
+
+    useEffect(() => {
+        if (initialHost && (!currentHost || currentHost.id !== initialHost.id)) {
+            setCurrentHost(initialHost);
+            setTimeout(() => {
+                try {
+                    const path = initialHost.defaultPath || '/';
+                    if (sidebarRef.current && sidebarRef.current.openFolder) {
+                        sidebarRef.current.openFolder(initialHost, path);
+                    }
+                } catch (e) {
+                }
+            }, 0);
+        }
+    }, [initialHost]);
+
+    useEffect(() => {
+        if (currentHost) {
+            fetchHomeData();
+        } else {
+            setRecent([]);
+            setPinned([]);
+            setShortcuts([]);
+        }
+    }, [currentHost]);
+
+    useEffect(() => {
+        if (activeTab === 'home' && currentHost) {
+            fetchHomeData();
+        }
+    }, [activeTab, currentHost]);
+
+    useEffect(() => {
+        if (activeTab === 'home' && currentHost) {
+            const interval = setInterval(() => {
+                fetchHomeData();
+            }, 2000);
+
+            return () => clearInterval(interval);
+        }
+    }, [activeTab, currentHost]);
+
+    async function fetchHomeData() {
+        if (!currentHost) return;
+
+        try {
+            const homeDataPromise = Promise.all([
+                getFileManagerRecent(currentHost.id),
+                getFileManagerPinned(currentHost.id),
+                getFileManagerShortcuts(currentHost.id),
+            ]);
+
+            const timeoutPromise = new Promise((_, reject) =>
+                setTimeout(() => reject(new Error(t('fileManager.fetchHomeDataTimeout'))), 15000)
+            );
+
+            const [recentRes, pinnedRes, shortcutsRes] = await Promise.race([homeDataPromise, timeoutPromise]) as [any, any, any];
+
+            const recentWithPinnedStatus = (recentRes || []).map(file => ({
+                ...file,
+                type: 'file',
+                isPinned: (pinnedRes || []).some(pinnedFile =>
+                    pinnedFile.path === file.path && pinnedFile.name === file.name
+                )
+            }));
+
+            const pinnedWithType = (pinnedRes || []).map(file => ({
+                ...file,
+                type: 'file'
+            }));
+
+            setRecent(recentWithPinnedStatus);
+            setPinned(pinnedWithType);
+            setShortcuts((shortcutsRes || []).map(shortcut => ({
+                ...shortcut,
+                type: 'directory'
+            })));
+        } catch (err: any) {
+        }
+    }
+
+    const formatErrorMessage = (err: any, defaultMessage: string): string => {
+        if (typeof err === 'object' && err !== null && 'response' in err) {
+            const axiosErr = err as any;
+            if (axiosErr.response?.status === 403) {
+                return `${t('fileManager.permissionDenied')}. ${defaultMessage}. ${t('fileManager.checkDockerLogs')}.`;
+            } else if (axiosErr.response?.status === 500) {
+                const backendError = axiosErr.response?.data?.error || t('fileManager.internalServerError');
+                return `${t('fileManager.serverError')} (500): ${backendError}. ${t('fileManager.checkDockerLogs')}.`;
+            } else if (axiosErr.response?.data?.error) {
+                const backendError = axiosErr.response.data.error;
+                return `${axiosErr.response?.status ? `${t('fileManager.error')} ${axiosErr.response.status}: ` : ''}${backendError}. ${t('fileManager.checkDockerLogs')}.`;
+            } else {
+                return `${t('fileManager.requestFailed')} ${axiosErr.response?.status || t('fileManager.unknown')}. ${t('fileManager.checkDockerLogs')}.`;
+            }
+        } else if (err instanceof Error) {
+            return `${err.message}. ${t('fileManager.checkDockerLogs')}.`;
+        } else {
+            return `${defaultMessage}. ${t('fileManager.checkDockerLogs')}.`;
+        }
+    };
+
+    const handleOpenFile = async (file: any) => {
+        const tabId = file.path;
+
+        if (!tabs.find(t => t.id === tabId)) {
+            const currentSshSessionId = currentHost?.id.toString();
+
+            setTabs([...tabs, {
+                id: tabId,
+                title: file.name,
+                fileName: file.name,
+                content: '',
+                filePath: file.path,
+                isSSH: true,
+                sshSessionId: currentSshSessionId,
+                loading: true
+            }]);
+            try {
+                const res = await readSSHFile(currentSshSessionId, file.path);
+                setTabs(tabs => tabs.map(t => t.id === tabId ? {
+                    ...t,
+                    content: res.content,
+                    loading: false,
+                    error: undefined
+                } : t));
+                await addFileManagerRecent({
+                    name: file.name,
+                    path: file.path,
+                    isSSH: true,
+                    sshSessionId: currentSshSessionId,
+                    hostId: currentHost?.id
+                });
+                fetchHomeData();
+            } catch (err: any) {
+                const errorMessage = formatErrorMessage(err, t('fileManager.cannotReadFile'));
+                toast.error(errorMessage);
+                setTabs(tabs => tabs.map(t => t.id === tabId ? {...t, loading: false} : t));
+            }
+        }
+        setActiveTab(tabId);
+    };
+
+    const handleRemoveRecent = async (file: any) => {
+        try {
+            await removeFileManagerRecent({
+                name: file.name,
+                path: file.path,
+                isSSH: true,
+                sshSessionId: file.sshSessionId,
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+        } catch (err) {
+        }
+    };
+
+    const handlePinFile = async (file: any) => {
+        try {
+            await addFileManagerPinned({
+                name: file.name,
+                path: file.path,
+                isSSH: true,
+                sshSessionId: file.sshSessionId,
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+            if (sidebarRef.current && sidebarRef.current.fetchFiles) {
+                sidebarRef.current.fetchFiles();
+            }
+        } catch (err) {
+        }
+    };
+
+    const handleUnpinFile = async (file: any) => {
+        try {
+            await removeFileManagerPinned({
+                name: file.name,
+                path: file.path,
+                isSSH: true,
+                sshSessionId: file.sshSessionId,
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+            if (sidebarRef.current && sidebarRef.current.fetchFiles) {
+                sidebarRef.current.fetchFiles();
+            }
+        } catch (err) {
+        }
+    };
+
+    const handleOpenShortcut = async (shortcut: any) => {
+        if (sidebarRef.current?.isOpeningShortcut) {
+            return;
+        }
+
+        if (sidebarRef.current && sidebarRef.current.openFolder) {
+            try {
+                sidebarRef.current.isOpeningShortcut = true;
+
+                const normalizedPath = shortcut.path.startsWith('/') ? shortcut.path : `/${shortcut.path}`;
+
+                await sidebarRef.current.openFolder(currentHost, normalizedPath);
+            } catch (err) {
+            } finally {
+                if (sidebarRef.current) {
+                    sidebarRef.current.isOpeningShortcut = false;
+                }
+            }
+        } else {
+        }
+    };
+
+    const handleAddShortcut = async (folderPath: string) => {
+        try {
+            const name = folderPath.split('/').pop() || folderPath;
+            await addFileManagerShortcut({
+                name,
+                path: folderPath,
+                isSSH: true,
+                sshSessionId: currentHost?.id.toString(),
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+        } catch (err) {
+        }
+    };
+
+    const handleRemoveShortcut = async (shortcut: any) => {
+        try {
+            await removeFileManagerShortcut({
+                name: shortcut.name,
+                path: shortcut.path,
+                isSSH: true,
+                sshSessionId: currentHost?.id.toString(),
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+        } catch (err) {
+        }
+    };
+
+    const closeTab = (tabId: string | number) => {
+        const idx = tabs.findIndex(t => t.id === tabId);
+        const newTabs = tabs.filter(t => t.id !== tabId);
+        setTabs(newTabs);
+        if (activeTab === tabId) {
+            if (newTabs.length > 0) setActiveTab(newTabs[Math.max(0, idx - 1)].id);
+            else setActiveTab('home');
+        }
+        if (currentHost) {
+            fetchHomeData();
+        }
+    };
+
+    const setTabContent = (tabId: string | number, content: string) => {
+        setTabs(tabs => tabs.map(t => t.id === tabId ? {
+            ...t,
+            content,
+            dirty: true,
+            error: undefined,
+            success: undefined
+        } : t));
+    };
+
+    const handleSave = async (tab: Tab) => {
+        if (isSaving) {
+            return;
+        }
+
+        setIsSaving(true);
+
+        try {
+            if (!tab.sshSessionId) {
+                throw new Error(t('fileManager.noSshSessionId'));
+            }
+
+            if (!tab.filePath) {
+                throw new Error(t('fileManager.noFilePath'));
+            }
+
+            if (!currentHost?.id) {
+                throw new Error(t('fileManager.noCurrentHost'));
+            }
+
+            try {
+                const statusPromise = getSSHStatus(tab.sshSessionId);
+                const statusTimeoutPromise = new Promise((_, reject) =>
+                    setTimeout(() => reject(new Error(t('fileManager.sshStatusCheckTimeout'))), 10000)
+                );
+
+                const status = await Promise.race([statusPromise, statusTimeoutPromise]) as { connected: boolean };
+
+                if (!status.connected) {
+                    const connectPromise = connectSSH(tab.sshSessionId, {
+                        ip: currentHost.ip,
+                        port: currentHost.port,
+                        username: currentHost.username,
+                        password: currentHost.password,
+                        sshKey: currentHost.key,
+                        keyPassword: currentHost.keyPassword
+                    });
+                    const connectTimeoutPromise = new Promise((_, reject) =>
+                        setTimeout(() => reject(new Error(t('fileManager.sshReconnectionTimeout'))), 15000)
+                    );
+
+                    await Promise.race([connectPromise, connectTimeoutPromise]);
+                }
+            } catch (statusErr) {
+            }
+
+            const savePromise = writeSSHFile(tab.sshSessionId, tab.filePath, tab.content);
+            const timeoutPromise = new Promise((_, reject) =>
+                setTimeout(() => {
+                    reject(new Error(t('fileManager.saveOperationTimeout')));
+                }, 30000)
+            );
+
+            const result = await Promise.race([savePromise, timeoutPromise]);
+            setTabs(tabs => tabs.map(t => t.id === tab.id ? {
+                ...t,
+                loading: false
+            } : t));
+
+            toast.success(t('fileManager.fileSavedSuccessfully'));
+
+            Promise.allSettled([
+                (async () => {
+                    try {
+                        await addFileManagerRecent({
+                            name: tab.fileName,
+                            path: tab.filePath,
+                            isSSH: true,
+                            sshSessionId: tab.sshSessionId,
+                            hostId: currentHost.id
+                        });
+                    } catch (recentErr) {
+                    }
+                })(),
+                (async () => {
+                    try {
+                        await fetchHomeData();
+                    } catch (refreshErr) {
+                    }
+                })()
+            ]).then(() => {
+            });
+
+        } catch (err) {
+            let errorMessage = formatErrorMessage(err, t('fileManager.cannotSaveFile'));
+
+            if (errorMessage.includes('timed out') || errorMessage.includes('timeout')) {
+                errorMessage = t('fileManager.saveTimeout');
+            }
+
+            toast.error(`${t('fileManager.failedToSaveFile')}: ${errorMessage}`);
+            setTabs(tabs => tabs.map(t => t.id === tab.id ? {
+                ...t,
+                loading: false
+            } : t));
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleHostChange = (_host: SSHHost | null) => {
+    };
+
+    const handleOperationComplete = () => {
+        if (sidebarRef.current && sidebarRef.current.fetchFiles) {
+            sidebarRef.current.fetchFiles();
+        }
+        if (currentHost) {
+            fetchHomeData();
+        }
+    };
+
+    const handleSuccess = (message: string) => {
+        toast.success(message);
+    };
+
+    const handleError = (error: string) => {
+        toast.error(error);
+    };
+
+    const updateCurrentPath = (newPath: string) => {
+        setCurrentPath(newPath);
+    };
+
+    const handleDeleteFromSidebar = (item: any) => {
+        setDeletingItem(item);
+    };
+
+    const performDelete = async (item: any) => {
+        if (!currentHost?.id) return;
+
+        try {
+            const {deleteSSHItem} = await import('@/ui/main-axios.ts');
+            await deleteSSHItem(currentHost.id.toString(), item.path, item.type === 'directory');
+            toast.success(`${item.type === 'directory' ? t('fileManager.folder') : t('fileManager.file')} ${t('fileManager.deletedSuccessfully')}`);
+            setDeletingItem(null);
+            handleOperationComplete();
+        } catch (error: any) {
+            handleError(error?.response?.data?.error || t('fileManager.failedToDeleteItem'));
+        }
+    };
+
+    if (!currentHost) {
+        return (
+            <div style={{position: 'absolute', inset: 0, overflow: 'hidden'}} className="rounded-md">
+                <div style={{position: 'absolute', top: 0, left: 0, width: 256, height: '100%', zIndex: 20}}>
+                    <FileManagerLeftSidebar
+                        onSelectView={onSelectView || (() => {
+                        })}
+                        onOpenFile={handleOpenFile}
+                        tabs={tabs}
+                        ref={sidebarRef}
+                        host={initialHost as SSHHost}
+                        onOperationComplete={handleOperationComplete}
+                        onError={handleError}
+                        onSuccess={handleSuccess}
+                        onPathChange={updateCurrentPath}
+                    />
+                </div>
+                <div style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 256,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#09090b'
+                }}>
+                    <div className="text-center">
+                        <h2 className="text-xl font-semibold text-white mb-2">{t('fileManager.connectToServer')}</h2>
+                        <p className="text-muted-foreground">{t('fileManager.selectServerToEdit')}</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{position: 'absolute', inset: 0, overflow: 'hidden'}} className="rounded-md">
+            <div style={{position: 'absolute', top: 0, left: 0, width: 256, height: '100%', zIndex: 20}}>
+                <FileManagerLeftSidebar
+                    onSelectView={onSelectView || (() => {
+                    })}
+                    onOpenFile={handleOpenFile}
+                    tabs={tabs}
+                    ref={sidebarRef}
+                    host={currentHost as SSHHost}
+                    onOperationComplete={handleOperationComplete}
+                    onError={handleError}
+                    onSuccess={handleSuccess}
+                    onPathChange={updateCurrentPath}
+                    onDeleteItem={handleDeleteFromSidebar}
+                />
+            </div>
+            <div style={{position: 'absolute', top: 0, left: 256, right: 0, height: 50, zIndex: 30}}>
+                <div className="flex items-center w-full bg-[#18181b] border-b-2 border-[#303032] h-[50px] relative">
+                    <div
+                        className="h-full p-1 pr-2 border-r-2 border-[#303032] w-[calc(100%-6rem)] flex items-center overflow-x-auto overflow-y-hidden gap-2 thin-scrollbar">
+                        <FIleManagerTopNavbar
+                            tabs={tabs.map(t => ({id: t.id, title: t.title}))}
+                            activeTab={activeTab}
+                            setActiveTab={setActiveTab}
+                            closeTab={closeTab}
+                            onHomeClick={() => {
+                                setActiveTab('home');
+                                if (currentHost) {
+                                    fetchHomeData();
+                                }
+                            }}
+                        />
+                    </div>
+                    <div className="flex items-center justify-center gap-2 flex-1">
+                        <Button
+                            variant="outline"
+                            onClick={() => setShowOperations(!showOperations)}
+                            className={cn(
+                                'w-[30px] h-[30px]',
+                                showOperations ? 'bg-[#2d2d30] border-[#434345]' : ''
+                            )}
+                            title={t('fileManager.fileOperations')}
+                        >
+                            <Settings className="h-4 w-4"/>
+                        </Button>
+                        <div className="p-0.25 w-px h-[30px] bg-[#303032]"></div>
+                        <Button
+                            variant="outline"
+                            onClick={() => {
+                                const tab = tabs.find(t => t.id === activeTab);
+                                if (tab && !isSaving) handleSave(tab);
+                            }}
+                            disabled={activeTab === 'home' || !tabs.find(t => t.id === activeTab)?.dirty || isSaving}
+                            className={cn(
+                                'w-[30px] h-[30px]',
+                                activeTab === 'home' || !tabs.find(t => t.id === activeTab)?.dirty || isSaving ? 'opacity-60 cursor-not-allowed' : ''
+                            )}
+                        >
+                            {isSaving ? <RefreshCw className="h-4 w-4 animate-spin"/> : <Save className="h-4 w-4"/>}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            <div style={{
+                position: 'absolute',
+                top: 44,
+                left: 256,
+                right: 0,
+                bottom: 0,
+                overflow: 'hidden',
+                zIndex: 10,
+                background: '#101014',
+                display: 'flex',
+                flexDirection: 'column'
+            }}>
+                <div className="flex h-full">
+                    <div className="flex-1">
+                        {activeTab === 'home' ? (
+                            <FileManagerHomeView
+                                recent={recent}
+                                pinned={pinned}
+                                shortcuts={shortcuts}
+                                onOpenFile={handleOpenFile}
+                                onRemoveRecent={handleRemoveRecent}
+                                onPinFile={handlePinFile}
+                                onUnpinFile={handleUnpinFile}
+                                onOpenShortcut={handleOpenShortcut}
+                                onRemoveShortcut={handleRemoveShortcut}
+                                onAddShortcut={handleAddShortcut}
+                            />
+                        ) : (
+                            (() => {
+                                const tab = tabs.find(t => t.id === activeTab);
+                                if (!tab) return null;
+                                return (
+                                    <div className="flex flex-col h-full" style={{flex: 1, minHeight: 0}}>
+                                        <div className="flex-1 min-h-0">
+                                            <FileManagerFileEditor
+                                                content={tab.content}
+                                                fileName={tab.fileName}
+                                                onContentChange={content => setTabContent(tab.id, content)}
+                                            />
+                                        </div>
+                                    </div>
+                                );
+                            })()
+                        )}
+                    </div>
+                    {showOperations && (
+                        <div className="w-80 border-l-2 border-[#303032] bg-[#09090b] overflow-y-auto">
+                            <FileManagerOperations
+                                currentPath={currentPath}
+                                sshSessionId={currentHost?.id.toString() || null}
+                                onOperationComplete={handleOperationComplete}
+                                onError={handleError}
+                                onSuccess={handleSuccess}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {deletingItem && (
+                <div className="fixed inset-0 z-[99999]">
+                    <div className="absolute inset-0 bg-black/60"></div>
+
+                    <div className="relative h-full flex items-center justify-center">
+                        <div className="bg-[#18181b] border-2 border-[#303032] rounded-lg p-6 max-w-md mx-4 shadow-2xl">
+                            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                                <Trash2 className="w-5 h-5 text-red-400"/>
+                                {t('fileManager.confirmDelete')}
+                            </h3>
+                            <p className="text-white mb-4">
+                                {t('fileManager.confirmDeleteMessage', { name: deletingItem.name })}
+                                {deletingItem.type === 'directory' && ` ${t('fileManager.deleteDirectoryWarning')}`}
+                            </p>
+                            <p className="text-red-400 text-sm mb-6">
+                                {t('fileManager.actionCannotBeUndone')}
+                            </p>
+                            <div className="flex gap-3">
+                                <Button
+                                    variant="destructive"
+                                    onClick={() => performDelete(deletingItem)}
+                                    className="flex-1"
+                                >
+                                    {t('common.delete')}
+                                </Button>
+                                <Button
+                                    variant="outline"
+                                    onClick={() => setDeletingItem(null)}
+                                    className="flex-1"
+                                >
+                                    {t('common.cancel')}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/ui/Apps/File Manager/FileManagerFileEditor.tsx

@@ -5,13 +5,13 @@ import {hyperLink} from '@uiw/codemirror-extensions-hyper-link';
 import {oneDark} from '@codemirror/theme-one-dark';
 import {EditorView} from '@codemirror/view';
 
-interface ConfigCodeEditorProps {
+interface FileManagerCodeEditorProps {
     content: string;
     fileName: string;
     onContentChange: (value: string) => void;
 }
 
-export function ConfigCodeEditor({content, fileName, onContentChange}: ConfigCodeEditorProps) {
+export function FileManagerFileEditor({content, fileName, onContentChange}: FileManagerCodeEditorProps) {
     function getLanguageName(filename: string): string {
         if (!filename || typeof filename !== 'string') {
             return 'text';

src/ui/Apps/File Manager/FileManagerHomeView.tsx

@@ -4,6 +4,7 @@ import {Trash2, Folder, File, Plus, Pin} from 'lucide-react';
 import {Tabs, TabsList, TabsTrigger, TabsContent} from '@/components/ui/tabs.tsx';
 import {Input} from '@/components/ui/input.tsx';
 import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
 
 interface FileItem {
     name: string;
@@ -18,7 +19,7 @@ interface ShortcutItem {
     path: string;
 }
 
-interface ConfigHomeViewProps {
+interface FileManagerHomeViewProps {
     recent: FileItem[];
     pinned: FileItem[];
     shortcuts: ShortcutItem[];
@@ -31,25 +32,26 @@ interface ConfigHomeViewProps {
     onAddShortcut: (path: string) => void;
 }
 
-export function ConfigHomeView({
-                                   recent,
-                                   pinned,
-                                   shortcuts,
-                                   onOpenFile,
-                                   onRemoveRecent,
-                                   onPinFile,
-                                   onUnpinFile,
-                                   onOpenShortcut,
-                                   onRemoveShortcut,
-                                   onAddShortcut
-                               }: ConfigHomeViewProps) {
+export function FileManagerHomeView({
+                                        recent,
+                                        pinned,
+                                        shortcuts,
+                                        onOpenFile,
+                                        onRemoveRecent,
+                                        onPinFile,
+                                        onUnpinFile,
+                                        onOpenShortcut,
+                                        onRemoveShortcut,
+                                        onAddShortcut
+                                    }: FileManagerHomeViewProps) {
+    const {t} = useTranslation();
     const [tab, setTab] = useState<'recent' | 'pinned' | 'shortcuts'>('recent');
     const [newShortcut, setNewShortcut] = useState('');
 
 
     const renderFileCard = (file: FileItem, onRemove: () => void, onPin?: () => void, isPinned = false) => (
         <div key={file.path}
-             className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded hover:border-[#434345] transition-colors">
+             className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border-2 border-[#303032] rounded hover:border-[#434345] transition-colors">
             <div
                 className="flex items-center gap-2 flex-1 cursor-pointer min-w-0"
                 onClick={() => onOpenFile(file)}
@@ -92,7 +94,7 @@ export function ConfigHomeView({
 
     const renderShortcutCard = (shortcut: ShortcutItem) => (
         <div key={shortcut.path}
-             className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded hover:border-[#434345] transition-colors">
+             className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border-2 border-[#303032] rounded hover:border-[#434345] transition-colors">
             <div
                 className="flex items-center gap-2 flex-1 cursor-pointer min-w-0"
                 onClick={() => onOpenShortcut(shortcut)}
@@ -120,18 +122,18 @@ export function ConfigHomeView({
     return (
         <div className="p-4 flex flex-col gap-4 h-full bg-[#09090b]">
             <Tabs value={tab} onValueChange={v => setTab(v as 'recent' | 'pinned' | 'shortcuts')} className="w-full">
-                <TabsList className="mb-4 bg-[#18181b] border border-[#23232a]">
-                    <TabsTrigger value="recent" className="data-[state=active]:bg-[#23232a]">Recent</TabsTrigger>
-                    <TabsTrigger value="pinned" className="data-[state=active]:bg-[#23232a]">Pinned</TabsTrigger>
-                    <TabsTrigger value="shortcuts" className="data-[state=active]:bg-[#23232a]">Folder
-                        Shortcuts</TabsTrigger>
+                <TabsList className="mb-4 bg-[#18181b] border-2 border-[#303032]">
+                    <TabsTrigger value="recent" className="data-[state=active]:bg-[#23232a]">{t('fileManager.recent')}</TabsTrigger>
+                    <TabsTrigger value="pinned" className="data-[state=active]:bg-[#23232a]">{t('fileManager.pinned')}</TabsTrigger>
+                    <TabsTrigger value="shortcuts" className="data-[state=active]:bg-[#23232a]">{t('fileManager.folderShortcuts')}</TabsTrigger>
                 </TabsList>
 
                 <TabsContent value="recent" className="mt-0">
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                    <div
+                        className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-3 auto-rows-min content-start w-full">
                         {recent.length === 0 ? (
                             <div className="flex items-center justify-center py-8 col-span-full">
-                                <span className="text-sm text-muted-foreground">No recent files.</span>
+                                <span className="text-sm text-muted-foreground">{t('fileManager.noRecentFiles')}</span>
                             </div>
                         ) : recent.map((file) =>
                             renderFileCard(
@@ -145,10 +147,11 @@ export function ConfigHomeView({
                 </TabsContent>
 
                 <TabsContent value="pinned" className="mt-0">
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                    <div
+                        className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-3 auto-rows-min content-start w-full">
                         {pinned.length === 0 ? (
                             <div className="flex items-center justify-center py-8 col-span-full">
-                                <span className="text-sm text-muted-foreground">No pinned files.</span>
+                                <span className="text-sm text-muted-foreground">{t('fileManager.noPinnedFiles')}</span>
                             </div>
                         ) : pinned.map((file) =>
                             renderFileCard(
@@ -162,12 +165,12 @@ export function ConfigHomeView({
                 </TabsContent>
 
                 <TabsContent value="shortcuts" className="mt-0">
-                    <div className="flex items-center gap-3 mb-4 p-3 bg-[#18181b] border border-[#23232a] rounded-lg">
+                    <div className="flex items-center gap-3 mb-4 p-3 bg-[#18181b] border-2 border-[#303032] rounded-lg">
                         <Input
-                            placeholder="Enter folder path"
+                            placeholder={t('fileManager.enterFolderPath')}
                             value={newShortcut}
                             onChange={e => setNewShortcut(e.target.value)}
-                            className="flex-1 bg-[#23232a] border-[#434345] text-white placeholder:text-muted-foreground"
+                            className="flex-1 bg-[#23232a] border-2 border-[#303032] text-white placeholder:text-muted-foreground"
                             onKeyDown={(e) => {
                                 if (e.key === 'Enter' && newShortcut.trim()) {
                                     onAddShortcut(newShortcut.trim());
@@ -177,8 +180,8 @@ export function ConfigHomeView({
                         />
                         <Button
                             size="sm"
-                            variant="outline"
-                            className="h-8 px-2 bg-[#23232a] border-[#434345] hover:bg-[#2d2d30] rounded-md"
+                            variant="ghost"
+                            className="h-8 px-2 bg-[#23232a] border-2 !border-[#303032] hover:bg-[#2d2d30] rounded-md"
                             onClick={() => {
                                 if (newShortcut.trim()) {
                                     onAddShortcut(newShortcut.trim());
@@ -187,13 +190,14 @@ export function ConfigHomeView({
                             }}
                         >
                             <Plus className="w-3.5 h-3.5 mr-1"/>
-                            Add
+                            {t('common.add')}
                         </Button>
                     </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                    <div
+                        className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-3 auto-rows-min content-start w-full">
                         {shortcuts.length === 0 ? (
                             <div className="flex items-center justify-center py-4 col-span-full">
-                                <span className="text-sm text-muted-foreground">No shortcuts.</span>
+                                <span className="text-sm text-muted-foreground">{t('fileManager.noShortcuts')}</span>
                             </div>
                         ) : shortcuts.map((shortcut) =>
                             renderShortcutCard(shortcut)

src/ui/Apps/File Manager/FileManagerLeftSidebar.tsx

@@ -0,0 +1,574 @@
+import React, {useEffect, useState, useRef, forwardRef, useImperativeHandle} from 'react';
+import {Separator} from '@/components/ui/separator.tsx';
+import {CornerDownLeft, Folder, File, Server, ArrowUp, Pin, MoreVertical, Trash2, Edit3} from 'lucide-react';
+import {ScrollArea} from '@/components/ui/scroll-area.tsx';
+import {cn} from '@/lib/utils.ts';
+import {Input} from '@/components/ui/input.tsx';
+import {Button} from '@/components/ui/button.tsx';
+import {toast} from 'sonner';
+import {useTranslation} from 'react-i18next';
+import {
+    listSSHFiles,
+    renameSSHItem,
+    deleteSSHItem,
+    getFileManagerRecent,
+    getFileManagerPinned,
+    addFileManagerPinned,
+    removeFileManagerPinned,
+    readSSHFile,
+    getSSHStatus,
+    connectSSH
+} from '@/ui/main-axios.ts';
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableFileManager: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+const FileManagerLeftSidebar = forwardRef(function FileManagerSidebar(
+    {onSelectView, onOpenFile, tabs, host, onOperationComplete, onError, onSuccess, onPathChange, onDeleteItem}: {
+        onSelectView?: (view: string) => void;
+        onOpenFile: (file: any) => void;
+        tabs: any[];
+        host: SSHHost;
+        onOperationComplete?: () => void;
+        onError?: (error: string) => void;
+        onSuccess?: (message: string) => void;
+        onPathChange?: (path: string) => void;
+        onDeleteItem?: (item: any) => void;
+    },
+    ref
+) {
+    const {t} = useTranslation();
+    const [currentPath, setCurrentPath] = useState('/');
+    const [files, setFiles] = useState<any[]>([]);
+    const pathInputRef = useRef<HTMLInputElement>(null);
+
+    const [search, setSearch] = useState('');
+    const [debouncedSearch, setDebouncedSearch] = useState('');
+    const [fileSearch, setFileSearch] = useState('');
+    const [debouncedFileSearch, setDebouncedFileSearch] = useState('');
+    useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(search), 200);
+        return () => clearTimeout(handler);
+    }, [search]);
+    useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(fileSearch), 200);
+        return () => clearTimeout(handler);
+    }, [fileSearch]);
+
+    const [sshSessionId, setSshSessionId] = useState<string | null>(null);
+    const [filesLoading, setFilesLoading] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [connectingSSH, setConnectingSSH] = useState(false);
+    const [connectionCache, setConnectionCache] = useState<Record<string, {
+        sessionId: string;
+        timestamp: number
+    }>>({});
+    const [fetchingFiles, setFetchingFiles] = useState(false);
+
+    const [contextMenu, setContextMenu] = useState<{
+        visible: boolean;
+        x: number;
+        y: number;
+        item: any;
+    }>({
+        visible: false,
+        x: 0,
+        y: 0,
+        item: null
+    });
+
+    const [renamingItem, setRenamingItem] = useState<{
+        item: any;
+        newName: string;
+    } | null>(null);
+
+    useEffect(() => {
+        const nextPath = host?.defaultPath || '/';
+        setCurrentPath(nextPath);
+        onPathChange?.(nextPath);
+        (async () => {
+            await connectToSSH(host);
+        })();
+    }, [host?.id]);
+
+    async function connectToSSH(server: SSHHost): Promise<string | null> {
+        const sessionId = server.id.toString();
+
+        const cached = connectionCache[sessionId];
+        if (cached && Date.now() - cached.timestamp < 30000) {
+            setSshSessionId(cached.sessionId);
+            return cached.sessionId;
+        }
+
+        if (connectingSSH) {
+            return null;
+        }
+
+        setConnectingSSH(true);
+
+        try {
+            if (!server.password && !server.key) {
+                toast.error(t('common.noAuthCredentials'));
+                return null;
+            }
+
+            const connectionConfig = {
+                ip: server.ip,
+                port: server.port,
+                username: server.username,
+                password: server.password,
+                sshKey: server.key,
+                keyPassword: server.keyPassword,
+            };
+
+            await connectSSH(sessionId, connectionConfig);
+
+            setSshSessionId(sessionId);
+
+            setConnectionCache(prev => ({
+                ...prev,
+                [sessionId]: {sessionId, timestamp: Date.now()}
+            }));
+
+            return sessionId;
+        } catch (err: any) {
+            toast.error(err?.response?.data?.error || t('fileManager.failedToConnectSSH'));
+            setSshSessionId(null);
+            return null;
+        } finally {
+            setConnectingSSH(false);
+        }
+    }
+
+    async function fetchFiles() {
+        if (fetchingFiles) {
+            return;
+        }
+
+        setFetchingFiles(true);
+        setFiles([]);
+        setFilesLoading(true);
+
+        try {
+            let pinnedFiles: any[] = [];
+            try {
+                if (host) {
+                    pinnedFiles = await getFileManagerPinned(host.id);
+                }
+            } catch (err) {
+            }
+
+            if (host && sshSessionId) {
+                let res: any[] = [];
+
+                try {
+                    const status = await getSSHStatus(sshSessionId);
+                    if (!status.connected) {
+                        const newSessionId = await connectToSSH(host);
+                        if (newSessionId) {
+                            setSshSessionId(newSessionId);
+                            res = await listSSHFiles(newSessionId, currentPath);
+                        } else {
+                            throw new Error(t('fileManager.failedToReconnectSSH'));
+                        }
+                    } else {
+                        res = await listSSHFiles(sshSessionId, currentPath);
+                    }
+                } catch (sessionErr) {
+                    const newSessionId = await connectToSSH(host);
+                    if (newSessionId) {
+                        setSshSessionId(newSessionId);
+                        res = await listSSHFiles(newSessionId, currentPath);
+                    } else {
+                        throw sessionErr;
+                    }
+                }
+
+                const processedFiles = (res || []).map((f: any) => {
+                    const filePath = currentPath + (currentPath.endsWith('/') ? '' : '/') + f.name;
+                    const isPinned = pinnedFiles.some(pinned => pinned.path === filePath);
+                    return {
+                        ...f,
+                        path: filePath,
+                        isPinned,
+                        isSSH: true,
+                        sshSessionId: sshSessionId
+                    };
+                });
+
+                setFiles(processedFiles);
+            }
+        } catch (err: any) {
+            setFiles([]);
+            toast.error(err?.response?.data?.error || err?.message || t('fileManager.failedToListFiles'));
+        } finally {
+            setFilesLoading(false);
+            setFetchingFiles(false);
+        }
+    }
+
+    useEffect(() => {
+        if (host && sshSessionId && !connectingSSH && !fetchingFiles) {
+            const timeoutId = setTimeout(() => {
+                fetchFiles();
+            }, 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [currentPath, host, sshSessionId]);
+
+    useImperativeHandle(ref, () => ({
+        openFolder: async (_server: SSHHost, path: string) => {
+            if (connectingSSH || fetchingFiles) {
+                return;
+            }
+
+            if (currentPath === path) {
+                setTimeout(() => fetchFiles(), 100);
+                return;
+            }
+
+            setFetchingFiles(false);
+            setFilesLoading(false);
+            setFiles([]);
+
+            setCurrentPath(path);
+            onPathChange?.(path);
+            if (!sshSessionId) {
+                const sessionId = await connectToSSH(host);
+                if (sessionId) setSshSessionId(sessionId);
+            }
+        },
+        fetchFiles: () => {
+            if (host && sshSessionId) {
+                fetchFiles();
+            }
+        },
+        getCurrentPath: () => currentPath
+    }));
+
+    useEffect(() => {
+        if (pathInputRef.current) {
+            pathInputRef.current.scrollLeft = pathInputRef.current.scrollWidth;
+        }
+    }, [currentPath]);
+
+    const filteredFiles = files.filter(file => {
+        const q = debouncedFileSearch.trim().toLowerCase();
+        if (!q) return true;
+        return file.name.toLowerCase().includes(q);
+    });
+
+    const handleContextMenu = (e: React.MouseEvent, item: any) => {
+        e.preventDefault();
+
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        const menuWidth = 160;
+        const menuHeight = 80;
+
+        let x = e.clientX;
+        let y = e.clientY;
+
+        if (x + menuWidth > viewportWidth) {
+            x = e.clientX - menuWidth;
+        }
+
+        if (y + menuHeight > viewportHeight) {
+            y = e.clientY - menuHeight;
+        }
+
+        if (x < 0) {
+            x = 0;
+        }
+
+        if (y < 0) {
+            y = 0;
+        }
+        
+        setContextMenu({
+            visible: true,
+            x,
+            y,
+            item
+        });
+    };
+
+    const closeContextMenu = () => {
+        setContextMenu({ visible: false, x: 0, y: 0, item: null });
+    };
+
+    const handleRename = async (item: any, newName: string) => {
+        if (!sshSessionId || !newName.trim() || newName === item.name) {
+            setRenamingItem(null);
+            return;
+        }
+
+        try {
+            await renameSSHItem(sshSessionId, item.path, newName.trim());
+            toast.success(`${item.type === 'directory' ? t('common.folder') : t('common.file')} ${t('common.renamedSuccessfully')}`);
+            setRenamingItem(null);
+            if (onOperationComplete) {
+                onOperationComplete();
+            } else {
+                fetchFiles();
+            }
+        } catch (error: any) {
+            toast.error(error?.response?.data?.error || t('fileManager.failedToRenameItem'));
+        }
+    };
+
+    const handleDelete = async (item: any) => {
+        if (!sshSessionId) return;
+
+        try {
+            await deleteSSHItem(sshSessionId, item.path, item.type === 'directory');
+            toast.success(`${item.type === 'directory' ? t('common.folder') : t('common.file')} ${t('common.deletedSuccessfully')}`);
+            if (onOperationComplete) {
+                onOperationComplete();
+            } else {
+                fetchFiles();
+            }
+        } catch (error: any) {
+            toast.error(error?.response?.data?.error || t('fileManager.failedToDeleteItem'));
+        }
+    };
+
+    const startRename = (item: any) => {
+        setRenamingItem({ item, newName: item.name });
+        closeContextMenu();
+    };
+
+    const startDelete = (item: any) => {
+        onDeleteItem?.(item);
+        closeContextMenu();
+    };
+
+    useEffect(() => {
+        const handleClickOutside = () => closeContextMenu();
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, []);
+
+    const handlePathChange = (newPath: string) => {
+        setCurrentPath(newPath);
+        onPathChange?.(newPath);
+    };
+
+    return (
+        <div className="flex flex-col h-full w-[256px]" style={{maxWidth: 256}}>
+            <div className="flex flex-col flex-grow min-h-0">
+                <div className="flex-1 w-full h-full flex flex-col bg-[#09090b] border-r-2 border-[#303032] overflow-hidden p-0 relative min-h-0">
+                    {host && (
+                        <div className="flex flex-col h-full w-full" style={{maxWidth: 260}}>
+                            <div className="flex items-center gap-2 px-2 py-1.5 border-b-2 border-[#303032] bg-[#18181b] z-20" style={{maxWidth: 260}}>
+                                <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="h-9 w-9 bg-[#18181b] border-2 border-[#303032] rounded-md hover:bg-[#2d2d30] focus:outline-none focus:ring-2 focus:ring-ring"
+                                    onClick={() => {
+                                        let path = currentPath;
+                                        if (path && path !== '/' && path !== '') {
+                                            if (path.endsWith('/')) path = path.slice(0, -1);
+                                            const lastSlash = path.lastIndexOf('/');
+                                            if (lastSlash > 0) {
+                                                handlePathChange(path.slice(0, lastSlash));
+                                            } else {
+                                                handlePathChange('/');
+                                            }
+                                        } else {
+                                            handlePathChange('/');
+                                        }
+                                    }}
+                                >
+                                    <ArrowUp className="w-4 h-4"/>
+                                </Button>
+                                <Input ref={pathInputRef} value={currentPath}
+                                       onChange={e => handlePathChange(e.target.value)}
+                                       className="flex-1 bg-[#18181b] border-2 border-[#434345] text-white truncate rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-ring hover:border-[#5a5a5d]"
+                                />
+                            </div>
+                            <div className="px-2 py-2 border-b-1 border-[#303032] bg-[#18181b]">
+                                <Input
+                                    placeholder={t('fileManager.searchFilesAndFolders')}
+                                    className="w-full h-7 text-sm bg-[#23232a] border-2 border-[#434345] text-white placeholder:text-muted-foreground rounded-md"
+                                    autoComplete="off"
+                                    value={fileSearch}
+                                    onChange={e => setFileSearch(e.target.value)}
+                                />
+                            </div>
+                            <div className="flex-1 min-h-0 w-full bg-[#09090b] border-t-1 border-[#303032]">
+                                <ScrollArea className="h-full w-full bg-[#09090b]">
+                                    <div className="p-2 pb-0">
+                                        {connectingSSH || filesLoading ? (
+                                            <div className="text-xs text-muted-foreground">{t('common.loading')}</div>
+                                        ) : filteredFiles.length === 0 ? (
+                                            <div className="text-xs text-muted-foreground">{t('fileManager.noFilesOrFoldersFound')}</div>
+                                        ) : (
+                                            <div className="flex flex-col gap-1">
+                                                {filteredFiles.map((item: any) => {
+                                                    const isOpen = (tabs || []).some((t: any) => t.id === item.path);
+                                                    const isRenaming = renamingItem?.item?.path === item.path;
+                                                    const isDeleting = false;
+                                                    
+                                                    return (
+                                                        <div
+                                                            key={item.path}
+                                                            className={cn(
+                                                                "flex items-center gap-2 px-3 py-2 bg-[#18181b] border-2 border-[#303032] rounded group max-w-full relative",
+                                                                isOpen && "opacity-60 cursor-not-allowed pointer-events-none"
+                                                            )}
+                                                            style={{maxWidth: 220, marginBottom: 8}}
+                                                            onContextMenu={(e) => !isOpen && handleContextMenu(e, item)}
+                                                        >
+                                                            {isRenaming ? (
+                                                                <div className="flex items-center gap-2 flex-1 min-w-0">
+                                                                    {item.type === 'directory' ?
+                                                                        <Folder className="w-4 h-4 text-blue-400 flex-shrink-0"/> :
+                                                                        <File className="w-4 h-4 text-muted-foreground flex-shrink-0"/>}
+                                                                    <Input
+                                                                        value={renamingItem.newName}
+                                                                        onChange={(e) => setRenamingItem(prev => prev ? {...prev, newName: e.target.value} : null)}
+                                                                        className="flex-1 h-6 text-sm bg-[#23232a] border border-[#434345] text-white"
+                                                                        autoFocus
+                                                                        onKeyDown={(e) => {
+                                                                            if (e.key === 'Enter') {
+                                                                                handleRename(item, renamingItem.newName);
+                                                                            } else if (e.key === 'Escape') {
+                                                                                                setRenamingItem(null);
+                                                                            }
+                                                                        }}
+                                                                        onBlur={() => handleRename(item, renamingItem.newName)}
+                                                                    />
+                                                                </div>
+                                                            ) : (
+                                                                <>
+                                                                    <div
+                                                                        className="flex items-center gap-2 flex-1 cursor-pointer min-w-0"
+                                                                        onClick={() => !isOpen && (item.type === 'directory' ? handlePathChange(item.path) : onOpenFile({
+                                                                            name: item.name,
+                                                                            path: item.path,
+                                                                            isSSH: item.isSSH,
+                                                                            sshSessionId: item.sshSessionId
+                                                                        }))}
+                                                                    >
+                                                                        {item.type === 'directory' ?
+                                                                            <Folder className="w-4 h-4 text-blue-400 flex-shrink-0"/> :
+                                                                            <File className="w-4 h-4 text-muted-foreground flex-shrink-0"/>}
+                                                                        <span className="text-sm text-white truncate flex-1 min-w-0">{item.name}</span>
+                                                                    </div>
+                                                                    <div className="flex items-center gap-1">
+                                                                        {item.type === 'file' && (
+                                                                            <Button size="icon" variant="ghost" className="h-7 w-7"
+                                                                                    disabled={isOpen}
+                                                                                    onClick={async (e) => {
+                                                                                        e.stopPropagation();
+                                                                                        try {
+                                                                                            if (item.isPinned) {
+                                                                                                await removeFileManagerPinned({
+                                                                                                    name: item.name,
+                                                                                                    path: item.path,
+                                                                                                    hostId: host?.id,
+                                                                                                    isSSH: true,
+                                                                                                    sshSessionId: host?.id.toString()
+                                                                                                });
+                                                                                                setFiles(files.map(f =>
+                                                                                                    f.path === item.path ? { ...f, isPinned: false } : f
+                                                                                                ));
+                                                                                            } else {
+                                                                                                await addFileManagerPinned({
+                                                                                                    name: item.name,
+                                                                                                    path: item.path,
+                                                                                                    hostId: host?.id,
+                                                                                                    isSSH: true,
+                                                                                                    sshSessionId: host?.id.toString()
+                                                                                                });
+                                                                                                setFiles(files.map(f =>
+                                                                                                    f.path === item.path ? { ...f, isPinned: true } : f
+                                                                                                ));
+                                                                                            }
+                                                                                        } catch (err) {
+                                                                                        }
+                                                                                    }}
+                                                                            >
+                                                                                <Pin className={`w-1 h-1 ${item.isPinned ? 'text-yellow-400 fill-current' : 'text-muted-foreground'}`}/>
+                                                                            </Button>
+                                                                        )}
+                                                                        {!isOpen && (
+                                                                            <Button
+                                                                                size="icon"
+                                                                                variant="ghost"
+                                                                                className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
+                                                                                onClick={(e) => {
+                                                                                    e.stopPropagation();
+                                                                                    handleContextMenu(e, item);
+                                                                                }}
+                                                                            >
+                                                                                <MoreVertical className="w-4 h-4" />
+                                                                            </Button>
+                                                                        )}
+                                                                    </div>
+                                                                </>
+                                                            )}
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        )}
+                                    </div>
+                                </ScrollArea>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {contextMenu.visible && contextMenu.item && (
+                <div
+                    className="fixed z-[99998] bg-[#18181b] border-2 border-[#303032] rounded-lg shadow-xl py-1 min-w-[160px]"
+                    style={{
+                        left: contextMenu.x,
+                        top: contextMenu.y,
+                    }}
+                >
+                    <button
+                        className="w-full px-3 py-2 text-left text-sm text-white hover:bg-[#2d2d30] flex items-center gap-2"
+                        onClick={() => startRename(contextMenu.item)}
+                    >
+                        <Edit3 className="w-4 h-4" />
+                        Rename
+                    </button>
+                    <button
+                        className="w-full px-3 py-2 text-left text-sm text-red-400 hover:bg-[#2d2d30] flex items-center gap-2"
+                        onClick={() => startDelete(contextMenu.item)}
+                    >
+                        <Trash2 className="w-4 h-4" />
+                        Delete
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+});
+
+export {FileManagerLeftSidebar};

src/ui/Apps/File Manager/FileManagerLeftSidebarFileViewer.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {Button} from '@/components/ui/button.tsx';
+import {Card} from '@/components/ui/card.tsx';
+import {Separator} from '@/components/ui/separator.tsx';
+import {Plus, Folder, File, Star, Trash2, Edit, Link2, Server, Pin} from 'lucide-react';
+import {useTranslation} from 'react-i18next';
+
+interface SSHConnection {
+    id: string;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    isPinned?: boolean;
+}
+
+interface FileItem {
+    name: string;
+    type: 'file' | 'directory' | 'link';
+    path: string;
+    isStarred?: boolean;
+}
+
+interface FileManagerLeftSidebarVileViewerProps {
+    sshConnections: SSHConnection[];
+    onAddSSH: () => void;
+    onConnectSSH: (conn: SSHConnection) => void;
+    onEditSSH: (conn: SSHConnection) => void;
+    onDeleteSSH: (conn: SSHConnection) => void;
+    onPinSSH: (conn: SSHConnection) => void;
+    currentPath: string;
+    files: FileItem[];
+    onOpenFile: (file: FileItem) => void;
+    onOpenFolder: (folder: FileItem) => void;
+    onStarFile: (file: FileItem) => void;
+    onDeleteFile: (file: FileItem) => void;
+    isLoading?: boolean;
+    error?: string;
+    isSSHMode: boolean;
+    onSwitchToLocal: () => void;
+    onSwitchToSSH: (conn: SSHConnection) => void;
+    currentSSH?: SSHConnection;
+}
+
+export function FileManagerLeftSidebarFileViewer({
+                                                     sshConnections,
+                                                     onAddSSH,
+                                                     onConnectSSH,
+                                                     onEditSSH,
+                                                     onDeleteSSH,
+                                                     onPinSSH,
+                                                     currentPath,
+                                                     files,
+                                                     onOpenFile,
+                                                     onOpenFolder,
+                                                     onStarFile,
+                                                     onDeleteFile,
+                                                     isLoading,
+                                                     error,
+                                                     isSSHMode,
+                                                     onSwitchToLocal,
+                                                     onSwitchToSSH,
+                                                     currentSSH,
+                                                 }: FileManagerLeftSidebarVileViewerProps) {
+    const {t} = useTranslation();
+    
+    return (
+        <div className="flex flex-col h-full">
+            <div className="flex-1 bg-[#09090b] p-2 overflow-y-auto">
+                <div className="mb-2 flex items-center gap-2">
+                    <span
+                        className="text-xs text-muted-foreground font-semibold">{isSSHMode ? t('common.sshPath') : t('common.localPath')}</span>
+                    <span className="text-xs text-white truncate">{currentPath}</span>
+                </div>
+                {isLoading ? (
+                    <div className="text-xs text-muted-foreground">{t('common.loading')}</div>
+                ) : error ? (
+                    <div className="text-xs text-red-500">{error}</div>
+                ) : (
+                    <div className="flex flex-col gap-1">
+                        {files.map((item) => (
+                            <Card key={item.path}
+                                  className="flex items-center gap-2 px-2 py-1 bg-[#18181b] border-2 border-[#303032] rounded">
+                                <div className="flex items-center gap-2 flex-1 cursor-pointer"
+                                     onClick={() => item.type === 'directory' ? onOpenFolder(item) : onOpenFile(item)}>
+                                    {item.type === 'directory' ? <Folder className="w-4 h-4 text-blue-400"/> :
+                                        <File className="w-4 h-4 text-muted-foreground"/>}
+                                    <span className="text-sm text-white truncate">{item.name}</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <Button size="icon" variant="ghost" className="h-7 w-7"
+                                            onClick={() => onStarFile(item)}>
+                                        <Pin
+                                            className={`w-4 h-4 ${item.isStarred ? 'text-yellow-400' : 'text-muted-foreground'}`}/>
+                                    </Button>
+                                    <Button size="icon" variant="ghost" className="h-7 w-7"
+                                            onClick={() => onDeleteFile(item)}>
+                                        <Trash2 className="w-4 h-4 text-red-500"/>
+                                    </Button>
+                                </div>
+                            </Card>
+                        ))}
+                        {files.length === 0 &&
+                            <div className="text-xs text-muted-foreground">No files or folders found.</div>}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+} 

src/ui/Apps/File Manager/FileManagerOperations.tsx

@@ -0,0 +1,626 @@
+import React, {useState, useRef, useEffect} from 'react';
+import {Button} from '@/components/ui/button.tsx';
+import {Input} from '@/components/ui/input.tsx';
+import {Card} from '@/components/ui/card.tsx';
+import {Separator} from '@/components/ui/separator.tsx';
+import {
+    Upload,
+    FilePlus,
+    FolderPlus,
+    Trash2,
+    Edit3,
+    X,
+    Check,
+    AlertCircle,
+    FileText,
+    Folder
+} from 'lucide-react';
+import {cn} from '@/lib/utils.ts';
+import {useTranslation} from 'react-i18next';
+
+interface FileManagerOperationsProps {
+    currentPath: string;
+    sshSessionId: string | null;
+    onOperationComplete: () => void;
+    onError: (error: string) => void;
+    onSuccess: (message: string) => void;
+}
+
+export function FileManagerOperations({
+                                          currentPath,
+                                          sshSessionId,
+                                          onOperationComplete,
+                                          onError,
+                                          onSuccess
+                                      }: FileManagerOperationsProps) {
+    const {t} = useTranslation();
+    const [showUpload, setShowUpload] = useState(false);
+    const [showCreateFile, setShowCreateFile] = useState(false);
+    const [showCreateFolder, setShowCreateFolder] = useState(false);
+    const [showDelete, setShowDelete] = useState(false);
+    const [showRename, setShowRename] = useState(false);
+
+    const [uploadFile, setUploadFile] = useState<File | null>(null);
+    const [newFileName, setNewFileName] = useState('');
+    const [newFolderName, setNewFolderName] = useState('');
+    const [deletePath, setDeletePath] = useState('');
+    const [deleteIsDirectory, setDeleteIsDirectory] = useState(false);
+    const [renamePath, setRenamePath] = useState('');
+    const [renameIsDirectory, setRenameIsDirectory] = useState(false);
+    const [newName, setNewName] = useState('');
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [showTextLabels, setShowTextLabels] = useState(true);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const checkContainerWidth = () => {
+            if (containerRef.current) {
+                const width = containerRef.current.offsetWidth;
+                setShowTextLabels(width > 240);
+            }
+        };
+
+        checkContainerWidth();
+        
+        const resizeObserver = new ResizeObserver(checkContainerWidth);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    const handleFileUpload = async () => {
+        if (!uploadFile || !sshSessionId) return;
+
+        setIsLoading(true);
+        try {
+            const content = await uploadFile.text();
+            const {uploadSSHFile} = await import('@/ui/main-axios.ts');
+
+            await uploadSSHFile(sshSessionId, currentPath, uploadFile.name, content);
+            onSuccess(t('fileManager.fileUploadedSuccessfully', { name: uploadFile.name }));
+            setShowUpload(false);
+            setUploadFile(null);
+            onOperationComplete();
+        } catch (error: any) {
+            onError(error?.response?.data?.error || t('fileManager.failedToUploadFile'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCreateFile = async () => {
+        if (!newFileName.trim() || !sshSessionId) return;
+
+        setIsLoading(true);
+        try {
+            const {createSSHFile} = await import('@/ui/main-axios.ts');
+
+            await createSSHFile(sshSessionId, currentPath, newFileName.trim());
+            onSuccess(t('fileManager.fileCreatedSuccessfully', { name: newFileName.trim() }));
+            setShowCreateFile(false);
+            setNewFileName('');
+            onOperationComplete();
+        } catch (error: any) {
+            onError(error?.response?.data?.error || t('fileManager.failedToCreateFile'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCreateFolder = async () => {
+        if (!newFolderName.trim() || !sshSessionId) return;
+
+        setIsLoading(true);
+        try {
+            const {createSSHFolder} = await import('@/ui/main-axios.ts');
+
+            await createSSHFolder(sshSessionId, currentPath, newFolderName.trim());
+            onSuccess(t('fileManager.folderCreatedSuccessfully', { name: newFolderName.trim() }));
+            setShowCreateFolder(false);
+            setNewFolderName('');
+            onOperationComplete();
+        } catch (error: any) {
+            onError(error?.response?.data?.error || t('fileManager.failedToCreateFolder'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleDelete = async () => {
+        if (!deletePath || !sshSessionId) return;
+
+        setIsLoading(true);
+        try {
+            const {deleteSSHItem} = await import('@/ui/main-axios.ts');
+
+            await deleteSSHItem(sshSessionId, deletePath, deleteIsDirectory);
+            onSuccess(t('fileManager.itemDeletedSuccessfully', { type: deleteIsDirectory ? t('fileManager.folder') : t('fileManager.file') }));
+            setShowDelete(false);
+            setDeletePath('');
+            setDeleteIsDirectory(false);
+            onOperationComplete();
+        } catch (error: any) {
+            onError(error?.response?.data?.error || t('fileManager.failedToDeleteItem'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleRename = async () => {
+        if (!renamePath || !newName.trim() || !sshSessionId) return;
+
+        setIsLoading(true);
+        try {
+            const {renameSSHItem} = await import('@/ui/main-axios.ts');
+
+            await renameSSHItem(sshSessionId, renamePath, newName.trim());
+            onSuccess(t('fileManager.itemRenamedSuccessfully', { type: renameIsDirectory ? t('fileManager.folder') : t('fileManager.file') }));
+            setShowRename(false);
+            setRenamePath('');
+            setRenameIsDirectory(false);
+            setNewName('');
+            onOperationComplete();
+        } catch (error: any) {
+            onError(error?.response?.data?.error || t('fileManager.failedToRenameItem'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const openFileDialog = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            setUploadFile(file);
+        }
+    };
+
+    const resetStates = () => {
+        setShowUpload(false);
+        setShowCreateFile(false);
+        setShowCreateFolder(false);
+        setShowDelete(false);
+        setShowRename(false);
+        setUploadFile(null);
+        setNewFileName('');
+        setNewFolderName('');
+        setDeletePath('');
+        setDeleteIsDirectory(false);
+        setRenamePath('');
+        setRenameIsDirectory(false);
+        setNewName('');
+    };
+
+    if (!sshSessionId) {
+        return (
+            <div className="p-4 text-center">
+                <AlertCircle className="w-8 h-8 text-muted-foreground mx-auto mb-2"/>
+                <p className="text-sm text-muted-foreground">{t('fileManager.connectToSsh')}</p>
+            </div>
+        );
+    }
+
+    return (
+        <div ref={containerRef} className="p-4 space-y-4">
+            <div className="grid grid-cols-2 gap-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowUpload(true)}
+                    className="h-10 bg-[#18181b] border-2 border-[#303032] hover:border-[#434345] hover:bg-[#2d2d30]"
+                    title={t('fileManager.uploadFile')}
+                >
+                    <Upload className={cn("w-4 h-4", showTextLabels ? "mr-2" : "")}/>
+                    {showTextLabels && <span className="truncate">{t('fileManager.uploadFile')}</span>}
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowCreateFile(true)}
+                    className="h-10 bg-[#18181b] border-2 border-[#303032] hover:border-[#434345] hover:bg-[#2d2d30]"
+                    title={t('fileManager.newFile')}
+                >
+                    <FilePlus className={cn("w-4 h-4", showTextLabels ? "mr-2" : "")}/>
+                    {showTextLabels && <span className="truncate">{t('fileManager.newFile')}</span>}
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowCreateFolder(true)}
+                    className="h-10 bg-[#18181b] border-2 border-[#303032] hover:border-[#434345] hover:bg-[#2d2d30]"
+                    title={t('fileManager.newFolder')}
+                >
+                    <FolderPlus className={cn("w-4 h-4", showTextLabels ? "mr-2" : "")}/>
+                    {showTextLabels && <span className="truncate">{t('fileManager.newFolder')}</span>}
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowRename(true)}
+                    className="h-10 bg-[#18181b] border-2 border-[#303032] hover:border-[#434345] hover:bg-[#2d2d30]"
+                    title={t('fileManager.rename')}
+                >
+                    <Edit3 className={cn("w-4 h-4", showTextLabels ? "mr-2" : "")}/>
+                    {showTextLabels && <span className="truncate">{t('fileManager.rename')}</span>}
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowDelete(true)}
+                    className="h-10 bg-[#18181b] border-2 border-[#303032] hover:border-[#434345] hover:bg-[#2d2d30] col-span-2"
+                    title={t('fileManager.deleteItem')}
+                >
+                    <Trash2 className={cn("w-4 h-4", showTextLabels ? "mr-2" : "")}/>
+                    {showTextLabels && <span className="truncate">{t('fileManager.deleteItem')}</span>}
+                </Button>
+            </div>
+
+            <div className="bg-[#141416] border-2 border-[#373739] rounded-md p-3">
+                <div className="flex items-start gap-2 text-sm">
+                    <Folder className="w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5"/>
+                    <div className="flex-1 min-w-0">
+                        <span className="text-muted-foreground block mb-1">{t('fileManager.currentPath')}:</span>
+                        <span className="text-white font-mono text-xs break-all leading-relaxed">{currentPath}</span>
+                    </div>
+                </div>
+            </div>
+
+            <Separator className="p-0.25 bg-[#303032]"/>
+
+            {showUpload && (
+                <Card className="bg-[#18181b] border-2 border-[#303032] p-3 sm:p-4">
+                    <div className="flex items-start justify-between mb-3">
+                        <div className="flex-1 min-w-0">
+                            <h3 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2 mb-1">
+                                <Upload className="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0"/>
+                                <span className="break-words">{t('fileManager.uploadFileTitle')}</span>
+                            </h3>
+                            <p className="text-xs text-muted-foreground break-words">
+                                {t('fileManager.maxFileSize')}
+                            </p>
+                        </div>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowUpload(false)}
+                            className="h-8 w-8 p-0 flex-shrink-0 ml-2"
+                        >
+                            <X className="w-4 h-4"/>
+                        </Button>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="border-2 border-dashed border-[#434345] rounded-lg p-4 text-center">
+                            {uploadFile ? (
+                                <div className="space-y-3">
+                                    <FileText className="w-12 h-12 text-blue-400 mx-auto"/>
+                                    <p className="text-white font-medium text-sm break-words px-2">{uploadFile.name}</p>
+                                    <p className="text-xs text-muted-foreground">
+                                        {(uploadFile.size / 1024).toFixed(2)} KB
+                                    </p>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => setUploadFile(null)}
+                                        className="w-full text-sm h-8"
+                                    >
+                                        {t('fileManager.removeFile')}
+                                    </Button>
+                                </div>
+                            ) : (
+                                <div className="space-y-3">
+                                    <Upload className="w-12 h-12 text-muted-foreground mx-auto"/>
+                                    <p className="text-white text-sm break-words px-2">{t('fileManager.clickToSelectFile')}</p>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={openFileDialog}
+                                        className="w-full text-sm h-8"
+                                    >
+                                        {t('fileManager.chooseFile')}
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+
+                        <input
+                            ref={fileInputRef}
+                            type="file"
+                            onChange={handleFileSelect}
+                            className="hidden"
+                            accept="*/*"
+                        />
+
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                onClick={handleFileUpload}
+                                disabled={!uploadFile || isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {isLoading ? t('fileManager.uploading') : t('fileManager.uploadFile')}
+                            </Button>
+                            <Button
+                                variant="outline"
+                                onClick={() => setShowUpload(false)}
+                                disabled={isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {t('common.cancel')}
+                            </Button>
+                        </div>
+                    </div>
+                </Card>
+            )}
+
+            {showCreateFile && (
+                <Card className="bg-[#18181b] border-2 border-[#303032] p-3 sm:p-4">
+                    <div className="flex items-start justify-between mb-3">
+                        <div className="flex-1 min-w-0">
+                            <h3 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2">
+                                <FilePlus className="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0"/>
+                                <span className="break-words">{t('fileManager.createNewFile')}</span>
+                            </h3>
+                        </div>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowCreateFile(false)}
+                            className="h-8 w-8 p-0 flex-shrink-0 ml-2"
+                        >
+                            <X className="w-4 h-4"/>
+                        </Button>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div>
+                            <label className="text-sm font-medium text-white mb-2 block">
+                                {t('fileManager.fileName')}
+                            </label>
+                            <Input
+                                value={newFileName}
+                                onChange={(e) => setNewFileName(e.target.value)}
+                                placeholder={t('placeholders.fileName')}
+                                className="bg-[#23232a] border-2 border-[#434345] text-white text-sm"
+                                onKeyDown={(e) => e.key === 'Enter' && handleCreateFile()}
+                            />
+                        </div>
+
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                onClick={handleCreateFile}
+                                disabled={!newFileName.trim() || isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {isLoading ? t('fileManager.creating') : t('fileManager.createFile')}
+                            </Button>
+                            <Button
+                                variant="outline"
+                                onClick={() => setShowCreateFile(false)}
+                                disabled={isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {t('common.cancel')}
+                            </Button>
+                        </div>
+                    </div>
+                </Card>
+            )}
+
+            {showCreateFolder && (
+                <Card className="bg-[#18181b] border-2 border-[#303032] p-3">
+                    <div className="flex items-start justify-between mb-3">
+                        <div className="flex-1 min-w-0">
+                            <h3 className="text-base font-semibold text-white flex items-center gap-2">
+                                <FolderPlus className="w-6 h-6 flex-shrink-0"/>
+                                <span className="break-words">{t('fileManager.createNewFolder')}</span>
+                            </h3>
+                        </div>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowCreateFolder(false)}
+                            className="h-8 w-8 p-0 flex-shrink-0 ml-2"
+                        >
+                            <X className="w-4 h-4"/>
+                        </Button>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div>
+                            <label className="text-sm font-medium text-white mb-2 block">
+                                {t('fileManager.folderName')}
+                            </label>
+                            <Input
+                                value={newFolderName}
+                                onChange={(e) => setNewFolderName(e.target.value)}
+                                placeholder={t('placeholders.folderName')}
+                                className="bg-[#23232a] border-2 border-[#434345] text-white text-sm"
+                                onKeyDown={(e) => e.key === 'Enter' && handleCreateFolder()}
+                            />
+                        </div>
+
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                onClick={handleCreateFolder}
+                                disabled={!newFolderName.trim() || isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {isLoading ? t('fileManager.creating') : t('fileManager.createFolder')}
+                            </Button>
+                            <Button
+                                variant="outline"
+                                onClick={() => setShowCreateFolder(false)}
+                                disabled={isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {t('common.cancel')}
+                            </Button>
+                        </div>
+                    </div>
+                </Card>
+            )}
+
+            {showDelete && (
+                <Card className="bg-[#18181b] border-2 border-[#303032] p-3">
+                    <div className="flex items-start justify-between mb-3">
+                        <div className="flex-1 min-w-0">
+                            <h3 className="text-base font-semibold text-white flex items-center gap-2">
+                                <Trash2 className="w-6 h-6 text-red-400 flex-shrink-0"/>
+                                <span className="break-words">{t('fileManager.deleteItem')}</span>
+                            </h3>
+                        </div>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowDelete(false)}
+                            className="h-8 w-8 p-0 flex-shrink-0 ml-2"
+                        >
+                            <X className="w-4 h-4"/>
+                        </Button>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="bg-red-900/20 border border-red-500/30 rounded-lg p-3">
+                            <div className="flex items-start gap-2 text-red-300">
+                                <AlertCircle className="w-5 h-5 flex-shrink-0"/>
+                                <span className="text-sm font-medium break-words">{t('fileManager.warningCannotUndo')}</span>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="text-sm font-medium text-white mb-2 block">
+                                {t('fileManager.itemPath')}
+                            </label>
+                            <Input
+                                value={deletePath}
+                                onChange={(e) => setDeletePath(e.target.value)}
+                                placeholder={t('placeholders.fullPath')}
+                                className="bg-[#23232a] border-2 border-[#434345] text-white text-sm"
+                            />
+                        </div>
+
+                        <div className="flex items-start gap-2">
+                            <input
+                                type="checkbox"
+                                id="deleteIsDirectory"
+                                checked={deleteIsDirectory}
+                                onChange={(e) => setDeleteIsDirectory(e.target.checked)}
+                                className="rounded border-[#434345] bg-[#23232a] mt-0.5 flex-shrink-0"
+                            />
+                            <label htmlFor="deleteIsDirectory" className="text-sm text-white break-words">
+                                {t('fileManager.thisIsDirectory')}
+                            </label>
+                        </div>
+
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                onClick={handleDelete}
+                                disabled={!deletePath || isLoading}
+                                variant="destructive"
+                                className="w-full text-sm h-9"
+                            >
+                                {isLoading ? t('fileManager.deleting') : t('fileManager.deleteItem')}
+                            </Button>
+                            <Button
+                                variant="outline"
+                                onClick={() => setShowDelete(false)}
+                                disabled={isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {t('common.cancel')}
+                            </Button>
+                        </div>
+                    </div>
+                </Card>
+            )}
+
+            {showRename && (
+                <Card className="bg-[#18181b] border-2 border-[#303032] p-3">
+                    <div className="flex items-start justify-between mb-3">
+                        <div className="flex-1 min-w-0">
+                            <h3 className="text-base font-semibold text-white flex items-center gap-2">
+                                <Edit3 className="w-6 h-6 flex-shrink-0"/>
+                                <span className="break-words">{t('fileManager.renameItem')}</span>
+                            </h3>
+                        </div>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowRename(false)}
+                            className="h-8 w-8 p-0 flex-shrink-0 ml-2"
+                        >
+                            <X className="w-4 h-4"/>
+                        </Button>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div>
+                            <label className="text-sm font-medium text-white mb-2 block">
+                                {t('fileManager.currentPathLabel')}
+                            </label>
+                            <Input
+                                value={renamePath}
+                                onChange={(e) => setRenamePath(e.target.value)}
+                                placeholder={t('placeholders.currentPath')}
+                                className="bg-[#23232a] border-2 border-[#434345] text-white text-sm"
+                            />
+                        </div>
+
+                        <div>
+                            <label className="text-sm font-medium text-white mb-2 block">
+                                {t('fileManager.newName')}
+                            </label>
+                            <Input
+                                value={newName}
+                                onChange={(e) => setNewName(e.target.value)}
+                                placeholder={t('placeholders.newName')}
+                                className="bg-[#23232a] border-2 border-[#434345] text-white text-sm"
+                                onKeyDown={(e) => e.key === 'Enter' && handleRename()}
+                            />
+                        </div>
+
+                        <div className="flex items-start gap-2">
+                            <input
+                                type="checkbox"
+                                id="renameIsDirectory"
+                                checked={renameIsDirectory}
+                                onChange={(e) => setRenameIsDirectory(e.target.checked)}
+                                className="rounded border-[#434345] bg-[#23232a] mt-0.5 flex-shrink-0"
+                            />
+                            <label htmlFor="renameIsDirectory" className="text-sm text-white break-words">
+                                {t('fileManager.thisIsDirectoryRename')}
+                            </label>
+                        </div>
+
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                onClick={handleRename}
+                                disabled={!renamePath || !newName.trim() || isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {isLoading ? t('fileManager.renaming') : t('fileManager.renameItem')}
+                            </Button>
+                            <Button
+                                variant="outline"
+                                onClick={() => setShowRename(false)}
+                                disabled={isLoading}
+                                className="w-full text-sm h-9"
+                            >
+                                {t('common.cancel')}
+                            </Button>
+                        </div>
+                    </div>
+                </Card>
+            )}
+        </div>
+    );
+}

src/ui/Apps/File Manager/FileManagerTabList.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {Button} from '@/components/ui/button.tsx';
+import {X, Home} from 'lucide-react';
+
+interface FileManagerTab {
+    id: string | number;
+    title: string;
+}
+
+interface FileManagerTabList {
+    tabs: FileManagerTab[];
+    activeTab: string | number;
+    setActiveTab: (tab: string | number) => void;
+    closeTab: (tab: string | number) => void;
+    onHomeClick: () => void;
+}
+
+export function FileManagerTabList({tabs, activeTab, setActiveTab, closeTab, onHomeClick}: FileManagerTabList) {
+    return (
+        <div className="inline-flex items-center h-full gap-2">
+            <Button
+                onClick={onHomeClick}
+                variant="outline"
+                className={`ml-1 h-8 rounded-md flex items-center !px-2 border-1 border-[#303032] ${activeTab === 'home' ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
+            >
+                <Home className="w-4 h-4"/>
+            </Button>
+            {tabs.map((tab) => {
+                const isActive = tab.id === activeTab;
+                return (
+                    <div key={tab.id} className="inline-flex rounded-md shadow-sm" role="group">
+                        <Button
+                            onClick={() => setActiveTab(tab.id)}
+                            variant="outline"
+                            className={`h-8 rounded-r-none !px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
+                        >
+                            {tab.title}
+                        </Button>
+
+                        <Button
+                            onClick={() => closeTab(tab.id)}
+                            variant="outline"
+                            className="h-8 rounded-l-none p-0 !w-9 border-1 border-[#303032]"
+                        >
+                            <X className="!w-4 !h-4" strokeWidth={2}/>
+                        </Button>
+                    </div>
+                );
+            })}
+        </div>
+    );
+} 

src/ui/Apps/Host Manager/HostManager.tsx

@@ -1,12 +1,14 @@
 import React, {useState} from "react";
-import {SSHManagerSidebar} from "@/apps/SSH/Manager/SSHManagerSidebar.tsx";
-import {SSHManagerHostViewer} from "@/apps/SSH/Manager/SSHManagerHostViewer.tsx"
+import {HostManagerHostViewer} from "@/ui/Apps/Host Manager/HostManagerHostViewer.tsx"
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
-import {SSHManagerHostEditor} from "@/apps/SSH/Manager/SSHManagerHostEditor.tsx";
+import {HostManagerHostEditor} from "@/ui/Apps/Host Manager/HostManagerHostEditor.tsx";
+import {useSidebar} from "@/components/ui/sidebar.tsx";
+import {useTranslation} from "react-i18next";
 
-interface ConfigEditorProps {
+interface HostManagerProps {
     onSelectView: (view: string) => void;
+    isTopbarOpen?: boolean;
 }
 
 interface SSHHost {
@@ -25,16 +27,18 @@ interface SSHHost {
     keyType?: string;
     enableTerminal: boolean;
     enableTunnel: boolean;
-    enableConfigEditor: boolean;
+    enableFileManager: boolean;
     defaultPath: string;
     tunnelConnections: any[];
     createdAt: string;
     updatedAt: string;
 }
 
-export function SSHManager({onSelectView}: ConfigEditorProps): React.ReactElement {
+export function HostManager({onSelectView, isTopbarOpen}: HostManagerProps): React.ReactElement {
+    const {t} = useTranslation();
     const [activeTab, setActiveTab] = useState("host_viewer");
     const [editingHost, setEditingHost] = useState<SSHHost | null>(null);
+    const {state: sidebarState} = useSidebar();
 
     const handleEditHost = (host: SSHHost) => {
         setEditingHost(host);
@@ -53,33 +57,39 @@ export function SSHManager({onSelectView}: ConfigEditorProps): React.ReactElemen
         }
     };
 
+    const topMarginPx = isTopbarOpen ? 74 : 26;
+    const leftMarginPx = sidebarState === 'collapsed' ? 26 : 8;
+    const bottomMarginPx = 8;
+
     return (
         <div>
-            <SSHManagerSidebar
-                onSelectView={onSelectView}
-            />
-
-            <div className="flex w-screen h-screen overflow-hidden">
-                <div className="w-[256px]"/>
-
+            <div className="w-full">
                 <div
-                    className="flex-1 bg-[#18181b] m-[35px] text-white p-4 rounded-md w-[1200px] border h-[calc(100vh-70px)] flex flex-col min-h-0">
+                    className="bg-[#18181b] text-white p-4 pt-0 rounded-lg border-2 border-[#303032] flex flex-col min-h-0 overflow-hidden"
+                    style={{
+                        marginLeft: leftMarginPx,
+                        marginRight: 17,
+                        marginTop: topMarginPx,
+                        marginBottom: bottomMarginPx,
+                        height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`
+                    }}
+                >
                     <Tabs value={activeTab} onValueChange={handleTabChange}
                           className="flex-1 flex flex-col h-full min-h-0">
-                        <TabsList>
-                            <TabsTrigger value="host_viewer">Host Viewer</TabsTrigger>
+                        <TabsList className="bg-[#18181b] border-2 border-[#303032] mt-1.5">
+                            <TabsTrigger value="host_viewer">{t('hosts.hostViewer')}</TabsTrigger>
                             <TabsTrigger value="add_host">
-                                {editingHost ? "Edit Host" : "Add Host"}
+                                {editingHost ? t('hosts.editHost') : t('hosts.addHost')}
                             </TabsTrigger>
                         </TabsList>
                         <TabsContent value="host_viewer" className="flex-1 flex flex-col h-full min-h-0">
-                            <Separator className="p-0.25 mt-1 mb-1"/>
-                            <SSHManagerHostViewer onEditHost={handleEditHost}/>
+                            <Separator className="p-0.25 -mt-0.5 mb-1"/>
+                            <HostManagerHostViewer onEditHost={handleEditHost}/>
                         </TabsContent>
                         <TabsContent value="add_host" className="flex-1 flex flex-col h-full min-h-0">
-                            <Separator className="p-0.25 mt-1 mb-1"/>
+                            <Separator className="p-0.25 -mt-0.5 mb-1"/>
                             <div className="flex flex-col h-full min-h-0">
-                                <SSHManagerHostEditor
+                                <HostManagerHostEditor
                                     editingHost={editingHost}
                                     onFormSubmit={handleFormSubmit}
                                 />

src/ui/Apps/Host Manager/HostManagerHostEditor.tsx

@@ -19,7 +19,9 @@ import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx
 import React, {useEffect, useRef, useState} from "react";
 import {Switch} from "@/components/ui/switch.tsx";
 import {Alert, AlertDescription} from "@/components/ui/alert.tsx";
-import {createSSHHost, updateSSHHost, getSSHHosts} from '@/apps/SSH/ssh-axios';
+import {toast} from "sonner";
+import {createSSHHost, updateSSHHost, getSSHHosts} from '@/ui/main-axios.ts';
+import {useTranslation} from "react-i18next";
 
 interface SSHHost {
     id: number;
@@ -37,7 +39,7 @@ interface SSHHost {
     keyType?: string;
     enableTerminal: boolean;
     enableTunnel: boolean;
-    enableConfigEditor: boolean;
+    enableFileManager: boolean;
     defaultPath: string;
     tunnelConnections: any[];
     createdAt: string;
@@ -49,7 +51,8 @@ interface SSHManagerHostEditorProps {
     onFormSubmit?: () => void;
 }
 
-export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHostEditorProps) {
+export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHostEditorProps) {
+    const {t} = useTranslation();
     const [hosts, setHosts] = useState<SSHHost[]>([]);
     const [folders, setFolders] = useState<string[]>([]);
     const [sshConfigurations, setSshConfigurations] = useState<string[]>([]);
@@ -120,14 +123,14 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
             retryInterval: z.coerce.number().min(1).max(3600).default(10),
             autoStart: z.boolean().default(false),
         })).default([]),
-        enableConfigEditor: z.boolean().default(true),
+        enableFileManager: z.boolean().default(true),
         defaultPath: z.string().optional(),
     }).superRefine((data, ctx) => {
         if (data.authType === 'password') {
             if (!data.password || data.password.trim() === '') {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: "Password is required when using password authentication",
+                    message: t('hosts.passwordRequired'),
                     path: ['password']
                 });
             }
@@ -135,14 +138,14 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
             if (!data.key) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: "SSH Private Key is required when using key authentication",
+                    message: t('hosts.sshKeyRequired'),
                     path: ['key']
                 });
             }
             if (!data.keyType) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: "Key Type is required when using key authentication",
+                    message: t('hosts.keyTypeRequired'),
                     path: ['keyType']
                 });
             }
@@ -152,7 +155,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
             if (connection.endpointHost && !sshConfigurations.includes(connection.endpointHost)) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: "Must select a valid SSH configuration from the list",
+                    message: t('hosts.mustSelectValidSshConfig'),
                     path: ['tunnelConnections', index, 'endpointHost']
                 });
             }
@@ -178,7 +181,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
             keyType: "auto",
             enableTerminal: editingHost?.enableTerminal !== false,
             enableTunnel: editingHost?.enableTunnel !== false,
-            enableConfigEditor: editingHost?.enableConfigEditor !== false,
+            enableFileManager: editingHost?.enableFileManager !== false,
             defaultPath: editingHost?.defaultPath || "/",
             tunnelConnections: editingHost?.tunnelConnections || [],
         }
@@ -205,7 +208,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                 keyType: (editingHost.keyType as any) || "auto",
                 enableTerminal: editingHost.enableTerminal !== false,
                 enableTunnel: editingHost.enableTunnel !== false,
-                enableConfigEditor: editingHost.enableConfigEditor !== false,
+                enableFileManager: editingHost.enableFileManager !== false,
                 defaultPath: editingHost.defaultPath || "/",
                 tunnelConnections: editingHost.tunnelConnections || [],
             });
@@ -227,7 +230,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                 keyType: "auto",
                 enableTerminal: true,
                 enableTunnel: true,
-                enableConfigEditor: true,
+                enableFileManager: true,
                 defaultPath: "/",
                 tunnelConnections: [],
             });
@@ -244,15 +247,19 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
 
             if (editingHost) {
                 await updateSSHHost(editingHost.id, formData);
+                toast.success(t('hosts.hostUpdatedSuccessfully', { name: formData.name }));
             } else {
                 await createSSHHost(formData);
+                toast.success(t('hosts.hostAddedSuccessfully', { name: formData.name }));
             }
 
             if (onFormSubmit) {
                 onFormSubmit();
             }
+
+            window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
         } catch (error) {
-            alert('Failed to save host. Please try again.');
+            toast.error(t('hosts.failedToSaveHost'));
         }
     };
 
@@ -297,15 +304,15 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
     }, [folderDropdownOpen]);
 
     const keyTypeOptions = [
-        {value: 'auto', label: 'Auto-detect'},
-        {value: 'ssh-rsa', label: 'RSA'},
-        {value: 'ssh-ed25519', label: 'ED25519'},
-        {value: 'ecdsa-sha2-nistp256', label: 'ECDSA NIST P-256'},
-        {value: 'ecdsa-sha2-nistp384', label: 'ECDSA NIST P-384'},
-        {value: 'ecdsa-sha2-nistp521', label: 'ECDSA NIST P-521'},
-        {value: 'ssh-dss', label: 'DSA'},
-        {value: 'ssh-rsa-sha2-256', label: 'RSA SHA2-256'},
-        {value: 'ssh-rsa-sha2-512', label: 'RSA SHA2-512'},
+        {value: 'auto', label: t('hosts.autoDetect')},
+        {value: 'ssh-rsa', label: t('hosts.rsa')},
+        {value: 'ssh-ed25519', label: t('hosts.ed25519')},
+        {value: 'ecdsa-sha2-nistp256', label: t('hosts.ecdsaNistP256')},
+        {value: 'ecdsa-sha2-nistp384', label: t('hosts.ecdsaNistP384')},
+        {value: 'ecdsa-sha2-nistp521', label: t('hosts.ecdsaNistP521')},
+        {value: 'ssh-dss', label: t('hosts.dsa')},
+        {value: 'ssh-rsa-sha2-256', label: t('hosts.rsaSha2256')},
+        {value: 'ssh-rsa-sha2-512', label: t('hosts.rsaSha2512')},
     ];
 
     const [keyTypeDropdownOpen, setKeyTypeDropdownOpen] = useState(false);
@@ -388,25 +395,25 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
         <div className="flex-1 flex flex-col h-full min-h-0 w-full">
             <Form {...form}>
                 <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0 h-full">
-                    <ScrollArea className="flex-1 min-h-0 w-full my-1">
+                    <ScrollArea className="flex-1 min-h-0 w-full my-1 pb-2">
                         <Tabs defaultValue="general" className="w-full">
                             <TabsList>
-                                <TabsTrigger value="general">General</TabsTrigger>
-                                <TabsTrigger value="terminal">Terminal</TabsTrigger>
-                                <TabsTrigger value="tunnel">Tunnel</TabsTrigger>
-                                <TabsTrigger value="config_editor">Config Editor</TabsTrigger>
+                                <TabsTrigger value="general">{t('hosts.general')}</TabsTrigger>
+                                <TabsTrigger value="terminal">{t('hosts.terminal')}</TabsTrigger>
+                                <TabsTrigger value="tunnel">{t('hosts.tunnel')}</TabsTrigger>
+                                <TabsTrigger value="file_manager">{t('hosts.fileManager')}</TabsTrigger>
                             </TabsList>
-                            <TabsContent value="general">
-                                <FormLabel className="mb-3 font-bold">Connection Details</FormLabel>
+                            <TabsContent value="general" className="pt-2">
+                                <FormLabel className="mb-3 font-bold">{t('hosts.connectionDetails')}</FormLabel>
                                 <div className="grid grid-cols-12 gap-4">
                                     <FormField
                                         control={form.control}
                                         name="ip"
                                         render={({field}) => (
                                             <FormItem className="col-span-5">
-                                                <FormLabel>IP</FormLabel>
+                                                <FormLabel>{t('hosts.ipAddress')}</FormLabel>
                                                 <FormControl>
-                                                    <Input placeholder="127.0.0.1" {...field} />
+                                                    <Input placeholder={t('placeholders.ipAddress')} {...field} />
                                                 </FormControl>
                                             </FormItem>
                                         )}
@@ -417,9 +424,9 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                         name="port"
                                         render={({field}) => (
                                             <FormItem className="col-span-1">
-                                                <FormLabel>Port</FormLabel>
+                                                <FormLabel>{t('hosts.port')}</FormLabel>
                                                 <FormControl>
-                                                    <Input placeholder="22" {...field} />
+                                                    <Input placeholder={t('placeholders.port')} {...field} />
                                                 </FormControl>
                                             </FormItem>
                                         )}
@@ -430,24 +437,24 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                         name="username"
                                         render={({field}) => (
                                             <FormItem className="col-span-6">
-                                                <FormLabel>Username</FormLabel>
+                                                <FormLabel>{t('hosts.username')}</FormLabel>
                                                 <FormControl>
-                                                    <Input placeholder="username" {...field} />
+                                                    <Input placeholder={t('placeholders.username')} {...field} />
                                                 </FormControl>
                                             </FormItem>
                                         )}
                                     />
                                 </div>
-                                <FormLabel className="mb-3 mt-3 font-bold">Organization</FormLabel>
+                                <FormLabel className="mb-3 mt-3 font-bold">{t('hosts.organization')}</FormLabel>
                                 <div className="grid grid-cols-26 gap-4">
                                     <FormField
                                         control={form.control}
                                         name="name"
                                         render={({field}) => (
                                             <FormItem className="col-span-10">
-                                                <FormLabel>Name</FormLabel>
+                                                <FormLabel>{t('hosts.name')}</FormLabel>
                                                 <FormControl>
-                                                    <Input placeholder="host name" {...field} />
+                                                    <Input placeholder={t('placeholders.hostname')} {...field} />
                                                 </FormControl>
                                             </FormItem>
                                         )}
@@ -458,11 +465,11 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                         name="folder"
                                         render={({field}) => (
                                             <FormItem className="col-span-10 relative">
-                                                <FormLabel>Folder</FormLabel>
+                                                <FormLabel>{t('hosts.folder')}</FormLabel>
                                                 <FormControl>
                                                     <Input
                                                         ref={folderInputRef}
-                                                        placeholder="folder"
+                                                        placeholder={t('placeholders.folder')}
                                                         className="min-h-[40px]"
                                                         autoComplete="off"
                                                         value={field.value}
@@ -503,7 +510,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                         name="tags"
                                         render={({field}) => (
                                             <FormItem className="col-span-10 overflow-visible">
-                                                <FormLabel>Tags</FormLabel>
+                                                <FormLabel>{t('hosts.tags')}</FormLabel>
                                                 <FormControl>
                                                     <div
                                                         className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-[#222225] focus-within:ring-2 ring-ring min-h-[40px]">
@@ -539,7 +546,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                     field.onChange(field.value.slice(0, -1));
                                                                 }
                                                             }}
-                                                            placeholder="add tags (space to add)"
+                                                            placeholder={t('hosts.addTagsSpaceToAdd')}
                                                         />
                                                     </div>
                                                 </FormControl>
@@ -552,7 +559,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                         name="pin"
                                         render={({field}) => (
                                             <FormItem className="col-span-6">
-                                                <FormLabel>Pin Connection</FormLabel>
+                                                <FormLabel>{t('hosts.pin')}</FormLabel>
                                                 <FormControl>
                                                     <Switch
                                                         checked={field.value}
@@ -563,7 +570,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                         )}
                                     />
                                 </div>
-                                <FormLabel className="mb-3 mt-3 font-bold">Authentication</FormLabel>
+                                <FormLabel className="mb-3 mt-3 font-bold">{t('hosts.authentication')}</FormLabel>
                                 <Tabs
                                     value={authTab}
                                     onValueChange={(value) => {
@@ -573,18 +580,18 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                     className="flex-1 flex flex-col h-full min-h-0"
                                 >
                                     <TabsList>
-                                        <TabsTrigger value="password">Password</TabsTrigger>
-                                        <TabsTrigger value="key">Key</TabsTrigger>
+                                        <TabsTrigger value="password">{t('hosts.password')}</TabsTrigger>
+                                        <TabsTrigger value="key">{t('hosts.key')}</TabsTrigger>
                                     </TabsList>
                                     <TabsContent value="password">
                                         <FormField
                                             control={form.control}
                                             name="password"
-                                            render={({field}) => (
+                                            render={({ field }) => (
                                                 <FormItem>
-                                                    <FormLabel>Password</FormLabel>
+                                                    <FormLabel>{t('hosts.password')}</FormLabel>
                                                     <FormControl>
-                                                        <Input placeholder="password" {...field} />
+                                                        <Input type="password" placeholder={t('placeholders.password')} {...field} />
                                                     </FormControl>
                                                 </FormItem>
                                             )}
@@ -597,7 +604,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                 name="key"
                                                 render={({field}) => (
                                                     <FormItem className="col-span-4 overflow-hidden min-w-0">
-                                                        <FormLabel>SSH Private Key</FormLabel>
+                                                        <FormLabel>{t('hosts.sshPrivateKey')}</FormLabel>
                                                         <FormControl>
                                                             <div className="relative min-w-0">
                                                                 <input
@@ -616,8 +623,8 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                     className="w-full min-w-0 overflow-hidden px-3 py-2 text-left"
                                                                 >
                                                                     <span className="block w-full truncate"
-                                                                          title={field.value?.name || 'Upload'}>
-                                                                        {field.value ? (editingHost ? 'Update Key' : field.value.name) : 'Upload'}
+                                                                          title={field.value?.name || t('hosts.upload')}>
+                                                                        {field.value ? (editingHost ? t('hosts.updateKey') : field.value.name) : t('hosts.upload')}
                                                                     </span>
                                                                 </Button>
                                                             </div>
@@ -630,10 +637,10 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                 name="keyPassword"
                                                 render={({field}) => (
                                                     <FormItem className="col-span-8">
-                                                        <FormLabel>Key Password</FormLabel>
+                                                        <FormLabel>{t('hosts.keyPassword')}</FormLabel>
                                                         <FormControl>
                                                             <Input
-                                                                placeholder="key password"
+                                                                placeholder={t('placeholders.keyPassword')}
                                                                 type="password"
                                                                 {...field}
                                                             />
@@ -646,7 +653,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                 name="keyType"
                                                 render={({field}) => (
                                                     <FormItem className="relative col-span-3">
-                                                        <FormLabel>Key Type</FormLabel>
+                                                        <FormLabel>{t('hosts.keyType')}</FormLabel>
                                                         <FormControl>
                                                             <div className="relative">
                                                                 <Button
@@ -656,7 +663,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                     className="w-full justify-start text-left rounded-md px-2 py-2 bg-[#18181b] border border-input text-foreground"
                                                                     onClick={() => setKeyTypeDropdownOpen((open) => !open)}
                                                                 >
-                                                                    {keyTypeOptions.find((opt) => opt.value === field.value)?.label || "Auto-detect"}
+                                                                    {keyTypeOptions.find((opt) => opt.value === field.value)?.label || t('hosts.autoDetect')}
                                                                 </Button>
                                                                 {keyTypeDropdownOpen && (
                                                                     <div
@@ -697,7 +704,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                     name="enableTerminal"
                                     render={({field}) => (
                                         <FormItem>
-                                            <FormLabel>Enable Terminal</FormLabel>
+                                            <FormLabel>{t('hosts.enableTerminal')}</FormLabel>
                                             <FormControl>
                                                 <Switch
                                                     checked={field.value}
@@ -705,7 +712,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                 />
                                             </FormControl>
                                             <FormDescription>
-                                                Enable/disable host visibility in Terminal tab.
+                                                {t('hosts.enableTerminalDesc')}
                                             </FormDescription>
                                         </FormItem>
                                     )}
@@ -717,7 +724,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                     name="enableTunnel"
                                     render={({field}) => (
                                         <FormItem>
-                                            <FormLabel>Enable Tunnel</FormLabel>
+                                            <FormLabel>{t('hosts.enableTunnel')}</FormLabel>
                                             <FormControl>
                                                 <Switch
                                                     checked={field.value}
@@ -725,7 +732,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                 />
                                             </FormControl>
                                             <FormDescription>
-                                                Enable/disable host visibility in Tunnel tab.
+                                                {t('hosts.enableTunnelDesc')}
                                             </FormDescription>
                                         </FormItem>
                                     )}
@@ -735,44 +742,40 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                     <>
                                         <Alert className="mt-4">
                                             <AlertDescription>
-                                                <strong>Sshpass Required For Password Authentication</strong>
+                                                <strong>{t('hosts.sshpassRequired')}</strong>
                                                 <div>
-                                                    For password-based SSH authentication, sshpass must be installed on
-                                                    both the local and remote servers. Install with: <code
+                                                    {t('hosts.sshpassRequiredDesc')} <code
                                                     className="bg-muted px-1 rounded inline">sudo apt install
                                                     sshpass</code> (Debian/Ubuntu) or the equivalent for your OS.
                                                 </div>
                                                 <div className="mt-2">
-                                                    <strong>Other installation methods:</strong>
-                                                    <div>• CentOS/RHEL/Fedora: <code
+                                                    <strong>{t('hosts.otherInstallMethods')}</strong>
+                                                    <div>• {t('hosts.centosRhelFedora')} <code
                                                         className="bg-muted px-1 rounded inline">sudo yum install
                                                         sshpass</code> or <code
                                                         className="bg-muted px-1 rounded inline">sudo dnf install
                                                         sshpass</code></div>
-                                                    <div>• macOS: <code className="bg-muted px-1 rounded inline">brew
+                                                    <div>• {t('hosts.macos')} <code className="bg-muted px-1 rounded inline">brew
                                                         install hudochenkov/sshpass/sshpass</code></div>
-                                                    <div>• Windows: Use WSL or consider SSH key authentication</div>
+                                                    <div>• {t('hosts.windows')}</div>
                                                 </div>
                                             </AlertDescription>
                                         </Alert>
 
                                         <Alert className="mt-4">
                                             <AlertDescription>
-                                                <strong>SSH Server Configuration Required</strong>
-                                                <div>For reverse SSH tunnels, the endpoint SSH server must allow:</div>
+                                                <strong>{t('hosts.sshServerConfigRequired')}</strong>
+                                                <div>{t('hosts.sshServerConfigDesc')}</div>
                                                 <div>• <code className="bg-muted px-1 rounded inline">GatewayPorts
-                                                    yes</code> (bind remote ports)
+                                                    yes</code> {t('hosts.gatewayPortsYes')}
                                                 </div>
                                                 <div>• <code className="bg-muted px-1 rounded inline">AllowTcpForwarding
-                                                    yes</code> (port forwarding)
+                                                    yes</code> {t('hosts.allowTcpForwardingYes')}
                                                 </div>
                                                 <div>• <code className="bg-muted px-1 rounded inline">PermitRootLogin
-                                                    yes</code> (if using root)
+                                                    yes</code> {t('hosts.permitRootLoginYes')}
                                                 </div>
-                                                <div className="mt-2">Edit <code
-                                                    className="bg-muted px-1 rounded inline">/etc/ssh/sshd_config</code> and
-                                                    restart SSH: <code className="bg-muted px-1 rounded inline">sudo
-                                                        systemctl restart sshd</code></div>
+                                                <div className="mt-2">{t('hosts.editSshConfig')}</div>
                                             </AlertDescription>
                                         </Alert>
 
@@ -781,7 +784,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                             name="tunnelConnections"
                                             render={({field}) => (
                                                 <FormItem className="mt-4">
-                                                    <FormLabel>Tunnel Connections</FormLabel>
+                                                    <FormLabel>{t('hosts.tunnelConnections')}</FormLabel>
                                                     <FormControl>
                                                         <div className="space-y-4">
                                                             {field.value.map((connection, index) => (
@@ -789,7 +792,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                      className="p-4 border rounded-lg bg-muted/50">
                                                                     <div
                                                                         className="flex items-center justify-between mb-3">
-                                                                        <h4 className="text-sm font-bold">Connection {index + 1}</h4>
+                                                                        <h4 className="text-sm font-bold">{t('hosts.connection')} {index + 1}</h4>
                                                                         <Button
                                                                             type="button"
                                                                             variant="ghost"
@@ -799,7 +802,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                                 field.onChange(newConnections);
                                                                             }}
                                                                         >
-                                                                            Remove
+                                                                            {t('hosts.remove')}
                                                                         </Button>
                                                                     </div>
                                                                     <div className="grid grid-cols-12 gap-4">
@@ -808,8 +811,8 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                             name={`tunnelConnections.${index}.sourcePort`}
                                                                             render={({field: sourcePortField}) => (
                                                                                 <FormItem className="col-span-4">
-                                                                                    <FormLabel>Source Port
-                                                                                        (Local)</FormLabel>
+                                                                                    <FormLabel>{t('hosts.sourcePort')}
+                                                                                        {t('hosts.sourcePortDesc')}</FormLabel>
                                                                                     <FormControl>
                                                                                         <Input
                                                                                             placeholder="22" {...sourcePortField} />
@@ -822,8 +825,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                             name={`tunnelConnections.${index}.endpointPort`}
                                                                             render={({field: endpointPortField}) => (
                                                                                 <FormItem className="col-span-4">
-                                                                                    <FormLabel>Endpoint Port
-                                                                                        (Remote)</FormLabel>
+                                                                                    <FormLabel>{t('hosts.endpointPort')}</FormLabel>
                                                                                     <FormControl>
                                                                                         <Input
                                                                                             placeholder="224" {...endpointPortField} />
@@ -837,14 +839,13 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                             render={({field: endpointHostField}) => (
                                                                                 <FormItem
                                                                                     className="col-span-4 relative">
-                                                                                    <FormLabel>Endpoint SSH
-                                                                                        Configuration</FormLabel>
+                                                                                    <FormLabel>{t('hosts.endpointSshConfig')}</FormLabel>
                                                                                     <FormControl>
                                                                                         <Input
                                                                                             ref={(el) => {
                                                                                                 sshConfigInputRefs.current[index] = el;
                                                                                             }}
-                                                                                            placeholder="endpoint ssh configuration"
+                                                                                            placeholder={t('placeholders.sshConfig')}
                                                                                             className="min-h-[40px]"
                                                                                             autoComplete="off"
                                                                                             value={endpointHostField.value}
@@ -891,12 +892,10 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                     </div>
 
                                                                     <p className="text-sm text-muted-foreground mt-2">
-                                                                        This tunnel will forward traffic from
-                                                                        port {form.watch(`tunnelConnections.${index}.sourcePort`) || '22'} on
-                                                                        the source machine (current connection details
-                                                                        in general tab) to
-                                                                        port {form.watch(`tunnelConnections.${index}.endpointPort`) || '224'} on
-                                                                        the endpoint machine.
+                                                                        {t('hosts.tunnelForwardDescription', { 
+                                                                            sourcePort: form.watch(`tunnelConnections.${index}.sourcePort`) || '22',
+                                                                            endpointPort: form.watch(`tunnelConnections.${index}.endpointPort`) || '224'
+                                                                        })}
                                                                     </p>
 
                                                                     <div className="grid grid-cols-12 gap-4 mt-4">
@@ -905,14 +904,13 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                             name={`tunnelConnections.${index}.maxRetries`}
                                                                             render={({field: maxRetriesField}) => (
                                                                                 <FormItem className="col-span-4">
-                                                                                    <FormLabel>Max Retries</FormLabel>
+                                                                                    <FormLabel>{t('hosts.maxRetries')}</FormLabel>
                                                                                     <FormControl>
                                                                                         <Input
-                                                                                            placeholder="3" {...maxRetriesField} />
+                                                                                            placeholder={t('placeholders.maxRetries')} {...maxRetriesField} />
                                                                                     </FormControl>
                                                                                     <FormDescription>
-                                                                                        Maximum number of retry attempts
-                                                                                        for tunnel connection.
+                                                                                        {t('hosts.maxRetriesDescription')}
                                                                                     </FormDescription>
                                                                                 </FormItem>
                                                                             )}
@@ -922,15 +920,13 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                             name={`tunnelConnections.${index}.retryInterval`}
                                                                             render={({field: retryIntervalField}) => (
                                                                                 <FormItem className="col-span-4">
-                                                                                    <FormLabel>Retry Interval
-                                                                                        (seconds)</FormLabel>
+                                                                                    <FormLabel>{t('hosts.retryInterval')}</FormLabel>
                                                                                     <FormControl>
                                                                                         <Input
-                                                                                            placeholder="10" {...retryIntervalField} />
+                                                                                            placeholder={t('placeholders.retryInterval')} {...retryIntervalField} />
                                                                                     </FormControl>
                                                                                     <FormDescription>
-                                                                                        Time to wait between retry
-                                                                                        attempts.
+                                                                                        {t('hosts.retryIntervalDescription')}
                                                                                     </FormDescription>
                                                                                 </FormItem>
                                                                             )}
@@ -940,8 +936,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                             name={`tunnelConnections.${index}.autoStart`}
                                                                             render={({field}) => (
                                                                                 <FormItem className="col-span-4">
-                                                                                    <FormLabel>Auto Start on Container
-                                                                                        Launch</FormLabel>
+                                                                                    <FormLabel>{t('hosts.autoStartContainer')}</FormLabel>
                                                                                     <FormControl>
                                                                                         <Switch
                                                                                             checked={field.value}
@@ -949,8 +944,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                                         />
                                                                                     </FormControl>
                                                                                     <FormDescription>
-                                                                                        Automatically start this tunnel
-                                                                                        when the container launches.
+                                                                                        {t('hosts.autoStartDesc')}
                                                                                     </FormDescription>
                                                                                 </FormItem>
                                                                             )}
@@ -972,7 +966,7 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                                     }]);
                                                                 }}
                                                             >
-                                                                Add Tunnel Connection
+                                                                {t('hosts.addConnection')}
                                                             </Button>
                                                         </div>
                                                     </FormControl>
@@ -984,13 +978,13 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                     </>
                                 )}
                             </TabsContent>
-                            <TabsContent value="config_editor">
+                            <TabsContent value="file_manager">
                                 <FormField
                                     control={form.control}
-                                    name="enableConfigEditor"
+                                    name="enableFileManager"
                                     render={({field}) => (
                                         <FormItem>
-                                            <FormLabel>Enable Config Editor</FormLabel>
+                                            <FormLabel>{t('hosts.enableFileManager')}</FormLabel>
                                             <FormControl>
                                                 <Switch
                                                     checked={field.value}
@@ -998,25 +992,24 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                                                 />
                                             </FormControl>
                                             <FormDescription>
-                                                Enable/disable host visibility in Config Editor tab.
+                                                {t('hosts.enableFileManagerDesc')}
                                             </FormDescription>
                                         </FormItem>
                                     )}
                                 />
 
-                                {form.watch('enableConfigEditor') && (
+                                {form.watch('enableFileManager') && (
                                     <div className="mt-4">
                                         <FormField
                                             control={form.control}
                                             name="defaultPath"
                                             render={({field}) => (
                                                 <FormItem>
-                                                    <FormLabel>Default Path</FormLabel>
+                                                    <FormLabel>{t('hosts.defaultPath')}</FormLabel>
                                                     <FormControl>
-                                                        <Input placeholder="/home" {...field} />
+                                                        <Input placeholder={t('placeholders.homePath')} {...field} />
                                                     </FormControl>
-                                                    <FormDescription>Set default directory shown when connected via
-                                                        Config Editor</FormDescription>
+                                                    <FormDescription>{t('hosts.defaultPathDesc')}</FormDescription>
                                                 </FormItem>
                                             )}
                                         />
@@ -1025,9 +1018,18 @@ export function SSHManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHost
                             </TabsContent>
                         </Tabs>
                     </ScrollArea>
-                    <footer className="shrink-0 w-full">
-                        <Separator className="p-0.25 mt-1 mb-3"/>
-                        <Button type="submit" variant="outline">{editingHost ? "Update Host" : "Add Host"}</Button>
+                    <footer className="shrink-0 w-full pb-0">
+                        <Separator className="p-0.25"/>
+                        <Button
+                            className=""
+                            type="submit"
+                            variant="outline"
+                            style={{
+                                transform: 'translateY(8px)'
+                            }}
+                        >
+                            {editingHost ? t('hosts.updateHost') : t('hosts.addHost')}
+                        </Button>
                     </footer>
                 </form>
             </Form>

src/ui/Apps/Host Manager/HostManagerHostViewer.tsx

@@ -5,8 +5,25 @@ import {Badge} from "@/components/ui/badge";
 import {ScrollArea} from "@/components/ui/scroll-area";
 import {Input} from "@/components/ui/input";
 import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion";
-import {getSSHHosts, deleteSSHHost} from "@/apps/SSH/ssh-axios";
-import {Edit, Trash2, Server, Folder, Tag, Pin, Terminal, Network, FileEdit, Search} from "lucide-react";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
+import {getSSHHosts, deleteSSHHost, bulkImportSSHHosts} from "@/ui/main-axios.ts";
+import {toast} from "sonner";
+import {useTranslation} from "react-i18next";
+import {
+    Edit,
+    Trash2,
+    Server,
+    Folder,
+    Tag,
+    Pin,
+    Terminal,
+    Network,
+    FileEdit,
+    Search,
+    Upload,
+    Info
+} from "lucide-react";
+import {Separator} from "@/components/ui/separator.tsx";
 
 interface SSHHost {
     id: number;
@@ -20,7 +37,7 @@ interface SSHHost {
     authType: string;
     enableTerminal: boolean;
     enableTunnel: boolean;
-    enableConfigEditor: boolean;
+    enableFileManager: boolean;
     defaultPath: string;
     tunnelConnections: any[];
     createdAt: string;
@@ -31,11 +48,13 @@ interface SSHManagerHostViewerProps {
     onEditHost?: (host: SSHHost) => void;
 }
 
-export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
+export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
+    const {t} = useTranslation();
     const [hosts, setHosts] = useState<SSHHost[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [searchQuery, setSearchQuery] = useState("");
+    const [importing, setImporting] = useState(false);
 
     useEffect(() => {
         fetchHosts();
@@ -48,19 +67,21 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
             setHosts(data);
             setError(null);
         } catch (err) {
-            setError('Failed to load hosts');
+            setError(t('hosts.failedToLoadHosts'));
         } finally {
             setLoading(false);
         }
     };
 
     const handleDelete = async (hostId: number, hostName: string) => {
-        if (window.confirm(`Are you sure you want to delete "${hostName}"?`)) {
+        if (window.confirm(t('hosts.confirmDelete', { name: hostName }))) {
             try {
                 await deleteSSHHost(hostId);
+                toast.success(t('hosts.hostDeletedSuccessfully', { name: hostName }));
                 await fetchHosts();
+                window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
             } catch (err) {
-                alert('Failed to delete host');
+                toast.error(t('hosts.failedToDeleteHost'));
             }
         }
     };
@@ -71,6 +92,51 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
         }
     };
 
+    const handleJsonImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+
+        try {
+            setImporting(true);
+            const text = await file.text();
+            const data = JSON.parse(text);
+
+            if (!Array.isArray(data.hosts) && !Array.isArray(data)) {
+                throw new Error(t('hosts.jsonMustContainHosts'));
+            }
+
+            const hostsArray = Array.isArray(data.hosts) ? data.hosts : data;
+
+            if (hostsArray.length === 0) {
+                throw new Error(t('hosts.noHostsInJson'));
+            }
+
+            if (hostsArray.length > 100) {
+                throw new Error(t('hosts.maxHostsAllowed'));
+            }
+
+            const result = await bulkImportSSHHosts(hostsArray);
+
+            if (result.success > 0) {
+                toast.success(t('hosts.importCompleted', { success: result.success, failed: result.failed }));
+                if (result.errors.length > 0) {
+                    toast.error(`Import errors: ${result.errors.join(', ')}`);
+                }
+                await fetchHosts();
+                window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
+            } else {
+                toast.error(t('hosts.importFailed') + `: ${result.errors.join(', ')}`);
+            }
+
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : t('hosts.failedToImportJson');
+            toast.error(t('hosts.importError') + `: ${errorMessage}`);
+        } finally {
+            setImporting(false);
+            event.target.value = '';
+        }
+    };
+
     const filteredAndSortedHosts = useMemo(() => {
         let filtered = hosts;
 
@@ -104,7 +170,7 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
         const grouped: { [key: string]: SSHHost[] } = {};
 
         filteredAndSortedHosts.forEach(host => {
-            const folder = host.folder || 'Uncategorized';
+            const folder = host.folder || t('hosts.uncategorized');
             if (!grouped[folder]) {
                 grouped[folder] = [];
             }
@@ -112,8 +178,8 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
         });
 
         const sortedFolders = Object.keys(grouped).sort((a, b) => {
-            if (a === 'Uncategorized') return -1;
-            if (b === 'Uncategorized') return 1;
+            if (a === t('hosts.uncategorized')) return -1;
+            if (b === t('hosts.uncategorized')) return 1;
             return a.localeCompare(b);
         });
 
@@ -130,7 +196,7 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
             <div className="flex items-center justify-center h-full">
                 <div className="text-center">
                     <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
-                    <p className="text-muted-foreground">Loading hosts...</p>
+                    <p className="text-muted-foreground">{t('hosts.loadingHosts')}</p>
                 </div>
             </div>
         );
@@ -142,7 +208,7 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
                 <div className="text-center">
                     <p className="text-red-500 mb-4">{error}</p>
                     <Button onClick={fetchHosts} variant="outline">
-                        Retry
+                        {t('hosts.retry')}
                     </Button>
                 </div>
             </div>
@@ -154,9 +220,9 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
             <div className="flex items-center justify-center h-full">
                 <div className="text-center">
                     <Server className="h-12 w-12 text-muted-foreground mx-auto mb-4"/>
-                    <h3 className="text-lg font-semibold mb-2">No SSH Hosts</h3>
+                    <h3 className="text-lg font-semibold mb-2">{t('hosts.noHosts')}</h3>
                     <p className="text-muted-foreground mb-4">
-                        You haven't added any SSH hosts yet. Click "Add Host" to get started.
+                        {t('hosts.noHostsMessage')}
                     </p>
                 </div>
             </div>
@@ -167,20 +233,131 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
         <div className="flex flex-col h-full min-h-0">
             <div className="flex items-center justify-between mb-2">
                 <div>
-                    <h2 className="text-xl font-semibold">SSH Hosts</h2>
+                    <h2 className="text-xl font-semibold">{t('hosts.sshHosts')}</h2>
                     <p className="text-muted-foreground">
-                        {filteredAndSortedHosts.length} hosts
+                        {t('hosts.hostsCount', { count: filteredAndSortedHosts.length })}
                     </p>
                 </div>
-                <Button onClick={fetchHosts} variant="outline" size="sm">
-                    Refresh
-                </Button>
+                <div className="flex items-center gap-2">
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="relative"
+                                    onClick={() => document.getElementById('json-import-input')?.click()}
+                                    disabled={importing}
+                                >
+                                    {importing ? t('hosts.importing') : t('hosts.importJson')}
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom"
+                                            className="max-w-sm bg-popover text-popover-foreground border border-border shadow-lg">
+                                <div className="space-y-2">
+                                    <p className="font-semibold text-sm">{t('hosts.importJsonTitle')}</p>
+                                    <p className="text-xs text-muted-foreground">
+                                        {t('hosts.importJsonDesc')}
+                                    </p>
+                                </div>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                            const sampleData = {
+                                hosts: [
+                                    {
+                                        name: "Web Server - Production",
+                                        ip: "192.168.1.100",
+                                        port: 22,
+                                        username: "admin",
+                                        authType: "password",
+                                        password: "your_secure_password_here",
+                                        folder: "Production",
+                                        tags: ["web", "production", "nginx"],
+                                        pin: true,
+                                        enableTerminal: true,
+                                        enableTunnel: false,
+                                        enableFileManager: true,
+                                        defaultPath: "/var/www"
+                                    },
+                                    {
+                                        name: "Database Server",
+                                        ip: "192.168.1.101",
+                                        port: 22,
+                                        username: "dbadmin",
+                                        authType: "key",
+                                        key: "-----BEGIN OPENSSH PRIVATE KEY-----\nYour SSH private key content here\n-----END OPENSSH PRIVATE KEY-----",
+                                        keyPassword: "optional_key_passphrase",
+                                        keyType: "ssh-ed25519",
+                                        folder: "Production",
+                                        tags: ["database", "production", "postgresql"],
+                                        pin: false,
+                                        enableTerminal: true,
+                                        enableTunnel: true,
+                                        enableFileManager: false,
+                                        tunnelConnections: [
+                                            {
+                                                sourcePort: 5432,
+                                                endpointPort: 5432,
+                                                endpointHost: "Web Server - Production",
+                                                maxRetries: 3,
+                                                retryInterval: 10,
+                                                autoStart: true
+                                            }
+                                        ]
+                                    }
+                                ]
+                            };
+
+                            const blob = new Blob([JSON.stringify(sampleData, null, 2)], {type: 'application/json'});
+                            const url = URL.createObjectURL(blob);
+                            const a = document.createElement('a');
+                            a.href = url;
+                            a.download = 'sample-ssh-hosts.json';
+                            document.body.appendChild(a);
+                            a.click();
+                            document.body.removeChild(a);
+                            URL.revokeObjectURL(url);
+                        }}
+                    >
+                        {t('hosts.downloadSample')}
+                    </Button>
+
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                            window.open('https://docs.termix.site/json-import', '_blank');
+                        }}
+                    >
+                        {t('hosts.formatGuide')}
+                    </Button>
+
+                    <div className="w-px h-6 bg-border mx-2"/>
+
+                    <Button onClick={fetchHosts} variant="outline" size="sm">
+                        {t('hosts.refresh')}
+                    </Button>
+                </div>
             </div>
 
+            <input
+                id="json-import-input"
+                type="file"
+                accept=".json"
+                onChange={handleJsonImport}
+                style={{display: 'none'}}
+            />
+
             <div className="relative mb-3">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"/>
                 <Input
-                    placeholder="Search hosts by name, username, IP, folder, tags..."
+                    placeholder={t('placeholders.searchHosts')}
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
                     className="pl-10"
@@ -257,7 +434,7 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
                                                         {host.tags && host.tags.length > 0 && (
                                                             <div className="flex flex-wrap gap-1">
                                                                 {host.tags.slice(0, 6).map((tag, index) => (
-                                                                    <Badge key={index} variant="secondary"
+                                                                    <Badge key={index} variant="outline"
                                                                            className="text-xs px-1 py-0">
                                                                         <Tag className="h-2 w-2 mr-0.5"/>
                                                                         {tag}
@@ -276,23 +453,23 @@ export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
                                                             {host.enableTerminal && (
                                                                 <Badge variant="outline" className="text-xs px-1 py-0">
                                                                     <Terminal className="h-2 w-2 mr-0.5"/>
-                                                                    Terminal
+                                                                    {t('hosts.terminalBadge')}
                                                                 </Badge>
                                                             )}
                                                             {host.enableTunnel && (
                                                                 <Badge variant="outline" className="text-xs px-1 py-0">
                                                                     <Network className="h-2 w-2 mr-0.5"/>
-                                                                    Tunnel
+                                                                    {t('hosts.tunnelBadge')}
                                                                     {host.tunnelConnections && host.tunnelConnections.length > 0 && (
                                                                         <span
                                                                             className="ml-0.5">({host.tunnelConnections.length})</span>
                                                                     )}
                                                                 </Badge>
                                                             )}
-                                                            {host.enableConfigEditor && (
+                                                            {host.enableFileManager && (
                                                                 <Badge variant="outline" className="text-xs px-1 py-0">
                                                                     <FileEdit className="h-2 w-2 mr-0.5"/>
-                                                                    Config
+                                                                    {t('hosts.fileManagerBadge')}
                                                                 </Badge>
                                                             )}
                                                         </div>

src/ui/Apps/Server/Server.tsx

@@ -0,0 +1,289 @@
+import React from "react";
+import {useSidebar} from "@/components/ui/sidebar";
+import {Status, StatusIndicator} from "@/components/ui/shadcn-io/status";
+import {Separator} from "@/components/ui/separator.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Progress} from "@/components/ui/progress"
+import {Cpu, HardDrive, MemoryStick} from "lucide-react";
+import {Tunnel} from "@/ui/Apps/Tunnel/Tunnel.tsx";
+import {getServerStatusById, getServerMetricsById, type ServerMetrics} from "@/ui/main-axios.ts";
+import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {useTranslation} from 'react-i18next';
+
+interface ServerProps {
+    hostConfig?: any;
+    title?: string;
+    isVisible?: boolean;
+    isTopbarOpen?: boolean;
+    embedded?: boolean;
+}
+
+export function Server({
+                           hostConfig,
+                           title,
+                           isVisible = true,
+                           isTopbarOpen = true,
+                           embedded = false
+                       }: ServerProps): React.ReactElement {
+    const {t} = useTranslation();
+    const {state: sidebarState} = useSidebar();
+    const {addTab, tabs} = useTabs() as any;
+    const [serverStatus, setServerStatus] = React.useState<'online' | 'offline'>('offline');
+    const [metrics, setMetrics] = React.useState<ServerMetrics | null>(null);
+    const [currentHostConfig, setCurrentHostConfig] = React.useState(hostConfig);
+
+    React.useEffect(() => {
+        setCurrentHostConfig(hostConfig);
+    }, [hostConfig]);
+
+    React.useEffect(() => {
+        const fetchLatestHostConfig = async () => {
+            if (hostConfig?.id) {
+                try {
+                    const {getSSHHosts} = await import('@/ui/main-axios.ts');
+                    const hosts = await getSSHHosts();
+                    const updatedHost = hosts.find(h => h.id === hostConfig.id);
+                    if (updatedHost) {
+                        setCurrentHostConfig(updatedHost);
+                    }
+                } catch (error) {
+                }
+            }
+        };
+
+        fetchLatestHostConfig();
+
+        const handleHostsChanged = async () => {
+            if (hostConfig?.id) {
+                try {
+                    const {getSSHHosts} = await import('@/ui/main-axios.ts');
+                    const hosts = await getSSHHosts();
+                    const updatedHost = hosts.find(h => h.id === hostConfig.id);
+                    if (updatedHost) {
+                        setCurrentHostConfig(updatedHost);
+                    }
+                } catch (error) {
+                }
+            }
+        };
+
+        window.addEventListener('ssh-hosts:changed', handleHostsChanged);
+        return () => window.removeEventListener('ssh-hosts:changed', handleHostsChanged);
+    }, [hostConfig?.id]);
+
+    React.useEffect(() => {
+        let cancelled = false;
+        let intervalId: number | undefined;
+
+        const fetchStatus = async () => {
+            try {
+                const res = await getServerStatusById(currentHostConfig?.id);
+                if (!cancelled) {
+                    setServerStatus(res?.status === 'online' ? 'online' : 'offline');
+                }
+            } catch {
+                if (!cancelled) setServerStatus('offline');
+            }
+        };
+
+        const fetchMetrics = async () => {
+            if (!currentHostConfig?.id) return;
+            try {
+                const data = await getServerMetricsById(currentHostConfig.id);
+                if (!cancelled) setMetrics(data);
+            } catch {
+                if (!cancelled) setMetrics(null);
+            }
+        };
+
+        if (currentHostConfig?.id && isVisible) {
+            fetchStatus();
+            fetchMetrics();
+            intervalId = window.setInterval(() => {
+                if (isVisible) {
+                    fetchStatus();
+                    fetchMetrics();
+                }
+            }, 30000);
+        }
+
+        return () => {
+            cancelled = true;
+            if (intervalId) window.clearInterval(intervalId);
+        };
+    }, [currentHostConfig?.id, isVisible]);
+
+    const topMarginPx = isTopbarOpen ? 74 : 16;
+    const leftMarginPx = sidebarState === 'collapsed' ? 16 : 8;
+    const bottomMarginPx = 8;
+
+    const isFileManagerAlreadyOpen = React.useMemo(() => {
+        if (!currentHostConfig) return false;
+        return tabs.some((tab: any) => 
+            tab.type === 'file_manager' && 
+            tab.hostConfig?.id === currentHostConfig.id
+        );
+    }, [tabs, currentHostConfig]);
+
+    const wrapperStyle: React.CSSProperties = embedded
+        ? {opacity: isVisible ? 1 : 0, height: '100%', width: '100%'}
+        : {
+            opacity: isVisible ? 1 : 0,
+            marginLeft: leftMarginPx,
+            marginRight: 17,
+            marginTop: topMarginPx,
+            marginBottom: bottomMarginPx,
+            height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
+        };
+
+    const containerClass = embedded
+        ? "h-full w-full text-white overflow-hidden bg-transparent"
+        : "bg-[#18181b] text-white rounded-lg border-2 border-[#303032] overflow-hidden";
+
+    return (
+        <div style={wrapperStyle} className={containerClass}>
+            <div className="h-full w-full flex flex-col">
+
+                {/* Top Header */}
+                <div className="flex items-center justify-between px-3 pt-2 pb-2">
+                    <div className="flex items-center gap-4">
+                        <h1 className="font-bold text-lg">
+                            {currentHostConfig?.folder} / {title}
+                        </h1>
+                        <Status status={serverStatus} className="!bg-transparent !p-0.75 flex-shrink-0">
+                            <StatusIndicator/>
+                        </Status>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={async () => {
+                                if (currentHostConfig?.id) {
+                                    try {
+                                        const res = await getServerStatusById(currentHostConfig.id);
+                                        setServerStatus(res?.status === 'online' ? 'online' : 'offline');
+                                        const data = await getServerMetricsById(currentHostConfig.id);
+                                        setMetrics(data);
+                                    } catch {
+                                        setServerStatus('offline');
+                                        setMetrics(null);
+                                    }
+                                }
+                            }}
+                            title={t('serverStats.refreshStatusAndMetrics')}
+                        >
+                            {t('serverStats.refreshStatus')}
+                        </Button>
+                        {currentHostConfig?.enableFileManager && (
+                            <Button
+                                variant="outline"
+                                className="font-semibold"
+                                disabled={isFileManagerAlreadyOpen}
+                                title={isFileManagerAlreadyOpen ? t('serverStats.fileManagerAlreadyOpen') : t('serverStats.openFileManager')}
+                                onClick={() => {
+                                    if (!currentHostConfig || isFileManagerAlreadyOpen) return;
+                                    const titleBase = currentHostConfig?.name && currentHostConfig.name.trim() !== ''
+                                        ? currentHostConfig.name.trim()
+                                        : `${currentHostConfig.username}@${currentHostConfig.ip}`;
+                                    addTab({
+                                        type: 'file_manager',
+                                        title: titleBase,
+                                        hostConfig: currentHostConfig,
+                                    });
+                                }}
+                            >
+                                {t('nav.fileManager')}
+                            </Button>
+                        )}
+                    </div>
+                </div>
+                <Separator className="p-0.25 w-full"/>
+
+                {/* Stats */}
+                <div className="rounded-lg border-2 border-[#303032] m-3 bg-[#0e0e10] flex flex-row items-stretch">
+                    {/* CPU */}
+                    <div className="flex-1 min-w-0 px-2 py-2">
+                        <h1 className="font-bold xt-lg flex flex-row gap-2 mb-2">
+                            <Cpu/>
+                            {(() => {
+                                const pct = metrics?.cpu?.percent;
+                                const cores = metrics?.cpu?.cores;
+                                const la = metrics?.cpu?.load;
+                                const pctText = (typeof pct === 'number') ? `${pct}%` : 'N/A';
+                                const coresText = (typeof cores === 'number') ? t('serverStats.cpuCores', {count: cores}) : t('serverStats.naCpus');
+                                const laText = (la && la.length === 3)
+                                    ? t('serverStats.loadAverage', {avg1: la[0].toFixed(2), avg5: la[1].toFixed(2), avg15: la[2].toFixed(2)})
+                                    : t('serverStats.loadAverageNA');
+                                return `${t('serverStats.cpuUsage')} - ${pctText} ${t('serverStats.of')} ${coresText} (${laText})`;
+                            })()}
+                        </h1>
+
+                        <Progress value={typeof metrics?.cpu?.percent === 'number' ? metrics!.cpu!.percent! : 0}/>
+                    </div>
+
+                    <Separator className="p-0.5 self-stretch" orientation="vertical"/>
+
+                    {/* Memory */}
+                    <div className="flex-1 min-w-0 px-2 py-2">
+                        <h1 className="font-bold xt-lg flex flex-row gap-2 mb-2">
+                            <MemoryStick/>
+                            {(() => {
+                                const pct = metrics?.memory?.percent;
+                                const used = metrics?.memory?.usedGiB;
+                                const total = metrics?.memory?.totalGiB;
+                                const pctText = (typeof pct === 'number') ? `${pct}%` : 'N/A';
+                                const usedText = (typeof used === 'number') ? `${used} GiB` : 'N/A';
+                                const totalText = (typeof total === 'number') ? `${total} GiB` : 'N/A';
+                                return `${t('serverStats.memoryUsage')} - ${pctText} (${usedText} ${t('serverStats.of')} ${totalText})`;
+                            })()}
+                        </h1>
+
+                        <Progress value={typeof metrics?.memory?.percent === 'number' ? metrics!.memory!.percent! : 0}/>
+                    </div>
+
+                    <Separator className="p-0.5 self-stretch" orientation="vertical"/>
+
+                    {/* Root Storage */}
+                    <div className="flex-1 min-w-0 px-2 py-2">
+                        <h1 className="font-bold xt-lg flex flex-row gap-2 mb-2">
+                            <HardDrive/>
+                            {(() => {
+                                const pct = metrics?.disk?.percent;
+                                const used = metrics?.disk?.usedHuman;
+                                const total = metrics?.disk?.totalHuman;
+                                const pctText = (typeof pct === 'number') ? `${pct}%` : 'N/A';
+                                const usedText = used ?? 'N/A';
+                                const totalText = total ?? 'N/A';
+                                return `${t('serverStats.rootStorageSpace')} - ${pctText} (${usedText} ${t('serverStats.of')} ${totalText})`;
+                            })()}
+                        </h1>
+
+                        <Progress value={typeof metrics?.disk?.percent === 'number' ? metrics!.disk!.percent! : 0}/>
+                    </div>
+                </div>
+
+                {/* SSH Tunnels */}
+                {(currentHostConfig?.tunnelConnections && currentHostConfig.tunnelConnections.length > 0) && (
+                    <div
+                        className="rounded-lg border-2 border-[#303032] m-3 bg-[#0e0e10] h-[360px] overflow-hidden flex flex-col min-h-0">
+                        <Tunnel
+                            filterHostKey={(currentHostConfig?.name && currentHostConfig.name.trim() !== '') ? currentHostConfig.name : `${currentHostConfig?.username}@${currentHostConfig?.ip}`}/>
+                    </div>
+                )}
+
+                <p className="px-4 pt-2 pb-2 text-sm text-gray-500">
+                    {t('serverStats.feedbackMessage')}{" "}
+                    <a
+                        href="https://github.com/LukeGus/Termix/issues/new"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-500 hover:underline"
+                    >
+                        GitHub
+                    </a>
+                    !
+                </p>
+            </div>
+        </div>
+    );
+}

src/ui/Apps/Terminal/Terminal.tsx

@@ -4,6 +4,7 @@ import {FitAddon} from '@xterm/addon-fit';
 import {ClipboardAddon} from '@xterm/addon-clipboard';
 import {Unicode11Addon} from '@xterm/addon-unicode11';
 import {WebLinksAddon} from '@xterm/addon-web-links';
+import {useTranslation} from 'react-i18next';
 
 interface SSHTerminalProps {
     hostConfig: any;
@@ -13,10 +14,11 @@ interface SSHTerminalProps {
     splitScreen?: boolean;
 }
 
-export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
+export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
     {hostConfig, isVisible, splitScreen = false},
     ref
 ) {
+    const {t} = useTranslation();
     const {instance: terminal, ref: xtermRef} = useXTerm();
     const fitAddonRef = useRef<FitAddon | null>(null);
     const webSocketRef = useRef<WebSocket | null>(null);
@@ -24,6 +26,42 @@ export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHT
     const wasDisconnectedBySSH = useRef(false);
     const pingIntervalRef = useRef<NodeJS.Timeout | null>(null);
     const [visible, setVisible] = useState(false);
+    const isVisibleRef = useRef<boolean>(false);
+
+
+    const lastSentSizeRef = useRef<{ cols: number; rows: number } | null>(null);
+    const pendingSizeRef = useRef<{ cols: number; rows: number } | null>(null);
+    const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const DEBOUNCE_MS = 140;
+
+    useEffect(() => {
+        isVisibleRef.current = isVisible;
+    }, [isVisible]);
+
+    function hardRefresh() {
+        try {
+            if (terminal && typeof (terminal as any).refresh === 'function') {
+                (terminal as any).refresh(0, terminal.rows - 1);
+            }
+        } catch (_) {
+        }
+    }
+
+    function scheduleNotify(cols: number, rows: number) {
+        if (!(cols > 0 && rows > 0)) return;
+        pendingSizeRef.current = {cols, rows};
+        if (notifyTimerRef.current) clearTimeout(notifyTimerRef.current);
+        notifyTimerRef.current = setTimeout(() => {
+            const next = pendingSizeRef.current;
+            const last = lastSentSizeRef.current;
+            if (!next) return;
+            if (last && last.cols === next.cols && last.rows === next.rows) return;
+            if (webSocketRef.current?.readyState === WebSocket.OPEN) {
+                webSocketRef.current.send(JSON.stringify({type: 'resize', data: next}));
+                lastSentSizeRef.current = next;
+            }
+        }, DEBOUNCE_MS);
+    }
 
     useImperativeHandle(ref, () => ({
         disconnect: () => {
@@ -35,13 +73,27 @@ export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHT
         },
         fit: () => {
             fitAddonRef.current?.fit();
+            if (terminal) scheduleNotify(terminal.cols, terminal.rows);
+            hardRefresh();
         },
         sendInput: (data: string) => {
             if (webSocketRef.current?.readyState === 1) {
                 webSocketRef.current.send(JSON.stringify({type: 'input', data}));
             }
-        }
-    }), []);
+        },
+        notifyResize: () => {
+            try {
+                const cols = terminal?.cols ?? undefined;
+                const rows = terminal?.rows ?? undefined;
+                if (typeof cols === 'number' && typeof rows === 'number') {
+                    scheduleNotify(cols, rows);
+                    hardRefresh();
+                }
+            } catch (_) {
+            }
+        },
+        refresh: () => hardRefresh(),
+    }), [terminal]);
 
     useEffect(() => {
         window.addEventListener('resize', handleWindowResize);
@@ -49,7 +101,10 @@ export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHT
     }, []);
 
     function handleWindowResize() {
+        if (!isVisibleRef.current) return;
         fitAddonRef.current?.fit();
+        if (terminal) scheduleNotify(terminal.cols, terminal.rows);
+        hardRefresh();
     }
 
     function getCookie(name: string) {
@@ -63,6 +118,50 @@ export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHT
         return getCookie("rightClickCopyPaste") === "true"
     }
 
+
+
+    function setupWebSocketListeners(ws: WebSocket, cols: number, rows: number) {
+        ws.addEventListener('open', () => {
+            
+            ws.send(JSON.stringify({type: 'connectToHost', data: {cols, rows, hostConfig}}));
+            terminal.onData((data) => {
+                ws.send(JSON.stringify({type: 'input', data}));
+            });
+            
+            pingIntervalRef.current = setInterval(() => {
+                if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({type: 'ping'}));
+                }
+            }, 30000);
+
+
+        });
+
+        ws.addEventListener('message', (event) => {
+            try {
+                const msg = JSON.parse(event.data);
+                if (msg.type === 'data') terminal.write(msg.data);
+                else if (msg.type === 'error') terminal.writeln(`\r\n[${t('terminal.error')}] ${msg.message}`);
+                else if (msg.type === 'connected') {
+                } else if (msg.type === 'disconnected') {
+                    wasDisconnectedBySSH.current = true;
+                    terminal.writeln(`\r\n[${msg.message || t('terminal.disconnected')}]`);
+                }
+            } catch (error) {
+            }
+        });
+
+        ws.addEventListener('close', () => {
+            if (!wasDisconnectedBySSH.current) {
+                terminal.writeln(`\r\n[${t('terminal.connectionClosed')}]`);
+            }
+        });
+        
+        ws.addEventListener('error', () => {
+            terminal.writeln(`\r\n[${t('terminal.connectionError')}]`);
+        });
+    }
+
     async function writeTextToClipboard(text: string): Promise<void> {
         try {
             if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -104,10 +203,7 @@ export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHT
             scrollback: 10000,
             fontSize: 14,
             fontFamily: '"JetBrains Mono Nerd Font", "MesloLGS NF", "FiraCode Nerd Font", "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace',
-            theme: {
-                background: '#09090b',
-                foreground: '#f7f7f7',
-            },
+            theme: {background: '#18181b', foreground: '#f7f7f7'},
             allowTransparency: true,
             convertEol: true,
             windowsMode: false,
@@ -145,90 +241,61 @@ export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHT
                     }
                 } else {
                     const pasteText = await readTextFromClipboard();
-                    if (pasteText) {
-                        terminal.paste(pasteText);
-                    }
+                    if (pasteText) terminal.paste(pasteText);
                 }
             } catch (_) {
             }
         };
-        if (element) {
-            element.addEventListener('contextmenu', handleContextMenu);
-        }
+        element?.addEventListener('contextmenu', handleContextMenu);
 
         const resizeObserver = new ResizeObserver(() => {
             if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
             resizeTimeout.current = setTimeout(() => {
+                if (!isVisibleRef.current) return;
                 fitAddonRef.current?.fit();
-                const cols = terminal.cols;
-                const rows = terminal.rows;
-                if (webSocketRef.current?.readyState === WebSocket.OPEN) {
-                    webSocketRef.current.send(JSON.stringify({type: 'resize', data: {cols, rows}}));
-                }
+                if (terminal) scheduleNotify(terminal.cols, terminal.rows);
+                hardRefresh();
             }, 100);
         });
 
         resizeObserver.observe(xtermRef.current);
-        setTimeout(() => {
-            fitAddon.fit();
-            setVisible(true);
 
-            const cols = terminal.cols;
-            const rows = terminal.rows;
-            const wsUrl = window.location.hostname === 'localhost'
-                ? 'ws://localhost:8082'
-                : `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}/ssh/websocket/`;
-
-            const ws = new WebSocket(wsUrl);
-            webSocketRef.current = ws;
-            wasDisconnectedBySSH.current = false;
-
-            ws.addEventListener('open', () => {
-                ws.send(JSON.stringify({type: 'connectToHost', data: {cols, rows, hostConfig}}));
-                terminal.onData((data) => {
-                    ws.send(JSON.stringify({type: 'input', data}));
-                });
-
-                pingIntervalRef.current = setInterval(() => {
-                    if (ws.readyState === WebSocket.OPEN) {
-                        ws.send(JSON.stringify({type: 'ping'}));
+        const readyFonts = (document as any).fonts?.ready instanceof Promise ? (document as any).fonts.ready : Promise.resolve();
+        readyFonts.then(() => {
+            setTimeout(() => {
+                fitAddon.fit();
+                setTimeout(() => {
+                    fitAddon.fit();
+                    if (terminal) scheduleNotify(terminal.cols, terminal.rows);
+                    hardRefresh();
+                    setVisible(true);
+                    if (terminal && !splitScreen) {
+                        terminal.focus();
                     }
-                }, 30000);
-            });
+                }, 0);
 
-            ws.addEventListener('message', (event) => {
-                try {
-                    const msg = JSON.parse(event.data);
-                    if (msg.type === 'data') {
-                        terminal.write(msg.data);
-                    } else if (msg.type === 'error') {
-                        terminal.writeln(`\r\n[ERROR] ${msg.message}`);
-                    } else if (msg.type === 'connected') {
-                    } else if (msg.type === 'disconnected') {
-                        wasDisconnectedBySSH.current = true;
-                        terminal.writeln(`\r\n[${msg.message || 'Disconnected'}]`);
-                    }
-                } catch (error) {
-                    console.error('Error parsing WebSocket message:', error);
-                }
-            });
+                const cols = terminal.cols;
+                const rows = terminal.rows;
 
-            ws.addEventListener('close', () => {
-                if (!wasDisconnectedBySSH.current) {
-                    terminal.writeln('\r\n[Connection closed]');
-                }
-            });
+                const isDev = process.env.NODE_ENV === 'development' &&
+                    (window.location.port === '3000' || window.location.port === '5173' || window.location.port === '');
 
-            ws.addEventListener('error', () => {
-                terminal.writeln('\r\n[Connection error]');
-            });
-        }, 300);
+                const wsUrl = isDev
+                    ? 'ws://localhost:8082'
+                    : `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}/ssh/websocket/`;
+
+                const ws = new WebSocket(wsUrl);
+                webSocketRef.current = ws;
+                wasDisconnectedBySSH.current = false;
+
+                setupWebSocketListeners(ws, cols, rows);
+            }, 300);
+        });
 
         return () => {
             resizeObserver.disconnect();
-            if (element) {
-                element.removeEventListener('contextmenu', handleContextMenu);
-            }
+            element?.removeEventListener('contextmenu', handleContextMenu);
+            if (notifyTimerRef.current) clearTimeout(notifyTimerRef.current);
             if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
             if (pingIntervalRef.current) {
                 clearInterval(pingIntervalRef.current);
@@ -240,22 +307,44 @@ export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHT
 
     useEffect(() => {
         if (isVisible && fitAddonRef.current) {
-            fitAddonRef.current.fit();
+            setTimeout(() => {
+                fitAddonRef.current?.fit();
+                if (terminal) scheduleNotify(terminal.cols, terminal.rows);
+                hardRefresh();
+                if (terminal && !splitScreen) {
+                    terminal.focus();
+                }
+            }, 0);
+            
+            if (terminal && !splitScreen) {
+                setTimeout(() => {
+                    terminal.focus();
+                }, 100);
+            }
         }
-    }, [isVisible]);
+    }, [isVisible, splitScreen, terminal]);
+
+    useEffect(() => {
+        if (!fitAddonRef.current) return;
+        setTimeout(() => {
+            fitAddonRef.current?.fit();
+            if (terminal) scheduleNotify(terminal.cols, terminal.rows);
+            hardRefresh();
+            if (terminal && !splitScreen && isVisible) {
+                terminal.focus();
+            }
+        }, 0);
+    }, [splitScreen, isVisible, terminal]);
 
     return (
-        <div
-            ref={xtermRef}
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                marginLeft: 2,
-                opacity: visible && isVisible ? 1 : 0,
-                overflow: 'hidden',
+        <div 
+            ref={xtermRef} 
+            className="h-full w-full m-1"
+            style={{opacity: visible && isVisible ? 1 : 0, overflow: 'hidden'}}
+            onClick={() => {
+                if (terminal && !splitScreen) {
+                    terminal.focus();
+                }
             }}
         />
     );

src/ui/Apps/Tunnel/Tunnel.tsx

@@ -1,11 +1,6 @@
 import React, {useState, useEffect, useCallback} from "react";
-import {SSHTunnelSidebar} from "@/apps/SSH/Tunnel/SSHTunnelSidebar.tsx";
-import {SSHTunnelViewer} from "@/apps/SSH/Tunnel/SSHTunnelViewer.tsx";
-import {getSSHHosts, getTunnelStatuses, connectTunnel, disconnectTunnel, cancelTunnel} from "@/apps/SSH/ssh-axios";
-
-interface ConfigEditorProps {
-    onSelectView: (view: string) => void;
-}
+import {TunnelViewer} from "@/ui/Apps/Tunnel/TunnelViewer.tsx";
+import {getSSHHosts, getTunnelStatuses, connectTunnel, disconnectTunnel, cancelTunnel} from "@/ui/main-axios.ts";
 
 interface TunnelConnection {
     sourcePort: number;
@@ -32,7 +27,7 @@ interface SSHHost {
     keyType?: string;
     enableTerminal: boolean;
     enableTunnel: boolean;
-    enableConfigEditor: boolean;
+    enableFileManager: boolean;
     defaultPath: string;
     tunnelConnections: TunnelConnection[];
     createdAt: string;
@@ -49,31 +44,89 @@ interface TunnelStatus {
     retryExhausted?: boolean;
 }
 
-export function SSHTunnel({onSelectView}: ConfigEditorProps): React.ReactElement {
-    const [hosts, setHosts] = useState<SSHHost[]>([]);
+interface SSHTunnelProps {
+    filterHostKey?: string;
+}
+
+export function Tunnel({filterHostKey}: SSHTunnelProps): React.ReactElement {
+    const [allHosts, setAllHosts] = useState<SSHHost[]>([]);
+    const [visibleHosts, setVisibleHosts] = useState<SSHHost[]>([]);
     const [tunnelStatuses, setTunnelStatuses] = useState<Record<string, TunnelStatus>>({});
     const [tunnelActions, setTunnelActions] = useState<Record<string, boolean>>({});
 
-    const fetchHosts = useCallback(async () => {
-        try {
-            const hostsData = await getSSHHosts();
-            setHosts(hostsData);
-        } catch (err) {
+    const prevVisibleHostRef = React.useRef<SSHHost | null>(null);
+
+    const haveTunnelConnectionsChanged = (a: TunnelConnection[] = [], b: TunnelConnection[] = []): boolean => {
+        if (a.length !== b.length) return true;
+        for (let i = 0; i < a.length; i++) {
+            const x = a[i];
+            const y = b[i];
+            if (
+                x.sourcePort !== y.sourcePort ||
+                x.endpointPort !== y.endpointPort ||
+                x.endpointHost !== y.endpointHost ||
+                x.maxRetries !== y.maxRetries ||
+                x.retryInterval !== y.retryInterval ||
+                x.autoStart !== y.autoStart
+            ) {
+                return true;
+            }
         }
-    }, []);
+        return false;
+    };
+
+    const fetchHosts = useCallback(async () => {
+        const hostsData = await getSSHHosts();
+        setAllHosts(hostsData);
+        const nextVisible = filterHostKey
+            ? hostsData.filter(h => {
+                const key = (h.name && h.name.trim() !== '') ? h.name : `${h.username}@${h.ip}`;
+                return key === filterHostKey;
+            })
+            : hostsData;
+
+        const prev = prevVisibleHostRef.current;
+        const curr = nextVisible[0] ?? null;
+        let changed = false;
+        if (!prev && curr) changed = true;
+        else if (prev && !curr) changed = true;
+        else if (prev && curr) {
+            if (
+                prev.id !== curr.id ||
+                prev.name !== curr.name ||
+                prev.ip !== curr.ip ||
+                prev.port !== curr.port ||
+                prev.username !== curr.username ||
+                haveTunnelConnectionsChanged(prev.tunnelConnections, curr.tunnelConnections)
+            ) {
+                changed = true;
+            }
+        }
+
+        if (changed) {
+            setVisibleHosts(nextVisible);
+            prevVisibleHostRef.current = curr;
+        }
+    }, [filterHostKey]);
 
     const fetchTunnelStatuses = useCallback(async () => {
-        try {
-            const statusData = await getTunnelStatuses();
-            setTunnelStatuses(statusData);
-        } catch (err) {
-        }
+        const statusData = await getTunnelStatuses();
+        setTunnelStatuses(statusData);
     }, []);
 
     useEffect(() => {
         fetchHosts();
-        const interval = setInterval(fetchHosts, 10000);
-        return () => clearInterval(interval);
+        const interval = setInterval(fetchHosts, 5000);
+
+        const handleHostsChanged = () => {
+            fetchHosts();
+        };
+        window.addEventListener('ssh-hosts:changed', handleHostsChanged as EventListener);
+
+        return () => {
+            clearInterval(interval);
+            window.removeEventListener('ssh-hosts:changed', handleHostsChanged as EventListener);
+        };
     }, [fetchHosts]);
 
     useEffect(() => {
@@ -90,7 +143,7 @@ export function SSHTunnel({onSelectView}: ConfigEditorProps): React.ReactElement
 
         try {
             if (action === 'connect') {
-                const endpointHost = hosts.find(h =>
+                const endpointHost = allHosts.find(h =>
                     h.name === tunnel.endpointHost ||
                     `${h.username}@${h.ip}` === tunnel.endpointHost
                 );
@@ -141,20 +194,11 @@ export function SSHTunnel({onSelectView}: ConfigEditorProps): React.ReactElement
     };
 
     return (
-        <div className="flex h-screen w-full">
-            <div className="w-64 flex-shrink-0">
-                <SSHTunnelSidebar
-                    onSelectView={onSelectView}
-                />
-            </div>
-            <div className="flex-1 overflow-auto">
-                <SSHTunnelViewer
-                    hosts={hosts}
-                    tunnelStatuses={tunnelStatuses}
-                    tunnelActions={tunnelActions}
-                    onTunnelAction={handleTunnelAction}
-                />
-            </div>
-        </div>
+        <TunnelViewer
+            hosts={visibleHosts}
+            tunnelStatuses={tunnelStatuses}
+            tunnelActions={tunnelActions}
+            onTunnelAction={handleTunnelAction}
+        />
     );
 }

src/ui/Apps/Tunnel/TunnelObject.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {Button} from "@/components/ui/button.tsx";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
+import {useTranslation} from 'react-i18next';
 import {
     Loader2,
     Pin,
@@ -53,7 +54,7 @@ interface SSHHost {
     authType: string;
     enableTerminal: boolean;
     enableTunnel: boolean;
-    enableConfigEditor: boolean;
+    enableFileManager: boolean;
     defaultPath: string;
     tunnelConnections: TunnelConnection[];
     createdAt: string;
@@ -75,14 +76,19 @@ interface SSHTunnelObjectProps {
     tunnelStatuses: Record<string, TunnelStatus>;
     tunnelActions: Record<string, boolean>;
     onTunnelAction: (action: 'connect' | 'disconnect' | 'cancel', host: SSHHost, tunnelIndex: number) => Promise<any>;
+    compact?: boolean;
+    bare?: boolean;
 }
 
-export function SSHTunnelObject({
-                                    host,
-                                    tunnelStatuses,
-                                    tunnelActions,
-                                    onTunnelAction
-                                }: SSHTunnelObjectProps): React.ReactElement {
+export function TunnelObject({
+                                 host,
+                                 tunnelStatuses,
+                                 tunnelActions,
+                                 onTunnelAction,
+                                 compact = false,
+                                 bare = false
+                             }: SSHTunnelObjectProps): React.ReactElement {
+    const {t} = useTranslation();
 
     const getTunnelStatus = (tunnelIndex: number): TunnelStatus | undefined => {
         const tunnel = host.tunnelConnections[tunnelIndex];
@@ -93,7 +99,7 @@ export function SSHTunnelObject({
     const getTunnelStatusDisplay = (status: TunnelStatus | undefined) => {
         if (!status) return {
             icon: <WifiOff className="h-4 w-4"/>,
-            text: 'Unknown',
+            text: t('tunnels.unknown'),
             color: 'text-muted-foreground',
             bgColor: 'bg-muted/50',
             borderColor: 'border-border'
@@ -105,7 +111,7 @@ export function SSHTunnelObject({
             case 'CONNECTED':
                 return {
                     icon: <Wifi className="h-4 w-4"/>,
-                    text: 'Connected',
+                    text: t('tunnels.connected'),
                     color: 'text-green-600 dark:text-green-400',
                     bgColor: 'bg-green-500/10 dark:bg-green-400/10',
                     borderColor: 'border-green-500/20 dark:border-green-400/20'
@@ -113,7 +119,7 @@ export function SSHTunnelObject({
             case 'CONNECTING':
                 return {
                     icon: <Loader2 className="h-4 w-4 animate-spin"/>,
-                    text: 'Connecting...',
+                    text: t('tunnels.connecting'),
                     color: 'text-blue-600 dark:text-blue-400',
                     bgColor: 'bg-blue-500/10 dark:bg-blue-400/10',
                     borderColor: 'border-blue-500/20 dark:border-blue-400/20'
@@ -121,7 +127,7 @@ export function SSHTunnelObject({
             case 'DISCONNECTING':
                 return {
                     icon: <Loader2 className="h-4 w-4 animate-spin"/>,
-                    text: 'Disconnecting...',
+                    text: t('tunnels.disconnecting'),
                     color: 'text-orange-600 dark:text-orange-400',
                     bgColor: 'bg-orange-500/10 dark:bg-orange-400/10',
                     borderColor: 'border-orange-500/20 dark:border-orange-400/20'
@@ -129,7 +135,7 @@ export function SSHTunnelObject({
             case 'DISCONNECTED':
                 return {
                     icon: <WifiOff className="h-4 w-4"/>,
-                    text: 'Disconnected',
+                    text: t('tunnels.disconnected'),
                     color: 'text-muted-foreground',
                     bgColor: 'bg-muted/30',
                     borderColor: 'border-border'
@@ -145,7 +151,7 @@ export function SSHTunnelObject({
             case 'FAILED':
                 return {
                     icon: <AlertCircle className="h-4 w-4"/>,
-                    text: status.reason || 'Error',
+                    text: status.reason || t('tunnels.error'),
                     color: 'text-red-600 dark:text-red-400',
                     bgColor: 'bg-red-500/10 dark:bg-red-400/10',
                     borderColor: 'border-red-500/20 dark:border-red-400/20'
@@ -161,26 +167,166 @@ export function SSHTunnelObject({
         }
     };
 
+    if (bare) {
+        return (
+            <div className="w-full min-w-0">
+                <div className="space-y-3">
+                    {host.tunnelConnections && host.tunnelConnections.length > 0 ? (
+                        <div className="space-y-3">
+                            {host.tunnelConnections.map((tunnel, tunnelIndex) => {
+                                const status = getTunnelStatus(tunnelIndex);
+                                const statusDisplay = getTunnelStatusDisplay(status);
+                                const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
+                                const isActionLoading = tunnelActions[tunnelName];
+                                const statusValue = status?.status?.toUpperCase() || 'DISCONNECTED';
+                                const isConnected = statusValue === 'CONNECTED';
+                                const isConnecting = statusValue === 'CONNECTING';
+                                const isDisconnecting = statusValue === 'DISCONNECTING';
+                                const isRetrying = statusValue === 'RETRYING';
+                                const isWaiting = statusValue === 'WAITING';
+
+                                return (
+                                    <div key={tunnelIndex}
+                                         className={`border rounded-lg p-3 min-w-0 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}>
+                                        <div className="flex items-start justify-between gap-2">
+                                            <div className="flex items-start gap-2 flex-1 min-w-0">
+                                                <span className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}>
+                                                    {statusDisplay.icon}
+                                                </span>
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="text-sm font-medium break-words">
+                                                        {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
+                                                    </div>
+                                                    <div className={`text-xs ${statusDisplay.color} font-medium`}>
+                                                        {statusDisplay.text}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="flex flex-col items-end gap-1 flex-shrink-0 min-w-[120px]">
+                                                {!isActionLoading ? (
+                                                    <div className="flex flex-col gap-1">
+                                                        {isConnected ? (
+                                                            <>
+                                                                <Button
+                                                                    size="sm"
+                                                                    variant="outline"
+                                                                    onClick={() => onTunnelAction('disconnect', host, tunnelIndex)}
+                                                                    className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
+                                                                >
+                                                                    <Square className="h-3 w-3 mr-1"/>
+                                                                    {t('tunnels.disconnect')}
+                                                                </Button>
+                                                            </>
+                                                        ) : isRetrying || isWaiting ? (
+                                                            <Button
+                                                                size="sm"
+                                                                variant="outline"
+                                                                onClick={() => onTunnelAction('cancel', host, tunnelIndex)}
+                                                                className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
+                                                            >
+                                                                <X className="h-3 w-3 mr-1"/>
+                                                                {t('tunnels.cancel')}
+                                                            </Button>
+                                                        ) : (
+                                                            <Button
+                                                                size="sm"
+                                                                variant="outline"
+                                                                onClick={() => onTunnelAction('connect', host, tunnelIndex)}
+                                                                disabled={isConnecting || isDisconnecting}
+                                                                className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
+                                                            >
+                                                                <Play className="h-3 w-3 mr-1"/>
+                                                                {t('tunnels.connect')}
+                                                            </Button>
+                                                        )}
+                                                    </div>
+                                                ) : (
+                                                    <Button
+                                                        size="sm"
+                                                        variant="outline"
+                                                        disabled
+                                                        className="h-7 px-2 text-muted-foreground border-border text-xs"
+                                                    >
+                                                        <Loader2 className="h-3 w-3 mr-1 animate-spin"/>
+                                                        {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')}
+                                                    </Button>
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && (
+                                            <div
+                                                className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
+                                                <div className="font-medium mb-1">{t('tunnels.error')}:</div>
+                                                {status.reason}
+                                                {status.reason && status.reason.includes('Max retries exhausted') && (
+                                                    <>
+                                                        <div
+                                                            className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
+                                                            {t('tunnels.checkDockerLogs')} <a
+                                                            href="https://discord.com/invite/jVQGdvHDrf" target="_blank"
+                                                            rel="noopener noreferrer"
+                                                            className="underline text-blue-600 dark:text-blue-400">Discord</a> or
+                                                            create a <a
+                                                            href="https://github.com/LukeGus/Termix/issues/new"
+                                                            target="_blank" rel="noopener noreferrer"
+                                                            className="underline text-blue-600 dark:text-blue-400">GitHub
+                                                            issue</a> for help.
+                                                        </div>
+                                                    </>
+                                                )}
+                                            </div>
+                                        )}
+
+                                        {(statusValue === 'RETRYING' || statusValue === 'WAITING') && status?.retryCount && status?.maxRetries && (
+                                            <div
+                                                className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
+                                                <div className="font-medium mb-1">
+                                                    {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')}
+                                                </div>
+                                                <div>
+                                                    {t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })}
+                                                    {status.nextRetryIn && (
+                                                        <span> • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })}</span>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    ) : (
+                        <div className="text-center py-4 text-muted-foreground">
+                            <Network className="h-8 w-8 mx-auto mb-2 opacity-50"/>
+                            <p className="text-sm">{t('tunnels.noTunnelConnections')}</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
     return (
         <Card className="w-full bg-card border-border shadow-sm hover:shadow-md transition-shadow relative group p-0">
             <div className="p-4">
-                {/* Host Header */}
-                <div className="flex items-center justify-between gap-2 mb-3">
-                    <div className="flex items-center gap-2 flex-1 min-w-0">
-                        {host.pin && <Pin className="h-4 w-4 text-yellow-500 flex-shrink-0"/>}
-                        <div className="flex-1 min-w-0">
-                            <h3 className="font-semibold text-card-foreground truncate">
-                                {host.name || `${host.username}@${host.ip}`}
-                            </h3>
-                            <p className="text-xs text-muted-foreground truncate">
-                                {host.ip}:{host.port} • {host.username}
-                            </p>
+                {!compact && (
+                    <div className="flex items-center justify-between gap-2 mb-3">
+                        <div className="flex items-center gap-2 flex-1 min-w-0">
+                            {host.pin && <Pin className="h-4 w-4 text-yellow-500 flex-shrink-0"/>}
+                            <div className="flex-1 min-w-0">
+                                <h3 className="font-semibold text-card-foreground truncate">
+                                    {host.name || `${host.username}@${host.ip}`}
+                                </h3>
+                                <p className="text-xs text-muted-foreground truncate">
+                                    {host.ip}:{host.port} • {host.username}
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </div>
+                )}
 
-                {/* Tags */}
-                {host.tags && host.tags.length > 0 && (
+                {!compact && host.tags && host.tags.length > 0 && (
                     <div className="flex flex-wrap gap-1 mb-3">
                         {host.tags.slice(0, 3).map((tag, index) => (
                             <Badge key={index} variant="secondary" className="text-xs px-1 py-0">
@@ -196,14 +342,15 @@ export function SSHTunnelObject({
                     </div>
                 )}
 
-                <Separator className="mb-3"/>
+                {!compact && <Separator className="mb-3"/>}
 
-                {/* Tunnel Connections */}
                 <div className="space-y-3">
-                    <h4 className="text-sm font-medium text-card-foreground flex items-center gap-2">
-                        <Network className="h-4 w-4"/>
-                        Tunnel Connections ({host.tunnelConnections.length})
-                    </h4>
+                    {!compact && (
+                        <h4 className="text-sm font-medium text-card-foreground flex items-center gap-2">
+                            <Network className="h-4 w-4"/>
+                            {t('tunnels.tunnelConnections')} ({host.tunnelConnections.length})
+                        </h4>
+                    )}
                     {host.tunnelConnections && host.tunnelConnections.length > 0 ? (
                         <div className="space-y-3">
                             {host.tunnelConnections.map((tunnel, tunnelIndex) => {
@@ -221,7 +368,6 @@ export function SSHTunnelObject({
                                 return (
                                     <div key={tunnelIndex}
                                          className={`border rounded-lg p-3 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}>
-                                        {/* Tunnel Header */}
                                         <div className="flex items-start justify-between gap-2">
                                             <div className="flex items-start gap-2 flex-1 min-w-0">
                                                 <span className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}>
@@ -229,7 +375,7 @@ export function SSHTunnelObject({
                                                 </span>
                                                 <div className="flex-1 min-w-0">
                                                     <div className="text-sm font-medium break-words">
-                                                        Port {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
+                                                        {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
                                                     </div>
                                                     <div className={`text-xs ${statusDisplay.color} font-medium`}>
                                                         {statusDisplay.text}
@@ -237,13 +383,6 @@ export function SSHTunnelObject({
                                                 </div>
                                             </div>
                                             <div className="flex items-center gap-1 flex-shrink-0">
-                                                {tunnel.autoStart && (
-                                                    <Badge variant="outline" className="text-xs px-2 py-1">
-                                                        <Zap className="h-3 w-3 mr-1"/>
-                                                        Auto
-                                                    </Badge>
-                                                )}
-                                                {/* Action Buttons */}
                                                 {!isActionLoading && (
                                                     <div className="flex flex-col gap-1">
                                                         {isConnected ? (
@@ -255,7 +394,7 @@ export function SSHTunnelObject({
                                                                     className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
                                                                 >
                                                                     <Square className="h-3 w-3 mr-1"/>
-                                                                    Disconnect
+                                                                    {t('tunnels.disconnect')}
                                                                 </Button>
                                                             </>
                                                         ) : isRetrying || isWaiting ? (
@@ -266,7 +405,7 @@ export function SSHTunnelObject({
                                                                 className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
                                                             >
                                                                 <X className="h-3 w-3 mr-1"/>
-                                                                Cancel
+                                                                {t('tunnels.cancel')}
                                                             </Button>
                                                         ) : (
                                                             <Button
@@ -277,7 +416,7 @@ export function SSHTunnelObject({
                                                                 className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
                                                             >
                                                                 <Play className="h-3 w-3 mr-1"/>
-                                                                Connect
+                                                                {t('tunnels.connect')}
                                                             </Button>
                                                         )}
                                                     </div>
@@ -290,23 +429,22 @@ export function SSHTunnelObject({
                                                         className="h-7 px-2 text-muted-foreground border-border text-xs"
                                                     >
                                                         <Loader2 className="h-3 w-3 mr-1 animate-spin"/>
-                                                        {isConnected ? 'Disconnecting...' : isRetrying || isWaiting ? 'Canceling...' : 'Connecting...'}
+                                                        {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')}
                                                     </Button>
                                                 )}
                                             </div>
                                         </div>
 
-                                        {/* Error/Status Reason */}
                                         {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && (
                                             <div
                                                 className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
-                                                <div className="font-medium mb-1">Error:</div>
+                                                <div className="font-medium mb-1">{t('tunnels.error')}:</div>
                                                 {status.reason}
                                                 {status.reason && status.reason.includes('Max retries exhausted') && (
                                                     <>
                                                         <div
                                                             className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
-                                                            Check your Docker logs for the error reason, join the <a
+                                                            {t('tunnels.checkDockerLogs')} <a
                                                             href="https://discord.com/invite/jVQGdvHDrf" target="_blank"
                                                             rel="noopener noreferrer"
                                                             className="underline text-blue-600 dark:text-blue-400">Discord</a> or
@@ -321,17 +459,16 @@ export function SSHTunnelObject({
                                             </div>
                                         )}
 
-                                        {/* Retry Info */}
                                         {(statusValue === 'RETRYING' || statusValue === 'WAITING') && status?.retryCount && status?.maxRetries && (
                                             <div
                                                 className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
                                                 <div className="font-medium mb-1">
-                                                    {statusValue === 'WAITING' ? 'Waiting for retry' : 'Retrying connection'}
+                                                    {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')}
                                                 </div>
                                                 <div>
-                                                    Attempt {status.retryCount} of {status.maxRetries}
+                                                    {t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })}
                                                     {status.nextRetryIn && (
-                                                        <span> • Next retry in {status.nextRetryIn} seconds</span>
+                                                        <span> • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })}</span>
                                                     )}
                                                 </div>
                                             </div>
@@ -343,7 +480,7 @@ export function SSHTunnelObject({
                     ) : (
                         <div className="text-center py-4 text-muted-foreground">
                             <Network className="h-8 w-8 mx-auto mb-2 opacity-50"/>
-                            <p className="text-sm">No tunnel connections configured</p>
+                            <p className="text-sm">{t('tunnels.noTunnelConnections')}</p>
                         </div>
                     )}
                 </div>

src/ui/Apps/Tunnel/TunnelViewer.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import {TunnelObject} from "./TunnelObject.tsx";
+import {useTranslation} from 'react-i18next';
+
+interface TunnelConnection {
+    sourcePort: number;
+    endpointPort: number;
+    endpointHost: string;
+    maxRetries: number;
+    retryInterval: number;
+    autoStart: boolean;
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableFileManager: boolean;
+    defaultPath: string;
+    tunnelConnections: TunnelConnection[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface TunnelStatus {
+    status: string;
+    reason?: string;
+    errorType?: string;
+    retryCount?: number;
+    maxRetries?: number;
+    nextRetryIn?: number;
+    retryExhausted?: boolean;
+}
+
+interface SSHTunnelViewerProps {
+    hosts: SSHHost[];
+    tunnelStatuses: Record<string, TunnelStatus>;
+    tunnelActions: Record<string, boolean>;
+    onTunnelAction: (action: 'connect' | 'disconnect' | 'cancel', host: SSHHost, tunnelIndex: number) => Promise<any>;
+}
+
+export function TunnelViewer({
+                                 hosts = [],
+                                 tunnelStatuses = {},
+                                 tunnelActions = {},
+                                 onTunnelAction
+                             }: SSHTunnelViewerProps): React.ReactElement {
+    const {t} = useTranslation();
+    const activeHost: SSHHost | undefined = Array.isArray(hosts) && hosts.length > 0 ? hosts[0] : undefined;
+
+    if (!activeHost || !activeHost.tunnelConnections || activeHost.tunnelConnections.length === 0) {
+        return (
+            <div className="w-full h-full flex flex-col items-center justify-center text-center p-3">
+                <h3 className="text-lg font-semibold text-foreground mb-2">{t('tunnels.noSshTunnels')}</h3>
+                <p className="text-muted-foreground max-w-md">
+                    {t('tunnels.createFirstTunnelMessage')}
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="w-full h-full flex flex-col overflow-hidden p-3 min-h-0">
+            <div className="w-full flex-shrink-0 mb-2">
+                <h1 className="text-xl font-semibold text-foreground">{t('tunnels.title')}</h1>
+            </div>
+            <div className="min-h-0 flex-1 overflow-auto pr-1">
+                <div
+                    className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-3 auto-rows-min content-start w-full">
+                    {activeHost.tunnelConnections.map((t, idx) => (
+                        <TunnelObject
+                            key={`tunnel-${activeHost.id}-${t.endpointHost}-${t.sourcePort}-${t.endpointPort}`}
+                            host={{...activeHost, tunnelConnections: [activeHost.tunnelConnections[idx]]}}
+                            tunnelStatuses={tunnelStatuses}
+                            tunnelActions={tunnelActions}
+                            onTunnelAction={(action, _host, _index) => onTunnelAction(action, activeHost, idx)}
+                            compact
+                            bare
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

src/ui/Homepage/Homepage.tsx

@@ -0,0 +1,170 @@
+import React, {useEffect, useState} from "react";
+import {HomepageAuth} from "@/ui/Homepage/HomepageAuth.tsx";
+import {HomepageUpdateLog} from "@/ui/Homepage/HompageUpdateLog.tsx";
+import {HomepageAlertManager} from "@/ui/Homepage/HomepageAlertManager.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import { getUserInfo, getDatabaseHealth } from "@/ui/main-axios.ts";
+import {useTranslation} from "react-i18next";
+
+interface HomepageProps {
+    onSelectView: (view: string) => void;
+    isAuthenticated: boolean;
+    authLoading: boolean;
+    onAuthSuccess: (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => void;
+    isTopbarOpen?: boolean;
+}
+
+function getCookie(name: string) {
+    return document.cookie.split('; ').reduce((r, v) => {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+    }, "");
+}
+
+function setCookie(name: string, value: string, days = 7) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
+}
+
+export function Homepage({
+                             onSelectView,
+                             isAuthenticated,
+                             authLoading,
+                             onAuthSuccess,
+                             isTopbarOpen = true
+                         }: HomepageProps): React.ReactElement {
+    const {t} = useTranslation();
+    const [loggedIn, setLoggedIn] = useState(isAuthenticated);
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [username, setUsername] = useState<string | null>(null);
+    const [userId, setUserId] = useState<string | null>(null);
+    const [dbError, setDbError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoggedIn(isAuthenticated);
+    }, [isAuthenticated]);
+
+    useEffect(() => {
+        if (isAuthenticated) {
+            const jwt = getCookie("jwt");
+            if (jwt) {
+                Promise.all([
+                    getUserInfo(),
+                    getDatabaseHealth()
+                ])
+                    .then(([meRes]) => {
+                        setIsAdmin(!!meRes.is_admin);
+                        setUsername(meRes.username || null);
+                        setUserId(meRes.userId || null);
+                        setDbError(null);
+                    })
+                    .catch((err) => {
+                        setIsAdmin(false);
+                        setUsername(null);
+                        setUserId(null);
+                        if (err?.response?.data?.error?.includes("Database")) {
+                            setDbError("Could not connect to the database. Please try again later.");
+                        } else {
+                            setDbError(null);
+                        }
+                    });
+            }
+        }
+    }, [isAuthenticated]);
+
+    const topOffset = isTopbarOpen ? 66 : 0;
+    const topPadding = isTopbarOpen ? 66 : 0;
+
+    return (
+        <div
+            className="w-full min-h-svh relative transition-[padding-top] duration-300 ease-in-out"
+            style={{ paddingTop: `${topPadding}px` }}>
+            {!loggedIn ? (
+                <div 
+                    className="absolute left-0 w-full flex items-center justify-center transition-all duration-300 ease-in-out"
+                    style={{ 
+                        top: `${topOffset}px`, 
+                        height: `calc(100% - ${topOffset}px)` 
+                    }}>
+                    <HomepageAuth
+                        setLoggedIn={setLoggedIn}
+                        setIsAdmin={setIsAdmin}
+                        setUsername={setUsername}
+                        setUserId={setUserId}
+                        loggedIn={loggedIn}
+                        authLoading={authLoading}
+                        dbError={dbError}
+                        setDbError={setDbError}
+                        onAuthSuccess={onAuthSuccess}
+                    />
+                </div>
+            ) : (
+                <div 
+                    className="absolute left-0 w-full flex items-center justify-center transition-all duration-300 ease-in-out"
+                    style={{ 
+                        top: `${topOffset}px`, 
+                        height: `calc(100% - ${topOffset}px)` 
+                    }}>
+                    <div className="flex flex-row items-center justify-center gap-8 relative z-10">
+                        <div className="flex flex-col items-center gap-6 w-[400px]">
+                            <div
+                                className="text-center bg-[#18181b] border-2 border-[#303032] rounded-lg p-6 w-full shadow-lg">
+                                <h3 className="text-xl font-bold mb-3 text-white">{t('homepage.loggedInTitle')}</h3>
+                                <p className="text-gray-300 leading-relaxed">
+                                    {t('homepage.loggedInMessage')}
+                                </p>
+                            </div>
+
+                            <div className="flex flex-row items-center gap-3">
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
+                                    onClick={() => window.open('https://github.com/LukeGus/Termix', '_blank')}
+                                >
+                                    GitHub
+                                </Button>
+                                <div className="w-px h-4 bg-[#303032]"></div>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
+                                    onClick={() => window.open('https://github.com/LukeGus/Termix/issues/new', '_blank')}
+                                >
+                                    Feedback
+                                </Button>
+                                <div className="w-px h-4 bg-[#303032]"></div>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
+                                    onClick={() => window.open('https://discord.com/invite/jVQGdvHDrf', '_blank')}
+                                >
+                                    Discord
+                                </Button>
+                                <div className="w-px h-4 bg-[#303032]"></div>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
+                                    onClick={() => window.open('https://github.com/sponsors/LukeGus', '_blank')}
+                                >
+                                    Donate
+                                </Button>
+                            </div>
+                        </div>
+
+                        <HomepageUpdateLog
+                            loggedIn={loggedIn}
+                        />
+                    </div>
+                </div>
+            )}
+
+            <HomepageAlertManager
+                userId={userId}
+                loggedIn={loggedIn}
+            />
+        </div>
+    );
+}

src/ui/Homepage/HomepageAlertCard.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Badge} from "@/components/ui/badge.tsx";
+import {X, ExternalLink, AlertTriangle, Info, CheckCircle, AlertCircle} from "lucide-react";
+import {useTranslation} from "react-i18next";
+
+interface TermixAlert {
+    id: string;
+    title: string;
+    message: string;
+    expiresAt: string;
+    priority?: 'low' | 'medium' | 'high' | 'critical';
+    type?: 'info' | 'warning' | 'error' | 'success';
+    actionUrl?: string;
+    actionText?: string;
+}
+
+interface AlertCardProps {
+    alert: TermixAlert;
+    onDismiss: (alertId: string) => void;
+    onClose: () => void;
+}
+
+const getAlertIcon = (type?: string) => {
+    switch (type) {
+        case 'warning':
+            return <AlertTriangle className="h-5 w-5 text-yellow-500"/>;
+        case 'error':
+            return <AlertCircle className="h-5 w-5 text-red-500"/>;
+        case 'success':
+            return <CheckCircle className="h-5 w-5 text-green-500"/>;
+        case 'info':
+        default:
+            return <Info className="h-5 w-5 text-blue-500"/>;
+    }
+};
+
+const getPriorityBadgeVariant = (priority?: string) => {
+    switch (priority) {
+        case 'critical':
+            return 'destructive';
+        case 'high':
+            return 'destructive';
+        case 'medium':
+            return 'secondary';
+        case 'low':
+        default:
+            return 'outline';
+    }
+};
+
+const getTypeBadgeVariant = (type?: string) => {
+    switch (type) {
+        case 'warning':
+            return 'secondary';
+        case 'error':
+            return 'destructive';
+        case 'success':
+            return 'default';
+        case 'info':
+        default:
+            return 'outline';
+    }
+};
+
+export function HomepageAlertCard({alert, onDismiss, onClose}: AlertCardProps): React.ReactElement {
+    const {t} = useTranslation();
+    
+    if (!alert) {
+        return null;
+    }
+
+    const handleDismiss = () => {
+        onDismiss(alert.id);
+        onClose();
+    };
+
+    const formatExpiryDate = (expiryString: string) => {
+        const expiryDate = new Date(expiryString);
+        const now = new Date();
+        const diffTime = expiryDate.getTime() - now.getTime();
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+        if (diffDays < 0) return t('common.expired');
+        if (diffDays === 0) return t('common.expiresToday');
+        if (diffDays === 1) return t('common.expiresTomorrow');
+        return t('common.expiresInDays', {days: diffDays});
+    };
+
+    return (
+        <Card className="w-full max-w-2xl mx-auto">
+            <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        {getAlertIcon(alert.type)}
+                        <CardTitle className="text-xl font-bold">
+                            {alert.title}
+                        </CardTitle>
+                    </div>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={onClose}
+                        className="h-8 w-8 p-0"
+                    >
+                        <X className="h-4 w-4"/>
+                    </Button>
+                </div>
+                <div className="flex items-center gap-2 mt-2">
+                    {alert.priority && (
+                        <Badge variant={getPriorityBadgeVariant(alert.priority)}>
+                            {alert.priority.toUpperCase()}
+                        </Badge>
+                    )}
+                    {alert.type && (
+                        <Badge variant={getTypeBadgeVariant(alert.type)}>
+                            {alert.type}
+                        </Badge>
+                    )}
+                    <span className="text-sm text-muted-foreground">
+                        {formatExpiryDate(alert.expiresAt)}
+                    </span>
+                </div>
+            </CardHeader>
+            <CardContent className="pb-4">
+                <p className="text-muted-foreground leading-relaxed whitespace-pre-wrap">
+                    {alert.message}
+                </p>
+            </CardContent>
+            <CardFooter className="flex items-center justify-between pt-0">
+                <div className="flex gap-2">
+                    <Button
+                        variant="outline"
+                        onClick={handleDismiss}
+                    >
+                        Dismiss
+                    </Button>
+                    {alert.actionUrl && alert.actionText && (
+                        <Button
+                            variant="default"
+                            onClick={() => window.open(alert.actionUrl, '_blank', 'noopener,noreferrer')}
+                            className="gap-2"
+                        >
+                            {alert.actionText}
+                            <ExternalLink className="h-4 w-4"/>
+                        </Button>
+                    )}
+                </div>
+            </CardFooter>
+        </Card>
+    );
+}

src/ui/Homepage/HomepageAlertManager.tsx

@@ -0,0 +1,179 @@
+import React, {useEffect, useState} from "react";
+import {HomepageAlertCard} from "./HomepageAlertCard.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import { getUserAlerts, dismissAlert } from "@/ui/main-axios.ts";
+import {useTranslation} from "react-i18next";
+
+interface TermixAlert {
+    id: string;
+    title: string;
+    message: string;
+    expiresAt: string;
+    priority?: 'low' | 'medium' | 'high' | 'critical';
+    type?: 'info' | 'warning' | 'error' | 'success';
+    actionUrl?: string;
+    actionText?: string;
+}
+
+interface AlertManagerProps {
+    userId: string | null;
+    loggedIn: boolean;
+}
+
+export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): React.ReactElement {
+    const {t} = useTranslation();
+    const [alerts, setAlerts] = useState<TermixAlert[]>([]);
+    const [currentAlertIndex, setCurrentAlertIndex] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (loggedIn && userId) {
+            fetchUserAlerts();
+        }
+    }, [loggedIn, userId]);
+
+    const fetchUserAlerts = async () => {
+        if (!userId) return;
+
+        setLoading(true);
+        setError(null);
+
+        try {
+            const response = await getUserAlerts(userId);
+
+            const userAlerts = response.alerts || [];
+
+            const sortedAlerts = userAlerts.sort((a: TermixAlert, b: TermixAlert) => {
+                const priorityOrder = {critical: 4, high: 3, medium: 2, low: 1};
+                const aPriority = priorityOrder[a.priority as keyof typeof priorityOrder] || 0;
+                const bPriority = priorityOrder[b.priority as keyof typeof priorityOrder] || 0;
+
+                if (aPriority !== bPriority) {
+                    return bPriority - aPriority;
+                }
+
+                return new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime();
+            });
+
+            setAlerts(sortedAlerts);
+            setCurrentAlertIndex(0);
+        } catch (err) {
+            setError(t('homepage.failedToLoadAlerts'));
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDismissAlert = async (alertId: string) => {
+        if (!userId) return;
+
+        try {
+            await dismissAlert(userId, alertId);
+
+            setAlerts(prev => {
+                const newAlerts = prev.filter(alert => alert.id !== alertId);
+                return newAlerts;
+            });
+
+            setCurrentAlertIndex(prevIndex => {
+                const newAlertsLength = alerts.length - 1;
+                if (newAlertsLength === 0) return 0;
+                if (prevIndex >= newAlertsLength) return Math.max(0, newAlertsLength - 1);
+                return prevIndex;
+            });
+        } catch (err) {
+            setError(t('homepage.failedToDismissAlert'));
+        }
+    };
+
+    const handleCloseCurrentAlert = () => {
+        if (alerts.length === 0) return;
+
+        if (currentAlertIndex < alerts.length - 1) {
+            setCurrentAlertIndex(currentAlertIndex + 1);
+        } else {
+            setAlerts([]);
+            setCurrentAlertIndex(0);
+        }
+    };
+
+    const handlePreviousAlert = () => {
+        if (currentAlertIndex > 0) {
+            setCurrentAlertIndex(currentAlertIndex - 1);
+        }
+    };
+
+    const handleNextAlert = () => {
+        if (currentAlertIndex < alerts.length - 1) {
+            setCurrentAlertIndex(currentAlertIndex + 1);
+        }
+    };
+
+    if (!loggedIn || !userId) {
+        return null;
+    }
+
+    if (alerts.length === 0) {
+        return null;
+    }
+
+    const currentAlert = alerts[currentAlertIndex];
+
+    if (!currentAlert) {
+        return null;
+    }
+
+    const priorityCounts = {critical: 0, high: 0, medium: 0, low: 0};
+    alerts.forEach(alert => {
+        const priority = alert.priority || 'low';
+        priorityCounts[priority as keyof typeof priorityCounts]++;
+    });
+    const hasMultipleAlerts = alerts.length > 1;
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-[99999]">
+            <div className="relative w-full max-w-2xl mx-4">
+                <HomepageAlertCard
+                    alert={currentAlert}
+                    onDismiss={handleDismissAlert}
+                    onClose={handleCloseCurrentAlert}
+                />
+
+                {hasMultipleAlerts && (
+                    <div className="absolute -bottom-16 left-1/2 transform -translate-x-1/2 flex items-center gap-2">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handlePreviousAlert}
+                            disabled={currentAlertIndex === 0}
+                            className="h-8 px-3"
+                        >
+                            Previous
+                        </Button>
+                        <span className="text-sm text-muted-foreground">
+                            {currentAlertIndex + 1} of {alerts.length}
+                        </span>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleNextAlert}
+                            disabled={currentAlertIndex === alerts.length - 1}
+                            className="h-8 px-3"
+                        >
+                            Next
+                        </Button>
+                    </div>
+                )}
+
+                {error && (
+                    <div className="absolute -bottom-20 left-1/2 transform -translate-x-1/2">
+                        <div className="bg-destructive text-destructive-foreground px-3 py-1 rounded text-sm">
+                            {error}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

src/ui/Homepage/HomepageAuth.tsx

@@ -0,0 +1,801 @@
+import React, {useState, useEffect} from "react";
+import {cn} from "../../lib/utils.ts";
+import {Button} from "../../components/ui/button.tsx";
+import {Input} from "../../components/ui/input.tsx";
+import {Label} from "../../components/ui/label.tsx";
+import {Alert, AlertTitle, AlertDescription} from "../../components/ui/alert.tsx";
+import {useTranslation} from "react-i18next";
+import {LanguageSwitcher} from "../../components/LanguageSwitcher";
+import {
+    registerUser,
+    loginUser,
+    getUserInfo,
+    getRegistrationAllowed,
+    getOIDCConfig,
+    getUserCount,
+    initiatePasswordReset,
+    verifyPasswordResetCode,
+    completePasswordReset,
+    getOIDCAuthorizeUrl,
+    verifyTOTPLogin
+} from "../main-axios.ts";
+
+function setCookie(name: string, value: string, days = 7) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
+}
+
+function getCookie(name: string) {
+    return document.cookie.split('; ').reduce((r, v) => {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+    }, "");
+}
+
+interface HomepageAuthProps extends React.ComponentProps<"div"> {
+    setLoggedIn: (loggedIn: boolean) => void;
+    setIsAdmin: (isAdmin: boolean) => void;
+    setUsername: (username: string | null) => void;
+    setUserId: (userId: string | null) => void;
+    loggedIn: boolean;
+    authLoading: boolean;
+    dbError: string | null;
+    setDbError: (error: string | null) => void;
+    onAuthSuccess: (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => void;
+}
+
+export function HomepageAuth({
+                                 className,
+                                 setLoggedIn,
+                                 setIsAdmin,
+                                 setUsername,
+                                 setUserId,
+                                 loggedIn,
+                                 authLoading,
+                                 dbError,
+                                 setDbError,
+                                 onAuthSuccess,
+                                 ...props
+                             }: HomepageAuthProps) {
+    const {t} = useTranslation();
+    const [tab, setTab] = useState<"login" | "signup" | "external" | "reset">("login");
+    const [localUsername, setLocalUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [signupConfirmPassword, setSignupConfirmPassword] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [oidcLoading, setOidcLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [internalLoggedIn, setInternalLoggedIn] = useState(false);
+    const [firstUser, setFirstUser] = useState(false);
+    const [registrationAllowed, setRegistrationAllowed] = useState(true);
+    const [oidcConfigured, setOidcConfigured] = useState(false);
+
+    const [resetStep, setResetStep] = useState<"initiate" | "verify" | "newPassword">("initiate");
+    const [resetCode, setResetCode] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [tempToken, setTempToken] = useState("");
+    const [resetLoading, setResetLoading] = useState(false);
+    const [resetSuccess, setResetSuccess] = useState(false);
+    
+    const [totpRequired, setTotpRequired] = useState(false);
+    const [totpCode, setTotpCode] = useState("");
+    const [totpTempToken, setTotpTempToken] = useState("");
+    const [totpLoading, setTotpLoading] = useState(false);
+
+    useEffect(() => {
+        setInternalLoggedIn(loggedIn);
+    }, [loggedIn]);
+
+    useEffect(() => {
+        getRegistrationAllowed().then(res => {
+            setRegistrationAllowed(res.allowed);
+        });
+    }, []);
+
+    useEffect(() => {
+        getOIDCConfig().then((response) => {
+            if (response) {
+                setOidcConfigured(true);
+            } else {
+                setOidcConfigured(false);
+            }
+        }).catch((error) => {
+            if (error.response?.status === 404) {
+                setOidcConfigured(false);
+            } else {
+                setOidcConfigured(false);
+            }
+        });
+    }, []);
+
+    useEffect(() => {
+        getUserCount().then(res => {
+            if (res.count === 0) {
+                setFirstUser(true);
+                setTab("signup");
+            } else {
+                setFirstUser(false);
+            }
+            setDbError(null);
+        }).catch(() => {
+            setDbError(t('errors.databaseConnection'));
+        });
+    }, [setDbError]);
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+
+        if (!localUsername.trim()) {
+            setError(t('errors.requiredField'));
+            setLoading(false);
+            return;
+        }
+
+        try {
+            let res, meRes;
+            if (tab === "login") {
+                res = await loginUser(localUsername, password);
+            } else {
+                if (password !== signupConfirmPassword) {
+                    setError(t('errors.passwordMismatch'));
+                    setLoading(false);
+                    return;
+                }
+                if (password.length < 6) {
+                    setError(t('errors.minLength', {min: 6}));
+                    setLoading(false);
+                    return;
+                }
+
+                await registerUser(localUsername, password);
+                res = await loginUser(localUsername, password);
+            }
+            
+            if (res.requires_totp) {
+                setTotpRequired(true);
+                setTotpTempToken(res.temp_token);
+                setLoading(false);
+                return;
+            }
+            
+            if (!res || !res.token) {
+                throw new Error(t('errors.noTokenReceived'));
+            }
+            
+            setCookie("jwt", res.token);
+            [meRes] = await Promise.all([
+                getUserInfo(),
+            ]);
+            
+            setInternalLoggedIn(true);
+            setLoggedIn(true);
+            setIsAdmin(!!meRes.is_admin);
+            setUsername(meRes.username || null);
+            setUserId(meRes.userId || null);
+            setDbError(null);
+            onAuthSuccess({
+                isAdmin: !!meRes.is_admin,
+                username: meRes.username || null,
+                userId: meRes.userId || null
+            });
+            setInternalLoggedIn(true);
+            if (tab === "signup") {
+                setSignupConfirmPassword("");
+            }
+            setTotpRequired(false);
+            setTotpCode("");
+            setTotpTempToken("");
+        } catch (err: any) {
+            setError(err?.response?.data?.error || err?.message || t('errors.unknownError'));
+            setInternalLoggedIn(false);
+            setLoggedIn(false);
+            setIsAdmin(false);
+            setUsername(null);
+            setUserId(null);
+            setCookie("jwt", "", -1);
+            if (err?.response?.data?.error?.includes("Database")) {
+                setDbError(t('errors.databaseConnection'));
+            } else {
+                setDbError(null);
+            }
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    async function handleInitiatePasswordReset() {
+        setError(null);
+        setResetLoading(true);
+        try {
+            const result = await initiatePasswordReset(localUsername);
+            setResetStep("verify");
+            setError(null);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || err?.message || t('errors.failedPasswordReset'));
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    async function handleVerifyResetCode() {
+        setError(null);
+        setResetLoading(true);
+        try {
+            const response = await verifyPasswordResetCode(localUsername, resetCode);
+            setTempToken(response.tempToken);
+            setResetStep("newPassword");
+            setError(null);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || t('errors.failedVerifyCode'));
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    async function handleCompletePasswordReset() {
+        setError(null);
+        setResetLoading(true);
+
+        if (newPassword !== confirmPassword) {
+            setError(t('errors.passwordMismatch'));
+            setResetLoading(false);
+            return;
+        }
+
+        if (newPassword.length < 6) {
+            setError(t('errors.minLength', {min: 6}));
+            setResetLoading(false);
+            return;
+        }
+
+        try {
+            await completePasswordReset(localUsername, tempToken, newPassword);
+
+            setResetStep("initiate");
+            setResetCode("");
+            setNewPassword("");
+            setConfirmPassword("");
+            setTempToken("");
+            setError(null);
+
+            setResetSuccess(true);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || t('errors.failedCompleteReset'));
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    function resetPasswordState() {
+        setResetStep("initiate");
+        setResetCode("");
+        setNewPassword("");
+        setConfirmPassword("");
+        setTempToken("");
+        setError(null);
+        setResetSuccess(false);
+        setSignupConfirmPassword("");
+    }
+
+    function clearFormFields() {
+        setPassword("");
+        setSignupConfirmPassword("");
+        setError(null);
+    }
+
+    async function handleTOTPVerification() {
+        if (totpCode.length !== 6) {
+            setError(t('auth.enterCode'));
+            return;
+        }
+
+        setError(null);
+        setTotpLoading(true);
+        
+        try {
+            const res = await verifyTOTPLogin(totpTempToken, totpCode);
+            
+            if (!res || !res.token) {
+                throw new Error(t('errors.noTokenReceived'));
+            }
+            
+            setCookie("jwt", res.token);
+            const meRes = await getUserInfo();
+            
+            setInternalLoggedIn(true);
+            setLoggedIn(true);
+            setIsAdmin(!!meRes.is_admin);
+            setUsername(meRes.username || null);
+            setUserId(meRes.userId || null);
+            setDbError(null);
+            onAuthSuccess({
+                isAdmin: !!meRes.is_admin,
+                username: meRes.username || null,
+                userId: meRes.userId || null
+            });
+            setInternalLoggedIn(true);
+            setTotpRequired(false);
+            setTotpCode("");
+            setTotpTempToken("");
+        } catch (err: any) {
+            setError(err?.response?.data?.error || err?.message || t('errors.invalidTotpCode'));
+        } finally {
+            setTotpLoading(false);
+        }
+    }
+
+    async function handleOIDCLogin() {
+        setError(null);
+        setOidcLoading(true);
+        try {
+            const authResponse = await getOIDCAuthorizeUrl();
+            const {auth_url: authUrl} = authResponse;
+
+            if (!authUrl || authUrl === 'undefined') {
+                throw new Error(t('errors.invalidAuthUrl'));
+            }
+
+            window.location.replace(authUrl);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || err?.message || t('errors.failedOidcLogin'));
+            setOidcLoading(false);
+        }
+    }
+
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const success = urlParams.get('success');
+        const token = urlParams.get('token');
+        const error = urlParams.get('error');
+
+        if (error) {
+            setError(`${t('errors.oidcAuthFailed')}: ${error}`);
+            setOidcLoading(false);
+            window.history.replaceState({}, document.title, window.location.pathname);
+            return;
+        }
+
+        if (success && token) {
+            setOidcLoading(true);
+            setError(null);
+
+            setCookie("jwt", token);
+            getUserInfo()
+                .then(meRes => {
+                    setInternalLoggedIn(true);
+                    setLoggedIn(true);
+                    setIsAdmin(!!meRes.is_admin);
+                    setUsername(meRes.username || null);
+                    setUserId(meRes.id || null);
+                    setDbError(null);
+                    onAuthSuccess({
+                        isAdmin: !!meRes.is_admin,
+                        username: meRes.username || null,
+                        userId: meRes.id || null
+                    });
+                    setInternalLoggedIn(true);
+                    window.history.replaceState({}, document.title, window.location.pathname);
+                })
+                .catch(err => {
+                    setError(t('errors.failedUserInfo'));
+                    setInternalLoggedIn(false);
+                    setLoggedIn(false);
+                    setIsAdmin(false);
+                    setUsername(null);
+                    setUserId(null);
+                    setCookie("jwt", "", -1);
+                    window.history.replaceState({}, document.title, window.location.pathname);
+                })
+                .finally(() => {
+                    setOidcLoading(false);
+                });
+        }
+    }, []);
+
+    const Spinner = (
+        <svg className="animate-spin mr-2 h-4 w-4 text-white inline-block" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+        </svg>
+    );
+
+    return (
+        <div
+            className={`w-[420px] max-w-full p-6 flex flex-col bg-[#18181b] border-2 border-[#303032] rounded-md ${className || ''}`}
+            {...props}
+        >
+            {dbError && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTitle>Error</AlertTitle>
+                    <AlertDescription>{dbError}</AlertDescription>
+                </Alert>
+            )}
+            {firstUser && !dbError && !internalLoggedIn && (
+                <Alert variant="default" className="mb-4">
+                    <AlertTitle>{t('auth.firstUser')}</AlertTitle>
+                    <AlertDescription className="inline">
+                        {t('auth.firstUserMessage')}{" "}
+                        <a
+                            href="https://github.com/LukeGus/Termix/issues/new"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-blue-600 underline hover:text-blue-800 inline"
+                        >
+                            GitHub Issue
+                        </a>.
+                    </AlertDescription>
+                </Alert>
+            )}
+            {!registrationAllowed && !internalLoggedIn && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTitle>{t('auth.registerTitle')}</AlertTitle>
+                    <AlertDescription>
+                        {t('messages.registrationDisabled')}
+                    </AlertDescription>
+                </Alert>
+            )}
+            {totpRequired && (
+                <div className="flex flex-col gap-5">
+                    <div className="mb-6 text-center">
+                        <h2 className="text-xl font-bold mb-1">{t('auth.twoFactorAuth')}</h2>
+                        <p className="text-muted-foreground">{t('auth.enterCode')}</p>
+                    </div>
+                    
+                    <div className="flex flex-col gap-2">
+                        <Label htmlFor="totp-code">{t('auth.verifyCode')}</Label>
+                        <Input
+                            id="totp-code"
+                            type="text"
+                            placeholder="000000"
+                            maxLength={6}
+                            value={totpCode}
+                            onChange={e => setTotpCode(e.target.value.replace(/\D/g, ''))}
+                            disabled={totpLoading}
+                            className="text-center text-2xl tracking-widest font-mono"
+                            autoComplete="one-time-code"
+                        />
+                        <p className="text-xs text-muted-foreground text-center">
+                            {t('auth.backupCode')}
+                        </p>
+                    </div>
+                    
+                    <Button
+                        type="button"
+                        className="w-full h-11 text-base font-semibold"
+                        disabled={totpLoading || totpCode.length < 6}
+                        onClick={handleTOTPVerification}
+                    >
+                        {totpLoading ? Spinner : t('auth.verifyCode')}
+                    </Button>
+                    
+                    <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full h-11 text-base font-semibold"
+                        disabled={totpLoading}
+                        onClick={() => {
+                            setTotpRequired(false);
+                            setTotpCode("");
+                            setTotpTempToken("");
+                            setError(null);
+                        }}
+                    >
+                        {t('common.cancel')}
+                    </Button>
+                </div>
+            )}
+            
+            {(!internalLoggedIn && (!authLoading || !getCookie("jwt")) && !totpRequired) && (
+                <>
+                    <div className="flex gap-2 mb-6">
+                        <button
+                            type="button"
+                            className={cn(
+                                "flex-1 py-2 text-base font-medium rounded-md transition-all",
+                                tab === "login"
+                                    ? "bg-primary text-primary-foreground shadow"
+                                    : "bg-muted text-muted-foreground hover:bg-accent"
+                            )}
+                            onClick={() => {
+                                setTab("login");
+                                if (tab === "reset") resetPasswordState();
+                                if (tab === "signup") clearFormFields();
+                            }}
+                            aria-selected={tab === "login"}
+                            disabled={loading || firstUser}
+                        >
+                            {t('common.login')}
+                        </button>
+                        <button
+                            type="button"
+                            className={cn(
+                                "flex-1 py-2 text-base font-medium rounded-md transition-all",
+                                tab === "signup"
+                                    ? "bg-primary text-primary-foreground shadow"
+                                    : "bg-muted text-muted-foreground hover:bg-accent"
+                            )}
+                            onClick={() => {
+                                setTab("signup");
+                                if (tab === "reset") resetPasswordState();
+                                if (tab === "login") clearFormFields();
+                            }}
+                            aria-selected={tab === "signup"}
+                            disabled={loading || !registrationAllowed}
+                        >
+                            {t('common.register')}
+                        </button>
+                        {oidcConfigured && (
+                            <button
+                                type="button"
+                                className={cn(
+                                    "flex-1 py-2 text-base font-medium rounded-md transition-all",
+                                    tab === "external"
+                                        ? "bg-primary text-primary-foreground shadow"
+                                        : "bg-muted text-muted-foreground hover:bg-accent"
+                                )}
+                                onClick={() => {
+                                    setTab("external");
+                                    if (tab === "reset") resetPasswordState();
+                                    if (tab === "login" || tab === "signup") clearFormFields();
+                                }}
+                                aria-selected={tab === "external"}
+                                disabled={oidcLoading}
+                            >
+                                {t('auth.external')}
+                            </button>
+                        )}
+                    </div>
+                    <div className="mb-6 text-center">
+                        <h2 className="text-xl font-bold mb-1">
+                            {tab === "login" ? t('auth.loginTitle') :
+                                tab === "signup" ? t('auth.registerTitle') :
+                                    tab === "external" ? t('auth.loginWithExternal') :
+                                        t('auth.forgotPassword')}
+                        </h2>
+                    </div>
+
+                    {tab === "external" || tab === "reset" ? (
+                        <div className="flex flex-col gap-5">
+                            {tab === "external" && (
+                                <>
+                                    <div className="text-center text-muted-foreground mb-4">
+                                        <p>{t('auth.loginWithExternalDesc')}</p>
+                                    </div>
+                                    <Button
+                                        type="button"
+                                        className="w-full h-11 mt-2 text-base font-semibold"
+                                        disabled={oidcLoading}
+                                        onClick={handleOIDCLogin}
+                                    >
+                                        {oidcLoading ? Spinner : t('auth.loginWithExternal')}
+                                    </Button>
+                                </>
+                            )}
+                            {tab === "reset" && (
+                                <>
+                                    {resetStep === "initiate" && (
+                                        <>
+                                            <div className="text-center text-muted-foreground mb-4">
+                                                <p>{t('auth.resetCodeDesc')}</p>
+                                            </div>
+                                            <div className="flex flex-col gap-4">
+                                                <div className="flex flex-col gap-2">
+                                                    <Label htmlFor="reset-username">{t('common.username')}</Label>
+                                                    <Input
+                                                        id="reset-username"
+                                                        type="text"
+                                                        required
+                                                        className="h-11 text-base"
+                                                        value={localUsername}
+                                                        onChange={e => setLocalUsername(e.target.value)}
+                                                        disabled={resetLoading}
+                                                    />
+                                                </div>
+                                                <Button
+                                                    type="button"
+                                                    className="w-full h-11 text-base font-semibold"
+                                                    disabled={resetLoading || !localUsername.trim()}
+                                                    onClick={handleInitiatePasswordReset}
+                                                >
+                                                    {resetLoading ? Spinner : t('auth.sendResetCode')}
+                                                </Button>
+                                            </div>
+                                        </>
+                                    )}
+
+                                    {resetStep === "verify" && (
+                                        <>o
+                                            <div className="text-center text-muted-foreground mb-4">
+                                                <p>{t('auth.enterResetCode')} <strong>{localUsername}</strong></p>
+                                            </div>
+                                            <div className="flex flex-col gap-4">
+                                                <div className="flex flex-col gap-2">
+                                                    <Label htmlFor="reset-code">{t('auth.resetCode')}</Label>
+                                                    <Input
+                                                        id="reset-code"
+                                                        type="text"
+                                                        required
+                                                        maxLength={6}
+                                                        className="h-11 text-base text-center text-lg tracking-widest"
+                                                        value={resetCode}
+                                                        onChange={e => setResetCode(e.target.value.replace(/\D/g, ''))}
+                                                        disabled={resetLoading}
+                                                        placeholder="000000"
+                                                    />
+                                                </div>
+                                                <Button
+                                                    type="button"
+                                                    className="w-full h-11 text-base font-semibold"
+                                                    disabled={resetLoading || resetCode.length !== 6}
+                                                    onClick={handleVerifyResetCode}
+                                                >
+                                                    {resetLoading ? Spinner : t('auth.verifyCodeButton')}
+                                                </Button>
+                                                <Button
+                                                    type="button"
+                                                    variant="outline"
+                                                    className="w-full h-11 text-base font-semibold"
+                                                    disabled={resetLoading}
+                                                    onClick={() => {
+                                                        setResetStep("initiate");
+                                                        setResetCode("");
+                                                    }}
+                                                >
+                                                    {t('common.back')}
+                                                </Button>
+                                            </div>
+                                        </>
+                                    )}
+
+                                    {resetSuccess && (
+                                        <>
+                                            <Alert className="mb-4">
+                                                <AlertTitle>{t('auth.passwordResetSuccess')}</AlertTitle>
+                                                <AlertDescription>
+                                                    {t('auth.passwordResetSuccessDesc')}
+                                                </AlertDescription>
+                                            </Alert>
+                                            <Button
+                                                type="button"
+                                                className="w-full h-11 text-base font-semibold"
+                                                onClick={() => {
+                                                    setTab("login");
+                                                    resetPasswordState();
+                                                }}
+                                            >
+                                                {t('auth.goToLogin')}
+                                            </Button>
+                                        </>
+                                    )}
+
+                                    {resetStep === "newPassword" && !resetSuccess && (
+                                        <>
+                                            <div className="text-center text-muted-foreground mb-4">
+                                                <p>{t('auth.enterNewPassword')} <strong>{localUsername}</strong></p>
+                                            </div>
+                                            <div className="flex flex-col gap-5">
+                                                <div className="flex flex-col gap-2">
+                                                    <Label htmlFor="new-password">{t('auth.newPassword')}</Label>
+                                                    <Input
+                                                        id="new-password"
+                                                        type="password"
+                                                        required
+                                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
+                                                        value={newPassword}
+                                                        onChange={e => setNewPassword(e.target.value)}
+                                                        disabled={resetLoading}
+                                                        autoComplete="new-password"
+                                                    />
+                                                </div>
+                                                <div className="flex flex-col gap-2">
+                                                    <Label htmlFor="confirm-password">{t('auth.confirmNewPassword')}</Label>
+                                                    <Input
+                                                        id="confirm-password"
+                                                        type="password"
+                                                        required
+                                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
+                                                        value={confirmPassword}
+                                                        onChange={e => setConfirmPassword(e.target.value)}
+                                                        disabled={resetLoading}
+                                                        autoComplete="new-password"
+                                                    />
+                                                </div>
+                                                <Button
+                                                    type="button"
+                                                    className="w-full h-11 text-base font-semibold"
+                                                    disabled={resetLoading || !newPassword || !confirmPassword}
+                                                    onClick={handleCompletePasswordReset}
+                                                >
+                                                    {resetLoading ? Spinner : t('auth.resetPasswordButton')}
+                                                </Button>
+                                                <Button
+                                                    type="button"
+                                                    variant="outline"
+                                                    className="w-full h-11 text-base font-semibold"
+                                                    disabled={resetLoading}
+                                                    onClick={() => {
+                                                        setResetStep("verify");
+                                                        setNewPassword("");
+                                                        setConfirmPassword("");
+                                                    }}
+                                                >
+                                                    {t('common.back')}
+                                                </Button>
+                                            </div>
+                                        </>
+                                    )}
+                                </>
+                            )}
+                        </div>
+                    ) : (
+                        <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
+                            <div className="flex flex-col gap-2">
+                                <Label htmlFor="username">{t('common.username')}</Label>
+                                <Input
+                                    id="username"
+                                    type="text"
+                                    required
+                                    className="h-11 text-base"
+                                    value={localUsername}
+                                    onChange={e => setLocalUsername(e.target.value)}
+                                    disabled={loading || internalLoggedIn}
+                                />
+                            </div>
+                            <div className="flex flex-col gap-2">
+                                <Label htmlFor="password">{t('common.password')}</Label>
+                                <Input id="password" type="password" required className="h-11 text-base"
+                                       value={password} onChange={e => setPassword(e.target.value)}
+                                       disabled={loading || internalLoggedIn}/>
+                            </div>
+                            {tab === "signup" && (
+                                <div className="flex flex-col gap-2">
+                                    <Label htmlFor="signup-confirm-password">{t('common.confirmPassword')}</Label>
+                                    <Input id="signup-confirm-password" type="password" required
+                                           className="h-11 text-base"
+                                           value={signupConfirmPassword}
+                                           onChange={e => setSignupConfirmPassword(e.target.value)}
+                                           disabled={loading || internalLoggedIn}/>
+                                </div>
+                            )}
+                            <Button type="submit" className="w-full h-11 mt-2 text-base font-semibold"
+                                    disabled={loading || internalLoggedIn}>
+                                {loading ? Spinner : (tab === "login" ? t('common.login') : t('auth.signUp'))}
+                            </Button>
+                            {tab === "login" && (
+                                <Button type="button" variant="outline"
+                                        className="w-full h-11 text-base font-semibold"
+                                        disabled={loading || internalLoggedIn}
+                                        onClick={() => {
+                                            setTab("reset");
+                                            resetPasswordState();
+                                            clearFormFields();
+                                        }}
+                                >
+                                    {t('auth.resetPasswordButton')}
+                                </Button>
+                            )}
+                        </form>
+                    )}
+                    
+                    <div className="mt-6 pt-4 border-t border-[#303032]">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <Label className="text-sm text-muted-foreground">{t('common.language')}</Label>
+                            </div>
+                            <LanguageSwitcher />
+                        </div>
+                    </div>
+                </>
+            )}
+            {error && (
+                <Alert variant="destructive" className="mt-4">
+                    <AlertTitle>Error</AlertTitle>
+                    <AlertDescription>{error}</AlertDescription>
+                </Alert>
+            )}
+        </div>
+    );
+}

src/ui/Homepage/HompageUpdateLog.tsx

@@ -2,7 +2,8 @@ import React, {useEffect, useState} from "react";
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
 import {Button} from "@/components/ui/button.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
-import axios from "axios";
+import { getReleasesRSS, getVersionInfo } from "@/ui/main-axios.ts";
+import {useTranslation} from "react-i18next";
 
 interface HomepageUpdateLogProps extends React.ComponentProps<"div"> {
     loggedIn: boolean;
@@ -50,13 +51,8 @@ interface VersionResponse {
     cache_age?: number;
 }
 
-const apiBase = import.meta.env.DEV ? "http://localhost:8081" : "";
-
-const API = axios.create({
-    baseURL: apiBase,
-});
-
 export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) {
+    const {t} = useTranslation();
     const [releases, setReleases] = useState<RSSResponse | null>(null);
     const [versionInfo, setVersionInfo] = useState<VersionResponse | null>(null);
     const [loading, setLoading] = useState(false);
@@ -66,16 +62,16 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) {
         if (loggedIn) {
             setLoading(true);
             Promise.all([
-                API.get('/releases/rss?per_page=100'),
-                API.get('/version/')
+                getReleasesRSS(100),
+                getVersionInfo()
             ])
                 .then(([releasesRes, versionRes]) => {
-                    setReleases(releasesRes.data);
-                    setVersionInfo(versionRes.data);
+                    setReleases(releasesRes);
+                    setVersionInfo(versionRes);
                     setError(null);
                 })
                 .catch(err => {
-                    setError('Failed to fetch update information');
+                    setError(t('common.failedToFetchUpdateInfo'));
                 })
                 .finally(() => setLoading(false));
         }
@@ -90,75 +86,67 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) {
         return firstLine
             .replace(/[#*`]/g, '')
             .replace(/\s+/g, ' ')
-            .trim()
-            .substring(0, 100) + (firstLine.length > 100 ? '...' : '');
+            .trim();
     };
 
     return (
-        <div className="w-[400px] h-[600px] flex flex-col border border-border rounded-lg bg-card p-4">
+        <div className="w-[400px] h-[600px] flex flex-col border-2 border-[#303032] rounded-lg bg-[#18181b] p-4 shadow-lg">
             <div>
-                <h3 className="text-lg font-semibold mb-3">Updates & Releases</h3>
+                <h3 className="text-lg font-bold mb-3 text-white">{t('common.updatesAndReleases')}</h3>
 
-                <Separator className="p-0.25 mt-3 mb-3"/>
+                <Separator className="p-0.25 mt-3 mb-3 bg-[#303032]"/>
 
                 {versionInfo && versionInfo.status === 'requires_update' && (
-                    <Alert>
-                        <AlertTitle>Update Available</AlertTitle>
-                        <AlertDescription>
-                            A new version ({versionInfo.version}) is available.
-                            <Button
-                                variant="link"
-                                className="p-0 h-auto underline ml-1"
-                                onClick={() => window.open("https://docs.termix.site/docs", '_blank')}
-                            >
-                                Update now
-                            </Button>
+                    <Alert className="bg-[#0e0e10] border-[#303032] text-white">
+                        <AlertTitle className="text-white">{t('common.updateAvailable')}</AlertTitle>
+                        <AlertDescription className="text-gray-300">
+                            {t('common.newVersionAvailable', { version: versionInfo.version })}
                         </AlertDescription>
                     </Alert>
                 )}
             </div>
 
             {versionInfo && versionInfo.status === 'requires_update' && (
-                <Separator className="p-0.25 mt-3 mb-3"/>
+                <Separator className="p-0.25 mt-3 mb-3 bg-[#303032]"/>
             )}
 
-            <div className="flex-1 overflow-y-auto space-y-3">
+            <div className="flex-1 overflow-y-auto space-y-3 pr-2">
                 {loading && (
                     <div className="flex items-center justify-center h-32">
-                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                     </div>
                 )}
 
                 {error && (
-                    <Alert variant="destructive">
-                        <AlertTitle>Error</AlertTitle>
-                        <AlertDescription>{error}</AlertDescription>
+                    <Alert variant="destructive" className="bg-red-900/20 border-red-500 text-red-300">
+                        <AlertTitle className="text-red-300">{t('common.error')}</AlertTitle>
+                        <AlertDescription className="text-red-300">{error}</AlertDescription>
                     </Alert>
                 )}
 
                 {releases?.items.map((release) => (
                     <div
                         key={release.id}
-                        className="border border-border rounded-lg p-3 hover:bg-accent transition-colors cursor-pointer"
+                        className="border border-[#303032] rounded-lg p-3 hover:bg-[#0e0e10] transition-colors cursor-pointer bg-[#0e0e10]/50"
                         onClick={() => window.open(release.link, '_blank')}
                     >
                         <div className="flex items-start justify-between mb-2">
-                            <h4 className="font-medium text-sm leading-tight flex-1">
+                            <h4 className="font-semibold text-sm leading-tight flex-1 text-white">
                                 {release.title}
                             </h4>
                             {release.isPrerelease && (
                                 <span
-                                    className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded ml-2 flex-shrink-0">
-                                    Pre-release
+                                    className="text-xs bg-yellow-600 text-yellow-100 px-2 py-1 rounded ml-2 flex-shrink-0 font-medium">
+                                    {t('common.preRelease')}
                                 </span>
                             )}
                         </div>
 
-                        <p className="text-xs text-muted-foreground mb-2 leading-relaxed">
+                        <p className="text-xs text-gray-300 mb-2 leading-relaxed">
                             {formatDescription(release.description)}
                         </p>
 
-                        <div className="flex items-center text-xs text-muted-foreground">
+                        <div className="flex items-center text-xs text-gray-400">
                             <span>{new Date(release.pubDate).toLocaleDateString()}</span>
                             {release.assets.length > 0 && (
                                 <>
@@ -171,10 +159,10 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) {
                 ))}
 
                 {releases && releases.items.length === 0 && !loading && (
-                    <Alert>
-                        <AlertTitle>No Releases</AlertTitle>
-                        <AlertDescription>
-                            No releases found.
+                    <Alert className="bg-[#0e0e10] border-[#303032] text-gray-300">
+                        <AlertTitle className="text-gray-300">{t('common.noReleases')}</AlertTitle>
+                        <AlertDescription className="text-gray-400">
+                            {t('common.noReleasesFound')}
                         </AlertDescription>
                     </Alert>
                 )}

src/ui/Navigation/AppView.tsx

@@ -0,0 +1,553 @@
+import React, {useEffect, useRef, useState} from "react";
+import {Terminal} from "@/ui/Apps/Terminal/Terminal.tsx";
+import {Server as ServerView} from "@/ui/Apps/Server/Server.tsx";
+import {FileManager} from "@/ui/Apps/File Manager/FileManager.tsx";
+import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
+import * as ResizablePrimitive from "react-resizable-panels";
+import {useSidebar} from "@/components/ui/sidebar.tsx";
+import {LucideRefreshCcw, LucideRefreshCw, RefreshCcw, RefreshCcwDot} from "lucide-react";
+import {Button} from "@/components/ui/button.tsx";
+
+interface TerminalViewProps {
+    isTopbarOpen?: boolean;
+}
+
+export function AppView({isTopbarOpen = true}: TerminalViewProps): React.ReactElement {
+    const {tabs, currentTab, allSplitScreenTab} = useTabs() as any;
+    const {state: sidebarState} = useSidebar();
+
+    const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal' || tab.type === 'server' || tab.type === 'file_manager');
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const panelRefs = useRef<Record<string, HTMLDivElement | null>>({});
+    const [panelRects, setPanelRects] = useState<Record<string, DOMRect | null>>({});
+    const [ready, setReady] = useState<boolean>(true);
+    const [resetKey, setResetKey] = useState<number>(0);
+
+    const updatePanelRects = () => {
+        const next: Record<string, DOMRect | null> = {};
+        Object.entries(panelRefs.current).forEach(([id, el]) => {
+            if (el) next[id] = el.getBoundingClientRect();
+        });
+        setPanelRects(next);
+    };
+
+    const fitActiveAndNotify = () => {
+        const visibleIds: number[] = [];
+        if (allSplitScreenTab.length === 0) {
+            if (currentTab) visibleIds.push(currentTab);
+        } else {
+            const splitIds = allSplitScreenTab as number[];
+            visibleIds.push(currentTab, ...splitIds.filter((i) => i !== currentTab));
+        }
+        terminalTabs.forEach((t: any) => {
+            if (visibleIds.includes(t.id)) {
+                const ref = t.terminalRef?.current;
+                if (ref?.fit) ref.fit();
+                if (ref?.notifyResize) ref.notifyResize();
+                if (ref?.refresh) ref.refresh();
+            }
+        });
+    };
+
+    const layoutScheduleRef = useRef<number | null>(null);
+    const scheduleMeasureAndFit = () => {
+        if (layoutScheduleRef.current) cancelAnimationFrame(layoutScheduleRef.current);
+        layoutScheduleRef.current = requestAnimationFrame(() => {
+            updatePanelRects();
+            layoutScheduleRef.current = requestAnimationFrame(() => {
+                fitActiveAndNotify();
+            });
+        });
+    };
+
+    const hideThenFit = () => {
+        setReady(false);
+        requestAnimationFrame(() => {
+            updatePanelRects();
+            requestAnimationFrame(() => {
+                fitActiveAndNotify();
+                setReady(true);
+            });
+        });
+    };
+
+    useEffect(() => {
+        hideThenFit();
+    }, [currentTab, terminalTabs.length, allSplitScreenTab.join(',')]);
+
+    useEffect(() => {
+        scheduleMeasureAndFit();
+    }, [allSplitScreenTab.length, isTopbarOpen, sidebarState, resetKey]);
+
+    useEffect(() => {
+        const roContainer = containerRef.current ? new ResizeObserver(() => {
+            updatePanelRects();
+            fitActiveAndNotify();
+        }) : null;
+        if (containerRef.current && roContainer) roContainer.observe(containerRef.current);
+        return () => roContainer?.disconnect();
+    }, []);
+
+    useEffect(() => {
+        const onWinResize = () => {
+            updatePanelRects();
+            fitActiveAndNotify();
+        };
+        window.addEventListener('resize', onWinResize);
+        return () => window.removeEventListener('resize', onWinResize);
+    }, []);
+
+    const HEADER_H = 28;
+
+    const renderTerminalsLayer = () => {
+        const styles: Record<number, React.CSSProperties> = {};
+        const splitTabs = terminalTabs.filter((tab: any) => allSplitScreenTab.includes(tab.id));
+        const mainTab = terminalTabs.find((tab: any) => tab.id === currentTab);
+        const layoutTabs = [mainTab, ...splitTabs.filter((t: any) => t && t.id !== (mainTab && (mainTab as any).id))].filter(Boolean) as any[];
+
+        if (allSplitScreenTab.length === 0 && mainTab) {
+            const isFileManagerTab = mainTab.type === 'file_manager';
+            styles[mainTab.id] = {
+                position: 'absolute',
+                top: isFileManagerTab ? 0 : 2,
+                left: isFileManagerTab ? 0 : 2,
+                right: isFileManagerTab ? 0 : 2,
+                bottom: isFileManagerTab ? 0 : 2,
+                zIndex: 20,
+                display: 'block',
+                pointerEvents: 'auto',
+                opacity: ready ? 1 : 0
+            };
+        } else {
+            layoutTabs.forEach((t: any) => {
+                const rect = panelRects[String(t.id)];
+                const parentRect = containerRef.current?.getBoundingClientRect();
+                if (rect && parentRect) {
+                    styles[t.id] = {
+                        position: 'absolute',
+                        top: (rect.top - parentRect.top) + HEADER_H + 2,
+                        left: (rect.left - parentRect.left) + 2,
+                        width: rect.width - 4,
+                        height: rect.height - HEADER_H - 4,
+                        zIndex: 20,
+                        display: 'block',
+                        pointerEvents: 'auto',
+                        opacity: ready ? 1 : 0,
+                    };
+                }
+            });
+        }
+
+        return (
+            <div style={{position: 'absolute', inset: 0, zIndex: 1}}>
+                {terminalTabs.map((t: any) => {
+                    const hasStyle = !!styles[t.id];
+                    const isVisible = hasStyle || (allSplitScreenTab.length === 0 && t.id === currentTab);
+
+                    const finalStyle: React.CSSProperties = hasStyle
+                        ? {...styles[t.id], overflow: 'hidden'}
+                        : {
+                            position: 'absolute', inset: 0, visibility: 'hidden', pointerEvents: 'none', zIndex: 0,
+                        } as React.CSSProperties;
+
+                    const effectiveVisible = isVisible && ready;
+                    return (
+                        <div key={t.id} style={finalStyle}>
+                            <div className="absolute inset-0 rounded-md bg-[#18181b]">
+                                {t.type === 'terminal' ? (
+                                    <Terminal
+                                        ref={t.terminalRef}
+                                        hostConfig={t.hostConfig}
+                                        isVisible={effectiveVisible}
+                                        title={t.title}
+                                        showTitle={false}
+                                        splitScreen={allSplitScreenTab.length > 0}
+                                    />
+                                ) : t.type === 'server' ? (
+                                    <ServerView
+                                        hostConfig={t.hostConfig}
+                                        title={t.title}
+                                        isVisible={effectiveVisible}
+                                        isTopbarOpen={isTopbarOpen}
+                                        embedded
+                                    />
+                                ) : (
+                                    <FileManager
+                                        embedded
+                                        initialHost={t.hostConfig}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    const ResetButton = ({onClick}: { onClick: () => void }) => (
+        <Button
+            type="button"
+            variant="ghost"
+            onClick={onClick}
+            aria-label="Reset split sizes"
+            className="absolute top-0 right-0 h-[28px] w-[28px] !rounded-none border-l-1 border-b-1 border-[#222224] bg-[#1b1b1e] hover:bg-[#232327] text-white flex items-center justify-center p-0"
+        >
+            <RefreshCcw className="h-4 w-4"/>
+        </Button>
+    );
+
+    const handleReset = () => {
+        setResetKey((k) => k + 1);
+        requestAnimationFrame(() => scheduleMeasureAndFit());
+    };
+
+    const renderSplitOverlays = () => {
+        const splitTabs = terminalTabs.filter((tab: any) => allSplitScreenTab.includes(tab.id));
+        const mainTab = terminalTabs.find((tab: any) => tab.id === currentTab);
+        const layoutTabs = [mainTab, ...splitTabs.filter((t: any) => t && t.id !== (mainTab && (mainTab as any).id))].filter(Boolean) as any[];
+        if (allSplitScreenTab.length === 0) return null;
+
+        const handleStyle = {pointerEvents: 'auto', zIndex: 12, background: '#303032'} as React.CSSProperties;
+        const commonGroupProps = {onLayout: scheduleMeasureAndFit, onResize: scheduleMeasureAndFit} as any;
+
+        if (layoutTabs.length === 2) {
+            const [a, b] = layoutTabs as any[];
+            return (
+                <div style={{position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none'}}>
+                    <ResizablePrimitive.PanelGroup key={resetKey} direction="horizontal"
+                                                   className="h-full w-full" {...commonGroupProps}>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id={`panel-${a.id}`} order={1}>
+                            <div ref={el => {
+                                panelRefs.current[String(a.id)] = el;
+                            }} style={{
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: 'transparent',
+                                position: 'relative'
+                            }}>
+                                <div style={{
+                                    background: '#1b1b1e',
+                                    color: '#fff',
+                                    fontSize: 13,
+                                    height: HEADER_H,
+                                    lineHeight: `${HEADER_H}px`,
+                                    padding: '0 10px',
+                                    borderBottom: '1px solid #222224',
+                                    letterSpacing: 1,
+                                    margin: 0,
+                                    pointerEvents: 'auto',
+                                    zIndex: 11,
+                                    position: 'relative'
+                                }}>{a.title}</div>
+                            </div>
+                        </ResizablePanel>
+                        <ResizableHandle style={handleStyle}/>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id={`panel-${b.id}`} order={2}>
+                            <div ref={el => {
+                                panelRefs.current[String(b.id)] = el;
+                            }} style={{
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: 'transparent',
+                                position: 'relative'
+                            }}>
+                                <div style={{
+                                    background: '#1b1b1e',
+                                    color: '#fff',
+                                    fontSize: 13,
+                                    height: HEADER_H,
+                                    lineHeight: `${HEADER_H}px`,
+                                    padding: '0 10px',
+                                    borderBottom: '1px solid #222224',
+                                    letterSpacing: 1,
+                                    margin: 0,
+                                    pointerEvents: 'auto',
+                                    zIndex: 11,
+                                    position: 'relative'
+                                }}>
+                                    {b.title}
+                                    <ResetButton onClick={handleReset}/>
+                                </div>
+                            </div>
+                        </ResizablePanel>
+                    </ResizablePrimitive.PanelGroup>
+                </div>
+            );
+        }
+        if (layoutTabs.length === 3) {
+            const [a, b, c] = layoutTabs as any[];
+            return (
+                <div style={{position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none'}}>
+                    <ResizablePrimitive.PanelGroup key={resetKey} direction="vertical" className="h-full w-full"
+                                                   id="main-vertical" {...commonGroupProps}>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id="top-panel" order={1}>
+                            <ResizablePanelGroup key={`top-${resetKey}`} direction="horizontal"
+                                                 className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                                id={`panel-${a.id}`} order={1}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(a.id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#1b1b1e',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: HEADER_H,
+                                            lineHeight: `${HEADER_H}px`,
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                            position: 'relative'
+                                        }}>{a.title}</div>
+                                    </div>
+                                </ResizablePanel>
+                                <ResizableHandle style={handleStyle}/>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                                id={`panel-${b.id}`} order={2}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(b.id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#1b1b1e',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: HEADER_H,
+                                            lineHeight: `${HEADER_H}px`,
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                            position: 'relative'
+                                        }}>
+                                            {b.title}
+                                            <ResetButton onClick={handleReset}/>
+                                        </div>
+                                    </div>
+                                </ResizablePanel>
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                        <ResizableHandle style={handleStyle}/>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id="bottom-panel" order={2}>
+                            <div ref={el => {
+                                panelRefs.current[String(c.id)] = el;
+                            }} style={{
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                position: 'relative'
+                            }}>
+                                <div style={{
+                                    background: '#1b1b1e',
+                                    color: '#fff',
+                                    fontSize: 13,
+                                    height: HEADER_H,
+                                    lineHeight: `${HEADER_H}px`,
+                                    padding: '0 10px',
+                                    borderBottom: '1px solid #222224',
+                                    letterSpacing: 1,
+                                    margin: 0,
+                                    pointerEvents: 'auto',
+                                    zIndex: 11,
+                                    position: 'relative'
+                                }}>{c.title}</div>
+                            </div>
+                        </ResizablePanel>
+                    </ResizablePrimitive.PanelGroup>
+                </div>
+            );
+        }
+        if (layoutTabs.length === 4) {
+            const [a, b, c, d] = layoutTabs as any[];
+            return (
+                <div style={{position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none'}}>
+                    <ResizablePrimitive.PanelGroup key={resetKey} direction="vertical" className="h-full w-full"
+                                                   id="main-vertical" {...commonGroupProps}>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id="top-panel" order={1}>
+                            <ResizablePanelGroup key={`top-${resetKey}`} direction="horizontal"
+                                                 className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full"
+                                                id={`panel-${a.id}`} order={1}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(a.id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#1b1b1e',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: HEADER_H,
+                                            lineHeight: `${HEADER_H}px`,
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                            position: 'relative'
+                                        }}>{a.title}</div>
+                                    </div>
+                                </ResizablePanel>
+                                <ResizableHandle style={handleStyle}/>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full"
+                                                id={`panel-${b.id}`} order={2}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(b.id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#1b1b1e',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: HEADER_H,
+                                            lineHeight: `${HEADER_H}px`,
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                            position: 'relative'
+                                        }}>
+                                            {b.title}
+                                            <ResetButton onClick={handleReset}/>
+                                        </div>
+                                    </div>
+                                </ResizablePanel>
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                        <ResizableHandle style={handleStyle}/>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full"
+                                        id="bottom-panel" order={2}>
+                            <ResizablePanelGroup key={`bottom-${resetKey}`} direction="horizontal"
+                                                 className="h-full w-full" id="bottom-horizontal" {...commonGroupProps}>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full"
+                                                id={`panel-${c.id}`} order={1}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(c.id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#1b1b1e',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: HEADER_H,
+                                            lineHeight: `${HEADER_H}px`,
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                            position: 'relative'
+                                        }}>{c.title}</div>
+                                    </div>
+                                </ResizablePanel>
+                                <ResizableHandle style={handleStyle}/>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full"
+                                                id={`panel-${d.id}`} order={2}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(d.id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#1b1b1e',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: HEADER_H,
+                                            lineHeight: `${HEADER_H}px`,
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                            position: 'relative'
+                                        }}>{d.title}</div>
+                                    </div>
+                                </ResizablePanel>
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                    </ResizablePrimitive.PanelGroup>
+                </div>
+            );
+        }
+        return null;
+    };
+
+    const currentTabData = tabs.find((tab: any) => tab.id === currentTab);
+    const isFileManager = currentTabData?.type === 'file_manager';
+    const isSplitScreen = allSplitScreenTab.length > 0;
+    
+    const topMarginPx = isTopbarOpen ? 74 : 26;
+    const leftMarginPx = sidebarState === 'collapsed' ? 26 : 8;
+    const bottomMarginPx = 8;
+
+    return (
+        <div
+            ref={containerRef}
+            className="border-2 border-[#303032] rounded-lg overflow-hidden overflow-x-hidden"
+            style={{
+                position: 'relative',
+                background: (isFileManager && !isSplitScreen) ? '#09090b' : '#18181b',
+                marginLeft: leftMarginPx,
+                marginRight: 17,
+                marginTop: topMarginPx,
+                marginBottom: bottomMarginPx,
+                height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
+            }}
+        >
+            {renderTerminalsLayer()}
+            {renderSplitOverlays()}
+        </div>
+    );
+}

src/ui/Navigation/Hosts/FolderCard.tsx

@@ -0,0 +1,81 @@
+import React, {useState} from "react";
+import {CardTitle} from "@/components/ui/card.tsx";
+import {ChevronDown, Folder} from "lucide-react";
+import {Button} from "@/components/ui/button.tsx";
+import {Host} from "@/ui/Navigation/Hosts/Host.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableFileManager: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface FolderCardProps {
+    folderName: string;
+    hosts: SSHHost[];
+    isFirst: boolean;
+    isLast: boolean;
+}
+
+export function FolderCard({folderName, hosts, isFirst, isLast}: FolderCardProps): React.ReactElement {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const toggleExpanded = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    return (
+        <div className="bg-[#0e0e10] border-2 border-[#303032] rounded-lg overflow-hidden"
+             style={{padding: '0', margin: '0'}}>
+            <div className={`px-4 py-3 relative ${isExpanded ? 'border-b-2' : ''} bg-[#131316]`}>
+                <div className="flex gap-2 pr-10">
+                    <div className="flex-shrink-0 flex items-center">
+                        <Folder size={16} strokeWidth={3}/>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <CardTitle className="mb-0 leading-tight break-words text-md">{folderName}</CardTitle>
+                    </div>
+                </div>
+                <Button
+                    variant="outline"
+                    className="w-[28px] h-[28px] absolute right-4 top-1/2 -translate-y-1/2 flex-shrink-0"
+                    onClick={toggleExpanded}
+                >
+                    <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? '' : 'rotate-180'}`}/>
+                </Button>
+            </div>
+            {isExpanded && (
+                <div className="flex flex-col p-2 gap-y-3">
+                    {hosts.map((host, index) => (
+                        <React.Fragment key={`${folderName}-host-${host.id}-${host.name || host.ip}`}>
+                            <Host host={host}/>
+                            {index < hosts.length - 1 && (
+                                <div className="relative -mx-2">
+                                    <Separator className="p-0.25 absolute inset-x-0"/>
+                                </div>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

src/ui/Navigation/Hosts/Host.tsx

@@ -0,0 +1,112 @@
+import React, {useEffect, useState} from "react";
+import {Status, StatusIndicator} from "@/components/ui/shadcn-io/status";
+import {Button} from "@/components/ui/button.tsx";
+import {ButtonGroup} from "@/components/ui/button-group.tsx";
+import {Server, Terminal} from "lucide-react";
+import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {getServerStatusById} from "@/ui/main-axios.ts";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableFileManager: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface HostProps {
+    host: SSHHost;
+}
+
+export function Host({host}: HostProps): React.ReactElement {
+    const {addTab} = useTabs();
+    const [serverStatus, setServerStatus] = useState<'online' | 'offline' | 'degraded'>('degraded');
+    const tags = Array.isArray(host.tags) ? host.tags : [];
+    const hasTags = tags.length > 0;
+
+    const title = host.name?.trim() ? host.name : `${host.username}@${host.ip}:${host.port}`;
+
+    useEffect(() => {
+        let intervalId: number | undefined;
+        let cancelled = false;
+
+        const fetchStatus = async () => {
+            try {
+                const res = await getServerStatusById(host.id);
+                if (!cancelled) {
+                    setServerStatus(res?.status === 'online' ? 'online' : 'offline');
+                }
+            } catch {
+                if (!cancelled) setServerStatus('offline');
+            }
+        };
+
+        fetchStatus();
+
+        intervalId = window.setInterval(fetchStatus, 10000);
+
+        return () => {
+            cancelled = true;
+            if (intervalId) window.clearInterval(intervalId);
+        };
+    }, [host.id]);
+
+    const handleTerminalClick = () => {
+        addTab({type: 'terminal', title, hostConfig: host});
+    };
+
+    const handleServerClick = () => {
+        addTab({type: 'server', title, hostConfig: host});
+    };
+
+    return (
+        <div>
+            <div className="flex items-center gap-2">
+                <Status status={serverStatus} className="!bg-transparent !p-0.75 flex-shrink-0">
+                    <StatusIndicator/>
+                </Status>
+                <p className="font-semibold flex-1 min-w-0 break-words text-sm">
+                    {host.name || host.ip}
+                </p>
+                <ButtonGroup className="flex-shrink-0">
+                    <Button variant="outline" className="!px-2 border-1 border-[#303032]" onClick={handleServerClick}>
+                        <Server/>
+                    </Button>
+                    {host.enableTerminal && (
+                        <Button
+                            variant="outline"
+                            className="!px-2 border-1 border-[#303032]"
+                            onClick={handleTerminalClick}
+                        >
+                            <Terminal/>
+                        </Button>
+                    )}
+                </ButtonGroup>
+            </div>
+            {hasTags && (
+                <div className="flex flex-wrap items-center gap-2 mt-1">
+                    {tags.map((tag: string) => (
+                        <div key={tag} className="bg-[#18181b] border-1 border-[#303032] pl-2 pr-2 rounded-[10px]">
+                            <p className="text-sm">{tag}</p>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

src/ui/Navigation/LeftSidebar.tsx

@@ -0,0 +1,539 @@
+import React, {useState} from 'react';
+import {
+    Computer,
+    Server,
+    File,
+    Hammer, ChevronUp, User2, HardDrive, Trash2, Users, Shield, Settings, Menu, ChevronRight
+} from "lucide-react";
+import { useTranslation } from 'react-i18next';
+
+import {
+    Sidebar,
+    SidebarContent, SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem, SidebarProvider, SidebarInset, SidebarHeader,
+} from "@/components/ui/sidebar.tsx"
+
+import {
+    Separator,
+} from "@/components/ui/separator.tsx"
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@radix-ui/react-dropdown-menu";
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+    SheetClose
+} from "@/components/ui/sheet";
+import {Checkbox} from "@/components/ui/checkbox.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Label} from "@/components/ui/label.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Alert, AlertTitle, AlertDescription} from "@/components/ui/alert.tsx";
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table.tsx";
+import {Card} from "@/components/ui/card.tsx";
+import {FolderCard} from "@/ui/Navigation/Hosts/FolderCard.tsx";
+import {getSSHHosts} from "@/ui/main-axios.ts";
+import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import { deleteAccount } from "@/ui/main-axios.ts";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableFileManager: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface SidebarProps {
+    onSelectView: (view: string) => void;
+    getView?: () => string;
+    disabled?: boolean;
+    isAdmin?: boolean;
+    username?: string | null;
+    children?: React.ReactNode;
+}
+
+function handleLogout() {
+    document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    window.location.reload();
+}
+
+function getCookie(name: string) {
+    return document.cookie.split('; ').reduce((r, v) => {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+    }, "");
+}
+
+
+
+export function LeftSidebar({
+                                onSelectView,
+                                getView,
+                                disabled,
+                                isAdmin,
+                                username,
+                                children,
+                            }: SidebarProps): React.ReactElement {
+    const { t } = useTranslation();
+    
+    const [deleteAccountOpen, setDeleteAccountOpen] = React.useState(false);
+    const [deletePassword, setDeletePassword] = React.useState("");
+    const [deleteLoading, setDeleteLoading] = React.useState(false);
+    const [deleteError, setDeleteError] = React.useState<string | null>(null);
+
+    const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
+
+    const {tabs: tabList, addTab, setCurrentTab, allSplitScreenTab} = useTabs() as any;
+    const isSplitScreenActive = Array.isArray(allSplitScreenTab) && allSplitScreenTab.length > 0;
+    const sshManagerTab = tabList.find((t) => t.type === 'ssh_manager');
+    const openSshManagerTab = () => {
+        if (sshManagerTab || isSplitScreenActive) return;
+        const id = addTab({type: 'ssh_manager'} as any);
+        setCurrentTab(id);
+    };
+    const adminTab = tabList.find((t) => t.type === 'admin');
+    const openAdminTab = () => {
+        if (isSplitScreenActive) return;
+        if (adminTab) {
+            setCurrentTab(adminTab.id);
+            return;
+        }
+        const id = addTab({type: 'admin'} as any);
+        setCurrentTab(id);
+    };
+
+    const [hosts, setHosts] = useState<SSHHost[]>([]);
+    const [hostsLoading, setHostsLoading] = useState(false);
+    const [hostsError, setHostsError] = useState<string | null>(null);
+    const prevHostsRef = React.useRef<SSHHost[]>([]);
+    const [search, setSearch] = useState("");
+    const [debouncedSearch, setDebouncedSearch] = useState("");
+
+
+
+    const fetchHosts = React.useCallback(async () => {
+        try {
+            const newHosts = await getSSHHosts();
+            const prevHosts = prevHostsRef.current;
+
+            const existingHostsMap = new Map(prevHosts.map(h => [h.id, h]));
+            const newHostsMap = new Map(newHosts.map(h => [h.id, h]));
+
+            let hasChanges = false;
+
+            if (newHosts.length !== prevHosts.length) {
+                hasChanges = true;
+            } else {
+                for (const [id, newHost] of newHostsMap) {
+                    const existingHost = existingHostsMap.get(id);
+                    if (!existingHost) {
+                        hasChanges = true;
+                        break;
+                    }
+
+                    if (
+                        newHost.name !== existingHost.name ||
+                        newHost.folder !== existingHost.folder ||
+                        newHost.ip !== existingHost.ip ||
+                        newHost.port !== existingHost.port ||
+                        newHost.username !== existingHost.username ||
+                        newHost.pin !== existingHost.pin ||
+                        newHost.enableTerminal !== existingHost.enableTerminal ||
+                        JSON.stringify(newHost.tags) !== JSON.stringify(existingHost.tags)
+                    ) {
+                        hasChanges = true;
+                        break;
+                    }
+                }
+            }
+
+            if (hasChanges) {
+                setTimeout(() => {
+                    setHosts(newHosts);
+                    prevHostsRef.current = newHosts;
+                }, 50);
+            }
+        } catch (err: any) {
+            setHostsError(t('leftSidebar.failedToLoadHosts'));
+        }
+    }, []);
+
+    React.useEffect(() => {
+        fetchHosts();
+        const interval = setInterval(fetchHosts, 300000); // 5 minutes instead of 10 seconds
+        return () => clearInterval(interval);
+    }, [fetchHosts]);
+
+    React.useEffect(() => {
+        const handleHostsChanged = () => {
+            fetchHosts();
+        };
+        window.addEventListener('ssh-hosts:changed', handleHostsChanged as EventListener);
+        return () => window.removeEventListener('ssh-hosts:changed', handleHostsChanged as EventListener);
+    }, [fetchHosts]);
+
+    React.useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(search), 200);
+        return () => clearTimeout(handler);
+    }, [search]);
+
+    const filteredHosts = React.useMemo(() => {
+        if (!debouncedSearch.trim()) return hosts;
+        const q = debouncedSearch.trim().toLowerCase();
+        return hosts.filter(h => {
+            const searchableText = [
+                h.name || '',
+                h.username,
+                h.ip,
+                h.folder || '',
+                ...(h.tags || []),
+                h.authType,
+                h.defaultPath || ''
+            ].join(' ').toLowerCase();
+            return searchableText.includes(q);
+        });
+    }, [hosts, debouncedSearch]);
+
+    const hostsByFolder = React.useMemo(() => {
+        const map: Record<string, SSHHost[]> = {};
+        filteredHosts.forEach(h => {
+            const folder = h.folder && h.folder.trim() ? h.folder : t('leftSidebar.noFolder');
+            if (!map[folder]) map[folder] = [];
+            map[folder].push(h);
+        });
+        return map;
+    }, [filteredHosts]);
+
+    const sortedFolders = React.useMemo(() => {
+        const folders = Object.keys(hostsByFolder);
+        folders.sort((a, b) => {
+            if (a === t('leftSidebar.noFolder')) return -1;
+            if (b === t('leftSidebar.noFolder')) return 1;
+            return a.localeCompare(b);
+        });
+        return folders;
+    }, [hostsByFolder]);
+
+    const getSortedHosts = React.useCallback((arr: SSHHost[]) => {
+        const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        return [...pinned, ...rest];
+    }, []);
+
+    const handleDeleteAccount = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setDeleteLoading(true);
+        setDeleteError(null);
+
+        if (!deletePassword.trim()) {
+            setDeleteError(t('leftSidebar.passwordRequired'));
+            setDeleteLoading(false);
+            return;
+        }
+
+        const jwt = getCookie("jwt");
+        try {
+            await deleteAccount(deletePassword);
+
+            handleLogout();
+        } catch (err: any) {
+            setDeleteError(err?.response?.data?.error || t('leftSidebar.failedToDeleteAccount'));
+            setDeleteLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-svh">
+            <SidebarProvider open={isSidebarOpen}>
+                <Sidebar variant="floating" className="">
+                    <SidebarHeader>
+                        <SidebarGroupLabel className="text-lg font-bold text-white">
+                            Termix
+                            <Button
+                                variant="outline"
+                                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                                className="w-[28px] h-[28px] absolute right-5"
+                                title={t('common.toggleSidebar')}
+                            >
+                                <Menu className="h-4 w-4"/>
+                            </Button>
+                        </SidebarGroupLabel>
+                    </SidebarHeader>
+                    <Separator className="p-0.25"/>
+                    <SidebarContent>
+                        <SidebarGroup className="!m-0 !p-0 !-mb-2">
+                            <Button className="m-2 flex flex-row font-semibold border-2 !border-[#303032]" variant="outline"
+                                    onClick={openSshManagerTab} disabled={!!sshManagerTab || isSplitScreenActive}
+                                    title={sshManagerTab ? t('interface.sshManagerAlreadyOpen') : isSplitScreenActive ? t('interface.disabledDuringSplitScreen') : undefined}>
+                                <HardDrive strokeWidth="2.5"/>
+                                {t('nav.hostManager')}
+                            </Button>
+                        </SidebarGroup>
+                        <Separator className="p-0.25"/>
+                        <SidebarGroup className="flex flex-col gap-y-2 !-mt-2">
+                            <div className="!bg-[#222225] rounded-lg">
+                                <Input
+                                    value={search}
+                                    onChange={e => setSearch(e.target.value)}
+                                    placeholder={t('placeholders.searchHostsAny')}
+                                    className="w-full h-8 text-sm border-2 !bg-[#222225] border-[#303032] rounded-md"
+                                    autoComplete="off"
+                                />
+                            </div>
+
+                            {hostsError && (
+                                <div className="px-1">
+                                    <div
+                                        className="text-xs text-red-500 bg-red-500/10 rounded-lg px-2 py-1 border w-full">
+                                        {t('leftSidebar.failedToLoadHosts')}
+                                    </div>
+                                </div>
+                            )}
+
+                            {hostsLoading && (
+                                <div className="px-4 pb-2">
+                                    <div className="text-xs text-muted-foreground text-center">
+                                        {t('hosts.loadingHosts')}
+                                    </div>
+                                </div>
+                            )}
+
+                            {sortedFolders.map((folder, idx) => (
+                                <FolderCard
+                                    key={`folder-${folder}-${hostsByFolder[folder]?.length || 0}`}
+                                    folderName={folder}
+                                    hosts={getSortedHosts(hostsByFolder[folder])}
+                                    isFirst={idx === 0}
+                                    isLast={idx === sortedFolders.length - 1}
+                                />
+                            ))}
+                        </SidebarGroup>
+                    </SidebarContent>
+                    <Separator className="p-0.25 mt-1 mb-1"/>
+                    <SidebarFooter>
+                        <SidebarMenu>
+                            <SidebarMenuItem>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                        <SidebarMenuButton
+                                            className="data-[state=open]:opacity-90 w-full"
+                                            style={{width: '100%'}}
+                                            disabled={disabled}
+                                        >
+                                            <User2/> {username ? username : t('common.logout')}
+                                            <ChevronUp className="ml-auto"/>
+                                        </SidebarMenuButton>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent
+                                        side="top"
+                                        align="start"
+                                        sideOffset={6}
+                                        className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
+                                    >
+                                        <DropdownMenuItem
+                                            className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                                            onClick={() => {
+                                                if (isSplitScreenActive) return;
+                                                const profileTab = tabList.find((t: any) => t.type === 'profile');
+                                                if (profileTab) {
+                                                    setCurrentTab(profileTab.id);
+                                                    return;
+                                                }
+                                                const id = addTab({type: 'profile', title: t('profile.title')} as any);
+                                                setCurrentTab(id);
+                                            }}>
+                                            <span>{t('profile.title')}</span>
+                                        </DropdownMenuItem>
+                                        {isAdmin && (
+                                            <DropdownMenuItem
+                                                className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                                                onClick={() => {
+                                                    if (isAdmin) openAdminTab();
+                                                }}>
+                                                <span>{t('admin.title')}</span>
+                                            </DropdownMenuItem>
+                                        )}
+                                        <DropdownMenuItem
+                                            className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                                            onClick={handleLogout}>
+                                            <span>{t('common.logout')}</span>
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                                            onClick={() => setDeleteAccountOpen(true)}
+                                        >
+                                            <span className="text-red-400">
+                                                {t('leftSidebar.deleteAccount')}
+                                            </span>
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            </SidebarMenuItem>
+                        </SidebarMenu>
+                    </SidebarFooter>
+
+
+                </Sidebar>
+                <SidebarInset>
+                    {children}
+                </SidebarInset>
+            </SidebarProvider>
+
+            {!isSidebarOpen && (
+                <div
+                    onClick={() => setIsSidebarOpen(true)}
+                    className="absolute top-0 left-0 w-[10px] h-full bg-[#18181b] cursor-pointer z-20 flex items-center justify-center rounded-tr-md rounded-br-md">
+                    <ChevronRight size={10}/>
+                </div>
+            )}
+
+            {deleteAccountOpen && (
+                <div
+                    className="fixed inset-0 z-[999999] flex"
+                    style={{
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 999999,
+                        pointerEvents: 'auto',
+                        isolation: 'isolate',
+                        transform: 'translateZ(0)',
+                        willChange: 'z-index'
+                    }}
+                >
+                    <div
+                        className="w-[400px] h-full bg-[#18181b] border-r-2 border-[#303032] flex flex-col shadow-2xl"
+                        style={{
+                            backgroundColor: '#18181b',
+                            boxShadow: '4px 0 20px rgba(0, 0, 0, 0.5)',
+                            zIndex: 9999999,
+                            position: 'relative',
+                            isolation: 'isolate',
+                            transform: 'translateZ(0)'
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <div className="flex items-center justify-between p-4 border-b border-[#303032]">
+                            <h2 className="text-lg font-semibold text-white">{t('leftSidebar.deleteAccount')}</h2>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
+                                    setDeleteAccountOpen(false);
+                                    setDeletePassword("");
+                                    setDeleteError(null);
+                                }}
+                                className="h-8 w-8 p-0 hover:bg-red-500 hover:text-white transition-colors flex items-center justify-center"
+                                title={t('leftSidebar.closeDeleteAccount')}
+                            >
+                                <span className="text-lg font-bold leading-none">×</span>
+                            </Button>
+                        </div>
+
+                        <div className="flex-1 overflow-y-auto p-4">
+                            <div className="space-y-4">
+                                <div className="text-sm text-gray-300">
+                                    {t('leftSidebar.deleteAccountWarning')}
+                                </div>
+
+                                <Alert variant="destructive">
+                                    <AlertTitle>{t('common.warning')}</AlertTitle>
+                                    <AlertDescription>
+                                        {t('leftSidebar.deleteAccountWarningDetails')}
+                                    </AlertDescription>
+                                </Alert>
+
+                                {deleteError && (
+                                    <Alert variant="destructive">
+                                        <AlertTitle>{t('common.error')}</AlertTitle>
+                                        <AlertDescription>{deleteError}</AlertDescription>
+                                    </Alert>
+                                )}
+
+                                <form onSubmit={handleDeleteAccount} className="space-y-4">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="delete-password">{t('leftSidebar.confirmPassword')}</Label>
+                                        <Input
+                                            id="delete-password"
+                                            type="password"
+                                            value={deletePassword}
+                                            onChange={(e) => setDeletePassword(e.target.value)}
+                                            placeholder={t('placeholders.confirmPassword')}
+                                            required
+                                        />
+                                    </div>
+
+                                    <div className="flex gap-2">
+                                        <Button
+                                            type="submit"
+                                            variant="destructive"
+                                            className="flex-1"
+                                            disabled={deleteLoading || !deletePassword.trim()}
+                                        >
+                                            {deleteLoading ? t('leftSidebar.deleting') : t('leftSidebar.deleteAccount')}
+                                        </Button>
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            onClick={() => {
+                                                setDeleteAccountOpen(false);
+                                                setDeletePassword("");
+                                                setDeleteError(null);
+                                            }}
+                                        >
+                                            {t('leftSidebar.cancel')}
+                                        </Button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        className="flex-1"
+                        onClick={() => {
+                            setDeleteAccountOpen(false);
+                            setDeletePassword("");
+                            setDeleteError(null);
+                        }}
+                        style={{cursor: 'pointer'}}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}

src/ui/Navigation/Tabs/Tab.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import {ButtonGroup} from "@/components/ui/button-group.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {useTranslation} from 'react-i18next';
+import {
+    Home,
+    SeparatorVertical,
+    X,
+    Terminal as TerminalIcon,
+    Server as ServerIcon,
+    Folder as FolderIcon
+} from "lucide-react";
+
+interface TabProps {
+    tabType: string;
+    title?: string;
+    isActive?: boolean;
+    onActivate?: () => void;
+    onClose?: () => void;
+    onSplit?: () => void;
+    canSplit?: boolean;
+    canClose?: boolean;
+    disableActivate?: boolean;
+    disableSplit?: boolean;
+    disableClose?: boolean;
+}
+
+export function Tab({
+                        tabType,
+                        title,
+                        isActive,
+                        onActivate,
+                        onClose,
+                        onSplit,
+                        canSplit = false,
+                        canClose = false,
+                        disableActivate = false,
+                        disableSplit = false,
+                        disableClose = false
+                    }: TabProps): React.ReactElement {
+    const {t} = useTranslation();
+    if (tabType === "home") {
+        return (
+            <Button
+                variant="outline"
+                className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                onClick={onActivate}
+                disabled={disableActivate}
+            >
+                <Home/>
+            </Button>
+        );
+    }
+
+    if (tabType === "terminal" || tabType === "server" || tabType === "file_manager") {
+        const isServer = tabType === 'server';
+        const isFileManager = tabType === 'file_manager';
+        return (
+            <ButtonGroup>
+                <Button
+                    variant="outline"
+                    className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                    onClick={onActivate}
+                    disabled={disableActivate}
+                >
+                    {isServer ? <ServerIcon className="mr-1 h-4 w-4"/> : isFileManager ?
+                        <FolderIcon className="mr-1 h-4 w-4"/> : <TerminalIcon className="mr-1 h-4 w-4"/>}
+                    {title || (isServer ? t('nav.serverStats') : isFileManager ? t('nav.fileManager') : t('nav.terminal'))}
+                </Button>
+                {canSplit && (
+                    <Button
+                        variant="outline"
+                        className="!px-2 border-1 border-[#303032]"
+                        onClick={onSplit}
+                        disabled={disableSplit}
+                        title={disableSplit ? t('nav.cannotSplitTab') : t('nav.splitScreen')}
+                    >
+                        <SeparatorVertical className="w-[28px] h-[28px]"/>
+                    </Button>
+                )}
+                {canClose && (
+                    <Button
+                        variant="outline"
+                        className="!px-2 border-1 border-[#303032]"
+                        onClick={onClose}
+                        disabled={disableClose}
+                    >
+                        <X/>
+                    </Button>
+                )}
+            </ButtonGroup>
+        );
+    }
+
+    if (tabType === "ssh_manager") {
+        return (
+            <ButtonGroup>
+                <Button
+                    variant="outline"
+                    className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                    onClick={onActivate}
+                    disabled={disableActivate}
+                >
+                    {title || t('nav.sshManager')}
+                </Button>
+                <Button
+                    variant="outline"
+                    className="!px-2 border-1 border-[#303032]"
+                    onClick={onClose}
+                    disabled={disableClose}
+                >
+                    <X/>
+                </Button>
+            </ButtonGroup>
+        );
+    }
+
+    if (tabType === "admin") {
+        return (
+            <ButtonGroup>
+                <Button
+                    variant="outline"
+                    className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                    onClick={onActivate}
+                    disabled={disableActivate}
+                >
+                    {title || t('nav.admin')}
+                </Button>
+                <Button
+                    variant="outline"
+                    className="!px-2 border-1 border-[#303032]"
+                    onClick={onClose}
+                    disabled={disableClose}
+                >
+                    <X/>
+                </Button>
+            </ButtonGroup>
+        );
+    }
+
+    return null;
+}

src/ui/Navigation/Tabs/TabContext.tsx

@@ -0,0 +1,135 @@
+import React, {createContext, useContext, useState, useRef, type ReactNode} from 'react';
+import {useTranslation} from 'react-i18next';
+
+export interface Tab {
+    id: number;
+    type: 'home' | 'terminal' | 'ssh_manager' | 'server' | 'admin' | 'file_manager';
+    title: string;
+    hostConfig?: any;
+    terminalRef?: React.RefObject<any>;
+}
+
+interface TabContextType {
+    tabs: Tab[];
+    currentTab: number | null;
+    allSplitScreenTab: number[];
+    addTab: (tab: Omit<Tab, 'id'>) => number;
+    removeTab: (tabId: number) => void;
+    setCurrentTab: (tabId: number) => void;
+    setSplitScreenTab: (tabId: number) => void;
+    getTab: (tabId: number) => Tab | undefined;
+}
+
+const TabContext = createContext<TabContextType | undefined>(undefined);
+
+export function useTabs() {
+    const context = useContext(TabContext);
+    if (context === undefined) {
+        throw new Error('useTabs must be used within a TabProvider');
+    }
+    return context;
+}
+
+interface TabProviderProps {
+    children: ReactNode;
+}
+
+export function TabProvider({children}: TabProviderProps) {
+    const {t} = useTranslation();
+    const [tabs, setTabs] = useState<Tab[]>([
+        {id: 1, type: 'home', title: t('nav.home')}
+    ]);
+    const [currentTab, setCurrentTab] = useState<number>(1);
+    const [allSplitScreenTab, setAllSplitScreenTab] = useState<number[]>([]);
+    const nextTabId = useRef(2);
+
+    function computeUniqueTitle(tabType: Tab['type'], desiredTitle: string | undefined): string {
+        const defaultTitle = tabType === 'server' ? t('nav.serverStats') : (tabType === 'file_manager' ? t('nav.fileManager') : t('nav.terminal'));
+        const baseTitle = (desiredTitle || defaultTitle).trim();
+        const match = baseTitle.match(/^(.*) \((\d+)\)$/);
+        const root = match ? match[1] : baseTitle;
+
+        const usedNumbers = new Set<number>();
+        let rootUsed = false;
+        tabs.forEach(t => {
+            if (!t.title) return;
+            if (t.title === root) {
+                rootUsed = true;
+                return;
+            }
+            const m = t.title.match(new RegExp(`^${root.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")} \\((\\d+)\\)$`));
+            if (m) {
+                const n = parseInt(m[1], 10);
+                if (!isNaN(n)) usedNumbers.add(n);
+            }
+        });
+
+        if (!rootUsed) return root;
+        let n = 2;
+        while (usedNumbers.has(n)) n += 1;
+        return `${root} (${n})`;
+    }
+
+    const addTab = (tabData: Omit<Tab, 'id'>): number => {
+        const id = nextTabId.current++;
+        const needsUniqueTitle = tabData.type === 'terminal' || tabData.type === 'server' || tabData.type === 'file_manager';
+        const effectiveTitle = needsUniqueTitle ? computeUniqueTitle(tabData.type, tabData.title) : (tabData.title || '');
+        const newTab: Tab = {
+            ...tabData,
+            id,
+            title: effectiveTitle,
+            terminalRef: tabData.type === 'terminal' ? React.createRef<any>() : undefined
+        };
+        setTabs(prev => [...prev, newTab]);
+        setCurrentTab(id);
+        setAllSplitScreenTab(prev => prev.filter(tid => tid !== id));
+        return id;
+    };
+
+    const removeTab = (tabId: number) => {
+        const tab = tabs.find(t => t.id === tabId);
+        if (tab && tab.terminalRef?.current && typeof tab.terminalRef.current.disconnect === "function") {
+            tab.terminalRef.current.disconnect();
+        }
+
+        setTabs(prev => prev.filter(tab => tab.id !== tabId));
+        setAllSplitScreenTab(prev => prev.filter(id => id !== tabId));
+
+        if (currentTab === tabId) {
+            const remainingTabs = tabs.filter(tab => tab.id !== tabId);
+            setCurrentTab(remainingTabs.length > 0 ? remainingTabs[0].id : 1);
+        }
+    };
+
+    const setSplitScreenTab = (tabId: number) => {
+        setAllSplitScreenTab(prev => {
+            if (prev.includes(tabId)) {
+                return prev.filter(id => id !== tabId);
+            } else if (prev.length < 3) {
+                return [...prev, tabId];
+            }
+            return prev;
+        });
+    };
+
+    const getTab = (tabId: number) => {
+        return tabs.find(tab => tab.id === tabId);
+    };
+
+    const value: TabContextType = {
+        tabs,
+        currentTab,
+        allSplitScreenTab,
+        addTab,
+        removeTab,
+        setCurrentTab,
+        setSplitScreenTab,
+        getTab,
+    };
+
+    return (
+        <TabContext.Provider value={value}>
+            {children}
+        </TabContext.Provider>
+    );
+}

src/ui/Navigation/TopNavbar.tsx

@@ -0,0 +1,455 @@
+import React, {useState} from "react";
+import {useSidebar} from "@/components/ui/sidebar";
+import {Button} from "@/components/ui/button.tsx";
+import {ChevronDown, ChevronUpIcon, Hammer} from "lucide-react";
+import {Tab} from "@/ui/Navigation/Tabs/Tab.tsx";
+import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Checkbox} from "@/components/ui/checkbox.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+import {useTranslation} from "react-i18next";
+
+interface TopNavbarProps {
+    isTopbarOpen: boolean;
+    setIsTopbarOpen: (open: boolean) => void;
+}
+
+export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): React.ReactElement {
+    const {state} = useSidebar();
+    const {tabs, currentTab, setCurrentTab, setSplitScreenTab, removeTab, allSplitScreenTab} = useTabs() as any;
+    const leftPosition = state === "collapsed" ? "26px" : "264px";
+    const {t} = useTranslation();
+
+    const [toolsSheetOpen, setToolsSheetOpen] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const [selectedTabIds, setSelectedTabIds] = useState<number[]>([]);
+
+    const handleTabActivate = (tabId: number) => {
+        setCurrentTab(tabId);
+    };
+
+    const handleTabSplit = (tabId: number) => {
+        setSplitScreenTab(tabId);
+    };
+
+    const handleTabClose = (tabId: number) => {
+        removeTab(tabId);
+    };
+
+    const handleTabToggle = (tabId: number) => {
+        setSelectedTabIds(prev => prev.includes(tabId) ? prev.filter(id => id !== tabId) : [...prev, tabId]);
+    };
+
+    const handleStartRecording = () => {
+        setIsRecording(true);
+        setTimeout(() => {
+            const input = document.getElementById('ssh-tools-input') as HTMLInputElement;
+            if (input) input.focus();
+        }, 100);
+    };
+
+    const handleStopRecording = () => {
+        setIsRecording(false);
+        setSelectedTabIds([]);
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (selectedTabIds.length === 0) return;
+
+        const value = e.currentTarget.value;
+        let commandToSend = '';
+
+        if (e.ctrlKey || e.metaKey) {
+            if (e.key === 'c') {
+                commandToSend = '\x03'; // Ctrl+C (SIGINT)
+                e.preventDefault();
+            } else if (e.key === 'd') {
+                commandToSend = '\x04'; // Ctrl+D (EOF)
+                e.preventDefault();
+            } else if (e.key === 'l') {
+                commandToSend = '\x0c'; // Ctrl+L (clear screen)
+                e.preventDefault();
+            } else if (e.key === 'u') {
+                commandToSend = '\x15'; // Ctrl+U (clear line)
+                e.preventDefault();
+            } else if (e.key === 'k') {
+                commandToSend = '\x0b'; // Ctrl+K (clear from cursor to end)
+                e.preventDefault();
+            } else if (e.key === 'a') {
+                commandToSend = '\x01'; // Ctrl+A (move to beginning of line)
+                e.preventDefault();
+            } else if (e.key === 'e') {
+                commandToSend = '\x05'; // Ctrl+E (move to end of line)
+                e.preventDefault();
+            } else if (e.key === 'w') {
+                commandToSend = '\x17'; // Ctrl+W (delete word before cursor)
+                e.preventDefault();
+            }
+        } else if (e.key === 'Enter') {
+            commandToSend = '\n';
+            e.preventDefault();
+        } else if (e.key === 'Backspace') {
+            commandToSend = '\x08'; // Backspace
+            e.preventDefault();
+        } else if (e.key === 'Delete') {
+            commandToSend = '\x7f'; // Delete
+            e.preventDefault();
+        } else if (e.key === 'Tab') {
+            commandToSend = '\x09'; // Tab
+            e.preventDefault();
+        } else if (e.key === 'Escape') {
+            commandToSend = '\x1b'; // Escape
+            e.preventDefault();
+        } else if (e.key === 'ArrowUp') {
+            commandToSend = '\x1b[A'; // Up arrow
+            e.preventDefault();
+        } else if (e.key === 'ArrowDown') {
+            commandToSend = '\x1b[B'; // Down arrow
+            e.preventDefault();
+        } else if (e.key === 'ArrowLeft') {
+            commandToSend = '\x1b[D'; // Left arrow
+            e.preventDefault();
+        } else if (e.key === 'ArrowRight') {
+            commandToSend = '\x1b[C'; // Right arrow
+            e.preventDefault();
+        } else if (e.key === 'Home') {
+            commandToSend = '\x1b[H'; // Home
+            e.preventDefault();
+        } else if (e.key === 'End') {
+            commandToSend = '\x1b[F'; // End
+            e.preventDefault();
+        } else if (e.key === 'PageUp') {
+            commandToSend = '\x1b[5~'; // Page Up
+            e.preventDefault();
+        } else if (e.key === 'PageDown') {
+            commandToSend = '\x1b[6~'; // Page Down
+            e.preventDefault();
+        } else if (e.key === 'Insert') {
+            commandToSend = '\x1b[2~'; // Insert
+            e.preventDefault();
+        } else if (e.key === 'F1') {
+            commandToSend = '\x1bOP'; // F1
+            e.preventDefault();
+        } else if (e.key === 'F2') {
+            commandToSend = '\x1bOQ'; // F2
+            e.preventDefault();
+        } else if (e.key === 'F3') {
+            commandToSend = '\x1bOR'; // F3
+            e.preventDefault();
+        } else if (e.key === 'F4') {
+            commandToSend = '\x1bOS'; // F4
+            e.preventDefault();
+        } else if (e.key === 'F5') {
+            commandToSend = '\x1b[15~'; // F5
+            e.preventDefault();
+        } else if (e.key === 'F6') {
+            commandToSend = '\x1b[17~'; // F6
+            e.preventDefault();
+        } else if (e.key === 'F7') {
+            commandToSend = '\x1b[18~'; // F7
+            e.preventDefault();
+        } else if (e.key === 'F8') {
+            commandToSend = '\x1b[19~'; // F8
+            e.preventDefault();
+        } else if (e.key === 'F9') {
+            commandToSend = '\x1b[20~'; // F9
+            e.preventDefault();
+        } else if (e.key === 'F10') {
+            commandToSend = '\x1b[21~'; // F10
+            e.preventDefault();
+        } else if (e.key === 'F11') {
+            commandToSend = '\x1b[23~'; // F11
+            e.preventDefault();
+        } else if (e.key === 'F12') {
+            commandToSend = '\x1b[24~'; // F12
+            e.preventDefault();
+        }
+
+        if (commandToSend) {
+            selectedTabIds.forEach(tabId => {
+                const tab = tabs.find((t: any) => t.id === tabId);
+                if (tab?.terminalRef?.current?.sendInput) {
+                    tab.terminalRef.current.sendInput(commandToSend);
+                }
+            });
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (selectedTabIds.length === 0) return;
+
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+            const char = e.key;
+            selectedTabIds.forEach(tabId => {
+                const tab = tabs.find((t: any) => t.id === tabId);
+                if (tab?.terminalRef?.current?.sendInput) {
+                    tab.terminalRef.current.sendInput(char);
+                }
+            });
+        }
+    };
+
+    const isSplitScreenActive = Array.isArray(allSplitScreenTab) && allSplitScreenTab.length > 0;
+    const currentTabObj = tabs.find((t: any) => t.id === currentTab);
+    const currentTabIsHome = currentTabObj?.type === 'home';
+    const currentTabIsSshManager = currentTabObj?.type === 'ssh_manager';
+    const currentTabIsAdmin = currentTabObj?.type === 'admin';
+
+    const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal');
+
+    function getCookie(name: string) {
+        return document.cookie.split('; ').reduce((r, v) => {
+            const parts = v.split('=');
+            return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+        }, "");
+    }
+
+    const updateRightClickCopyPaste = (checked: boolean) => {
+        document.cookie = `rightClickCopyPaste=${checked}; expires=2147483647; path=/`;
+    }
+
+    return (
+        <div>
+            <div
+                className="fixed z-10 h-[50px] bg-[#18181b] border-2 border-[#303032] rounded-lg transition-all duration-200 ease-linear flex flex-row"
+                style={{
+                    top: isTopbarOpen ? "0.5rem" : "-3rem",
+                    left: leftPosition,
+                    right: "17px",
+                    position: "fixed",
+                    transform: "none",
+                    margin: "0",
+                    padding: "0"
+                }}
+            >
+                <div
+                    className="h-full p-1 pr-2 border-r-2 border-[#303032] w-[calc(100%-6rem)] flex items-center overflow-x-auto overflow-y-hidden gap-2 thin-scrollbar">
+                    {tabs.map((tab: any) => {
+                        const isActive = tab.id === currentTab;
+                        const isSplit = Array.isArray(allSplitScreenTab) && allSplitScreenTab.includes(tab.id);
+                        const isTerminal = tab.type === 'terminal';
+                        const isServer = tab.type === 'server';
+                        const isFileManager = tab.type === 'file_manager';
+                        const isSshManager = tab.type === 'ssh_manager';
+                        const isAdmin = tab.type === 'admin';
+                        const isSplittable = isTerminal || isServer || isFileManager;
+                        const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
+                        const disableSplit = !isSplittable || isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager || currentTabIsAdmin;
+                        const disableActivate = isSplit || ((tab.type === 'home' || tab.type === 'ssh_manager' || tab.type === 'admin') && isSplitScreenActive);
+                        const disableClose = (isSplitScreenActive && isActive) || isSplit;
+                        return (
+                            <Tab
+                                key={tab.id}
+                                tabType={tab.type}
+                                title={tab.title}
+                                isActive={isActive}
+                                onActivate={() => handleTabActivate(tab.id)}
+                                onClose={isTerminal || isServer || isFileManager || isSshManager || isAdmin ? () => handleTabClose(tab.id) : undefined}
+                                onSplit={isSplittable ? () => handleTabSplit(tab.id) : undefined}
+                                canSplit={isSplittable}
+                                canClose={isTerminal || isServer || isFileManager || isSshManager || isAdmin}
+                                disableActivate={disableActivate}
+                                disableSplit={disableSplit}
+                                disableClose={disableClose}
+                            />
+                        );
+                    })}
+                </div>
+
+                <div className="flex items-center justify-center gap-2 flex-1 px-2">
+                    <Button
+                        variant="outline"
+                        className="w-[30px] h-[30px]"
+                        title={t('nav.tools')}
+                        onClick={() => setToolsSheetOpen(true)}
+                    >
+                        <Hammer className="h-4 w-4"/>
+                    </Button>
+
+                    <Button
+                        variant="outline"
+                        onClick={() => setIsTopbarOpen(false)}
+                        className="w-[30px] h-[30px]"
+                    >
+                        <ChevronUpIcon/>
+                    </Button>
+                </div>
+            </div>
+
+            {!isTopbarOpen && (
+                <div
+                    onClick={() => setIsTopbarOpen(true)}
+                    className="absolute top-0 left-0 w-full h-[10px] bg-[#18181b] cursor-pointer z-20 flex items-center justify-center rounded-bl-md rounded-br-md">
+                    <ChevronDown size={10}/>
+                </div>
+            )}
+
+            {toolsSheetOpen && (
+                <div
+                    className="fixed inset-0 z-[999999] flex justify-end"
+                    style={{
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 999999,
+                        pointerEvents: 'auto',
+                        isolation: 'isolate',
+                        transform: 'translateZ(0)'
+                    }}
+                >
+                    <div
+                        className="flex-1"
+                        onClick={() => setToolsSheetOpen(false)}
+                        style={{cursor: 'pointer'}}
+                    />
+
+                    <div
+                        className="w-[400px] h-full bg-[#18181b] border-l-2 border-[#303032] flex flex-col shadow-2xl"
+                        style={{
+                            backgroundColor: '#18181b',
+                            boxShadow: '-4px 0 20px rgba(0, 0, 0, 0.5)',
+                            zIndex: 999999,
+                            position: 'relative',
+                            isolation: 'isolate',
+                            transform: 'translateZ(0)'
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <div className="flex items-center justify-between p-4 border-b border-[#303032]">
+                            <h2 className="text-lg font-semibold text-white">{t('sshTools.title')}</h2>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setToolsSheetOpen(false)}
+                                className="h-8 w-8 p-0 hover:bg-red-500 hover:text-white transition-colors flex items-center justify-center"
+                                title={t('sshTools.closeTools')}
+                            >
+                                <span className="text-lg font-bold leading-none">×</span>
+                            </Button>
+                        </div>
+
+                        <div className="flex-1 overflow-y-auto p-4">
+                            <div className="space-y-4">
+                                <h1 className="font-semibold">
+                                    {t('sshTools.keyRecording')}
+                                </h1>
+
+                                <div className="space-y-4">
+                                    <div className="space-y-4">
+                                        <div className="flex gap-2">
+                                            {!isRecording ? (
+                                                <Button
+                                                    onClick={handleStartRecording}
+                                                    className="flex-1"
+                                                    variant="outline"
+                                                >
+                                                    {t('sshTools.startKeyRecording')}
+                                                </Button>
+                                            ) : (
+                                                <Button
+                                                    onClick={handleStopRecording}
+                                                    className="flex-1"
+                                                    variant="destructive"
+                                                >
+                                                    {t('sshTools.stopKeyRecording')}
+                                                </Button>
+                                            )}
+                                        </div>
+
+                                        {isRecording && (
+                                            <>
+                                                <div className="space-y-2">
+                                                    <label className="text-sm font-medium text-white">{t('sshTools.selectTerminals')}</label>
+                                                    <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto mt-2">
+                                                        {terminalTabs.map(tab => (
+                                                            <Button
+                                                                key={tab.id}
+                                                                type="button"
+                                                                variant="outline"
+                                                                size="sm"
+                                                                className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
+                                                                    selectedTabIds.includes(tab.id)
+                                                                        ? 'text-white bg-gray-700'
+                                                                        : 'text-gray-500'
+                                                                }`}
+                                                                onClick={() => handleTabToggle(tab.id)}
+                                                            >
+                                                                {tab.title}
+                                                            </Button>
+                                                        ))}
+                                                    </div>
+                                                </div>
+
+                                                <div className="space-y-2">
+                                                    <label className="text-sm font-medium text-white">{t('sshTools.typeCommands')}</label>
+                                                    <Input
+                                                        id="ssh-tools-input"
+                                                        placeholder={t('placeholders.typeHere')}
+                                                        onKeyDown={handleKeyDown}
+                                                        onKeyPress={handleKeyPress}
+                                                        className="font-mono mt-2"
+                                                        disabled={selectedTabIds.length === 0}
+                                                        readOnly
+                                                    />
+                                                    <p className="text-xs text-muted-foreground">
+                                                        {t('sshTools.commandsWillBeSent', { count: selectedTabIds.length })}
+                                                    </p>
+                                                </div>
+                                            </>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <Separator className="my-4"/>
+
+                                <h1 className="font-semibold">
+                                    {t('sshTools.settings')}
+                                </h1>
+
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                        id="enable-copy-paste"
+                                        onCheckedChange={updateRightClickCopyPaste}
+                                        defaultChecked={getCookie("rightClickCopyPaste") === "true"}
+                                    />
+                                    <label
+                                        htmlFor="enable-copy-paste"
+                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white"
+                                    >
+                                        {t('sshTools.enableRightClickCopyPaste')}
+                                    </label>
+                                </div>
+
+                                <Separator className="my-4"/>
+
+                                <p className="pt-2 pb-2 text-sm text-gray-500">
+                                    {t('sshTools.shareIdeas')}{" "}
+                                    <a
+                                        href="https://github.com/LukeGus/Termix/issues/new"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-blue-500 hover:underline"
+                                    >
+                                        GitHub
+                                    </a>
+                                    !
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}

src/ui/User/PasswordReset.tsx

@@ -0,0 +1,243 @@
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import {Key} from "lucide-react";
+import React, {useState} from "react";
+import {completePasswordReset, initiatePasswordReset, verifyPasswordResetCode} from "@/ui/main-axios.ts";
+import {Label} from "@/components/ui/label.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
+import {toast} from "sonner";
+import {useTranslation} from "react-i18next";
+
+interface PasswordResetProps {
+    userInfo: {
+        username: string;
+        is_admin: boolean;
+        is_oidc: boolean;
+        totp_enabled: boolean;
+    }
+}
+
+export function PasswordReset({userInfo}: PasswordResetProps) {
+    const {t} = useTranslation();
+    const [error, setError] = useState<string | null>(null);
+
+    const [resetStep, setResetStep] = useState<"initiate" | "verify" | "newPassword">("initiate");
+    const [resetCode, setResetCode] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [tempToken, setTempToken] = useState("");
+    const [resetLoading, setResetLoading] = useState(false);
+
+    async function handleInitiatePasswordReset() {
+        setError(null);
+        setResetLoading(true);
+        try {
+            const result = await initiatePasswordReset(userInfo.username);
+            setResetStep("verify");
+            setError(null);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || err?.message || t('common.failedToInitiatePasswordReset'));
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    function resetPasswordState() {
+        setResetStep("initiate");
+        setResetCode("");
+        setNewPassword("");
+        setConfirmPassword("");
+        setTempToken("");
+        setError(null);
+    }
+
+    async function handleVerifyResetCode() {
+        setError(null);
+        setResetLoading(true);
+        try {
+            const response = await verifyPasswordResetCode(userInfo.username, resetCode);
+            setTempToken(response.tempToken);
+            setResetStep("newPassword");
+            setError(null);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || t('common.failedToVerifyResetCode'));
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    async function handleCompletePasswordReset() {
+        setError(null);
+        setResetLoading(true);
+
+        if (newPassword !== confirmPassword) {
+            setError(t('common.passwordsDoNotMatch'));
+            setResetLoading(false);
+            return;
+        }
+
+        if (newPassword.length < 6) {
+            setError(t('common.passwordMinLength'));
+            setResetLoading(false);
+            return;
+        }
+
+        try {
+            await completePasswordReset(userInfo.username, tempToken, newPassword);
+
+            toast.success(t('common.passwordResetSuccess'));
+            resetPasswordState();
+        } catch (err: any) {
+            setError(err?.response?.data?.error || t('common.failedToCompletePasswordReset'));
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    const Spinner = (
+        <svg className="animate-spin mr-2 h-4 w-4 text-white inline-block" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+        </svg>
+    );
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                    <Key className="w-5 h-5"/>
+                    {t('common.password')}
+                </CardTitle>
+                <CardDescription>
+                    {t('common.changeAccountPassword')}
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <>
+                    {resetStep === "initiate" && (
+                        <>
+                            <div className="flex flex-col gap-4">
+                                <Button
+                                    type="button"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading || !userInfo.username.trim()}
+                                    onClick={handleInitiatePasswordReset}
+                                >
+                                    {resetLoading ? Spinner : t('common.sendResetCode')}
+                                </Button>
+                            </div>
+                        </>
+                    )}
+
+                    {resetStep === "verify" && (
+                        <>
+                            <div className="text-center text-muted-foreground mb-4">
+                                <p>{t('common.enterSixDigitCode')} <strong>{userInfo.username}</strong></p>
+                            </div>
+                            <div className="flex flex-col gap-4">
+                                <div className="flex flex-col gap-2">
+                                    <Label htmlFor="reset-code">{t('common.resetCode')}</Label>
+                                    <Input
+                                        id="reset-code"
+                                        type="text"
+                                        required
+                                        maxLength={6}
+                                        className="h-11 text-base text-center text-lg tracking-widest"
+                                        value={resetCode}
+                                        onChange={e => setResetCode(e.target.value.replace(/\D/g, ''))}
+                                        disabled={resetLoading}
+                                        placeholder={t('placeholders.enterCode')}
+                                    />
+                                </div>
+                                <Button
+                                    type="button"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading || resetCode.length !== 6}
+                                    onClick={handleVerifyResetCode}
+                                >
+                                    {resetLoading ? Spinner : t('common.verifyCode')}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading}
+                                    onClick={() => {
+                                        setResetStep("initiate");
+                                        setResetCode("");
+                                    }}
+                                >
+                                    {t('common.back')}
+                                </Button>
+                            </div>
+                        </>
+                    )}
+
+                    {resetStep === "newPassword" && (
+                        <>
+                            <div className="text-center text-muted-foreground mb-4">
+                                <p>{t('common.enterNewPassword')} <strong>{userInfo.username}</strong></p>
+                            </div>
+                            <div className="flex flex-col gap-5">
+                                <div className="flex flex-col gap-2">
+                                    <Label htmlFor="new-password">{t('common.newPassword')}</Label>
+                                    <Input
+                                        id="new-password"
+                                        type="password"
+                                        required
+                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
+                                        value={newPassword}
+                                        onChange={e => setNewPassword(e.target.value)}
+                                        disabled={resetLoading}
+                                        autoComplete="new-password"
+                                    />
+                                </div>
+                                <div className="flex flex-col gap-2">
+                                    <Label htmlFor="confirm-password">{t('common.confirmPassword')}</Label>
+                                    <Input
+                                        id="confirm-password"
+                                        type="password"
+                                        required
+                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
+                                        value={confirmPassword}
+                                        onChange={e => setConfirmPassword(e.target.value)}
+                                        disabled={resetLoading}
+                                        autoComplete="new-password"
+                                    />
+                                </div>
+                                <Button
+                                    type="button"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading || !newPassword || !confirmPassword}
+                                    onClick={handleCompletePasswordReset}
+                                >
+                                    {resetLoading ? Spinner : t('common.resetPassword')}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading}
+                                    onClick={() => {
+                                        setResetStep("verify");
+                                        setNewPassword("");
+                                        setConfirmPassword("");
+                                    }}
+                                >
+                                    {t('common.back')}
+                                </Button>
+                            </div>
+                        </>
+                    )}
+                    {error && (
+                        <Alert variant="destructive" className="mt-4">
+                            <AlertTitle>{t('common.error')}</AlertTitle>
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    )}
+                </>
+            </CardContent>
+        </Card>
+    )
+}

src/ui/User/TOTPSetup.tsx

@@ -0,0 +1,439 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
+import { Shield, Copy, Download, AlertCircle, CheckCircle2 } from "lucide-react";
+import { setupTOTP, enableTOTP, disableTOTP, generateBackupCodes } from "@/ui/main-axios.ts";
+import { toast } from "sonner";
+import { useTranslation } from 'react-i18next';
+
+interface TOTPSetupProps {
+    isEnabled: boolean;
+    onStatusChange?: (enabled: boolean) => void;
+}
+
+export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSetupProps) {
+    const {t} = useTranslation();
+    const [isEnabled, setIsEnabled] = useState(initialEnabled);
+    const [isSettingUp, setIsSettingUp] = useState(false);
+    const [setupStep, setSetupStep] = useState<"init" | "qr" | "verify" | "backup">("init");
+    const [qrCode, setQrCode] = useState("");
+    const [secret, setSecret] = useState("");
+    const [verificationCode, setVerificationCode] = useState("");
+    const [backupCodes, setBackupCodes] = useState<string[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [password, setPassword] = useState("");
+    const [disableCode, setDisableCode] = useState("");
+
+    const handleSetupStart = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            const response = await setupTOTP();
+            setQrCode(response.qr_code);
+            setSecret(response.secret);
+            setSetupStep("qr");
+            setIsSettingUp(true);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to start TOTP setup");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleVerifyCode = async () => {
+        if (verificationCode.length !== 6) {
+            setError("Please enter a 6-digit code");
+            return;
+        }
+
+        setError(null);
+        setLoading(true);
+        try {
+            const response = await enableTOTP(verificationCode);
+            setBackupCodes(response.backup_codes);
+            setSetupStep("backup");
+            toast.success(t('auth.twoFactorEnabledSuccess'));
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Invalid verification code");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDisable = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            await disableTOTP(password || undefined, disableCode || undefined);
+            setIsEnabled(false);
+            setIsSettingUp(false);
+            setSetupStep("init");
+            setPassword("");
+            setDisableCode("");
+            onStatusChange?.(false);
+            toast.success(t('auth.twoFactorDisabled'));
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to disable TOTP");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleGenerateNewBackupCodes = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            const response = await generateBackupCodes(password || undefined, disableCode || undefined);
+            setBackupCodes(response.backup_codes);
+            toast.success(t('auth.newBackupCodesGenerated'));
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to generate backup codes");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const copyToClipboard = (text: string, label: string) => {
+        navigator.clipboard.writeText(text);
+        toast.success(t('messages.copiedToClipboard', {item: label}));
+    };
+
+    const downloadBackupCodes = () => {
+        const content = `Termix Two-Factor Authentication Backup Codes\n` +
+            `Generated: ${new Date().toISOString()}\n\n` +
+            `Keep these codes in a safe place. Each code can only be used once.\n\n` +
+            backupCodes.map((code, i) => `${i + 1}. ${code}`).join('\n');
+        
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'termix-backup-codes.txt';
+        a.click();
+        URL.revokeObjectURL(url);
+        toast.success(t('auth.backupCodesDownloaded'));
+    };
+
+    const handleComplete = () => {
+        setIsEnabled(true);
+        setIsSettingUp(false);
+        setSetupStep("init");
+        setVerificationCode("");
+        onStatusChange?.(true);
+    };
+
+    if (isEnabled && !isSettingUp) {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Shield className="w-5 h-5" />
+                        {t('auth.twoFactorTitle')}
+                    </CardTitle>
+                    <CardDescription>
+                        {t('auth.twoFactorProtected')}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <Alert>
+                        <CheckCircle2 className="h-4 w-4" />
+                        <AlertTitle>{t('common.enabled')}</AlertTitle>
+                        <AlertDescription>
+                            {t('auth.twoFactorActive')}
+                        </AlertDescription>
+                    </Alert>
+
+                    <Tabs defaultValue="disable" className="w-full">
+                        <TabsList className="grid w-full grid-cols-2">
+                            <TabsTrigger value="disable">{t('auth.disable2FA')}</TabsTrigger>
+                            <TabsTrigger value="backup">{t('auth.backupCodes')}</TabsTrigger>
+                        </TabsList>
+                        
+                        <TabsContent value="disable" className="space-y-4">
+                            <Alert variant="destructive">
+                                <AlertCircle className="h-4 w-4" />
+                                <AlertTitle>{t('common.warning')}</AlertTitle>
+                                <AlertDescription>
+                                    {t('auth.disableTwoFactorWarning')}
+                                </AlertDescription>
+                            </Alert>
+                            
+                            <div className="space-y-2">
+                                <Label htmlFor="disable-password">{t('auth.passwordOrTotpCode')}</Label>
+                                <Input
+                                    id="disable-password"
+                                    type="password"
+                                    placeholder={t('placeholders.enterPassword')}
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                />
+                                <p className="text-sm text-muted-foreground">{t('auth.or')}</p>
+                                <Input
+                                    id="disable-code"
+                                    type="text"
+                                    placeholder={t('placeholders.totpCode')}
+                                    maxLength={6}
+                                    value={disableCode}
+                                    onChange={(e) => setDisableCode(e.target.value.replace(/\D/g, ''))}
+                                />
+                            </div>
+                            
+                            <Button
+                                variant="destructive"
+                                onClick={handleDisable}
+                                disabled={loading || (!password && !disableCode)}
+                            >
+                                {t('auth.disableTwoFactor')}
+                            </Button>
+                        </TabsContent>
+                        
+                        <TabsContent value="backup" className="space-y-4">
+                            <p className="text-sm text-muted-foreground">
+                                {t('auth.generateNewBackupCodesText')}
+                            </p>
+                            
+                            <div className="space-y-2">
+                                <Label htmlFor="backup-password">{t('auth.passwordOrTotpCode')}</Label>
+                                <Input
+                                    id="backup-password"
+                                    type="password"
+                                    placeholder={t('placeholders.enterPassword')}
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                />
+                                <p className="text-sm text-muted-foreground">{t('auth.or')}</p>
+                                <Input
+                                    id="backup-code"
+                                    type="text"
+                                    placeholder={t('placeholders.totpCode')}
+                                    maxLength={6}
+                                    value={disableCode}
+                                    onChange={(e) => setDisableCode(e.target.value.replace(/\D/g, ''))}
+                                />
+                            </div>
+                            
+                            <Button
+                                onClick={handleGenerateNewBackupCodes}
+                                disabled={loading || (!password && !disableCode)}
+                            >
+                                {t('auth.generateNewBackupCodes')}
+                            </Button>
+                            
+                            {backupCodes.length > 0 && (
+                                <div className="space-y-2 mt-4">
+                                    <div className="flex justify-between items-center">
+                                        <Label>{t('auth.yourBackupCodes')}</Label>
+                                        <Button
+                                            size="sm"
+                                            variant="outline"
+                                            onClick={downloadBackupCodes}
+                                        >
+                                            <Download className="w-4 h-4 mr-2" />
+                                            {t('auth.download')}
+                                        </Button>
+                                    </div>
+                                    <div className="grid grid-cols-2 gap-2 p-4 bg-muted rounded-lg font-mono text-sm">
+                                        {backupCodes.map((code, i) => (
+                                            <div key={i}>{code}</div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                        </TabsContent>
+                    </Tabs>
+
+                    {error && (
+                        <Alert variant="destructive">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertTitle>{t('common.error')}</AlertTitle>
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    )}
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (setupStep === "qr") {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('auth.setupTwoFactorTitle')}</CardTitle>
+                    <CardDescription>
+                        {t('auth.step1ScanQR')}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="flex justify-center">
+                        <img src={qrCode} alt="TOTP QR Code" className="w-64 h-64" />
+                    </div>
+                    
+                    <div className="space-y-2">
+                        <Label>{t('auth.manualEntryCode')}</Label>
+                        <div className="flex gap-2">
+                            <Input
+                                value={secret}
+                                readOnly
+                                className="font-mono text-sm"
+                            />
+                            <Button
+                                size="default"
+                                variant="outline"
+                                onClick={() => copyToClipboard(secret, "Secret key")}
+                            >
+                                <Copy className="w-4 h-4" />
+                            </Button>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            {t('auth.cannotScanQRText')}
+                        </p>
+                    </div>
+                    
+                    <Button onClick={() => setSetupStep("verify")} className="w-full">
+                        {t('auth.nextVerifyCode')}
+                    </Button>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (setupStep === "verify") {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('auth.verifyAuthenticator')}</CardTitle>
+                    <CardDescription>
+                        {t('auth.step2EnterCode')}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="verify-code">{t('auth.verificationCode')}</Label>
+                        <Input
+                            id="verify-code"
+                            type="text"
+                            placeholder="000000"
+                            maxLength={6}
+                            value={verificationCode}
+                            onChange={(e) => setVerificationCode(e.target.value.replace(/\D/g, ''))}
+                            className="text-center text-2xl tracking-widest font-mono"
+                        />
+                    </div>
+                    
+                    {error && (
+                        <Alert variant="destructive">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertTitle>{t('common.error')}</AlertTitle>
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    )}
+                    
+                    <div className="flex gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={() => setSetupStep("qr")}
+                            disabled={loading}
+                        >
+                            {t('auth.back')}
+                        </Button>
+                        <Button
+                            onClick={handleVerifyCode}
+                            disabled={loading || verificationCode.length !== 6}
+                            className="flex-1"
+                        >
+                            {loading ? t('interface.verifying') : t('auth.verifyAndEnable')}
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (setupStep === "backup") {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('auth.saveBackupCodesTitle')}</CardTitle>
+                    <CardDescription>
+                        {t('auth.step3StoreCodesSecurely')}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <Alert>
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>{t('common.important')}</AlertTitle>
+                        <AlertDescription>
+                            {t('auth.importantBackupCodesText')}
+                        </AlertDescription>
+                    </Alert>
+                    
+                    <div className="space-y-2">
+                        <div className="flex justify-between items-center">
+                            <Label>Your Backup Codes</Label>
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={downloadBackupCodes}
+                            >
+                                <Download className="w-4 h-4 mr-2" />
+                                Download
+                            </Button>
+                        </div>
+                        <div className="grid grid-cols-2 gap-2 p-4 bg-muted rounded-lg font-mono text-sm">
+                            {backupCodes.map((code, i) => (
+                                <div key={i} className="flex items-center gap-2">
+                                    <span className="text-muted-foreground">{i + 1}.</span>
+                                    <span>{code}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    
+                    <Button onClick={handleComplete} className="w-full">
+                        {t('auth.completeSetup')}
+                    </Button>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                    <Shield className="w-5 h-5" />
+                    {t('auth.twoFactorTitle')}
+                </CardTitle>
+                <CardDescription>
+                    {t('auth.addExtraSecurityLayer')}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <Alert>
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertTitle>{t('common.notEnabled')}</AlertTitle>
+                    <AlertDescription>
+                        {t('auth.notEnabledText')}
+                    </AlertDescription>
+                </Alert>
+                
+                <Button onClick={handleSetupStart} disabled={loading} className="w-full">
+                    {loading ? t('common.settingUp') : t('auth.enableTwoFactorButton')}
+                </Button>
+                
+                {error && (
+                    <Alert variant="destructive">
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>Error</AlertTitle>
+                        <AlertDescription>{error}</AlertDescription>
+                    </Alert>
+                )}
+            </CardContent>
+        </Card>
+    );
+}

src/ui/User/UserProfile.tsx

@@ -0,0 +1,179 @@
+import React, {useState, useEffect} from "react";
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Label} from "@/components/ui/label.tsx";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
+import {User, Shield, Key, AlertCircle} from "lucide-react";
+import {TOTPSetup} from "@/ui/User/TOTPSetup.tsx";
+import {getUserInfo} from "@/ui/main-axios.ts";
+import {toast} from "sonner";
+import {PasswordReset} from "@/ui/User/PasswordReset.tsx";
+import {useTranslation} from "react-i18next";
+import {LanguageSwitcher} from "@/components/LanguageSwitcher";
+
+interface UserProfileProps {
+    isTopbarOpen?: boolean;
+}
+
+export function UserProfile({isTopbarOpen = true}: UserProfileProps) {
+    const {t} = useTranslation();
+    const [userInfo, setUserInfo] = useState<{
+        username: string;
+        is_admin: boolean;
+        is_oidc: boolean;
+        totp_enabled: boolean;
+    } | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetchUserInfo();
+    }, []);
+
+    const fetchUserInfo = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const info = await getUserInfo();
+            setUserInfo({
+                username: info.username,
+                is_admin: info.is_admin,
+                is_oidc: info.is_oidc,
+                totp_enabled: info.totp_enabled || false
+            });
+        } catch (err: any) {
+            setError(err?.response?.data?.error || t('errors.loadFailed'));
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleTOTPStatusChange = (enabled: boolean) => {
+        if (userInfo) {
+            setUserInfo({...userInfo, totp_enabled: enabled});
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="container max-w-4xl mx-auto p-6">
+                <Card>
+                    <CardContent className="p-12 text-center">
+                        <div className="animate-pulse">{t('common.loading')}</div>
+                    </CardContent>
+                </Card>
+            </div>
+        );
+    }
+
+    if (error || !userInfo) {
+        return (
+            <div className="container max-w-4xl mx-auto p-6">
+                <Alert variant="destructive">
+                    <AlertCircle className="h-4 w-4"/>
+                    <AlertTitle>{t('common.error')}</AlertTitle>
+                    <AlertDescription>{error || t('errors.loadFailed')}</AlertDescription>
+                </Alert>
+            </div>
+        );
+    }
+
+    return (
+        <div className="container max-w-4xl mx-auto p-6 overflow-y-auto" style={{
+            marginTop: isTopbarOpen ? '60px' : '0',
+            transition: 'margin-top 0.3s ease',
+            maxHeight: 'calc(100vh - 60px)'
+        }}>
+            <div className="mb-6">
+                <h1 className="text-3xl font-bold">{t('common.profile')}</h1>
+                <p className="text-muted-foreground mt-2">{t('profile.description')}</p>
+            </div>
+
+            <Tabs defaultValue="profile" className="space-y-4">
+                <TabsList>
+                    <TabsTrigger value="profile" className="flex items-center gap-2">
+                        <User className="w-4 h-4"/>
+                        {t('common.profile')}
+                    </TabsTrigger>
+                    {!userInfo.is_oidc && (
+                        <TabsTrigger value="security" className="flex items-center gap-2">
+                            <Shield className="w-4 h-4"/>
+                            {t('profile.security')}
+                        </TabsTrigger>
+                    )}
+                </TabsList>
+
+                <TabsContent value="profile" className="space-y-4">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>{t('profile.accountInfo')}</CardTitle>
+                            <CardDescription>{t('profile.description')}</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="grid grid-cols-2 gap-4">
+                                <div>
+                                    <Label>{t('common.username')}</Label>
+                                    <p className="text-lg font-medium mt-1">{userInfo.username}</p>
+                                </div>
+                                <div>
+                                    <Label>{t('profile.role')}</Label>
+                                    <p className="text-lg font-medium mt-1">
+                                        {userInfo.is_admin ? t('interface.administrator') : t('interface.user')}
+                                    </p>
+                                </div>
+                                <div>
+                                    <Label>{t('profile.authMethod')}</Label>
+                                    <p className="text-lg font-medium mt-1">
+                                        {userInfo.is_oidc ? t('profile.external') : t('profile.local')}
+                                    </p>
+                                </div>
+                                <div>
+                                    <Label>{t('profile.twoFactorAuth')}</Label>
+                                    <p className="text-lg font-medium mt-1">
+                                        {userInfo.is_oidc ? (
+                                            <span className="text-muted-foreground">{t('auth.lockedOidcAuth')}</span>
+                                        ) : (
+                                            userInfo.totp_enabled ? (
+                                                <span className="text-green-600 flex items-center gap-1">
+                                                    <Shield className="w-4 h-4"/>
+                                                    {t('common.enabled')}
+                                                </span>
+                                            ) : (
+                                                <span className="text-muted-foreground">{t('common.disabled')}</span>
+                                            )
+                                        )}
+                                    </p>
+                                </div>
+                            </div>
+                            
+                            <div className="mt-6 pt-6 border-t">
+                                <div className="flex items-center justify-between">
+                                    <div>
+                                        <Label>{t('common.language')}</Label>
+                                        <p className="text-sm text-muted-foreground mt-1">{t('profile.selectPreferredLanguage')}</p>
+                                    </div>
+                                    <LanguageSwitcher />
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="security" className="space-y-4">
+                    <TOTPSetup
+                        isEnabled={userInfo.totp_enabled}
+                        onStatusChange={handleTOTPStatusChange}
+                    />
+
+                    {!userInfo.is_oidc && (
+                        <PasswordReset
+                            userInfo={userInfo}
+                        />
+                    )}
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+}

tsconfig.app.json

@@ -6,16 +6,12 @@
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting - Made extremely permissive */
     "strict": false,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
@@ -31,8 +27,6 @@
     "allowUnreachableCode": true,
     "noImplicitOverride": false,
     "noEmitOnError": false,
-
-    /* shadcn */
     "baseUrl": ".",
     "paths": {
       "@/*": [