Update helpers_cache.json

Added a beta program section with installation instructions and feedback guidelines.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,29 @@
+---
+name: Bug Report
+about: Report a problem in the project
+title: "[BUG] Describe the issue"
+labels: bug
+assignees: 'MacRimi'
+---
+
+## Description
+Describe the bug clearly and concisely.
+
+## Steps to Reproduce
+1. ...
+2. ...
+3. ...
+
+## Expected Behavior
+What should happen?
+
+## Screenshots (Required)
+Add images to help illustrate the issue.
+
+## Environment
+- Operating system:
+- Software version:
+- Other relevant details:
+
+## Additional Information
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Soporte General
+    url: https://github.com/MacRimi/ProxMenux/discussions
+    about: If your request is neither a bug nor a feature, please use Discussions.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature Request
+about: Suggest a new feature or improvement
+title: "[FEATURE] Describe your proposal"
+labels: enhancement
+assignees: 'MacRimi'
+---
+
+## Description
+Explain the feature you are proposing.
+
+## Motivation
+Why is this improvement important? What problem does it solve?
+
+## Alternatives Considered
+Are there other solutions you have thought about?
+
+## Additional Information
+Add any extra details that help understand your proposal.

.github/scripts/generate_helpers_cache.py

@@ -0,0 +1,238 @@
+#!/usr/bin/env python3
+import json
+import re
+import sys
+from pathlib import Path
+from typing import Any
+
+import requests
+
+SCRIPT_BASE = "https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main"
+POCKETBASE_BASE = "https://db.community-scripts.org/api/collections"
+SCRIPT_COLLECTION_URL = f"{POCKETBASE_BASE}/script_scripts/records"
+CATEGORY_COLLECTION_URL = f"{POCKETBASE_BASE}/script_categories/records"
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+OUTPUT_FILE = REPO_ROOT / "json" / "helpers_cache.json"
+OUTPUT_FILE.parent.mkdir(parents=True, exist_ok=True)
+
+TYPE_TO_PATH_PREFIX = {
+    "lxc": "ct",
+    "vm": "vm",
+    "addon": "tools/addon",
+    "pve": "tools/pve",
+}
+
+
+def to_mirror_url(raw_url: str) -> str:
+    m = re.match(r"^https://raw\.githubusercontent\.com/([^/]+)/([^/]+)/([^/]+)/(.+)$", raw_url or "")
+    if not m:
+        return ""
+    org, repo, branch, path = m.groups()
+    if org.lower() != "community-scripts" or repo != "ProxmoxVE":
+        return ""
+    return f"https://git.community-scripts.org/community-scripts/ProxmoxVE/raw/branch/{branch}/{path}"
+
+
+def fetch_json(url: str, *, params: dict[str, Any] | None = None) -> dict[str, Any]:
+    r = requests.get(url, params=params, timeout=60)
+    r.raise_for_status()
+    data = r.json()
+    if not isinstance(data, dict):
+        raise RuntimeError(f"Unexpected response from {url}: expected object")
+    return data
+
+
+def fetch_all_records(url: str, *, expand: str | None = None, per_page: int = 500) -> list[dict[str, Any]]:
+    page = 1
+    items: list[dict[str, Any]] = []
+
+    while True:
+        params: dict[str, Any] = {"page": page, "perPage": per_page}
+        if expand:
+            params["expand"] = expand
+
+        data = fetch_json(url, params=params)
+        page_items = data.get("items", [])
+        if not isinstance(page_items, list):
+            raise RuntimeError(f"Unexpected items list from {url}")
+
+        items.extend(page_items)
+
+        total_pages = data.get("totalPages", page)
+        if not isinstance(total_pages, int) or page >= total_pages:
+            break
+        page += 1
+
+    return items
+
+
+def normalize_os_variants(install_methods_json: list[dict[str, Any]]) -> list[str]:
+    os_values: list[str] = []
+    for item in install_methods_json:
+        if not isinstance(item, dict):
+            continue
+        resources = item.get("resources", {})
+        if not isinstance(resources, dict):
+            continue
+        os_name = resources.get("os")
+        if isinstance(os_name, str) and os_name.strip():
+            normalized = os_name.strip().lower()
+            if normalized not in os_values:
+                os_values.append(normalized)
+    return os_values
+
+
+def build_script_path(type_name: str, slug: str) -> str:
+    type_name = (type_name or "").strip().lower()
+    slug = (slug or "").strip()
+
+    if type_name == "turnkey":
+        return "turnkey/turnkey.sh"
+
+    prefix = TYPE_TO_PATH_PREFIX.get(type_name)
+    if not prefix or not slug:
+        return ""
+
+    return f"{prefix}/{slug}.sh"
+
+
+def main() -> int:
+    try:
+        scripts = fetch_all_records(SCRIPT_COLLECTION_URL, expand="type,categories")
+        categories = fetch_all_records(CATEGORY_COLLECTION_URL)
+    except Exception as e:
+        print(f"ERROR: Unable to fetch PocketBase data: {e}", file=sys.stderr)
+        return 1
+
+    category_map: dict[str, dict[str, Any]] = {}
+    for category in categories:
+        category_id = category.get("id")
+        if isinstance(category_id, str) and category_id:
+            category_map[category_id] = category
+
+    cache: list[dict[str, Any]] = []
+
+    print(f"Fetched {len(scripts)} scripts and {len(category_map)} categories")
+
+    for idx, raw in enumerate(scripts, start=1):
+        if not isinstance(raw, dict):
+            continue
+
+        slug = raw.get("slug")
+        name = raw.get("name", "")
+        desc = raw.get("description", "")
+
+        if not isinstance(slug, str) or not slug.strip():
+            continue
+
+        expand = raw.get("expand", {}) if isinstance(raw.get("expand"), dict) else {}
+        type_expanded = expand.get("type", {}) if isinstance(expand.get("type"), dict) else {}
+        type_name = type_expanded.get("type", "") if isinstance(type_expanded.get("type"), str) else ""
+
+        script_path = build_script_path(type_name, slug)
+        if not script_path:
+            print(f"[{idx:03d}] WARNING: Unable to build script path for slug={slug} type={type_name!r}", file=sys.stderr)
+            continue
+
+        full_script_url = f"{SCRIPT_BASE}/{script_path}"
+        script_url_mirror = to_mirror_url(full_script_url)
+
+        install_methods_json = raw.get("install_methods_json", [])
+        if not isinstance(install_methods_json, list):
+            install_methods_json = []
+
+        notes_json = raw.get("notes_json", [])
+        if not isinstance(notes_json, list):
+            notes_json = []
+
+        notes = [
+            note.get("text", "")
+            for note in notes_json
+            if isinstance(note, dict) and isinstance(note.get("text"), str) and note.get("text", "").strip()
+        ]
+
+        category_ids = raw.get("categories", [])
+        if not isinstance(category_ids, list):
+            category_ids = []
+
+        expanded_categories = expand.get("categories", []) if isinstance(expand.get("categories"), list) else []
+        category_names: list[str] = []
+        for cat in expanded_categories:
+            if isinstance(cat, dict):
+                cat_name = cat.get("name")
+                if isinstance(cat_name, str) and cat_name.strip():
+                    category_names.append(cat_name.strip())
+
+        if not category_names:
+            for cat_id in category_ids:
+                cat = category_map.get(cat_id, {})
+                cat_name = cat.get("name")
+                if isinstance(cat_name, str) and cat_name.strip():
+                    category_names.append(cat_name.strip())
+
+        # Shared fields across all install method entries
+        default_user = raw.get("default_user")
+        default_passwd = raw.get("default_passwd")
+        default_credentials: dict[str, str] | None = None
+        if (isinstance(default_user, str) and default_user.strip()) or (isinstance(default_passwd, str) and default_passwd.strip()):
+            default_credentials = {
+                "username": default_user if isinstance(default_user, str) else "",
+                "password": default_passwd if isinstance(default_passwd, str) else "",
+            }
+
+        base_entry: dict[str, Any] = {
+            "name": name,
+            "slug": slug,
+            "desc": desc,
+            "script": script_path,
+            "script_url": full_script_url,
+            "script_url_mirror": script_url_mirror,
+            "type": type_name,
+            "type_id": raw.get("type", ""),
+            "categories": category_ids,
+            "category_names": category_names,
+            "notes": notes,
+            "port": raw.get("port", 0),
+            "website": raw.get("website", ""),
+            "documentation": raw.get("documentation", ""),
+            "logo": raw.get("logo", ""),
+            "updateable": bool(raw.get("updateable", False)),
+            "privileged": bool(raw.get("privileged", False)),
+            "has_arm": bool(raw.get("has_arm", False)),
+            "is_dev": bool(raw.get("is_dev", False)),
+            "execute_in": raw.get("execute_in", []),
+            "config_path": raw.get("config_path", ""),
+        }
+        if default_credentials:
+            base_entry["default_credentials"] = default_credentials
+
+        # Emit one entry per install method so the menu shell can offer an
+        # explicit OS choice. When there is only one method (or none), a
+        # single entry is emitted with os="" (script decides at runtime).
+        os_variants = normalize_os_variants(install_methods_json)
+
+        if len(os_variants) > 1:
+            for os_name in os_variants:
+                entry = {**base_entry, "os": os_name}
+                cache.append(entry)
+                print(f"[{len(cache):03d}] {slug:<24} → {script_path:<28} type={type_name:<7} os={os_name}")
+        else:
+            os_name = os_variants[0] if os_variants else ""
+            entry = {**base_entry, "os": os_name}
+            cache.append(entry)
+            print(f"[{len(cache):03d}] {slug:<24} → {script_path:<28} type={type_name:<7} os={os_name or 'n/a'}")
+
+    cache.sort(key=lambda x: (x.get("slug") or "", x.get("script") or ""))
+
+    with OUTPUT_FILE.open("w", encoding="utf-8") as f:
+        json.dump(cache, f, ensure_ascii=False, indent=2)
+
+    print(f"\n✅ helpers_cache.json → {OUTPUT_FILE}")
+    print(f"   Guardados: {len(cache)}")
+
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

.github/scripts/generate_helpers_cache_.py

@@ -0,0 +1,76 @@
+import requests, json
+from pathlib import Path
+
+# GitHub API URL to fetch all .json files describing scripts
+API_URL = "https://api.github.com/repos/community-scripts/ProxmoxVE/contents/frontend/public/json"
+
+# Base path to build the full URL for the installable scripts
+SCRIPT_BASE = "https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main"
+
+# Output file where the consolidated helper scripts cache will be stored
+OUTPUT_FILE = Path("json/helpers_cache.json")
+OUTPUT_FILE.parent.mkdir(parents=True, exist_ok=True)
+
+res = requests.get(API_URL)
+data = res.json()
+cache = []
+
+# Loop over each file in the JSON directory
+for item in data:
+    url = item.get("download_url")
+    if not url or not url.endswith(".json"):
+        continue
+    try:
+        raw = requests.get(url).json()
+        if not isinstance(raw, dict):
+            continue
+    except:
+        continue
+
+    # Extract fields required to identify a valid helper script
+    name = raw.get("name", "")
+    slug = raw.get("slug")
+    type_ = raw.get("type", "")
+    script = raw.get("install_methods", [{}])[0].get("script", "")
+    if not slug or not script:
+        continue  # Skip if it's not a valid script
+
+    desc = raw.get("description", "")
+    categories = raw.get("categories", [])
+    notes = [note.get("text", "") for note in raw.get("notes", []) if isinstance(note, dict)]
+    full_script_url = f"{SCRIPT_BASE}/{script}"
+
+
+    credentials = raw.get("default_credentials", {})
+    cred_username = credentials.get("username")
+    cred_password = credentials.get("password")
+ 
+    add_credentials = (
+        (cred_username is not None and str(cred_username).strip() != "") or
+        (cred_password is not None and str(cred_password).strip() != "")
+    )
+
+    entry = {
+        "name": name,
+        "slug": slug,
+        "desc": desc,
+        "script": script,
+        "script_url": full_script_url,
+        "categories": categories,
+        "notes": notes,
+        "type": type_
+    }
+    if add_credentials:
+        entry["default_credentials"] = {
+            "username": cred_username,
+            "password": cred_password
+        }
+
+    cache.append(entry)
+
+
+# Write the JSON cache to disk
+with open(OUTPUT_FILE, "w", encoding="utf-8") as f:
+    json.dump(cache, f, indent=2)
+
+print(f"✅ helpers_cache.json created at {OUTPUT_FILE} with {len(cache)} valid scripts.")

.github/scripts/generate_helpers_cache_back.py

@@ -0,0 +1,178 @@
+#!/usr/bin/env python3
+import json
+import re
+import sys
+from pathlib import Path
+
+import requests
+
+# ---------- Config ----------
+# API_URL = "https://api.github.com/repos/community-scripts/ProxmoxVE/contents/frontend/public/json"
+API_URL = "https://api.github.com/repos/community-scripts/ProxmoxVE-Frontend-Archive/contents/public/json"
+SCRIPT_BASE = "https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main"
+
+# Escribimos siempre en <raiz_repo>/json/helpers_cache.json, independientemente del cwd
+REPO_ROOT = Path(__file__).resolve().parents[2]
+OUTPUT_FILE = REPO_ROOT / "json" / "helpers_cache.json"
+OUTPUT_FILE.parent.mkdir(parents=True, exist_ok=True)
+# ----------------------------
+
+
+def to_mirror_url(raw_url: str) -> str:
+    """
+    Convierte una URL raw de GitHub al raw del mirror.
+    GH : https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/docker.sh
+    MIR: https://git.community-scripts.org/community-scripts/ProxmoxVE/raw/branch/main/ct/docker.sh
+    """
+    m = re.match(r"^https://raw\.githubusercontent\.com/([^/]+)/([^/]+)/([^/]+)/(.+)$", raw_url or "")
+    if not m:
+        return ""
+    org, repo, branch, path = m.groups()
+    if org.lower() != "community-scripts" or repo != "ProxmoxVE":
+        return ""
+    return f"https://git.community-scripts.org/community-scripts/ProxmoxVE/raw/branch/{branch}/{path}"
+
+
+def guess_os_from_script_path(script_path: str) -> str | None:
+    """
+    Heurística suave cuando el JSON no publica resources.os:
+      - tools/pve/*   -> proxmox
+      - ct/alpine-*   -> alpine
+      - tools/addon/* -> generic (suele ejecutarse sobre LXC existente)
+      - ct/*          -> debian (por defecto para CTs)
+    """
+    if not script_path:
+        return None
+    if script_path.startswith("tools/pve/") or script_path == "tools/pve/host-backup.sh" or script_path.startswith("vm/"):
+        return "proxmox"
+    if "/alpine-" in script_path or script_path.startswith("ct/alpine-"):
+        return "alpine"
+    if script_path.startswith("tools/addon/"):
+        return "generic"
+    if script_path.startswith("ct/"):
+        return "debian"
+    return None
+
+
+def fetch_directory_json(api_url: str) -> list[dict]:
+    r = requests.get(api_url, timeout=30)
+    r.raise_for_status()
+    data = r.json()
+    if not isinstance(data, list):
+        raise RuntimeError("GitHub API no devolvió una lista.")
+    return data
+
+
+def main() -> int:
+    try:
+        directory = fetch_directory_json(API_URL)
+    except Exception as e:
+        print(f"ERROR: No se pudo leer el índice de JSONs: {e}", file=sys.stderr)
+        return 1
+
+    cache: list[dict] = []
+    seen: set[tuple[str, str]] = set()  # (slug, script) para evitar duplicados
+
+    total_items = len(directory)
+    processed = 0
+    kept = 0
+
+    for item in directory:
+        url = item.get("download_url")
+        name_in_dir = item.get("name", "")
+        if not url or not url.endswith(".json"):
+            continue
+
+        try:
+            raw = requests.get(url, timeout=30).json()
+            if not isinstance(raw, dict):
+                continue
+        except Exception:
+            print(f"❌ Error al obtener/parsing {name_in_dir}", file=sys.stderr)
+            continue
+
+        processed += 1
+
+        name = raw.get("name", "")
+        slug = raw.get("slug")
+        type_ = raw.get("type", "")
+        desc = raw.get("description", "")
+        categories = raw.get("categories", [])
+        notes = [n.get("text", "") for n in raw.get("notes", []) if isinstance(n, dict)]
+
+        # Credenciales (si existen, se copian tal cual)
+        credentials = raw.get("default_credentials", {})
+        cred_username = credentials.get("username") if isinstance(credentials, dict) else None
+        cred_password = credentials.get("password") if isinstance(credentials, dict) else None
+        add_credentials = any([
+            cred_username not in (None, ""),
+            cred_password not in (None, "")
+        ])
+
+        install_methods = raw.get("install_methods", [])
+        if not isinstance(install_methods, list) or not install_methods:
+            # Sin install_methods válidos -> continuamos
+            continue
+
+        for im in install_methods:
+            if not isinstance(im, dict):
+                continue
+            script = im.get("script", "")
+            if not script:
+                continue
+
+            # OS desde resources u heurística
+            resources = im.get("resources", {}) if isinstance(im, dict) else {}
+            os_name = resources.get("os") if isinstance(resources, dict) else None
+            if not os_name:
+                os_name = guess_os_from_script_path(script)
+            if isinstance(os_name, str):
+                os_name = os_name.strip().lower()
+
+            full_script_url = f"{SCRIPT_BASE}/{script}"
+            script_url_mirror = to_mirror_url(full_script_url)
+
+            key = (slug or "", script)
+            if key in seen:
+                continue
+            seen.add(key)
+
+            entry = {
+                "name": name,
+                "slug": slug,
+                "desc": desc,
+                "script": script,
+                "script_url": full_script_url,
+                "script_url_mirror": script_url_mirror,  # nuevo
+                "os": os_name,                            # nuevo
+                "categories": categories,
+                "notes": notes,
+                "type": type_,
+            }
+            if add_credentials:
+                entry["default_credentials"] = {
+                    "username": cred_username,
+                    "password": cred_password,
+                }
+
+            cache.append(entry)
+            kept += 1
+
+            # Progreso ligero
+            print(f"[{kept:03d}] {slug or name:<24} → {script:<28} os={os_name or 'n/a'} src={'GH+MR' if script_url_mirror else 'GH'}")
+
+    # Orden estable para commits reproducibles
+    cache.sort(key=lambda x: (x.get("slug") or "", x.get("script") or ""))
+
+    with OUTPUT_FILE.open("w", encoding="utf-8") as f:
+        json.dump(cache, f, ensure_ascii=False, indent=2)
+
+    print(f"\n✅ helpers_cache.json → {OUTPUT_FILE}")
+    print(f"   Total JSON en índice: {total_items}")
+    print(f"   Procesados: {processed} | Guardados: {kept} | Únicos (slug,script): {len(seen)}")
+
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

.github/workflows/build-appimage-Release.yml

@@ -0,0 +1,83 @@
+name: Build AppImage Release
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    
+    steps:
+    - name: Checkout main
+      uses: actions/checkout@v5
+      with:
+        ref: main
+        token: ${{ secrets.GITHUB_TOKEN }}
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v5
+      with:
+        node-version: '22'
+        
+    - name: Install dependencies
+      working-directory: AppImage
+      run: npm install --legacy-peer-deps
+      
+    - name: Build Next.js app
+      working-directory: AppImage
+      run: npm run build
+      
+    - name: Install Python dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y python3 python3-pip python3-venv
+        
+    - name: Make build script executable
+      working-directory: AppImage
+      run: chmod +x scripts/build_appimage.sh
+      
+    - name: Build AppImage
+      working-directory: AppImage
+      run: ./scripts/build_appimage.sh
+      
+    - name: Get version from package.json
+      id: version
+      working-directory: AppImage
+      run: echo "VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+    - name: Generate SHA256 checksum
+      run: |
+        cd AppImage/dist
+        sha256sum *.AppImage > ProxMenux-Monitor.AppImage.sha256
+        echo "Generated SHA256:"
+        cat ProxMenux-Monitor.AppImage.sha256
+
+    - name: Upload AppImage artifact
+      uses: actions/upload-artifact@v5
+      with:
+        name: ProxMenux-${{ steps.version.outputs.VERSION }}-AppImage
+        path: |
+          AppImage/dist/*.AppImage
+          AppImage/dist/*.sha256
+        retention-days: 30
+
+    - name: Commit AppImage to main
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        git config --global user.name "github-actions[bot]"
+        git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
+        rm -f AppImage/*.AppImage AppImage/*.sha256 || true
+        cp AppImage/dist/*.AppImage AppImage/
+        cp AppImage/dist/ProxMenux-Monitor.AppImage.sha256 AppImage/
+
+        git add AppImage/*.AppImage AppImage/*.sha256
+        git commit -m "Update AppImage release build ($(date +'%Y-%m-%d %H:%M:%S'))" || echo "No changes to commit"
+        git push origin main

.github/workflows/build-appimage-beta.yml

@@ -0,0 +1,83 @@
+name: Build AppImage Beta
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    
+    steps:
+    - name: Checkout develop
+      uses: actions/checkout@v5
+      with:
+        ref: develop
+        token: ${{ secrets.GITHUB_TOKEN }}
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v5
+      with:
+        node-version: '22'
+        
+    - name: Install dependencies
+      working-directory: AppImage
+      run: npm install --legacy-peer-deps
+      
+    - name: Build Next.js app
+      working-directory: AppImage
+      run: npm run build
+      
+    - name: Install Python dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y python3 python3-pip python3-venv
+        
+    - name: Make build script executable
+      working-directory: AppImage
+      run: chmod +x scripts/build_appimage.sh
+      
+    - name: Build AppImage
+      working-directory: AppImage
+      run: ./scripts/build_appimage.sh
+      
+    - name: Get version from package.json
+      id: version
+      working-directory: AppImage
+      run: echo "VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+    - name: Generate SHA256 checksum
+      run: |
+        cd AppImage/dist
+        sha256sum *.AppImage > ProxMenux-Monitor.AppImage.sha256
+        echo "Generated SHA256:"
+        cat ProxMenux-Monitor.AppImage.sha256
+
+    - name: Upload AppImage artifact
+      uses: actions/upload-artifact@v5
+      with:
+        name: ProxMenux-${{ steps.version.outputs.VERSION }}-beta-AppImage
+        path: |
+          AppImage/dist/*.AppImage
+          AppImage/dist/*.sha256
+        retention-days: 30
+
+    - name: Commit AppImage to develop
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        git config --global user.name "github-actions[bot]"
+        git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
+        rm -f AppImage/*.AppImage AppImage/*.sha256 || true
+        cp AppImage/dist/*.AppImage AppImage/
+        cp AppImage/dist/ProxMenux-Monitor.AppImage.sha256 AppImage/
+
+        git add AppImage/*.AppImage AppImage/*.sha256
+        git commit -m "Update AppImage beta build ($(date +'%Y-%m-%d %H:%M:%S'))" || echo "No changes to commit"
+        git push origin develop

.github/workflows/build-appimage.yml

@@ -0,0 +1,59 @@
+name: Build ProxMenux Monitor AppImage
+
+on:
+  push:
+    branches: [ main ]
+    paths: [ 'AppImage/**' ]
+  pull_request:
+    branches: [ main ]
+    paths: [ 'AppImage/**' ]
+  workflow_dispatch:  
+
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v5
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v5
+      with:
+        node-version: '22'
+        
+    - name: Install dependencies
+      working-directory: AppImage
+      run: npm install --legacy-peer-deps
+      
+    - name: Build Next.js app
+      working-directory: AppImage
+      run: npm run build
+      
+    - name: Install Python dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y python3 python3-pip python3-venv
+        
+    - name: Make build script executable
+      working-directory: AppImage
+      run: chmod +x scripts/build_appimage.sh
+      
+    - name: Build AppImage
+      working-directory: AppImage
+      run: ./scripts/build_appimage.sh
+      
+    - name: Get version from package.json
+      id: version
+      working-directory: AppImage
+      run: echo "VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+      
+    - name: Upload AppImage artifact
+      uses: actions/upload-artifact@v5
+      with:
+        name: ProxMenux-${{ steps.version.outputs.VERSION }}-AppImage
+        path: AppImage/dist/*.AppImage
+        retention-days: 30

.github/workflows/update-helpers-cache.yml

@@ -0,0 +1,38 @@
+name: Update Helper Scripts Cache
+
+on:
+  # Manual trigger from GitHub Actions UI
+  workflow_dispatch:
+
+  # Automatic run every 6 hours
+  schedule:
+    - cron: "0 */6 * * *"
+
+jobs:
+  update-cache:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write  # Required to push changes to the repository
+
+    steps:
+      - name: ⬇️ Checkout the repository
+        uses: actions/checkout@v3
+
+      - name: 🐍 Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: 3.11
+
+      - name: 📦 Install Python dependencies
+        run: pip install requests
+
+      - name: ⚙️ Generate json/helpers_cache.json
+        run: python .github/scripts/generate_helpers_cache.py
+
+      - name: 📤 Commit and push if updated
+        run: |
+          git config user.name "ProxMenuxBot"
+          git config user.email "bot@proxmenux.local"
+          git add json/helpers_cache.json
+          git diff --cached --quiet || git commit -m "Update helpers_cache.json"
+          git push

.gitignore

@@ -51,3 +51,5 @@ Thumbs.db
 !guides/
 !web/
 
+# GitHub authentication
+.github/auth.sh

AppImage/ProxMenux-Monitor.AppImage.sha256

@@ -0,0 +1 @@
+f35de512c1a19843d15a9a3263a5104759d041ffc9d01249450babe0b0c3f889  ProxMenux-1.0.1.AppImage

AppImage/README.md

@@ -0,0 +1,736 @@
+# ProxMenux Monitor
+
+A modern, responsive dashboard for monitoring Proxmox VE systems built with Next.js and React.
+
+---
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Features](#features)
+- [Technology Stack](#technology-stack)
+- [Installation](#installation)
+- [Authentication & Security](#authentication--security)
+  - [Setup Authentication](#setup-authentication)
+  - [Two-Factor Authentication (2FA)](#two-factor-authentication-2fa)
+  - [Security Best Practices for API Tokens](#security-best-practices-for-api-tokens)
+- [API Documentation](#api-documentation)
+  - [API Authentication](#api-authentication)
+  - [Generating API Tokens](#generating-api-tokens)
+  - [Available Endpoints](#available-endpoints)
+- [Integration Examples](#integration-examples)
+  - [Homepage Integration](#homepage-integration)
+  - [Home Assistant Integration](#home-assistant-integration)
+- [License](#license)
+
+---
+
+## Overview
+
+**ProxMenux Monitor** is a comprehensive, real-time monitoring dashboard for Proxmox VE environments. Built with modern web technologies, it provides an intuitive interface to monitor system resources, virtual machines, containers, storage, network traffic, and system logs.
+
+The application runs as a standalone AppImage on your Proxmox server and serves a web interface accessible from any device on your network.
+
+
+## Screenshots
+
+Get a quick overview of ProxMenux Monitor's main features:
+
+<p align="center">
+  <img src="public/images/onboarding/imagen1.png" alt="Overview Dashboard" width="800"/>
+  <br/>
+  <em>System Overview - Monitor CPU, memory, temperature, and uptime in real-time</em>
+</p>
+
+
+---
+
+## Features
+
+- **System Overview**: Real-time monitoring of CPU, memory, temperature, and system uptime
+- **Storage Management**: Visual representation of storage distribution, disk health, and SMART data
+- **Network Monitoring**: Network interface statistics, real-time traffic graphs, and bandwidth usage
+- **Virtual Machines & LXC**: Comprehensive view of all VMs and containers with resource usage and controls
+- **Hardware Information**: Detailed hardware specifications including CPU, GPU, PCIe devices, and disks
+- **System Logs**: Real-time system log monitoring with filtering and search capabilities
+- **Health Monitoring**: Proactive system health checks with persistent error tracking
+- **Authentication & 2FA**: Optional password protection with TOTP-based two-factor authentication
+- **RESTful API**: Complete API access for integrations with Homepage, Home Assistant, and custom dashboards
+- **Dark/Light Theme**: Toggle between themes with Proxmox-inspired design
+- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices
+- **Release Notes**: Automatic notifications of new features and improvements
+
+## Technology Stack
+
+- **Frontend**: Next.js 15, React 19, TypeScript
+- **Styling**: Tailwind CSS v4 with custom Proxmox-inspired theme
+- **Charts**: Recharts for data visualization
+- **UI Components**: Radix UI primitives with shadcn/ui
+- **Backend**: Flask (Python) server for system data collection
+- **Packaging**: AppImage for easy distribution and deployment
+
+## Installation
+
+**ProxMenux Monitor is integrated into [ProxMenux](https://proxmenux.com) and comes enabled by default.** No manual installation is required if you're using ProxMenux.
+
+The monitor automatically starts when ProxMenux is installed and runs as a systemd service on your Proxmox server.
+
+### Accessing the Dashboard
+
+You can access ProxMenux Monitor in two ways:
+
+1. **Direct Access**: `http://your-proxmox-ip:8008`
+2. **Via Proxy** (Recommended): `https://your-domain.com/proxmenux-monitor/`
+
+**Note**: All API endpoints work seamlessly with both direct access and proxy configurations. When using a reverse proxy, the application automatically detects and adapts to the proxied environment.
+
+### Proxy Configuration
+
+ProxMenux Monitor includes built-in support for reverse proxy configurations. If you're using Nginx, Caddy, or Traefik, the application will automatically:
+
+- Detect the proxy headers (`X-Forwarded-For`, `X-Forwarded-Proto`, `X-Forwarded-Host`)
+- Adjust API endpoints to work correctly through the proxy
+- Maintain full functionality for all features including authentication and API access
+
+
+
+## Authentication & Security
+
+ProxMenux Monitor includes an optional authentication system to protect your dashboard with a password and two-factor authentication.
+
+### Setup Authentication
+
+On first launch, you'll be presented with three options:
+
+1. **Set up authentication** - Create a username and password to protect your dashboard
+2. **Enable 2FA** - Add TOTP-based two-factor authentication for enhanced security
+3. **Skip** - Continue without authentication (not recommended for production environments)
+
+![Authentication Setup](AppImage/public/images/docs/auth-setup.png)
+
+### Two-Factor Authentication (2FA)
+
+After setting up your password, you can enable 2FA using any TOTP authenticator app (Google Authenticator, Authy, 1Password, etc.):
+
+1. Navigate to **Settings > Authentication**
+2. Click **Enable 2FA**
+3. Scan the QR code with your authenticator app
+4. Enter the 6-digit code to verify
+5. Save your backup codes in a secure location
+
+![2FA Setup](AppImage/public/images/docs/2fa-setup.png)
+
+### Security Best Practices for API Tokens
+
+**IMPORTANT**: Never hardcode your API tokens directly in configuration files or scripts. Instead, use environment variables or secrets management.
+
+**Option 1: Environment Variables**
+
+Store your token in an environment variable:
+
+```bash
+# Linux/macOS - Add to ~/.bashrc or ~/.zshrc
+export PROXMENUX_API_TOKEN="your_actual_token_here"
+
+# Windows PowerShell - Add to profile
+$env:PROXMENUX_API_TOKEN = "your_actual_token_here"
+```
+
+Then reference it in your scripts:
+
+```bash
+# Linux/macOS
+curl -H "Authorization: Bearer $PROXMENUX_API_TOKEN" \
+  http://your-proxmox-ip:8008/api/system
+
+# Windows PowerShell
+curl -H "Authorization: Bearer $env:PROXMENUX_API_TOKEN" `
+  http://your-proxmox-ip:8008/api/system
+```
+
+**Option 2: Secrets File**
+
+Create a dedicated secrets file (make sure to add it to `.gitignore`):
+
+```bash
+# Create secrets file
+echo "PROXMENUX_API_TOKEN=your_actual_token_here" > ~/.proxmenux_secrets
+
+# Secure the file (Linux/macOS only)
+chmod 600 ~/.proxmenux_secrets
+
+# Load in your script
+source ~/.proxmenux_secrets
+```
+
+**Option 3: Homepage Secrets (Recommended)**
+
+Homepage supports secrets management. Create a `secrets.yaml` file:
+
+```yaml
+# secrets.yaml (add to .gitignore!)
+proxmenux_token: "your_actual_token_here"
+```
+
+Then reference it in your `services.yaml`:
+
+```yaml
+- ProxMenux Monitor:
+    widget:
+      type: customapi
+      url: http://proxmox.example.tld:8008/api/system
+      headers:
+        Authorization: Bearer {{HOMEPAGE_VAR_PROXMENUX_TOKEN}}
+```
+
+**Option 4: Home Assistant Secrets**
+
+Home Assistant has built-in secrets support. Edit `secrets.yaml`:
+
+```yaml
+# secrets.yaml
+proxmenux_api_token: "your_actual_token_here"
+```
+
+Then reference it in `configuration.yaml`:
+
+```yaml
+sensor:
+  - platform: rest
+    name: ProxMenux CPU
+    resource: http://proxmox.example.tld:8008/api/system
+    headers:
+      Authorization: !secret proxmenux_api_token
+```
+
+**Token Security Checklist:**
+- ✅ Store tokens in environment variables or secrets files
+- ✅ Add secrets files to `.gitignore`
+- ✅ Set proper file permissions (chmod 600 on Linux/macOS)
+- ✅ Rotate tokens periodically (every 3-6 months)
+- ✅ Use different tokens for different integrations
+- ✅ Delete tokens you no longer use
+- ❌ Never commit tokens to version control
+- ❌ Never share tokens in screenshots or logs
+- ❌ Never hardcode tokens in configuration files
+
+---
+
+## API Documentation
+
+ProxMenux Monitor provides a comprehensive RESTful API for integrating with external services like Homepage, Home Assistant, or custom dashboards.
+
+### API Authentication
+
+When authentication is enabled on ProxMenux Monitor, all API endpoints (except `/api/health` and `/api/auth/*`) require a valid JWT token in the `Authorization` header.
+
+### API Endpoint Base URL
+
+**Direct Access:**
+```
+http://your-proxmox-ip:8008/api/
+```
+
+**Via Proxy:**
+```
+https://your-domain.com/proxmenux-monitor/api/
+```
+
+**Note**: All API examples in this documentation work with both direct and proxied URLs. Simply replace the base URL with your preferred access method.
+
+### Generating API Tokens
+
+To use the API with authentication enabled, you need to generate a long-lived API token.
+
+#### Option 1: Generate via Web Panel (Recommended)
+
+The easiest way to generate an API token is through the ProxMenux Monitor web interface:
+
+1. Navigate to **Settings** tab in the dashboard
+2. Scroll to the **API Access Tokens** section
+3. Enter your password
+4. If 2FA is enabled, enter your 6-digit code
+5. Provide a name for the token (e.g., "Homepage Integration")
+6. Click **Generate Token**
+7. Copy the token immediately - it will not be shown again
+
+![Generate API Token](AppImage/public/images/docs/generate-api-token.png)
+
+The token will be valid for **365 days** (1 year) and can be used for integrations with Homepage, Home Assistant, or any custom application.
+
+#### Option 2: Generate via API Call
+
+For advanced users or automation, you can generate tokens programmatically:
+
+```bash
+curl -X POST http://your-proxmox-ip:8008/api/auth/generate-api-token \
+  -H "Content-Type: application/json" \
+  -d '{
+    "username": "your-username",
+    "password": "your-password",
+    "totp_token": "123456",
+    "token_name": "Homepage Integration"
+  }'
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+  "token_name": "Homepage Integration",
+  "expires_in": "365 days",
+  "message": "API token generated successfully. Store this token securely, it will not be shown again."
+}
+```
+
+**Notes:**
+- If 2FA is enabled, include the `totp_token` field with your 6-digit code
+- If 2FA is not enabled, omit the `totp_token` field
+- The token is valid for **365 days** (1 year)
+- Store the token securely - it cannot be retrieved again
+
+#### Option 3: Generate via cURL (without 2FA)
+
+```bash
+# Without 2FA
+curl -X POST http://your-proxmox-ip:8008/api/auth/generate-api-token \
+  -H "Content-Type: application/json" \
+  -d '{"username":"pedro","password":"your-password","token_name":"Homepage"}'
+```
+
+### Using API Tokens
+
+Once you have your API token, include it in the `Authorization` header of all API requests:
+
+```bash
+curl -H "Authorization: Bearer YOUR_API_TOKEN_HERE" \
+  http://your-proxmox-ip:8008/api/system
+```
+
+---
+
+### Available Endpoints
+
+Below is a complete list of all API endpoints with descriptions and example responses.
+
+#### System & Metrics
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/system` | GET | Yes | Complete system information (CPU, memory, temperature, uptime) |
+| `/api/system-info` | GET | No | Lightweight system info for header (hostname, uptime, health) |
+| `/api/node/metrics` | GET | Yes | Historical metrics data (RRD) for CPU, memory, disk I/O |
+| `/api/prometheus` | GET | Yes | Export metrics in Prometheus format |
+
+**Example `/api/system` Response:**
+```json
+{
+  "hostname": "pve",
+  "cpu_usage": 15.2,
+  "memory_usage": 45.8,
+  "temperature": 42.5,
+  "uptime": 345600,
+  "kernel": "6.2.16-3-pve",
+  "pve_version": "8.0.3"
+}
+```
+
+#### Storage
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/storage` | GET | Yes | Complete storage information with SMART data |
+| `/api/storage/summary` | GET | Yes | Optimized storage summary (without SMART) |
+| `/api/proxmox-storage` | GET | Yes | Proxmox storage pools information |
+| `/api/backups` | GET | Yes | List of all backup files |
+
+**Example `/api/storage/summary` Response:**
+```json
+{
+  "total_capacity": 1431894917120,
+  "used_space": 197414092800,
+  "free_space": 1234480824320,
+  "usage_percentage": 13.8,
+  "disks": [
+    {
+      "device": "/dev/sda",
+      "model": "Samsung SSD 970",
+      "size": "476.94 GB",
+      "type": "SSD"
+    }
+  ]
+}
+```
+
+#### Network
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/network` | GET | Yes | Complete network information for all interfaces |
+| `/api/network/summary` | GET | Yes | Optimized network summary |
+| `/api/network/<interface>/metrics` | GET | Yes | Historical metrics (RRD) for specific interface |
+
+**Example `/api/network/summary` Response:**
+```json
+{
+  "interfaces": [
+    {
+      "name": "vmbr0",
+      "ip": "192.168.1.100",
+      "state": "up",
+      "rx_bytes": 1234567890,
+      "tx_bytes": 987654321
+    }
+  ]
+}
+```
+
+#### Virtual Machines & Containers
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/vms` | GET | Yes | List of all VMs and LXC containers |
+| `/api/vms/<vmid>` | GET | Yes | Detailed configuration for specific VM/LXC |
+| `/api/vms/<vmid>/metrics` | GET | Yes | Historical metrics (RRD) for specific VM/LXC |
+| `/api/vms/<vmid>/logs` | GET | Yes | Download real logs for specific VM/LXC |
+| `/api/vms/<vmid>/control` | POST | Yes | Control VM/LXC (start, stop, shutdown, reboot) |
+| `/api/vms/<vmid>/config` | PUT | Yes | Update VM/LXC configuration (description/notes) |
+
+**Example `/api/vms` Response:**
+```json
+{
+  "vms": [
+    {
+      "vmid": "100",
+      "name": "ubuntu-server",
+      "type": "qemu",
+      "status": "running",
+      "cpu": 2,
+      "maxcpu": 4,
+      "mem": 2147483648,
+      "maxmem": 4294967296,
+      "uptime": 86400
+    }
+  ]
+}
+```
+
+#### Hardware
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/hardware` | GET | Yes | Complete hardware information (CPU, GPU, PCIe, disks) |
+| `/api/gpu/<slot>/realtime` | GET | Yes | Real-time monitoring for specific GPU |
+
+**Example `/api/hardware` Response:**
+```json
+{
+  "cpu": {
+    "model": "AMD Ryzen 9 5950X",
+    "cores": 16,
+    "threads": 32,
+    "frequency": "3.4 GHz"
+  },
+  "gpus": [
+    {
+      "slot": "0000:01:00.0",
+      "vendor": "NVIDIA",
+      "model": "GeForce RTX 3080",
+      "driver": "nvidia"
+    }
+  ]
+}
+```
+
+#### Logs, Events & Notifications
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/logs` | GET | Yes | System logs (journalctl) with filters |
+| `/api/logs/download` | GET | Yes | Download logs as text file |
+| `/api/notifications` | GET | Yes | Proxmox notification history |
+| `/api/notifications/download` | GET | Yes | Download full notification log |
+| `/api/events` | GET | Yes | Recent Proxmox tasks and events |
+| `/api/task-log/<upid>` | GET | Yes | Full log for specific task using UPID |
+
+**Example `/api/logs` Query Parameters:**
+```
+/api/logs?severity=error&since=1h&search=failed
+```
+
+#### Health Monitoring
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/health` | GET | No | Basic health check (for external monitoring) |
+| `/api/health/status` | GET | Yes | Summary of system health status |
+| `/api/health/details` | GET | Yes | Detailed health check results |
+| `/api/health/acknowledge` | POST | Yes | Dismiss/acknowledge health warnings |
+| `/api/health/active-errors` | GET | Yes | Get active persistent errors |
+
+#### ProxMenux Optimizations
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/proxmenux/installed-tools` | GET | Yes | List of installed ProxMenux optimizations |
+
+#### Authentication
+
+| Endpoint | Method | Auth Required | Description |
+|----------|--------|---------------|-------------|
+| `/api/auth/status` | GET | No | Current authentication status |
+| `/api/auth/login` | POST | No | Authenticate and receive JWT token |
+| `/api/auth/generate-api-token` | POST | No | Generate long-lived API token (365 days) |
+| `/api/auth/setup` | POST | No | Initial setup of username/password |
+| `/api/auth/enable` | POST | No | Enable authentication |
+| `/api/auth/disable` | POST | Yes | Disable authentication |
+| `/api/auth/change-password` | POST | No | Change password |
+| `/api/auth/totp/setup` | POST | Yes | Initialize 2FA setup |
+| `/api/auth/totp/enable` | POST | Yes | Enable 2FA after verification |
+| `/api/auth/totp/disable` | POST | Yes | Disable 2FA |
+
+---
+
+## Integration Examples
+
+### Homepage Integration
+
+[Homepage](https://gethomepage.dev/) is a modern, fully static, fast, secure fully proxied, highly customizable application dashboard.
+
+#### Basic Configuration (No Authentication)
+
+```yaml
+- ProxMenux Monitor:
+    href: http://proxmox.example.tld:8008/
+    icon: lucide:flask-round
+    widget:
+      type: customapi
+      url: http://proxmox.example.tld:8008/api/system
+      refreshInterval: 10000
+      mappings:
+        - field: uptime
+          label: Uptime
+          icon: lucide:clock-4
+          format: text
+        - field: cpu_usage
+          label: CPU
+          icon: lucide:cpu
+          format: percent
+        - field: memory_usage
+          label: RAM
+          icon: lucide:memory-stick
+          format: percent
+        - field: temperature
+          label: Temp
+          icon: lucide:thermometer-sun
+          format: number
+          suffix: °C
+```
+
+#### With Authentication Enabled (Using Secrets)
+
+First, generate an API token via the web interface (Settings > API Access Tokens) or via API.
+
+Then, store your token securely in Homepage's `secrets.yaml`:
+
+```yaml
+# secrets.yaml (add to .gitignore!)
+proxmenux_token: "your_actual_api_token_here"
+```
+
+Finally, reference the secret in your `services.yaml`:
+
+```yaml
+- ProxMenux Monitor:
+    href: http://proxmox.example.tld:8008/
+    icon: lucide:flask-round
+    widget:
+      type: customapi
+      url: http://proxmox.example.tld:8008/api/system
+      headers:
+        Authorization: Bearer {{HOMEPAGE_VAR_PROXMENUX_TOKEN}}
+      refreshInterval: 10000
+      mappings:
+        - field: uptime
+          label: Uptime
+          icon: lucide:clock-4
+          format: text
+        - field: cpu_usage
+          label: CPU
+          icon: lucide:cpu
+          format: percent
+        - field: memory_usage
+          label: RAM
+          icon: lucide:memory-stick
+          format: percent
+        - field: temperature
+          label: Temp
+          icon: lucide:thermometer-sun
+          format: number
+          suffix: °C
+```
+
+#### Advanced Multi-Widget Configuration
+
+```yaml
+# Store token in secrets.yaml
+# proxmenux_token: "your_actual_api_token_here"
+
+- ProxMenux System:
+    href: http://proxmox.example.tld:8008/
+    icon: lucide:server
+    description: Proxmox VE Host
+    widget:
+      type: customapi
+      url: http://proxmox.example.tld:8008/api/system
+      headers:
+        Authorization: Bearer {{HOMEPAGE_VAR_PROXMENUX_TOKEN}}
+      refreshInterval: 5000
+      mappings:
+        - field: cpu_usage
+          label: CPU
+          icon: lucide:cpu
+          format: percent
+        - field: memory_usage
+          label: RAM
+          icon: lucide:memory-stick
+          format: percent
+        - field: temperature
+          label: Temp
+          icon: lucide:thermometer-sun
+          format: number
+          suffix: °C
+
+- ProxMenux Storage:
+    href: http://proxmox.example.tld:8008/#/storage
+    icon: lucide:hard-drive
+    description: Storage Overview
+    widget:
+      type: customapi
+      url: http://proxmox.example.tld:8008/api/storage/summary
+      headers:
+        Authorization: Bearer {{HOMEPAGE_VAR_PROXMENUX_TOKEN}}
+      refreshInterval: 30000
+      mappings:
+        - field: usage_percentage
+          label: Used
+          icon: lucide:database
+          format: percent
+        - field: used_space
+          label: Space
+          icon: lucide:folder
+          format: bytes
+
+- ProxMenux Network:
+    href: http://proxmox.example.tld:8008/#/network
+    icon: lucide:network
+    description: Network Stats
+    widget:
+      type: customapi
+      url: http://proxmox.example.tld:8008/api/network/summary
+      headers:
+        Authorization: Bearer {{HOMEPAGE_VAR_PROXMENUX_TOKEN}}
+      refreshInterval: 5000
+      mappings:
+        - field: interfaces[0].rx_bytes
+          label: Received
+          icon: lucide:download
+          format: bytes
+        - field: interfaces[0].tx_bytes
+          label: Sent
+          icon: lucide:upload
+          format: bytes
+```
+
+![Homepage Integration Example](AppImage/public/images/docs/homepage-integration.png)
+
+### Home Assistant Integration
+
+[Home Assistant](https://www.home-assistant.io/) is an open-source home automation platform.
+
+#### Store Token Securely
+
+First, add your API token to Home Assistant's `secrets.yaml`:
+
+```yaml
+# secrets.yaml
+proxmenux_api_token: "Bearer your_actual_api_token_here"
+```
+
+**Note**: Include "Bearer " prefix in the secrets file for Home Assistant.
+
+#### Configuration.yaml
+
+```yaml
+# ProxMenux Monitor Sensors
+sensor:
+  - platform: rest
+    name: ProxMenux CPU
+    resource: http://proxmox.example.tld:8008/api/system
+    headers:
+      Authorization: !secret proxmenux_api_token
+    value_template: "{{ value_json.cpu_usage }}"
+    unit_of_measurement: "%"
+    scan_interval: 30
+
+  - platform: rest
+    name: ProxMenux Memory
+    resource: http://proxmox.example.tld:8008/api/system
+    headers:
+      Authorization: !secret proxmenux_api_token
+    value_template: "{{ value_json.memory_usage }}"
+    unit_of_measurement: "%"
+    scan_interval: 30
+
+  - platform: rest
+    name: ProxMenux Temperature
+    resource: http://proxmox.example.tld:8008/api/system
+    headers:
+      Authorization: !secret proxmenux_api_token
+    value_template: "{{ value_json.temperature }}"
+    unit_of_measurement: "°C"
+    device_class: temperature
+    scan_interval: 30
+
+  - platform: rest
+    name: ProxMenux Uptime
+    resource: http://proxmox.example.tld:8008/api/system
+    headers:
+      Authorization: !secret proxmenux_api_token
+    value_template: >
+      {% set uptime_seconds = value_json.uptime | int %}
+      {% set days = (uptime_seconds / 86400) | int %}
+      {% set hours = ((uptime_seconds % 86400) / 3600) | int %}
+      {% set minutes = ((uptime_seconds % 3600) / 60) | int %}
+      {{ days }}d {{ hours }}h {{ minutes }}m
+    scan_interval: 60
+```
+
+#### Lovelace Card Example
+
+```yaml
+type: entities
+title: Proxmox Monitor
+entities:
+  - entity: sensor.proxmenux_cpu
+    name: CPU Usage
+    icon: mdi:cpu-64-bit
+  - entity: sensor.proxmenux_memory
+    name: Memory Usage
+    icon: mdi:memory
+  - entity: sensor.proxmenux_temperature
+    name: Temperature
+    icon: mdi:thermometer
+  - entity: sensor.proxmenux_uptime
+    name: Uptime
+    icon: mdi:clock-outline
+```
+
+![Home Assistant Integration Example](AppImage/public/images/docs/homeassistant-integration.png)
+
+
+
+---
+
+**ProxMenux Monitor** - Made with ❤️ for the Proxmox community

AppImage/app/dashboard/page.tsx

@@ -0,0 +1,9 @@
+import { ProxmoxDashboard } from "../../components/proxmox-dashboard"
+
+export default function DashboardPage() {
+  return (
+    <main className="min-h-screen bg-background">
+      <ProxmoxDashboard />
+    </main>
+  )
+}

AppImage/app/globals.css

@@ -0,0 +1,165 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===================== */
+/* Light Mode (default)  */
+/* ===================== */
+:root {
+  --background: oklch(1 0 0);              /* blanco */
+  --foreground: oklch(0.145 0 0);          /* casi negro */
+
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.205 0 0);             /* gris oscuro */
+  --primary-foreground: oklch(0.985 0 0);  /* blanco */
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: var(--primary);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);    /* gris medio */
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: var(--primary);
+
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.145 0 0);
+
+  --border: oklch(0.922 0 0);
+  --input: var(--border);
+  --ring: oklch(0.708 0 0);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --radius: 0.625rem;
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: var(--primary);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+/* ===================== */
+/* Dark Mode (gris)      */
+/* ===================== */
+.dark {
+  --background: oklch(0.22 0 0);           /* gris oscuro */
+  --foreground: oklch(0.97 0 0);           /* blanco/gris claro */
+
+  --card: oklch(0.24 0 0);
+  --card-foreground: var(--foreground);
+
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.83 0 0);              /* casi blanco */
+  --primary-foreground: var(--background);
+
+  --secondary: oklch(0.28 0 0);
+  --secondary-foreground: oklch(0.92 0 0);
+
+  --muted: oklch(0.26 0 0);
+  --muted-foreground: oklch(0.72 0 0);
+
+  --accent: oklch(0.28 0 0);
+  --accent-foreground: var(--primary);
+
+  --destructive: oklch(0.53 0.25 27);
+  --destructive-foreground: oklch(0.9 0 0);
+
+  --border: oklch(0.34 0 0);
+  --input: var(--border);
+  --ring: oklch(0.55 0 0);
+
+  --chart-1: oklch(0.60 0.20 255);
+  --chart-2: oklch(0.70 0.16 165);
+  --chart-3: oklch(0.76 0.19 70);
+  --chart-4: oklch(0.63 0.25 305);
+  --chart-5: oklch(0.66 0.24 20);
+
+  --sidebar: oklch(0.24 0 0);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--chart-1);
+  --sidebar-primary-foreground: var(--foreground);
+  --sidebar-accent: oklch(0.28 0 0);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+/* ===================== */
+/* Base layer            */
+/* ===================== */
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Foco accesible */
+  :is(button,[role="button"],a,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus {
+    @apply outline-none;
+  }
+  :is(button,[role="button"],a,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible {
+    @apply ring-2;
+    --tw-ring-color: var(--ring);
+    --tw-ring-opacity: 0.5; /* equivalente al /50 */
+  }
+}
+
+/* ===================== */
+/* Ajustes para Charts   */
+/* ===================== */
+@layer components {
+  /* Recharts axis */
+  .recharts-cartesian-axis-tick tspan {
+    fill: var(--muted-foreground);
+  }
+  .recharts-cartesian-axis-line,
+  .recharts-cartesian-grid line {
+    stroke: var(--border);
+  }
+
+  /* Chart.js axis */
+  .chartjs-render-monitor text {
+    fill: var(--muted-foreground);
+  }
+  .chartjs-render-monitor line {
+    stroke: var(--border);
+  }
+}
+
+/* ===================== */
+/* Ajustes para xterm.js */
+/* ===================== */
+
+/* Quitar padding para que la terminal ocupe el 100% del ancho */
+.xterm {
+  padding: 0 !important;
+}
+
+/* Por si acaso el viewport añade padding extra */
+.xterm .xterm-viewport {
+  padding: 0 !important;
+}
+
+/* Opcional: asegurar que no haya margen raro */
+.xterm-rows {
+  margin: 0 !important;
+}

AppImage/app/hardware/page.tsx

@@ -0,0 +1,5 @@
+import Hardware from "@/components/hardware"
+
+export default function HardwarePage() {
+  return <Hardware />
+}

AppImage/app/layout.tsx

@@ -0,0 +1,46 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { GeistSans } from "geist/font/sans"
+import { GeistMono } from "geist/font/mono"
+import { ThemeProvider } from "../components/theme-provider"
+import { Suspense } from "react"
+import "./globals.css"
+
+export const metadata: Metadata = {
+  title: "ProxMenux Monitor",
+  description: "Proxmox System Dashboard and Monitor",
+  generator: "v0.app",
+  manifest: "/manifest.json",
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/icon.svg", type: "image/svg+xml" },
+      { url: "/icon.png", type: "image/png", sizes: "32x32" },
+    ],
+    shortcut: "/favicon.ico",
+    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
+  },
+  viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#2b2f36" },
+  ],
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${GeistSans.variable} ${GeistMono.variable} antialiased bg-background text-foreground`}>
+        <Suspense fallback={<div>Loading...</div>}>
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+            {children}
+          </ThemeProvider>
+        </Suspense>
+      </body>
+    </html>
+  )
+}

AppImage/app/page.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ProxmoxDashboard } from "../components/proxmox-dashboard"
+import { Login } from "../components/login"
+import { AuthSetup } from "../components/auth-setup"
+import { getApiUrl } from "../lib/api-config"
+
+export default function Home() {
+  const [authStatus, setAuthStatus] = useState<{
+    loading: boolean
+    authEnabled: boolean
+    authConfigured: boolean
+    authenticated: boolean
+  }>({
+    loading: true,
+    authEnabled: false,
+    authConfigured: false,
+    authenticated: false,
+  })
+
+  useEffect(() => {
+    checkAuthStatus()
+  }, [])
+
+  const checkAuthStatus = async () => {
+    try {
+      const token = localStorage.getItem("proxmenux-auth-token")
+      const response = await fetch(getApiUrl("/api/auth/status"), {
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      })
+      const data = await response.json()
+
+      console.log("[v0] Auth status:", data)
+
+      const authenticated = data.auth_enabled ? data.authenticated : true
+
+      setAuthStatus({
+        loading: false,
+        authEnabled: data.auth_enabled,
+        authConfigured: data.auth_configured,
+        authenticated,
+      })
+    } catch (error) {
+      console.error("[v0] Failed to check auth status:", error)
+      setAuthStatus({
+        loading: false,
+        authEnabled: false,
+        authConfigured: false,
+        authenticated: true,
+      })
+    }
+  }
+
+  const handleAuthComplete = () => {
+    checkAuthStatus()
+  }
+
+  const handleLoginSuccess = () => {
+    checkAuthStatus()
+  }
+
+  if (authStatus.loading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center space-y-4">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (authStatus.authEnabled && !authStatus.authenticated) {
+    return <Login onLogin={handleLoginSuccess} />
+  }
+
+  // Show dashboard in all other cases
+  return (
+    <>
+      {!authStatus.authConfigured && <AuthSetup onComplete={handleAuthComplete} />}
+      <ProxmoxDashboard />
+    </>
+  )
+}

AppImage/components/auth-setup.tsx

@@ -0,0 +1,278 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "./ui/button"
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+import { Shield, Lock, User, AlertCircle, Eye, EyeOff } from "lucide-react"
+import { getApiUrl } from "../lib/api-config"
+
+interface AuthSetupProps {
+  onComplete: () => void
+}
+
+export function AuthSetup({ onComplete }: AuthSetupProps) {
+  const [open, setOpen] = useState(false)
+  const [step, setStep] = useState<"choice" | "setup">("choice")
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  useEffect(() => {
+    const checkOnboardingStatus = async () => {
+      try {
+        const response = await fetch(getApiUrl("/api/auth/status"))
+        const data = await response.json()
+
+        console.log("[v0] Auth status for modal check:", data)
+
+        // Show modal if auth is not configured and not declined
+        if (!data.auth_configured) {
+          setTimeout(() => setOpen(true), 500)
+        }
+      } catch (error) {
+        console.error("[v0] Failed to check auth status:", error)
+        // Fail-safe: show modal if we can't check status
+        setTimeout(() => setOpen(true), 500)
+      }
+    }
+
+    checkOnboardingStatus()
+  }, [])
+
+  const handleSkipAuth = async () => {
+    setLoading(true)
+    setError("")
+
+    try {
+      console.log("[v0] Skipping authentication setup...")
+      const response = await fetch(getApiUrl("/api/auth/skip"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+      })
+
+      const data = await response.json()
+      console.log("[v0] Auth skip response:", data)
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to skip authentication")
+      }
+
+      if (data.auth_declined) {
+        console.log("[v0] Authentication skipped successfully - APIs should be accessible without token")
+      }
+
+      console.log("[v0] Authentication skipped successfully")
+      localStorage.setItem("proxmenux-auth-declined", "true")
+      localStorage.removeItem("proxmenux-auth-token") // Remove any old token
+      setOpen(false)
+      onComplete()
+    } catch (err) {
+      console.error("[v0] Auth skip error:", err)
+      setError(err instanceof Error ? err.message : "Failed to save preference")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSetupAuth = async () => {
+    setError("")
+
+    if (!username || !password) {
+      setError("Please fill in all fields")
+      return
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match")
+      return
+    }
+
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      console.log("[v0] Setting up authentication...")
+      const response = await fetch(getApiUrl("/api/auth/setup"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+        }),
+      })
+
+      const data = await response.json()
+      console.log("[v0] Auth setup response:", data)
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to setup authentication")
+      }
+
+      if (data.token) {
+        localStorage.setItem("proxmenux-auth-token", data.token)
+        localStorage.removeItem("proxmenux-auth-declined")
+        console.log("[v0] Authentication setup successful")
+      }
+
+      setOpen(false)
+      onComplete()
+    } catch (err) {
+      console.error("[v0] Auth setup error:", err)
+      setError(err instanceof Error ? err.message : "Failed to setup authentication")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
+        <DialogTitle className="sr-only">
+          {step === "choice" ? "Setup Dashboard Protection" : "Create Password"}
+        </DialogTitle>
+        {step === "choice" ? (
+          <div className="space-y-6 py-2">
+            <div className="text-center space-y-2">
+              <div className="mx-auto w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center">
+                <Shield className="h-8 w-8 text-blue-500" />
+              </div>
+              <h2 className="text-2xl font-bold">Protect Your Dashboard?</h2>
+              <p className="text-muted-foreground text-sm">
+                Add an extra layer of security to protect your Proxmox data when accessing from non-private networks.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <Button onClick={() => setStep("setup")} className="w-full bg-blue-500 hover:bg-blue-600" size="lg">
+                <Lock className="h-4 w-4 mr-2" />
+                Yes, Setup Password
+              </Button>
+              <Button
+                onClick={handleSkipAuth}
+                variant="outline"
+                className="w-full bg-transparent"
+                size="lg"
+                disabled={loading}
+              >
+                No, Continue Without Protection
+              </Button>
+            </div>
+
+            <p className="text-xs text-center text-muted-foreground">You can always enable this later in Settings</p>
+          </div>
+        ) : (
+          <div className="space-y-6 py-2">
+            <div className="text-center space-y-2">
+              <div className="mx-auto w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center">
+                <Lock className="h-8 w-8 text-blue-500" />
+              </div>
+              <h2 className="text-2xl font-bold">Setup Authentication</h2>
+              <p className="text-muted-foreground text-sm">Create a username and password to protect your dashboard</p>
+            </div>
+
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
+                <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-red-500">{error}</p>
+              </div>
+            )}
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="username" className="text-sm">
+                  Username
+                </Label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="username"
+                    type="text"
+                    placeholder="Enter username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    className="pl-10 text-base"
+                    disabled={loading}
+                    autoComplete="username"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password" className="text-sm">
+                  Password
+                </Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    placeholder="Enter password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pl-10 text-base"
+                    disabled={loading}
+                    autoComplete="new-password"
+                  />
+                  <Button
+                    variant="ghost"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2"
+                    disabled={loading}
+                  >
+                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="confirm-password" className="text-sm">
+                  Confirm Password
+                </Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="confirm-password"
+                    type={showConfirmPassword ? "text" : "password"}
+                    placeholder="Confirm password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="pl-10 text-base"
+                    disabled={loading}
+                    autoComplete="new-password"
+                  />
+                  <Button
+                    variant="ghost"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2"
+                    disabled={loading}
+                  >
+                    {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Button onClick={handleSetupAuth} className="w-full bg-blue-500 hover:bg-blue-600" disabled={loading}>
+                {loading ? "Setting up..." : "Setup Authentication"}
+              </Button>
+              <Button onClick={() => setStep("choice")} variant="ghost" className="w-full" disabled={loading}>
+                Back
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

AppImage/components/hardware-monitor.tsx

@@ -0,0 +1,114 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
+import { Cpu } from "@/components/icons/cpu" // Added import for Cpu
+import type { PCIDevice } from "../types/hardware" // Fixed import to use relative path instead of alias
+import { Progress } from "@/components/ui/progress"
+
+function GPUCard({ device }: { device: PCIDevice }) {
+  const hasMonitoring = device.gpu_temperature !== undefined || device.gpu_utilization !== undefined
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Cpu className="h-5 w-5" />
+          {device.device}
+        </CardTitle>
+        <CardDescription>{device.vendor}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <div className="text-muted-foreground">Slot</div>
+            <div className="font-medium">{device.slot}</div>
+          </div>
+          {device.driver && (
+            <div>
+              <div className="text-muted-foreground">Driver</div>
+              <div className="font-medium">{device.driver}</div>
+            </div>
+          )}
+          {device.gpu_driver_version && (
+            <div>
+              <div className="text-muted-foreground">Driver Version</div>
+              <div className="font-medium">{device.gpu_driver_version}</div>
+            </div>
+          )}
+          {device.gpu_memory && (
+            <div>
+              <div className="text-muted-foreground">Memory</div>
+              <div className="font-medium">{device.gpu_memory}</div>
+            </div>
+          )}
+          {device.gpu_compute_capability && (
+            <div>
+              <div className="text-muted-foreground">Compute Capability</div>
+              <div className="font-medium">{device.gpu_compute_capability}</div>
+            </div>
+          )}
+        </div>
+
+        {hasMonitoring && (
+          <div className="space-y-3 pt-4 border-t">
+            <h4 className="text-sm font-semibold">Real-time Monitoring</h4>
+
+            {device.gpu_temperature !== undefined && (
+              <div className="space-y-1">
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Temperature</span>
+                  <span className="font-medium">{device.gpu_temperature}°C</span>
+                </div>
+                <Progress value={(device.gpu_temperature / 100) * 100} className="h-2" />
+              </div>
+            )}
+
+            {device.gpu_utilization !== undefined && (
+              <div className="space-y-1">
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">GPU Utilization</span>
+                  <span className="font-medium">{device.gpu_utilization}%</span>
+                </div>
+                <Progress value={device.gpu_utilization} className="h-2" />
+              </div>
+            )}
+
+            {device.gpu_memory_used && device.gpu_memory_total && (
+              <div className="space-y-1">
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Memory Usage</span>
+                  <span className="font-medium">
+                    {device.gpu_memory_used} / {device.gpu_memory_total}
+                  </span>
+                </div>
+                <Progress
+                  value={(Number.parseInt(device.gpu_memory_used) / Number.parseInt(device.gpu_memory_total)) * 100}
+                  className="h-2"
+                />
+              </div>
+            )}
+
+            {device.gpu_power_draw && (
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Power Draw</span>
+                <span className="font-medium">{device.gpu_power_draw}</span>
+              </div>
+            )}
+
+            {device.gpu_clock_speed && (
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">GPU Clock</span>
+                <span className="font-medium">{device.gpu_clock_speed}</span>
+              </div>
+            )}
+
+            {device.gpu_memory_clock && (
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Memory Clock</span>
+                <span className="font-medium">{device.gpu_memory_clock}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

AppImage/components/health-status-modal.tsx

@@ -0,0 +1,366 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Loader2,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  Activity,
+  Cpu,
+  MemoryStick,
+  HardDrive,
+  Disc,
+  Network,
+  Box,
+  Settings,
+  FileText,
+  RefreshCw,
+  Shield,
+  X,
+} from "lucide-react"
+
+interface CategoryCheck {
+  status: string
+  reason?: string
+  details?: any
+  dismissable?: boolean
+  [key: string]: any
+}
+
+interface HealthDetails {
+  overall: string
+  summary: string
+  details: {
+    cpu: CategoryCheck
+    memory: CategoryCheck
+    storage: CategoryCheck
+    disks: CategoryCheck
+    network: CategoryCheck
+    vms: CategoryCheck
+    services: CategoryCheck
+    logs: CategoryCheck
+    updates: CategoryCheck
+    security: CategoryCheck
+  }
+  timestamp: string
+}
+
+interface HealthStatusModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  getApiUrl: (path: string) => string
+}
+
+const CATEGORIES = [
+  { key: "cpu", label: "CPU Usage & Temperature", Icon: Cpu },
+  { key: "memory", label: "Memory & Swap", Icon: MemoryStick },
+  { key: "storage", label: "Storage Mounts & Space", Icon: HardDrive },
+  { key: "disks", label: "Disk I/O & Errors", Icon: Disc },
+  { key: "network", label: "Network Interfaces", Icon: Network },
+  { key: "vms", label: "VMs & Containers", Icon: Box },
+  { key: "services", label: "PVE Services", Icon: Settings },
+  { key: "logs", label: "System Logs", Icon: FileText },
+  { key: "updates", label: "System Updates", Icon: RefreshCw },
+  { key: "security", label: "Security & Certificates", Icon: Shield },
+]
+
+export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatusModalProps) {
+  const [loading, setLoading] = useState(true)
+  const [healthData, setHealthData] = useState<HealthDetails | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (open) {
+      fetchHealthDetails()
+    }
+  }, [open])
+
+  const fetchHealthDetails = async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(getApiUrl("/api/health/details"))
+      if (!response.ok) {
+        throw new Error("Failed to fetch health details")
+      }
+      const data = await response.json()
+      console.log("[v0] Health data received:", data)
+      setHealthData(data)
+
+      const event = new CustomEvent("healthStatusUpdated", {
+        detail: { status: data.overall },
+      })
+      window.dispatchEvent(event)
+    } catch (err) {
+      console.error("[v0] Error fetching health data:", err)
+      setError(err instanceof Error ? err.message : "Unknown error")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const getStatusIcon = (status: string) => {
+    const statusUpper = status?.toUpperCase()
+    switch (statusUpper) {
+      case "OK":
+        return <CheckCircle2 className="h-5 w-5 text-green-500" />
+      case "WARNING":
+        return <AlertTriangle className="h-5 w-5 text-yellow-500" />
+      case "CRITICAL":
+        return <XCircle className="h-5 w-5 text-red-500" />
+      default:
+        return <Activity className="h-5 w-5 text-gray-500" />
+    }
+  }
+
+  const getStatusBadge = (status: string) => {
+    const statusUpper = status?.toUpperCase()
+    switch (statusUpper) {
+      case "OK":
+        return <Badge className="bg-green-500 text-white hover:bg-green-500">OK</Badge>
+      case "WARNING":
+        return <Badge className="bg-yellow-500 text-white hover:bg-yellow-500">Warning</Badge>
+      case "CRITICAL":
+        return <Badge className="bg-red-500 text-white hover:bg-red-500">Critical</Badge>
+      default:
+        return <Badge>Unknown</Badge>
+    }
+  }
+
+  const getHealthStats = () => {
+    if (!healthData?.details) {
+      return { total: 0, healthy: 0, warnings: 0, critical: 0 }
+    }
+
+    let healthy = 0
+    let warnings = 0
+    let critical = 0
+
+    CATEGORIES.forEach(({ key }) => {
+      const categoryData = healthData.details[key as keyof typeof healthData.details]
+      if (categoryData) {
+        const status = categoryData.status?.toUpperCase()
+        if (status === "OK") healthy++
+        else if (status === "WARNING") warnings++
+        else if (status === "CRITICAL") critical++
+      }
+    })
+
+    return { total: CATEGORIES.length, healthy, warnings, critical }
+  }
+
+  const stats = getHealthStats()
+
+  const handleCategoryClick = (categoryKey: string, status: string) => {
+    if (status === "OK") return // No navegar si está OK
+
+    onOpenChange(false) // Cerrar el modal
+
+    // Mapear categorías a tabs
+    const categoryToTab: Record<string, string> = {
+      storage: "storage",
+      disks: "storage",
+      network: "network",
+      vms: "vms",
+      logs: "logs",
+      hardware: "hardware",
+      services: "hardware",
+    }
+
+    const targetTab = categoryToTab[categoryKey]
+    if (targetTab) {
+      // Disparar evento para cambiar tab
+      const event = new CustomEvent("changeTab", { detail: { tab: targetTab } })
+      window.dispatchEvent(event)
+    }
+  }
+
+  const handleAcknowledge = async (errorKey: string, e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent navigation
+
+    console.log("[v0] Dismissing error:", errorKey)
+
+    try {
+      const response = await fetch(getApiUrl("/api/health/acknowledge"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ error_key: errorKey }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        console.error("[v0] Acknowledge failed:", errorData)
+        throw new Error(errorData.error || "Failed to acknowledge error")
+      }
+
+      const result = await response.json()
+      console.log("[v0] Acknowledge success:", result)
+
+      // Refresh health data
+      await fetchHealthDetails()
+    } catch (err) {
+      console.error("[v0] Error acknowledging:", err)
+      alert("Failed to dismiss error. Please try again.")
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto">
+        <DialogHeader>
+          <div className="flex items-center justify-between gap-3">
+            <DialogTitle className="flex items-center gap-2 flex-1">
+              <Activity className="h-6 w-6" />
+              System Health Status
+              {healthData && <div className="ml-2">{getStatusBadge(healthData.overall)}</div>}
+            </DialogTitle>
+          </div>
+          <DialogDescription>Detailed health checks for all system components</DialogDescription>
+        </DialogHeader>
+
+        {loading && (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-200">
+            <p className="font-medium">Error loading health status</p>
+            <p className="text-sm">{error}</p>
+          </div>
+        )}
+
+        {healthData && !loading && (
+          <div className="space-y-4">
+            {/* Overall Stats Summary */}
+            <div className="grid grid-cols-4 gap-3 p-4 rounded-lg bg-muted/30 border">
+              <div className="text-center">
+                <div className="text-2xl font-bold">{stats.total}</div>
+                <div className="text-xs text-muted-foreground">Total Checks</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-green-500">{stats.healthy}</div>
+                <div className="text-xs text-muted-foreground">Healthy</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-yellow-500">{stats.warnings}</div>
+                <div className="text-xs text-muted-foreground">Warnings</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-red-500">{stats.critical}</div>
+                <div className="text-xs text-muted-foreground">Critical</div>
+              </div>
+            </div>
+
+            {healthData.summary && healthData.summary !== "All systems operational" && (
+              <div className="text-sm p-3 rounded-lg bg-muted/20 border">
+                <span className="font-medium text-foreground">{healthData.summary}</span>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              {CATEGORIES.map(({ key, label, Icon }) => {
+                const categoryData = healthData.details[key as keyof typeof healthData.details]
+                const status = categoryData?.status || "UNKNOWN"
+                const reason = categoryData?.reason
+                const details = categoryData?.details
+
+                return (
+                  <div
+                    key={key}
+                    onClick={() => handleCategoryClick(key, status)}
+                    className={`flex items-start gap-3 p-3 rounded-lg border transition-colors ${
+                      status === "OK"
+                        ? "bg-card border-border hover:bg-muted/30"
+                        : status === "WARNING"
+                          ? "bg-yellow-500/5 border-yellow-500/20 hover:bg-yellow-500/10 cursor-pointer"
+                          : status === "CRITICAL"
+                            ? "bg-red-500/5 border-red-500/20 hover:bg-red-500/10 cursor-pointer"
+                            : "bg-muted/30 hover:bg-muted/50"
+                    }`}
+                  >
+                    <div className="mt-0.5 flex-shrink-0 flex items-center gap-2">
+                      <Icon className="h-4 w-4 text-blue-500" />
+                      {getStatusIcon(status)}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between gap-2 mb-1">
+                        <p className="font-medium text-sm">{label}</p>
+                        <Badge
+                          variant="outline"
+                          className={`shrink-0 text-xs ${
+                            status === "OK"
+                              ? "border-green-500 text-green-500 bg-transparent"
+                              : status === "WARNING"
+                                ? "border-yellow-500 text-yellow-500 bg-yellow-500/5"
+                                : status === "CRITICAL"
+                                  ? "border-red-500 text-red-500 bg-red-500/5"
+                                  : ""
+                          }`}
+                        >
+                          {status}
+                        </Badge>
+                      </div>
+                      {reason && <p className="text-xs text-muted-foreground mt-1">{reason}</p>}
+                      {details && typeof details === "object" && (
+                        <div className="mt-2 space-y-1">
+                          {Object.entries(details).map(([detailKey, detailValue]: [string, any]) => {
+                            if (typeof detailValue === "object" && detailValue !== null) {
+                              const isDismissable = detailValue.dismissable !== false
+
+                              return (
+                                <div
+                                  key={detailKey}
+                                  className="flex items-start justify-between gap-2 text-xs pl-3 border-l-2 border-muted py-1"
+                                >
+                                  <div className="flex-1">
+                                    <span className="font-medium">{detailKey}:</span>
+                                    {detailValue.reason && (
+                                      <span className="ml-1 text-muted-foreground">{detailValue.reason}</span>
+                                    )}
+                                  </div>
+                                  {(status === "WARNING" || status === "CRITICAL") && isDismissable && (
+                                    <Button
+                                      size="sm"
+                                      variant="outline"
+                                      className="h-6 px-2 shrink-0 hover:bg-red-500/10 hover:border-red-500/50 bg-transparent"
+                                      onClick={(e) => handleAcknowledge(detailKey, e)}
+                                    >
+                                      <X className="h-3 w-3 mr-1" />
+                                      <span className="text-xs">Dismiss</span>
+                                    </Button>
+                                  )}
+                                </div>
+                              )
+                            }
+                            return null
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+
+            {healthData.timestamp && (
+              <div className="text-xs text-muted-foreground text-center pt-2">
+                Last updated: {new Date(healthData.timestamp).toLocaleString()}
+              </div>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

AppImage/components/login.tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+import { Checkbox } from "./ui/checkbox"
+import { Lock, User, AlertCircle, Server, Shield } from "lucide-react"
+import { getApiUrl } from "../lib/api-config"
+import Image from "next/image"
+
+interface LoginProps {
+  onLogin: () => void
+}
+
+export function Login({ onLogin }: LoginProps) {
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [totpCode, setTotpCode] = useState("")
+  const [requiresTotp, setRequiresTotp] = useState(false)
+  const [rememberMe, setRememberMe] = useState(false)
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const savedUsername = localStorage.getItem("proxmenux-saved-username")
+    const savedPassword = localStorage.getItem("proxmenux-saved-password")
+
+    if (savedUsername && savedPassword) {
+      setUsername(savedUsername)
+      setPassword(savedPassword)
+      setRememberMe(true)
+    }
+  }, [])
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError("")
+
+    if (!username || !password) {
+      setError("Please enter username and password")
+      return
+    }
+
+    if (requiresTotp && !totpCode) {
+      setError("Please enter your 2FA code")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const response = await fetch(getApiUrl("/api/auth/login"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+          totp_token: totpCode || undefined, // Include 2FA code if provided
+        }),
+      })
+
+      const data = await response.json()
+
+      if (data.requires_totp) {
+        setRequiresTotp(true)
+        setLoading(false)
+        return
+      }
+
+      if (!response.ok) {
+        throw new Error(data.message || "Login failed")
+      }
+
+      localStorage.setItem("proxmenux-auth-token", data.token)
+
+      if (rememberMe) {
+        localStorage.setItem("proxmenux-saved-username", username)
+        localStorage.setItem("proxmenux-saved-password", password)
+      } else {
+        localStorage.removeItem("proxmenux-saved-username")
+        localStorage.removeItem("proxmenux-saved-password")
+      }
+
+      onLogin()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center space-y-4">
+          <div className="flex justify-center">
+            <div className="w-20 h-20 relative flex items-center justify-center bg-primary/10 rounded-lg">
+              <Image
+                src="/images/proxmenux-logo.png"
+                alt="ProxMenux Logo"
+                width={80}
+                height={80}
+                className="object-contain"
+                priority
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement
+                  target.style.display = "none"
+                  const fallback = target.parentElement?.querySelector(".fallback-icon")
+                  if (fallback) {
+                    fallback.classList.remove("hidden")
+                  }
+                }}
+              />
+              <Server className="h-12 w-12 text-primary absolute fallback-icon hidden" />
+            </div>
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold">ProxMenux Monitor</h1>
+            <p className="text-muted-foreground mt-2">Sign in to access your dashboard</p>
+          </div>
+        </div>
+
+        <div className="bg-card border border-border rounded-lg p-6 shadow-lg">
+          <form onSubmit={handleLogin} className="space-y-4">
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
+                <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-red-500">{error}</p>
+              </div>
+            )}
+
+            {!requiresTotp ? (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="login-username" className="text-sm">
+                    Username
+                  </Label>
+                  <div className="relative">
+                    <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      id="login-username"
+                      type="text"
+                      placeholder="Enter your username"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      className="pl-10 text-base"
+                      disabled={loading}
+                      autoComplete="username"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="login-password" className="text-sm">
+                    Password
+                  </Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      id="login-password"
+                      type="password"
+                      placeholder="Enter your password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      className="pl-10 text-base"
+                      disabled={loading}
+                      autoComplete="current-password"
+                    />
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="remember-me"
+                    checked={rememberMe}
+                    onCheckedChange={(checked) => setRememberMe(checked as boolean)}
+                    disabled={loading}
+                  />
+                  <Label htmlFor="remember-me" className="text-sm font-normal cursor-pointer select-none">
+                    Remember me
+                  </Label>
+                </div>
+              </>
+            ) : (
+              <div className="space-y-4">
+                <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                  <Shield className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-medium text-blue-500">Two-Factor Authentication</p>
+                    <p className="text-xs text-blue-500 mt-1">Enter the 6-digit code from your authentication app</p>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="totp-code" className="text-sm">
+                    Authentication Code
+                  </Label>
+                  <Input
+                    id="totp-code"
+                    type="text"
+                    placeholder="000000"
+                    value={totpCode}
+                    onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                    className="text-center text-lg tracking-widest font-mono text-base"
+                    maxLength={6}
+                    disabled={loading}
+                    autoComplete="one-time-code"
+                    autoFocus
+                  />
+                  <p className="text-xs text-muted-foreground text-center">
+                    You can also use a backup code (format: XXXX-XXXX)
+                  </p>
+                </div>
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setRequiresTotp(false)
+                    setTotpCode("")
+                    setError("")
+                  }}
+                  className="w-full"
+                >
+                  Back to login
+                </Button>
+              </div>
+            )}
+
+            <Button type="submit" className="w-full bg-blue-500 hover:bg-blue-600" disabled={loading}>
+              {loading ? "Signing in..." : requiresTotp ? "Verify Code" : "Sign In"}
+            </Button>
+          </form>
+        </div>
+
+        <p className="text-center text-sm text-muted-foreground">ProxMenux Monitor v1.0.2</p>
+      </div>
+    </div>
+  )
+}

AppImage/components/metrics-dialog.tsx

@@ -0,0 +1,489 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { ArrowLeft, Loader2 } from "lucide-react"
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
+import { fetchApi } from "@/lib/api-config"
+
+interface MetricsViewProps {
+  vmid: number
+  vmName: string
+  vmType: "qemu" | "lxc"
+  onBack: () => void
+}
+
+const TIMEFRAME_OPTIONS = [
+  { value: "hour", label: "1 Hour" },
+  { value: "day", label: "24 Hours" },
+  { value: "week", label: "7 Days" },
+  { value: "month", label: "30 Days" },
+  { value: "year", label: "1 Year" },
+]
+
+const CustomCPUTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">{entry.value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+const CustomMemoryTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">{entry.value} GB</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+const CustomDiskTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">{entry.value} MB</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+const CustomNetworkTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">{entry.value} MB</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+export function MetricsView({ vmid, vmName, vmType, onBack }: MetricsViewProps) {
+  const [timeframe, setTimeframe] = useState("week")
+  const [data, setData] = useState<any[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [hiddenDiskLines, setHiddenDiskLines] = useState<string[]>([])
+  const [hiddenNetworkLines, setHiddenNetworkLines] = useState<string[]>([])
+
+  useEffect(() => {
+    fetchMetrics()
+  }, [vmid, timeframe])
+
+  const fetchMetrics = async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const result = await fetchApi<any>(`/api/vms/${vmid}/metrics?timeframe=${timeframe}`)
+
+      const transformedData = result.data.map((item: any) => {
+        const date = new Date(item.time * 1000)
+        let timeLabel = ""
+
+        if (timeframe === "hour") {
+          timeLabel = date.toLocaleString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "day") {
+          timeLabel = date.toLocaleString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "week") {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "month") {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+          })
+        } else {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            year: "numeric",
+          })
+        }
+
+        return {
+          time: timeLabel,
+          timestamp: item.time,
+          cpu: item.cpu ? Number((item.cpu * 100).toFixed(2)) : 0,
+          memory: item.mem ? Number(((item.mem / item.maxmem) * 100).toFixed(2)) : 0,
+          memoryGB: item.mem ? Number((item.mem / 1024 / 1024 / 1024).toFixed(2)) : 0,
+          maxMemoryGB: item.maxmem ? Number((item.maxmem / 1024 / 1024 / 1024).toFixed(2)) : 0,
+          netin: item.netin ? Number((item.netin / 1024 / 1024).toFixed(2)) : 0,
+          netout: item.netout ? Number((item.netout / 1024 / 1024).toFixed(2)) : 0,
+          diskread: item.diskread ? Number((item.diskread / 1024 / 1024).toFixed(2)) : 0,
+          diskwrite: item.diskwrite ? Number((item.diskwrite / 1024 / 1024).toFixed(2)) : 0,
+        }
+      })
+
+      setData(transformedData)
+    } catch (err: any) {
+      setError(err.message || "Error loading metrics")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const formatXAxisTick = (tick: any) => {
+    return tick
+  }
+
+  const renderAllCharts = () => {
+    if (loading) {
+      return (
+        <div className="flex items-center justify-center h-[400px]">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      )
+    }
+
+    if (error) {
+      return (
+        <div className="flex items-center justify-center h-[400px]">
+          <p className="text-red-500">{error}</p>
+        </div>
+      )
+    }
+
+    if (data.length === 0) {
+      return (
+        <div className="flex items-center justify-center h-[400px]">
+          <p className="text-muted-foreground">No data available</p>
+        </div>
+      )
+    }
+
+    const tickInterval = Math.ceil(data.length / 8)
+
+    return (
+      <div className="space-y-8">
+        {/* CPU Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">CPU Usage</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+              <XAxis
+                dataKey="time"
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                angle={-45}
+                textAnchor="end"
+                height={60}
+                interval={tickInterval}
+                tickFormatter={formatXAxisTick}
+              />
+              <YAxis
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }}
+                domain={[0, "dataMax"]}
+              />
+              <Tooltip content={<CustomCPUTooltip />} />
+              <Area
+                type="monotone"
+                dataKey="cpu"
+                stroke="#3b82f6"
+                strokeWidth={2}
+                fill="#3b82f6"
+                fillOpacity={0.3}
+                name="CPU %"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Memory Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Memory Usage</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+              <XAxis
+                dataKey="time"
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                angle={-45}
+                textAnchor="end"
+                height={60}
+                interval={tickInterval}
+                tickFormatter={formatXAxisTick}
+              />
+              <YAxis
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                label={{ value: "GB", angle: -90, position: "insideLeft", fill: "currentColor" }}
+                domain={[0, "dataMax"]}
+              />
+              <Tooltip content={<CustomMemoryTooltip />} />
+              <Area
+                type="monotone"
+                dataKey="memoryGB"
+                stroke="#10b981"
+                fill="#10b981"
+                fillOpacity={0.3}
+                strokeWidth={2}
+                name="Memory GB"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Disk I/O Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Disk I/O</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+              <XAxis
+                dataKey="time"
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                angle={-45}
+                textAnchor="end"
+                height={60}
+                interval={tickInterval}
+                tickFormatter={formatXAxisTick}
+              />
+              <YAxis
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
+                domain={[0, "dataMax"]}
+              />
+              <Tooltip content={<CustomDiskTooltip />} />
+              <Legend content={renderDiskLegend} verticalAlign="top" />
+              <Area
+                type="monotone"
+                dataKey="diskread"
+                stroke="#10b981"
+                fill="#10b981"
+                fillOpacity={0.3}
+                strokeWidth={2}
+                name="Read"
+                hide={hiddenDiskLines.includes("diskread")}
+              />
+              <Area
+                type="monotone"
+                dataKey="diskwrite"
+                stroke="#3b82f6"
+                fill="#3b82f6"
+                fillOpacity={0.3}
+                strokeWidth={2}
+                name="Write"
+                hide={hiddenDiskLines.includes("diskwrite")}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Network I/O Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Network I/O</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+              <XAxis
+                dataKey="time"
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                angle={-45}
+                textAnchor="end"
+                height={60}
+                interval={tickInterval}
+                tickFormatter={formatXAxisTick}
+              />
+              <YAxis
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
+                domain={[0, "dataMax"]}
+              />
+              <Tooltip content={<CustomNetworkTooltip />} />
+              <Legend content={renderNetworkLegend} verticalAlign="top" />
+              <Area
+                type="monotone"
+                dataKey="netin"
+                stroke="#10b981"
+                fill="#10b981"
+                fillOpacity={0.3}
+                strokeWidth={2}
+                name="Download"
+                hide={hiddenNetworkLines.includes("netin")}
+              />
+              <Area
+                type="monotone"
+                dataKey="netout"
+                stroke="#3b82f6"
+                fill="#3b82f6"
+                fillOpacity={0.3}
+                strokeWidth={2}
+                name="Upload"
+                hide={hiddenNetworkLines.includes("netout")}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    )
+  }
+
+  const handleDiskLegendClick = (dataKey: string) => {
+    setHiddenDiskLines((prev) => {
+      if (prev.includes(dataKey)) {
+        return prev.filter((key) => key !== dataKey)
+      } else {
+        return [...prev, dataKey]
+      }
+    })
+  }
+
+  const handleNetworkLegendClick = (dataKey: string) => {
+    setHiddenNetworkLines((prev) => {
+      if (prev.includes(dataKey)) {
+        return prev.filter((key) => key !== dataKey)
+      } else {
+        return [...prev, dataKey]
+      }
+    })
+  }
+
+  const renderDiskLegend = (props: any) => {
+    const { payload } = props
+    return (
+      <div className="flex justify-center gap-6 pb-2">
+        {payload.map((entry: any) => (
+          <button
+            key={entry.dataKey}
+            onClick={() => handleDiskLegendClick(entry.dataKey)}
+            className={`flex items-center gap-2 cursor-pointer transition-opacity hover:opacity-100 ${
+              hiddenDiskLines.includes(entry.dataKey) ? "opacity-40" : "opacity-100"
+            }`}
+          >
+            <span className="w-3 h-3 rounded-full" style={{ backgroundColor: entry.color }} />
+            <span className="text-sm">{entry.value}</span>
+          </button>
+        ))}
+      </div>
+    )
+  }
+
+  const renderNetworkLegend = (props: any) => {
+    const { payload } = props
+    return (
+      <div className="flex justify-center gap-6 pb-2">
+        {payload.map((entry: any) => (
+          <button
+            key={entry.dataKey}
+            onClick={() => handleNetworkLegendClick(entry.dataKey)}
+            className={`flex items-center gap-2 cursor-pointer transition-opacity hover:opacity-100 ${
+              hiddenNetworkLines.includes(entry.dataKey) ? "opacity-40" : "opacity-100"
+            }`}
+          >
+            <span className="w-3 h-3 rounded-full" style={{ backgroundColor: entry.color }} />
+            <span className="text-sm">{entry.value}</span>
+          </button>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full max-h-[90vh]">
+      {/* Fixed Header */}
+      <div className="p-6 pb-4 border-b shrink-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Button variant="ghost" size="icon" onClick={onBack}>
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+            <div>
+              <h2 className="text-xl font-semibold">Metrics - {vmName}</h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                VMID: {vmid} • Type: {vmType.toUpperCase()}
+              </p>
+            </div>
+          </div>
+          <Select value={timeframe} onValueChange={setTimeframe}>
+            <SelectTrigger className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {TIMEFRAME_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Scrollable Content with all charts */}
+      <div className="flex-1 overflow-y-auto p-6 min-h-0">{renderAllCharts()}</div>
+    </div>
+  )
+}

AppImage/components/network-card.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import { Card, CardContent } from "./ui/card"
+import { Badge } from "./ui/badge"
+import { Wifi, Zap } from 'lucide-react'
+import { useState, useEffect } from "react"
+import { fetchApi } from "../lib/api-config"
+import { formatNetworkTraffic, getNetworkUnit } from "../lib/format-network"
+
+interface NetworkCardProps {
+  interface_: {
+    name: string
+    type: string
+    status: string
+    speed: number
+    duplex?: string
+    mtu?: number
+    mac_address: string | null
+    addresses: Array<{
+      ip: string
+      netmask: string
+    }>
+    bytes_sent?: number
+    bytes_recv?: number
+    bridge_physical_interface?: string
+    bridge_bond_slaves?: string[]
+    vmid?: number
+    vm_name?: string
+    vm_type?: string
+  }
+  timeframe: "hour" | "day" | "week" | "month" | "year"
+  onClick?: () => void
+}
+
+const getInterfaceTypeBadge = (type: string) => {
+  switch (type) {
+    case "physical":
+      return { color: "bg-blue-500/10 text-blue-500 border-blue-500/20", label: "Physical" }
+    case "bridge":
+      return { color: "bg-green-500/10 text-green-500 border-green-500/20", label: "Bridge" }
+    case "bond":
+      return { color: "bg-purple-500/10 text-purple-500 border-purple-500/20", label: "Bond" }
+    case "vlan":
+      return { color: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20", label: "VLAN" }
+    case "vm_lxc":
+      return { color: "bg-orange-500/10 text-orange-500 border-orange-500/20", label: "Virtual" }
+    case "virtual":
+      return { color: "bg-orange-500/10 text-orange-500 border-orange-500/20", label: "Virtual" }
+    default:
+      return { color: "bg-gray-500/10 text-gray-500 border-gray-500/20", label: "Unknown" }
+  }
+}
+
+const getVMTypeBadge = (vmType: string | undefined) => {
+  if (vmType === "lxc") {
+    return { color: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20", label: "LXC" }
+  } else if (vmType === "vm") {
+    return { color: "bg-purple-500/10 text-purple-500 border-purple-500/20", label: "VM" }
+  }
+  return { color: "bg-gray-500/10 text-gray-500 border-gray-500/20", label: "Unknown" }
+}
+
+const formatSpeed = (speed: number): string => {
+  if (speed === 0) return "N/A"
+  if (speed >= 1000) return `${(speed / 1000).toFixed(1)} Gbps`
+  return `${speed} Mbps`
+}
+
+export function NetworkCard({ interface_, timeframe, onClick }: NetworkCardProps) {
+  const typeBadge = getInterfaceTypeBadge(interface_.type)
+  const vmTypeBadge = interface_.vm_type ? getVMTypeBadge(interface_.vm_type) : null
+
+  const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">(getNetworkUnit())
+
+  const [trafficData, setTrafficData] = useState<{ received: number; sent: number }>({
+    received: 0,
+    sent: 0,
+  })
+
+  useEffect(() => {
+    const handleUnitChange = () => {
+      setNetworkUnit(getNetworkUnit())
+    }
+
+    window.addEventListener("networkUnitChanged", handleUnitChange)
+    window.addEventListener("storage", handleUnitChange)
+
+    return () => {
+      window.removeEventListener("networkUnitChanged", handleUnitChange)
+      window.removeEventListener("storage", handleUnitChange)
+    }
+  }, [])
+
+  useEffect(() => {
+    const fetchTrafficData = async () => {
+      try {
+        const data = await fetchApi(`/api/network/${interface_.name}/metrics?timeframe=${timeframe}`)
+
+        if (data.data && data.data.length > 0) {
+          const lastPoint = data.data[data.data.length - 1]
+          const firstPoint = data.data[0]
+
+          const receivedGB = Math.max(0, (lastPoint.netin || 0) - (firstPoint.netin || 0))
+          const sentGB = Math.max(0, (lastPoint.netout || 0) - (firstPoint.netout || 0))
+
+          setTrafficData({
+            received: receivedGB,
+            sent: sentGB,
+          })
+        }
+      } catch (error) {
+        console.error("[v0] Failed to fetch traffic data for card:", error)
+        setTrafficData({ received: 0, sent: 0 })
+      }
+    }
+
+    if (interface_.status.toLowerCase() === "up" && interface_.vm_type !== "vm") {
+      fetchTrafficData()
+
+      const interval = setInterval(fetchTrafficData, 60000)
+      return () => clearInterval(interval)
+    }
+  }, [interface_.name, interface_.status, interface_.vm_type, timeframe])
+
+  const getTimeframeLabel = () => {
+    switch (timeframe) {
+      case "hour":
+        return "Last Hour"
+      case "day":
+        return "Last 24 Hours"
+      case "week":
+        return "Last 7 Days"
+      case "month":
+        return "Last 30 Days"
+      case "year":
+        return "Last Year"
+      default:
+        return "Last 24 Hours"
+    }
+  }
+
+  return (
+    <Card className="bg-card border-border hover:bg-white/5 transition-colors cursor-pointer" onClick={onClick}>
+      <CardContent className="p-4">
+        <div className="flex flex-col gap-3">
+          {/* First row: Icon, Name, Type Badge, Status */}
+          <div className="flex items-center gap-3 flex-wrap">
+            <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+            <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
+              <div className="font-medium text-foreground">{interface_.name}</div>
+              {vmTypeBadge ? (
+                <Badge variant="outline" className={vmTypeBadge.color}>
+                  {vmTypeBadge.label}
+                </Badge>
+              ) : (
+                <Badge variant="outline" className={typeBadge.color}>
+                  {typeBadge.label}
+                </Badge>
+              )}
+              {interface_.vm_name && (
+                <div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
+              )}
+              {interface_.type === "bridge" && interface_.bridge_physical_interface && (
+                <div className="text-sm text-blue-500 font-medium flex items-center gap-1 flex-wrap break-all">
+                  → {interface_.bridge_physical_interface}
+                </div>
+              )}
+            </div>
+            <Badge
+              variant="outline"
+              className={
+                interface_.status === "up"
+                  ? "bg-green-500/10 text-green-500 border-green-500/20"
+                  : "bg-red-500/10 text-red-500 border-red-500/20"
+              }
+            >
+              {interface_.status.toUpperCase()}
+            </Badge>
+          </div>
+
+          {/* Second row: Details - Responsive layout */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+            <div>
+              <div className="text-muted-foreground text-xs">
+                {interface_.type === "vm_lxc" ? "VMID" : "IP Address"}
+              </div>
+              <div className="font-medium text-foreground font-mono text-sm truncate">
+                {interface_.type === "vm_lxc"
+                  ? (interface_.vmid ?? "N/A")
+                  : interface_.addresses.length > 0
+                    ? interface_.addresses[0].ip
+                    : "N/A"}
+              </div>
+            </div>
+
+            <div>
+              <div className="text-muted-foreground text-xs">Speed</div>
+              <div className="font-medium text-foreground flex items-center gap-1 text-xs">
+                <Zap className="h-3 w-3" />
+                {formatSpeed(interface_.speed)}
+              </div>
+            </div>
+
+            <div className="col-span-2 md:col-span-1">
+              <div className="text-muted-foreground text-xs">{getTimeframeLabel()}</div>
+              <div className="font-medium text-foreground text-xs">
+                {interface_.status.toLowerCase() === "up" && interface_.vm_type !== "vm" ? (
+                  <>
+                    <span className="text-green-500">↓ {formatNetworkTraffic(trafficData.received * 1024 * 1024 * 1024, networkUnit)}</span>
+                    {" / "}
+                    <span className="text-blue-500">↑ {formatNetworkTraffic(trafficData.sent * 1024 * 1024 * 1024, networkUnit)}</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="text-green-500">↓ {formatNetworkTraffic(interface_.bytes_recv || 0, networkUnit)}</span>
+                    {" / "}
+                    <span className="text-blue-500">↑ {formatNetworkTraffic(interface_.bytes_sent || 0, networkUnit)}</span>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {interface_.mac_address && (
+              <div className="col-span-2 md:col-span-1">
+                <div className="text-muted-foreground text-xs">MAC</div>
+                <div className="font-medium text-foreground font-mono text-xs truncate">{interface_.mac_address}</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

AppImage/components/network-traffic-chart.tsx

@@ -0,0 +1,330 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
+import { Loader2 } from 'lucide-react'
+import { fetchApi } from "../lib/api-config"
+import { getNetworkUnit } from "../lib/format-network"
+
+interface NetworkMetricsData {
+  time: string
+  timestamp: number
+  netIn: number
+  netOut: number
+}
+
+interface NetworkTrafficChartProps {
+  timeframe: string
+  interfaceName?: string
+  onTotalsCalculated?: (totals: { received: number; sent: number }) => void
+  refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos)
+  networkUnit?: "Bytes" | "Bits" // Added networkUnit prop
+}
+
+const CustomNetworkTooltip = ({ active, payload, label, networkUnit }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">
+                {entry.value.toFixed(3)} {networkUnit === "Bits" ? "Gb" : "GB"}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+export function NetworkTrafficChart({
+  timeframe,
+  interfaceName,
+  onTotalsCalculated,
+  refreshInterval = 60000,
+  networkUnit: networkUnitProp, // Rename prop to avoid conflict
+}: NetworkTrafficChartProps) {
+  const [data, setData] = useState<NetworkMetricsData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [isInitialLoad, setIsInitialLoad] = useState(true)
+  const [visibleLines, setVisibleLines] = useState({
+    netIn: true,
+    netOut: true,
+  })
+  
+  const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">(
+    networkUnitProp || getNetworkUnit()
+  )
+
+  useEffect(() => {
+    const handleUnitChange = () => {
+      const newUnit = getNetworkUnit()
+      setNetworkUnit(newUnit)
+    }
+
+    window.addEventListener("networkUnitChanged", handleUnitChange)
+    window.addEventListener("storage", handleUnitChange)
+
+    return () => {
+      window.removeEventListener("networkUnitChanged", handleUnitChange)
+      window.removeEventListener("storage", handleUnitChange)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (networkUnitProp) {
+      setNetworkUnit(networkUnitProp)
+    }
+  }, [networkUnitProp])
+
+  useEffect(() => {
+    setIsInitialLoad(true)
+    fetchMetrics()
+  }, [timeframe, interfaceName, networkUnit])
+
+  useEffect(() => {
+    if (refreshInterval > 0) {
+      const interval = setInterval(() => {
+        fetchMetrics()
+      }, refreshInterval)
+
+      return () => clearInterval(interval)
+    }
+  }, [timeframe, interfaceName, refreshInterval, networkUnit]) // Added networkUnit to dependencies
+
+  const fetchMetrics = async () => {
+    if (isInitialLoad) {
+      setLoading(true)
+    }
+    setError(null)
+
+    try {
+      const apiPath = interfaceName
+        ? `/api/network/${interfaceName}/metrics?timeframe=${timeframe}`
+        : `/api/node/metrics?timeframe=${timeframe}`
+
+      console.log("[v0] Fetching network metrics from:", apiPath)
+
+      const result = await fetchApi<any>(apiPath)
+
+      if (!result.data || !Array.isArray(result.data)) {
+        throw new Error("Invalid data format received from server")
+      }
+
+      if (result.data.length === 0) {
+        setData([])
+        setLoading(false)
+        return
+      }
+
+      const transformedData = result.data.map((item: any, index: number) => {
+        const date = new Date(item.time * 1000)
+        let timeLabel = ""
+
+        if (timeframe === "hour") {
+          timeLabel = date.toLocaleString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "day") {
+          timeLabel = date.toLocaleString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "week") {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "year") {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          })
+        } else {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+          })
+        }
+
+        let intervalSeconds = 60
+        if (index > 0) {
+          intervalSeconds = item.time - result.data[index - 1].time
+        }
+
+        const netInBytes = (item.netin || 0) * intervalSeconds
+        const netOutBytes = (item.netout || 0) * intervalSeconds
+
+        if (networkUnit === "Bits") {
+          return {
+            time: timeLabel,
+            timestamp: item.time,
+            netIn: Number(((netInBytes * 8) / 1024 / 1024 / 1024).toFixed(4)),
+            netOut: Number(((netOutBytes * 8) / 1024 / 1024 / 1024).toFixed(4)),
+          }
+        }
+
+        return {
+          time: timeLabel,
+          timestamp: item.time,
+          netIn: Number((netInBytes / 1024 / 1024 / 1024).toFixed(4)),
+          netOut: Number((netOutBytes / 1024 / 1024 / 1024).toFixed(4)),
+        }
+      })
+
+      setData(transformedData)
+
+      const totalReceivedGB = result.data.reduce((sum: number, item: any, index: number) => {
+        const intervalSeconds = index > 0 ? item.time - result.data[index - 1].time : 60
+        const netInBytes = (item.netin || 0) * intervalSeconds
+        return sum + (netInBytes / 1024 / 1024 / 1024)
+      }, 0)
+      
+      const totalSentGB = result.data.reduce((sum: number, item: any, index: number) => {
+        const intervalSeconds = index > 0 ? item.time - result.data[index - 1].time : 60
+        const netOutBytes = (item.netout || 0) * intervalSeconds
+        return sum + (netOutBytes / 1024 / 1024 / 1024)
+      }, 0)
+
+      if (onTotalsCalculated) {
+        onTotalsCalculated({ received: totalReceivedGB, sent: totalSentGB })
+      }
+
+      if (isInitialLoad) {
+        setIsInitialLoad(false)
+      }
+    } catch (err: any) {
+      console.error("[v0] Error fetching network metrics:", err)
+      setError(err.message || "Error loading metrics")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const tickInterval = Math.ceil(data.length / 8)
+
+  const handleLegendClick = (dataKey: string) => {
+    setVisibleLines((prev) => ({
+      ...prev,
+      [dataKey as keyof typeof prev]: !prev[dataKey as keyof typeof prev],
+    }))
+  }
+
+  const renderLegend = (props: any) => {
+    const { payload } = props
+    return (
+      <div className="flex justify-center gap-4 pb-2 flex-wrap">
+        {payload.map((entry: any, index: number) => {
+          const isVisible = visibleLines[entry.dataKey as keyof typeof visibleLines]
+          return (
+            <div
+              key={`legend-${index}`}
+              className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
+              onClick={() => handleLegendClick(entry.dataKey)}
+              style={{ opacity: isVisible ? 1 : 0.4 }}
+            >
+              <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: entry.color }} />
+              <span className="text-sm text-foreground">{entry.value}</span>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (loading && isInitialLoad) {
+    return (
+      <div className="flex items-center justify-center h-[300px]">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[300px] gap-2">
+        <p className="text-muted-foreground text-sm">Network metrics not available yet</p>
+        <p className="text-xs text-red-500">{error}</p>
+      </div>
+    )
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[300px]">
+        <p className="text-muted-foreground text-sm">No network metrics available</p>
+      </div>
+    )
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <AreaChart data={data} margin={{ bottom: 80 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+        <XAxis
+          dataKey="time"
+          stroke="currentColor"
+          className="text-foreground"
+          tick={{ fill: "currentColor", fontSize: 12 }}
+          angle={-45}
+          textAnchor="end"
+          height={60}
+          interval={tickInterval}
+        />
+        <YAxis
+          stroke="currentColor"
+          className="text-foreground"
+          tick={{ fill: "currentColor", fontSize: 12 }}
+          label={{
+            value: networkUnit === "Bits" ? "Gb" : "GB", // Dynamic label based on unit
+            angle: -90,
+            position: "insideLeft",
+            fill: "currentColor",
+          }}
+          domain={[0, "auto"]}
+        />
+        <Tooltip content={<CustomNetworkTooltip networkUnit={networkUnit} />} /> // Pass networkUnit to tooltip
+        <Legend verticalAlign="top" height={36} content={renderLegend} />
+        <Area
+          type="monotone"
+          dataKey="netIn"
+          stroke="#10b981"
+          strokeWidth={2}
+          fill="#10b981"
+          fillOpacity={0.3}
+          name="Received"
+          hide={!visibleLines.netIn}
+          isAnimationActive={true}
+          animationDuration={300}
+          animationEasing="ease-in-out"
+        />
+        <Area
+          type="monotone"
+          dataKey="netOut"
+          stroke="#3b82f6"
+          strokeWidth={2}
+          fill="#3b82f6"
+          fillOpacity={0.3}
+          name="Sent"
+          hide={!visibleLines.netOut}
+          isAnimationActive={true}
+          animationDuration={300}
+          animationEasing="ease-in-out"
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}

AppImage/components/node-metrics-charts.tsx

@@ -0,0 +1,458 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
+import { Loader2, TrendingUp, MemoryStick } from "lucide-react"
+import { useIsMobile } from "../hooks/use-mobile"
+import { fetchApi } from "@/lib/api-config"
+
+const TIMEFRAME_OPTIONS = [
+  { value: "hour", label: "1 Hour" },
+  { value: "day", label: "24 Hours" },
+  { value: "week", label: "7 Days" },
+  { value: "month", label: "30 Days" },
+]
+
+interface NodeMetricsData {
+  time: string
+  timestamp: number
+  cpu: number
+  load: number
+  memoryTotal: number
+  memoryUsed: number
+  memoryFree: number
+  memoryZfsArc: number
+}
+
+const CustomCpuTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">{entry.value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+const CustomMemoryTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">{entry.value} GB</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+export function NodeMetricsCharts() {
+  const [timeframe, setTimeframe] = useState("day")
+  const [data, setData] = useState<NodeMetricsData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const isMobile = useIsMobile()
+
+  const [visibleLines, setVisibleLines] = useState({
+    cpu: { cpu: true, load: true },
+    memory: { memoryTotal: true, memoryUsed: true, memoryZfsArc: true, memoryFree: true },
+  })
+
+  useEffect(() => {
+    console.log("[v0] NodeMetricsCharts component mounted")
+    fetchMetrics()
+  }, [timeframe])
+
+  const fetchMetrics = async () => {
+    console.log("[v0] fetchMetrics called with timeframe:", timeframe)
+    setLoading(true)
+    setError(null)
+
+    try {
+      const result = await fetchApi<any>(`/api/node/metrics?timeframe=${timeframe}`)
+
+      console.log("[v0] Node metrics result:", result)
+      console.log("[v0] Result keys:", Object.keys(result))
+      console.log("[v0] Data array length:", result.data?.length || 0)
+
+      if (!result.data || !Array.isArray(result.data)) {
+        console.error("[v0] Invalid data format - data is not an array:", result)
+        throw new Error("Invalid data format received from server")
+      }
+
+      if (result.data.length === 0) {
+        console.warn("[v0] No data points received")
+        setData([])
+        setLoading(false)
+        return
+      }
+
+      console.log("[v0] First data point sample:", result.data[0])
+      console.log("[v0] First data point loadavg field:", result.data[0]?.loadavg)
+      console.log("[v0] loadavg type:", typeof result.data[0]?.loadavg)
+      console.log("[v0] loadavg is array:", Array.isArray(result.data[0]?.loadavg))
+      if (result.data[0]?.loadavg) {
+        console.log("[v0] loadavg length:", result.data[0].loadavg.length)
+        console.log("[v0] loadavg[0]:", result.data[0].loadavg[0])
+      }
+
+      const transformedData = result.data.map((item: any) => {
+        const date = new Date(item.time * 1000)
+        let timeLabel = ""
+
+        if (timeframe === "hour") {
+          timeLabel = date.toLocaleString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "day") {
+          timeLabel = date.toLocaleString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })
+        } else if (timeframe === "week") {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            hour12: false,
+          })
+        } else {
+          timeLabel = date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+          })
+        }
+
+        return {
+          time: timeLabel,
+          timestamp: item.time,
+          cpu: item.cpu ? Number((item.cpu * 100).toFixed(2)) : 0,
+          load: item.loadavg
+            ? typeof item.loadavg === "number"
+              ? Number(item.loadavg.toFixed(2))
+              : Array.isArray(item.loadavg) && item.loadavg.length > 0
+                ? Number(item.loadavg[0].toFixed(2))
+                : 0
+            : 0,
+          memoryTotal: item.memtotal ? Number((item.memtotal / 1024 / 1024 / 1024).toFixed(2)) : 0,
+          memoryUsed: item.memused ? Number((item.memused / 1024 / 1024 / 1024).toFixed(2)) : 0,
+          memoryFree: item.memfree ? Number((item.memfree / 1024 / 1024 / 1024).toFixed(2)) : 0,
+          memoryZfsArc: item.zfsarc ? Number((item.zfsarc / 1024 / 1024 / 1024).toFixed(2)) : 0,
+        }
+      })
+
+      setData(transformedData)
+    } catch (err: any) {
+      console.error("[v0] Error fetching node metrics:", err)
+      console.error("[v0] Error message:", err.message)
+      console.error("[v0] Error stack:", err.stack)
+      setError(err.message || "Error loading metrics")
+    } finally {
+      console.log("[v0] fetchMetrics finally block - setting loading to false")
+      setLoading(false)
+    }
+  }
+
+  const tickInterval = Math.ceil(data.length / 8)
+
+  const handleLegendClick = (chartType: "cpu" | "memory", dataKey: string) => {
+    setVisibleLines((prev) => ({
+      ...prev,
+      [chartType]: {
+        ...prev[chartType],
+        [dataKey as keyof (typeof prev)[typeof chartType]]:
+          !prev[chartType][dataKey as keyof (typeof prev)[typeof chartType]],
+      },
+    }))
+  }
+
+  const renderLegend = (chartType: "cpu" | "memory") => (props: any) => {
+    const { payload } = props
+    return (
+      <div className="flex justify-center gap-4 pb-2 flex-wrap">
+        {payload.map((entry: any, index: number) => {
+          const isVisible = visibleLines[chartType][entry.dataKey as keyof (typeof visibleLines)[typeof chartType]]
+          return (
+            <div
+              key={`legend-${index}`}
+              className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
+              onClick={() => handleLegendClick(chartType, entry.dataKey)}
+              style={{ opacity: isVisible ? 1 : 0.4 }}
+            >
+              <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: entry.color }} />
+              <span className="text-sm text-foreground">{entry.value}</span>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  console.log("[v0] Render state - loading:", loading, "error:", error, "data length:", data.length)
+
+  if (loading) {
+    console.log("[v0] Rendering loading state")
+    return (
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border">
+          <CardContent className="p-6">
+            <div className="flex items-center justify-center h-[300px]">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-card border-border">
+          <CardContent className="p-6">
+            <div className="flex items-center justify-center h-[300px]">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  if (error) {
+    console.log("[v0] Rendering error state:", error)
+    return (
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border">
+          <CardContent className="p-6">
+            <div className="flex flex-col items-center justify-center h-[300px] gap-2">
+              <p className="text-muted-foreground text-sm">Metrics data not available yet</p>
+              <p className="text-xs text-red-500">{error}</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-card border-border">
+          <CardContent className="p-6">
+            <div className="flex flex-col items-center justify-center h-[300px] gap-2">
+              <p className="text-muted-foreground text-sm">Metrics data not available yet</p>
+              <p className="text-xs text-red-500">{error}</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  if (data.length === 0) {
+    console.log("[v0] Rendering no data state")
+    return (
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border">
+          <CardContent className="p-6">
+            <div className="flex items-center justify-center h-[300px]">
+              <p className="text-muted-foreground text-sm">No metrics data available</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-card border-border">
+          <CardContent className="p-6">
+            <div className="flex items-center justify-center h-[300px]">
+              <p className="text-muted-foreground text-sm">No metrics data available</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  console.log("[v0] Rendering charts with", data.length, "data points")
+
+  return (
+    <div className="space-y-6">
+      {/* Timeframe Selector */}
+      <div className="flex justify-end">
+        <Select value={timeframe} onValueChange={setTimeframe}>
+          <SelectTrigger className="w-32">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {TIMEFRAME_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Charts Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* CPU Usage + Load Average Chart */}
+        <Card className="bg-card border-border">
+          <CardHeader className="px-4 md:px-6">
+            <CardTitle className="text-foreground flex items-center">
+              <TrendingUp className="h-5 w-5 mr-2" />
+              CPU Usage & Load Average
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-0 md:px-6">
+            <ResponsiveContainer width="100%" height={300}>
+              <AreaChart data={data} margin={{ bottom: 60, left: 0, right: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+                <XAxis
+                  dataKey="time"
+                  stroke="currentColor"
+                  className="text-foreground"
+                  tick={{ fill: "currentColor", fontSize: 12 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                  interval={tickInterval}
+                />
+                <YAxis
+                  yAxisId="left"
+                  stroke="currentColor"
+                  className="text-foreground"
+                  tick={{ fill: "currentColor", fontSize: 12 }}
+                  label={
+                    isMobile ? undefined : { value: "CPU %", angle: -90, position: "insideLeft", fill: "currentColor" }
+                  }
+                  domain={[0, "dataMax"]}
+                />
+                <YAxis
+                  yAxisId="right"
+                  orientation="right"
+                  stroke="currentColor"
+                  className="text-foreground"
+                  tick={{ fill: "currentColor", fontSize: 12 }}
+                  label={
+                    isMobile ? undefined : { value: "Load", angle: 90, position: "insideRight", fill: "currentColor" }
+                  }
+                  domain={[0, "dataMax"]}
+                />
+                <Tooltip content={<CustomCpuTooltip />} />
+                <Legend verticalAlign="top" height={36} content={renderLegend("cpu")} />
+                <Area
+                  yAxisId="left"
+                  type="monotone"
+                  dataKey="cpu"
+                  stroke="#3b82f6"
+                  strokeWidth={2}
+                  fill="#3b82f6"
+                  fillOpacity={0.3}
+                  name="CPU %"
+                  hide={!visibleLines.cpu.cpu}
+                />
+                <Area
+                  yAxisId="right"
+                  type="monotone"
+                  dataKey="load"
+                  stroke="#10b981"
+                  strokeWidth={2}
+                  fill="#10b981"
+                  fillOpacity={0.3}
+                  name="Load Avg"
+                  hide={!visibleLines.cpu.load}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Memory Usage Chart */}
+        <Card className="bg-card border-border">
+          <CardHeader className="px-4 md:px-6">
+            <CardTitle className="text-foreground flex items-center">
+              <MemoryStick className="h-5 w-5 mr-2" />
+              Memory Usage
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-0 pr-2 md:px-6">
+            <ResponsiveContainer width="100%" height={300}>
+              <AreaChart data={data} margin={{ bottom: 60, left: 0, right: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+                <XAxis
+                  dataKey="time"
+                  stroke="currentColor"
+                  className="text-foreground"
+                  tick={{ fill: "currentColor", fontSize: 12 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                  interval={tickInterval}
+                />
+                <YAxis
+                  stroke="currentColor"
+                  className="text-foreground"
+                  tick={{ fill: "currentColor", fontSize: 12 }}
+                  label={
+                    isMobile ? undefined : { value: "GB", angle: -90, position: "insideLeft", fill: "currentColor" }
+                  }
+                  domain={[0, "dataMax"]}
+                />
+                <Tooltip content={<CustomMemoryTooltip />} />
+                <Legend verticalAlign="top" height={36} content={renderLegend("memory")} />
+                <Area
+                  type="monotone"
+                  dataKey="memoryTotal"
+                  stroke="#3b82f6"
+                  strokeWidth={2}
+                  fill="#3b82f6"
+                  fillOpacity={0.1}
+                  name="Total"
+                  hide={!visibleLines.memory.memoryTotal}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="memoryUsed"
+                  stroke="#10b981"
+                  strokeWidth={2}
+                  fill="#10b981"
+                  fillOpacity={0.3}
+                  name="Used"
+                  hide={!visibleLines.memory.memoryUsed}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="memoryZfsArc"
+                  stroke="#f59e0b"
+                  strokeWidth={2}
+                  fill="#f59e0b"
+                  fillOpacity={0.3}
+                  name="ZFS ARC"
+                  hide={!visibleLines.memory.memoryZfsArc}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="memoryFree"
+                  stroke="#06b6d4"
+                  strokeWidth={2}
+                  fill="#06b6d4"
+                  fillOpacity={0.3}
+                  name="Available"
+                  hide={!visibleLines.memory.memoryFree}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

AppImage/components/onboarding-carousel.tsx

@@ -0,0 +1,290 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Button } from "./ui/button"
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog"
+import {
+  ChevronLeft,
+  ChevronRight,
+  X,
+  Sparkles,
+  LayoutDashboard,
+  HardDrive,
+  Network,
+  Box,
+  Cpu,
+  FileText,
+  Rocket,
+} from "lucide-react"
+import Image from "next/image"
+import { Checkbox } from "./ui/checkbox"
+
+interface OnboardingSlide {
+  id: number
+  title: string
+  description: string
+  image?: string
+  icon: React.ReactNode
+  gradient: string
+}
+
+const slides: OnboardingSlide[] = [
+  {
+    id: 0,
+    title: "Welcome to ProxMenux Monitor!",
+    description:
+      "Your new monitoring tool for Proxmox. Discover all the features that will help you manage and supervise your infrastructure efficiently.",
+    icon: <Sparkles className="h-16 w-16" />,
+    gradient: "from-blue-500 via-purple-500 to-pink-500",
+  },
+  {
+    id: 1,
+    title: "System Overview",
+    description:
+      "Monitor your server's status in real-time: CPU, memory, temperature, system load and more. Everything in an intuitive and easy-to-understand dashboard.",
+    image: "/images/onboarding/imagen1.png",
+    icon: <LayoutDashboard className="h-12 w-12" />,
+    gradient: "from-blue-500 to-cyan-500",
+  },
+  {
+    id: 2,
+    title: "Storage Management",
+    description:
+      "Visualize the status of all your disks and volumes. Detailed information on capacity, usage, SMART health, temperature and performance of each storage device.",
+    image: "/images/onboarding/imagen2.png",
+    icon: <HardDrive className="h-12 w-12" />,
+    gradient: "from-cyan-500 to-teal-500",
+  },
+  {
+    id: 3,
+    title: "Network Metrics",
+    description:
+      "Monitor network traffic in real-time. Bandwidth statistics, active interfaces, transfer speeds and historical usage graphs.",
+    image: "/images/onboarding/imagen3.png",
+    icon: <Network className="h-12 w-12" />,
+    gradient: "from-teal-500 to-green-500",
+  },
+  {
+    id: 4,
+    title: "Virtual Machines & Containers",
+    description:
+      "Manage all your VMs and LXC containers from one place. Status, allocated resources, current usage and quick controls for each virtual machine.",
+    image: "/images/onboarding/imagen4.png",
+    icon: <Box className="h-12 w-12" />,
+    gradient: "from-green-500 to-emerald-500",
+  },
+  {
+    id: 5,
+    title: "Hardware Information",
+    description:
+      "Complete details of your server hardware: CPU, RAM, GPU, disks, network, UPS and more. Technical specifications, models, serial numbers and status of each component.",
+    image: "/images/onboarding/imagen5.png",
+    icon: <Cpu className="h-12 w-12" />,
+    gradient: "from-emerald-500 to-blue-500",
+  },
+  {
+    id: 6,
+    title: "System Logs",
+    description:
+      "Access system logs in real-time. Filter by event type, search for specific errors and keep complete track of your server activity. Download the displayed logs for further analysis.",
+    image: "/images/onboarding/imagen6.png",
+    icon: <FileText className="h-12 w-12" />,
+    gradient: "from-blue-500 to-indigo-500",
+  },
+  {
+    id: 7,
+    title: "Ready for the Future!",
+    description:
+      "ProxMenux Monitor is prepared to receive updates and improvements that will be added gradually, improving the user experience and being able to execute ProxMenux functions from the web panel.",
+    icon: <Rocket className="h-16 w-16" />,
+    gradient: "from-indigo-500 via-purple-500 to-pink-500",
+  },
+]
+
+export function OnboardingCarousel() {
+  const [open, setOpen] = useState(false)
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [direction, setDirection] = useState<"next" | "prev">("next")
+  const [dontShowAgain, setDontShowAgain] = useState(false)
+
+  useEffect(() => {
+    const hasSeenOnboarding = localStorage.getItem("proxmenux-onboarding-seen")
+    if (!hasSeenOnboarding) {
+      setOpen(true)
+    }
+  }, [])
+
+  const handleNext = () => {
+    if (currentSlide < slides.length - 1) {
+      setDirection("next")
+      setCurrentSlide(currentSlide + 1)
+    } else {
+      if (dontShowAgain) {
+        localStorage.setItem("proxmenux-onboarding-seen", "true")
+      }
+      setOpen(false)
+    }
+  }
+
+  const handlePrev = () => {
+    if (currentSlide > 0) {
+      setDirection("prev")
+      setCurrentSlide(currentSlide - 1)
+    }
+  }
+
+  const handleSkip = () => {
+    if (dontShowAgain) {
+      localStorage.setItem("proxmenux-onboarding-seen", "true")
+    }
+    setOpen(false)
+  }
+
+  const handleClose = () => {
+    if (dontShowAgain) {
+      localStorage.setItem("proxmenux-onboarding-seen", "true")
+    }
+    setOpen(false)
+  }
+
+  const handleDotClick = (index: number) => {
+    setDirection(index > currentSlide ? "next" : "prev")
+    setCurrentSlide(index)
+  }
+
+  const slide = slides[currentSlide]
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-4xl p-0 gap-0 overflow-hidden border-0 bg-transparent">
+        <DialogTitle className="sr-only">ProxMenux Onboarding</DialogTitle>
+        <div className="relative bg-card rounded-lg overflow-hidden shadow-2xl">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute top-4 right-4 z-50 h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background"
+            onClick={handleClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+
+          <div
+            className={`relative h-48 md:h-64 bg-gradient-to-br ${slide.gradient} flex items-center justify-center overflow-hidden`}
+          >
+            <div className="absolute inset-0 bg-black/10" />
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,rgba(255,255,255,0.1),transparent)]" />
+
+            <div className="relative z-10 text-white">
+              {slide.image ? (
+                <div className="relative w-full h-36 md:h-48 flex items-center justify-center px-4">
+                  <Image
+                    src={slide.image || "/placeholder.svg"}
+                    alt={slide.title}
+                    width={600}
+                    height={400}
+                    className="rounded-lg shadow-2xl object-cover max-h-36 md:max-h-48"
+                    onError={(e) => {
+                      const target = e.target as HTMLImageElement
+                      target.style.display = "none"
+                      const fallback = target.parentElement?.querySelector(".fallback-icon")
+                      if (fallback) {
+                        fallback.classList.remove("hidden")
+                      }
+                    }}
+                  />
+                  <div className="fallback-icon hidden">{slide.icon}</div>
+                </div>
+              ) : (
+                <div className="animate-pulse">{slide.icon}</div>
+              )}
+            </div>
+
+            <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-2xl" />
+            <div className="absolute bottom-10 right-10 w-32 h-32 bg-white/10 rounded-full blur-3xl" />
+          </div>
+
+          <div className="p-4 md:p-8 space-y-3 md:space-y-6 max-h-[60vh] md:max-h-none overflow-y-auto">
+            <div className="space-y-2 md:space-y-3">
+              <h2 className="text-xl md:text-3xl font-bold text-foreground text-balance">{slide.title}</h2>
+              <p className="text-sm md:text-lg text-muted-foreground leading-relaxed text-pretty">
+                {slide.description}
+              </p>
+            </div>
+
+            <div className="flex items-center justify-center gap-2 py-2 md:py-4">
+              {slides.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => handleDotClick(index)}
+                  className={`transition-all duration-300 rounded-full ${
+                    index === currentSlide
+                      ? "w-8 h-2.5 bg-blue-500 shadow-lg shadow-blue-500/50"
+                      : "w-2.5 h-2.5 bg-muted-foreground/60 hover:bg-muted-foreground/80 border border-muted-foreground/40"
+                  }`}
+                  aria-label={`Go to slide ${index + 1}`}
+                />
+              ))}
+            </div>
+
+            <div className="flex flex-col sm:flex-row items-center justify-between gap-2 md:gap-4">
+              <Button
+                variant="ghost"
+                onClick={handlePrev}
+                disabled={currentSlide === 0}
+                className="gap-2 w-full sm:w-auto text-sm"
+              >
+                <ChevronLeft className="h-4 w-4" />
+                Previous
+              </Button>
+
+              <div className="flex gap-2 w-full sm:w-auto">
+                {currentSlide < slides.length - 1 ? (
+                  <>
+                    <Button
+                      variant="outline"
+                      onClick={handleSkip}
+                      className="flex-1 sm:flex-none bg-transparent text-sm"
+                    >
+                      Skip
+                    </Button>
+                    <Button
+                      onClick={handleNext}
+                      className="gap-2 bg-blue-500 hover:bg-blue-600 flex-1 sm:flex-none text-sm"
+                    >
+                      Next
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    onClick={handleNext}
+                    className="gap-2 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 w-full sm:w-auto text-sm"
+                  >
+                    Get Started!
+                    <Sparkles className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-center gap-2 pt-2 pb-1">
+              <Checkbox
+                id="dont-show-again"
+                checked={dontShowAgain}
+                onCheckedChange={(checked) => setDontShowAgain(checked as boolean)}
+              />
+              <label
+                htmlFor="dont-show-again"
+                className="text-xs md:text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer select-none"
+              >
+                Don't show this again
+              </label>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

AppImage/components/proxmox-dashboard.tsx

@@ -0,0 +1,666 @@
+"use client"
+
+import { useState, useEffect, useMemo, useCallback } from "react"
+import { Badge } from "./ui/badge"
+import { Button } from "./ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
+import { SystemOverview } from "./system-overview"
+import { StorageOverview } from "./storage-overview"
+import { NetworkMetrics } from "./network-metrics"
+import { VirtualMachines } from "./virtual-machines"
+import Hardware from "./hardware"
+import { SystemLogs } from "./system-logs"
+import { Settings } from "./settings"
+import { OnboardingCarousel } from "./onboarding-carousel"
+import { HealthStatusModal } from "./health-status-modal"
+import { ReleaseNotesModal, useVersionCheck } from "./release-notes-modal"
+import { getApiUrl, fetchApi } from "../lib/api-config"
+import { TerminalPanel } from "./terminal-panel"
+import {
+  RefreshCw,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  Server,
+  Menu,
+  LayoutDashboard,
+  HardDrive,
+  NetworkIcon,
+  Box,
+  Cpu,
+  FileText,
+  SettingsIcon,
+  Terminal,
+} from "lucide-react"
+import Image from "next/image"
+import { ThemeToggle } from "./theme-toggle"
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
+
+interface SystemStatus {
+  status: "healthy" | "warning" | "critical"
+  uptime: string
+  lastUpdate: string
+  serverName: string
+  nodeId: string
+}
+
+interface FlaskSystemData {
+  hostname: string
+  node_id: string
+  uptime: string
+  cpu_usage: number
+  memory_usage: number
+  temperature: number
+  load_average: number[]
+}
+
+interface FlaskSystemInfo {
+  hostname: string
+  node_id: string
+  uptime: string
+  health: {
+    status: "healthy" | "warning" | "critical"
+  }
+}
+
+export function ProxmoxDashboard() {
+  const [systemStatus, setSystemStatus] = useState<SystemStatus>({
+    status: "healthy",
+    uptime: "Loading...",
+    lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
+    serverName: "Loading...",
+    nodeId: "Loading...",
+  })
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [isServerConnected, setIsServerConnected] = useState(true)
+  const [componentKey, setComponentKey] = useState(0)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState("overview")
+  const [showNavigation, setShowNavigation] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+  const [showHealthModal, setShowHealthModal] = useState(false)
+  const { showReleaseNotes, setShowReleaseNotes } = useVersionCheck()
+
+  const fetchSystemData = useCallback(async () => {
+    try {
+      const data: FlaskSystemInfo = await fetchApi("/api/system-info")
+
+      const uptimeValue =
+        data.uptime && typeof data.uptime === "string" && data.uptime.trim() !== "" ? data.uptime : "N/A"
+
+      const backendStatus = data.health?.status?.toUpperCase() || "OK"
+      let healthStatus: "healthy" | "warning" | "critical"
+
+      if (backendStatus === "CRITICAL") {
+        healthStatus = "critical"
+      } else if (backendStatus === "WARNING") {
+        healthStatus = "warning"
+      } else {
+        healthStatus = "healthy"
+      }
+
+      setSystemStatus({
+        status: healthStatus,
+        uptime: uptimeValue,
+        lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
+        serverName: data.hostname || "Unknown",
+        nodeId: data.node_id || "Unknown",
+      })
+      setIsServerConnected(true)
+    } catch (error) {
+      console.error("[v0] Failed to fetch system data from Flask server:", error)
+
+      setIsServerConnected(false)
+      setSystemStatus((prev) => ({
+        ...prev,
+        status: "critical",
+        serverName: "Server Offline",
+        nodeId: "Server Offline",
+        uptime: "N/A",
+        lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
+      }))
+    }
+  }, [])
+
+  useEffect(() => {
+    // Siempre fetch inicial
+    fetchSystemData()
+
+    // En overview: cada 30 segundos para actualización frecuente del estado de salud
+    // En otras tabs: cada 60 segundos para reducir carga
+    let interval: ReturnType<typeof setInterval> | null = null
+    if (activeTab === "overview") {
+      interval = setInterval(fetchSystemData, 30000) // 30 segundos
+    } else {
+      interval = setInterval(fetchSystemData, 60000) // 60 segundos
+    }
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  }, [fetchSystemData, activeTab])
+
+  useEffect(() => {
+    const handleChangeTab = (event: CustomEvent) => {
+      const { tab } = event.detail
+      if (tab) {
+        setActiveTab(tab)
+      }
+    }
+
+    window.addEventListener("changeTab", handleChangeTab as EventListener)
+    return () => {
+      window.removeEventListener("changeTab", handleChangeTab as EventListener)
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleHealthStatusUpdate = (event: CustomEvent) => {
+      const { status } = event.detail
+      let healthStatus: "healthy" | "warning" | "critical"
+
+      if (status === "CRITICAL") {
+        healthStatus = "critical"
+      } else if (status === "WARNING") {
+        healthStatus = "warning"
+      } else {
+        healthStatus = "healthy"
+      }
+
+      setSystemStatus((prev) => ({
+        ...prev,
+        status: healthStatus,
+      }))
+    }
+
+    window.addEventListener("healthStatusUpdated", handleHealthStatusUpdate as EventListener)
+    return () => {
+      window.removeEventListener("healthStatusUpdated", handleHealthStatusUpdate as EventListener)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (
+      systemStatus.serverName &&
+      systemStatus.serverName !== "Loading..." &&
+      systemStatus.serverName !== "Server Offline"
+    ) {
+      document.title = `${systemStatus.serverName} - ProxMenux Monitor`
+    } else {
+      document.title = "ProxMenux Monitor"
+    }
+  }, [systemStatus.serverName])
+
+  useEffect(() => {
+    let hideTimeout: ReturnType<typeof setTimeout> | null = null
+    let lastPosition = window.scrollY
+
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      const delta = currentScrollY - lastPosition
+
+      if (currentScrollY < 50) {
+        setShowNavigation(true)
+      } else if (delta > 2) {
+        if (hideTimeout) clearTimeout(hideTimeout)
+        hideTimeout = setTimeout(() => setShowNavigation(false), 20)
+      } else if (delta < -2) {
+        if (hideTimeout) clearTimeout(hideTimeout)
+        setShowNavigation(true)
+      }
+
+      lastPosition = currentScrollY
+    }
+
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+      if (hideTimeout) clearTimeout(hideTimeout)
+    }
+  }, [])
+
+  const refreshData = async () => {
+    setIsRefreshing(true)
+    await fetchSystemData()
+    setComponentKey((prev) => prev + 1)
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    setIsRefreshing(false)
+  }
+
+  const statusIcon = useMemo(() => {
+    switch (systemStatus.status) {
+      case "healthy":
+        return <CheckCircle className="h-4 w-4 text-green-500" />
+      case "warning":
+        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
+      case "critical":
+        return <XCircle className="h-4 w-4 text-red-500" />
+    }
+  }, [systemStatus.status])
+
+  const statusColor = useMemo(() => {
+    switch (systemStatus.status) {
+      case "healthy":
+        return "bg-green-500/10 text-green-500 border-green-500/20"
+      case "warning":
+        return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+      case "critical":
+        return "bg-red-500/10 text-red-500 border-red-500/20"
+    }
+  }, [systemStatus.status])
+
+  const getActiveTabLabel = () => {
+    switch (activeTab) {
+      case "overview":
+        return "Overview"
+      case "storage":
+        return "Storage"
+      case "network":
+        return "Network"
+      case "vms":
+        return "VMs & LXCs"
+      case "hardware":
+        return "Hardware"
+      case "terminal":
+        return "Terminal"
+      case "logs":
+        return "System Logs"
+      case "settings":
+        return "Settings"
+      default:
+        return "Navigation Menu"
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <OnboardingCarousel />
+      <ReleaseNotesModal open={showReleaseNotes} onClose={() => setShowReleaseNotes(false)} />
+
+      {!isServerConnected && (
+        <div className="bg-red-500/10 border-b border-red-500/20 px-6 py-3">
+          <div className="container mx-auto">
+            <div className="flex items-center space-x-2 text-red-500 mb-2">
+              <XCircle className="h-5 w-5" />
+              <span className="font-medium">ProxMenux Server Connection Failed</span>
+            </div>
+            <div className="text-sm text-red-500/80 space-y-1 ml-7">
+              <p>• Check that the monitor.service is running correctly.</p>
+              <p>• The ProxMenux server should start automatically on port 8008</p>
+              <p>
+                • Try accessing:{" "}
+                <a href={getApiUrl("/api/health")} target="_blank" rel="noopener noreferrer" className="underline">
+                  {getApiUrl("/api/health")}
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <header
+        className="border-b border-border bg-card sticky top-0 z-50 shadow-sm cursor-pointer hover:bg-accent/5 transition-colors"
+        onClick={() => setShowHealthModal(true)}
+      >
+        <div className="container mx-auto px-4 md:px-6 py-4 md:py-4">
+          {/* Logo and Title */}
+          <div className="flex items-start justify-between gap-3">
+            {/* Logo and Title */}
+            <div className="flex items-center space-x-2 md:space-x-3 min-w-0">
+              <div className="w-16 h-16 md:w-10 md:h-10 relative flex items-center justify-center bg-primary/10 flex-shrink-0">
+                <Image
+                  src="/images/proxmenux-logo.png"
+                  alt="ProxMenux Logo"
+                  width={64}
+                  height={64}
+                  className="object-contain md:w-10 md:h-10"
+                  priority
+                  onError={(e) => {
+                    console.log("[v0] Logo failed to load, using fallback icon")
+                    const target = e.target as HTMLImageElement
+                    target.style.display = "none"
+                    const fallback = target.parentElement?.querySelector(".fallback-icon")
+                    if (fallback) {
+                      fallback.classList.remove("hidden")
+                    }
+                  }}
+                />
+                <Server className="h-8 w-8 md:h-6 md:w-6 text-primary absolute fallback-icon hidden" />
+              </div>
+              <div className="min-w-0">
+                <h1 className="text-lg md:text-xl font-semibold text-foreground truncate">ProxMenux Monitor</h1>
+                <p className="text-xs md:text-sm text-muted-foreground">Proxmox System Dashboard</p>
+                <div className="lg:hidden flex items-center gap-1 text-xs text-muted-foreground mt-0.5">
+                  <Server className="h-3 w-3" />
+                  <span className="truncate">Node: {systemStatus.serverName}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Desktop Actions */}
+            <div className="hidden lg:flex items-center space-x-4">
+              <div className="flex items-center space-x-2">
+                <Server className="h-4 w-4 text-muted-foreground" />
+                <div className="text-sm">
+                  <div className="font-medium text-foreground">Node: {systemStatus.serverName}</div>
+                </div>
+              </div>
+
+              <Badge variant="outline" className={statusColor}>
+                {statusIcon}
+                <span className="ml-1 capitalize">{systemStatus.status}</span>
+              </Badge>
+
+              <div className="text-sm text-muted-foreground whitespace-nowrap">
+                Uptime: {systemStatus.uptime || "N/A"}
+              </div>
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  refreshData()
+                }}
+                disabled={isRefreshing}
+                className="border-border/50 bg-transparent hover:bg-secondary"
+              >
+                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
+                Refresh
+              </Button>
+
+              <div onClick={(e) => e.stopPropagation()}>
+                <ThemeToggle />
+              </div>
+            </div>
+
+            {/* Mobile Actions */}
+            <div className="flex lg:hidden items-center gap-2">
+              <Badge variant="outline" className={`${statusColor} text-xs px-2`}>
+                {statusIcon}
+                <span className="ml-1 capitalize hidden sm:inline">{systemStatus.status}</span>
+              </Badge>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  refreshData()
+                }}
+                disabled={isRefreshing}
+                className="h-8 w-8 p-0"
+              >
+                <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
+              </Button>
+
+              <div onClick={(e) => e.stopPropagation()}>
+                <ThemeToggle />
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Server Info */}
+          <div className="lg:hidden mt-2 flex items-center justify-end text-xs text-muted-foreground">
+            <span className="whitespace-nowrap">Uptime: {systemStatus.uptime || "N/A"}</span>
+          </div>
+        </div>
+      </header>
+
+      <div
+        className={`sticky z-40 bg-background
+          top-[120px] md:top-[76px]
+          transition-all duration-700 ease-[cubic-bezier(0.4,0,0.2,1)]
+          ${showNavigation ? "translate-y-0 opacity-100" : "-translate-y-[120%] opacity-0 pointer-events-none"}
+        `}
+      >
+        <div className="container mx-auto px-4 md:px-6 pt-4 md:pt-6">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-0">
+            <TabsList className="hidden md:grid w-full grid-cols-8 bg-card border border-border">
+              <TabsTrigger
+                value="overview"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Overview
+              </TabsTrigger>
+              <TabsTrigger
+                value="storage"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Storage
+              </TabsTrigger>
+              <TabsTrigger
+                value="network"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Network
+              </TabsTrigger>
+              <TabsTrigger
+                value="vms"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                VMs & LXCs
+              </TabsTrigger>
+              <TabsTrigger
+                value="hardware"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Hardware
+              </TabsTrigger>
+              <TabsTrigger
+                value="logs"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                System Logs
+              </TabsTrigger>
+              <TabsTrigger
+                value="terminal"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Terminal
+              </TabsTrigger>
+              <TabsTrigger
+                value="settings"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Settings
+              </TabsTrigger>
+            </TabsList>
+
+            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+              <div className="md:hidden">
+                <SheetTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className={`w-full justify-between border-border ${
+                      activeTab ? "bg-blue-500/10 text-blue-500" : "bg-card"
+                    }`}
+                  >
+                    <span>{getActiveTabLabel()}</span>
+                    <Menu className="h-4 w-4" />
+                  </Button>
+                </SheetTrigger>
+              </div>
+              <SheetContent side="top" className="bg-card border-border">
+                <div className="flex flex-col gap-2 mt-4">
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("overview")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "overview"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <LayoutDashboard className="h-5 w-5" />
+                    <span>Overview</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("storage")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "storage"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <HardDrive className="h-5 w-5" />
+                    <span>Storage</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("network")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "network"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <NetworkIcon className="h-5 w-5" />
+                    <span>Network</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("vms")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "vms"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <Box className="h-5 w-5" />
+                    <span>VMs & LXCs</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("hardware")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "hardware"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <Cpu className="h-5 w-5" />
+                    <span>Hardware</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("logs")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "logs"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <FileText className="h-5 w-5" />
+                    <span>System Logs</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("terminal")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "terminal"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <Terminal className="h-5 w-5" />
+                    <span>Terminal</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("settings")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "settings"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <SettingsIcon className="h-5 w-5" />
+                    <span>Settings</span>
+                  </Button>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </Tabs>
+        </div>
+      </div>
+
+      <div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
+          <TabsContent value="overview" className="space-y-4 md:space-y-6 mt-0">
+            <SystemOverview key={`overview-${componentKey}`} />
+          </TabsContent>
+
+          <TabsContent value="storage" className="space-y-4 md:space-y-6 mt-0">
+            <StorageOverview key={`storage-${componentKey}`} />
+          </TabsContent>
+
+          <TabsContent value="network" className="space-y-4 md:space-y-6 mt-0">
+            <NetworkMetrics key={`network-${componentKey}`} />
+          </TabsContent>
+
+          <TabsContent value="vms" className="space-y-4 md:space-y-6 mt-0">
+            <VirtualMachines key={`vms-${componentKey}`} />
+          </TabsContent>
+
+          <TabsContent value="hardware" className="space-y-4 md:space-y-6 mt-0">
+            <Hardware key={`hardware-${componentKey}`} />
+          </TabsContent>
+
+          <TabsContent value="logs" className="space-y-4 md:space-y-6 mt-0">
+            <SystemLogs key={`logs-${componentKey}`} />
+          </TabsContent>
+
+          <TabsContent value="terminal" className="mt-0">
+            <TerminalPanel key={`terminal-${componentKey}`} />
+          </TabsContent>
+
+          <TabsContent value="settings" className="space-y-4 md:space-y-6 mt-0">
+            <Settings />
+          </TabsContent>
+        </Tabs>
+
+        <footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground">
+          <p className="font-medium mb-2">ProxMenux Monitor v1.0.2</p>
+          <p>
+            <a
+              href="https://ko-fi.com/macrimi"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 hover:text-blue-600 hover:underline transition-colors"
+            >
+              Support and contribute to the project
+            </a>
+          </p>
+        </footer>
+      </div>
+
+      <HealthStatusModal open={showHealthModal} onOpenChange={setShowHealthModal} getApiUrl={getApiUrl} />
+    </div>
+  )
+}

AppImage/components/release-notes-modal.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "./ui/button"
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog"
+import { X, Sparkles, Link2, Shield, Zap, HardDrive, Gauge, Wrench, Settings } from "lucide-react"
+import { Checkbox } from "./ui/checkbox"
+
+const APP_VERSION = "1.0.2" // Sync with AppImage/package.json
+
+interface ReleaseNote {
+  date: string
+  changes: {
+    added?: string[]
+    changed?: string[]
+    fixed?: string[]
+  }
+}
+
+export const CHANGELOG: Record<string, ReleaseNote> = {
+  "1.0.1": {
+    date: "November 11, 2025",
+    changes: {
+      added: [
+        "Proxy Support - Access ProxMenux through reverse proxies with full functionality",
+        "Authentication System - Secure your dashboard with password protection",
+        "PCIe Link Speed Detection - View NVMe drive connection speeds and detect performance issues",
+        "Enhanced Storage Display - Better formatting for disk sizes (auto-converts GB to TB when needed)",
+        "SATA/SAS Information - View detailed interface information for all storage devices",
+        "Two-Factor Authentication (2FA) - Enhanced security with TOTP support",
+        "Health Monitoring System - Comprehensive system health checks with dismissible warnings",
+        "Release Notes Modal - Automatic notification of new features and improvements",
+      ],
+      changed: [
+        "Optimized VM & LXC page - Reduced CPU usage by 85% through intelligent caching",
+        "Storage metrics now separate local and remote storage for clarity",
+        "Update warnings now appear only after 365 days instead of 30 days",
+        "API intervals staggered to distribute server load (23s and 37s)",
+      ],
+      fixed: [
+        "Fixed dark mode text contrast issues in various components",
+        "Corrected storage calculation discrepancies between Overview and Storage pages",
+        "Resolved JSON stringify error in VM control actions",
+        "Improved IP address fetching for LXC containers",
+      ],
+    },
+  },
+  "1.0.0": {
+    date: "October 15, 2025",
+    changes: {
+      added: [
+        "Initial release of ProxMenux Monitor",
+        "Real-time system monitoring dashboard",
+        "Storage management with SMART health monitoring",
+        "Network metrics and bandwidth tracking",
+        "VM & LXC container management",
+        "Hardware information display",
+        "System logs viewer with filtering",
+      ],
+    },
+  },
+}
+
+const CURRENT_VERSION_FEATURES = [
+  {
+    icon: <Link2 className="h-5 w-5" />,
+    text: "Proxy Support - Access ProxMenux through reverse proxies with full functionality",
+  },
+  {
+    icon: <Shield className="h-5 w-5" />,
+    text: "Two-Factor Authentication (2FA) - Enhanced security with TOTP support for login protection",
+  },
+  {
+    icon: <Zap className="h-5 w-5" />,
+    text: "Performance Improvements - Optimized loading times and reduced CPU usage across the application",
+  },
+  {
+    icon: <HardDrive className="h-5 w-5" />,
+    text: "Storage Enhancements - Improved disk space consumption display with local and remote storage separation",
+  },
+  {
+    icon: <Gauge className="h-5 w-5" />,
+    text: "PCIe Link Speed Detection - View NVMe drive connection speeds and identify performance bottlenecks",
+  },
+  {
+    icon: <Wrench className="h-5 w-5" />,
+    text: "Hardware Page Improvements - Enhanced hardware information display with detailed PCIe and interface data",
+  },
+  {
+    icon: <Settings className="h-5 w-5" />,
+    text: "New Settings Page - Centralized configuration for authentication, optimizations, and system preferences",
+  },
+]
+
+interface ReleaseNotesModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function ReleaseNotesModal({ open, onClose }: ReleaseNotesModalProps) {
+  const [dontShowAgain, setDontShowAgain] = useState(false)
+
+  const handleClose = () => {
+    if (dontShowAgain) {
+      localStorage.setItem("proxmenux-last-seen-version", APP_VERSION)
+    }
+    onClose()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-2xl max-h-[85vh] p-0 gap-0 border-0 bg-transparent">
+        <DialogTitle className="sr-only">Release Notes - Version {APP_VERSION}</DialogTitle>
+        <div className="relative bg-card rounded-lg shadow-2xl h-full flex flex-col max-h-[85vh]">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute top-4 right-4 z-50 h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background"
+            onClick={handleClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+
+          <div className="relative h-32 md:h-40 bg-gradient-to-br from-amber-500 via-orange-500 to-red-500 flex items-center justify-center overflow-hidden flex-shrink-0">
+            <div className="absolute inset-0 bg-black/10" />
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,rgba(255,255,255,0.1),transparent)]" />
+
+            <div className="relative z-10 text-white animate-pulse">
+              <Sparkles className="h-12 w-12 md:h-14 md:w-14" />
+            </div>
+
+            <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-2xl" />
+            <div className="absolute bottom-10 right-10 w-32 h-32 bg-white/10 rounded-full blur-3xl" />
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-6 md:p-8 space-y-4 md:space-y-6 min-h-0">
+            <div className="space-y-2">
+              <h2 className="text-xl md:text-2xl font-bold text-foreground text-balance">
+                What's New in Version {APP_VERSION}
+              </h2>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                We've added exciting new features and improvements to make ProxMenux Monitor even better!
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              {CURRENT_VERSION_FEATURES.map((feature, index) => (
+                <div
+                  key={index}
+                  className="flex items-start gap-2 md:gap-3 p-3 rounded-lg bg-muted/50 border border-border/50 hover:bg-muted/70 transition-colors"
+                >
+                  <div className="text-orange-500 mt-0.5 flex-shrink-0">{feature.icon}</div>
+                  <p className="text-xs md:text-sm text-foreground leading-relaxed">{feature.text}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex-shrink-0 p-6 md:p-8 pt-4 border-t border-border/50 bg-card">
+            <div className="flex flex-col gap-3">
+              <Button
+                onClick={handleClose}
+                className="w-full bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
+              >
+                <Sparkles className="h-4 w-4 mr-2" />
+                Got it!
+              </Button>
+
+              <div className="flex items-center justify-center gap-2">
+                <Checkbox
+                  id="dont-show-version-again"
+                  checked={dontShowAgain}
+                  onCheckedChange={(checked) => setDontShowAgain(checked as boolean)}
+                />
+                <label
+                  htmlFor="dont-show-version-again"
+                  className="text-xs md:text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer select-none"
+                >
+                  Don't show again for this version
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function useVersionCheck() {
+  const [showReleaseNotes, setShowReleaseNotes] = useState(false)
+
+  useEffect(() => {
+    const lastSeenVersion = localStorage.getItem("proxmenux-last-seen-version")
+
+    if (lastSeenVersion !== APP_VERSION) {
+      setShowReleaseNotes(true)
+    }
+  }, [])
+
+  return { showReleaseNotes, setShowReleaseNotes }
+}
+
+export { APP_VERSION }

AppImage/components/script-terminal-modal.tsx

@@ -0,0 +1,910 @@
+"use client"
+
+import type React from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Loader2,
+  Activity,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  CornerDownLeft,
+  GripHorizontal,
+} from "lucide-react"
+import "xterm/css/xterm.css"
+import { API_PORT } from "@/lib/api-config"
+
+interface WebInteraction {
+  type: "yesno" | "menu" | "msgbox" | "input" | "inputbox"
+  id: string
+  title: string
+  message: string
+  options?: Array<{ label: string; value: string }>
+  default?: string
+}
+
+interface ScriptTerminalModalProps {
+  open: boolean
+  onClose: () => void
+  scriptPath: string
+  title: string
+  description: string
+}
+
+export function ScriptTerminalModal({
+  open: isOpen,
+  onClose,
+  scriptPath,
+  title,
+  description,
+}: ScriptTerminalModalProps) {
+  const termRef = useRef<any>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const fitAddonRef = useRef<any>(null)
+  const sessionIdRef = useRef<string>(Math.random().toString(36).substring(2, 8))
+
+  const [connectionStatus, setConnectionStatus] = useState<"connecting" | "online" | "offline">("connecting")
+  const [isComplete, setIsComplete] = useState(false)
+  const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
+  const [interactionInput, setInteractionInput] = useState("")
+  const checkConnectionInterval = useRef<NodeJS.Timeout | null>(null)
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const reconnectAttemptsRef = useRef(0)
+  const keepAliveIntervalRef = useRef<NodeJS.Timeout | null>(null)
+  const [isMobile, setIsMobile] = useState(false)
+  const [isTablet, setIsTablet] = useState(false)
+
+  const [isWaitingNextInteraction, setIsWaitingNextInteraction] = useState(false)
+  const waitingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const [modalHeight, setModalHeight] = useState(600)
+  const [isResizing, setIsResizing] = useState(false)
+  const resizeBarRef = useRef<HTMLDivElement>(null)
+  const modalHeightRef = useRef(600)
+
+  const terminalContainerRef = useRef<HTMLDivElement>(null)
+
+  const attemptReconnect = useCallback(() => {
+    if (!isOpen || isComplete || reconnectAttemptsRef.current >= 3) {
+      return
+    }
+
+    reconnectAttemptsRef.current++
+    setConnectionStatus("connecting")
+
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current)
+    }
+
+    reconnectTimeoutRef.current = setTimeout(() => {
+      if (wsRef.current?.readyState !== WebSocket.OPEN && termRef.current) {
+        if (wsRef.current) {
+          wsRef.current.close()
+        }
+
+        const wsUrl = getScriptWebSocketUrl(sessionIdRef.current)
+        const ws = new WebSocket(wsUrl)
+        wsRef.current = ws
+
+        ws.onopen = () => {
+          setConnectionStatus("online")
+          reconnectAttemptsRef.current = 0
+
+          if (keepAliveIntervalRef.current) {
+            clearInterval(keepAliveIntervalRef.current)
+          }
+          keepAliveIntervalRef.current = setInterval(() => {
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: "ping" }))
+            }
+          }, 30000)
+
+          const initMessage = {
+            script_path: scriptPath,
+            params: {
+              EXECUTION_MODE: "web",
+            },
+          }
+          ws.send(JSON.stringify(initMessage))
+
+          setTimeout(() => {
+            if (fitAddonRef.current && termRef.current && ws.readyState === WebSocket.OPEN) {
+              const cols = termRef.current.cols
+              const rows = termRef.current.rows
+              ws.send(JSON.stringify({ type: "resize", cols, rows }))
+            }
+          }, 100)
+        }
+
+        ws.onmessage = (event) => {
+          try {
+            const msg = JSON.parse(event.data)
+            if (msg.type === "web_interaction" && msg.interaction) {
+              setIsWaitingNextInteraction(false)
+              if (waitingTimeoutRef.current) {
+                clearTimeout(waitingTimeoutRef.current)
+              }
+              setCurrentInteraction({
+                type: msg.interaction.type,
+                id: msg.interaction.id,
+                title: msg.interaction.title || "",
+                message: msg.interaction.message || "",
+                options: msg.interaction.options,
+                default: msg.interaction.default,
+              })
+              return
+            }
+            if (msg.type === "error") {
+              termRef.current?.writeln(`\x1b[31m${msg.message}\x1b[0m`)
+              return
+            }
+          } catch {}
+          termRef.current?.write(event.data)
+          setIsWaitingNextInteraction(false)
+          if (waitingTimeoutRef.current) {
+            clearTimeout(waitingTimeoutRef.current)
+          }
+        }
+
+        ws.onerror = () => {
+          setConnectionStatus("offline")
+        }
+
+        ws.onclose = (event) => {
+          setConnectionStatus("offline")
+          if (keepAliveIntervalRef.current) {
+            clearInterval(keepAliveIntervalRef.current)
+            keepAliveIntervalRef.current = null
+          }
+          if (!isComplete && reconnectAttemptsRef.current < 3) {
+            reconnectTimeoutRef.current = setTimeout(attemptReconnect, 2000)
+          } else {
+            setIsComplete(true)
+          }
+        }
+      }
+    }, 1000)
+  }, [isOpen, isComplete, scriptPath])
+
+  const sendKey = useCallback((key: string) => {
+    if (!termRef.current) return
+
+    const keyMap: Record<string, string> = {
+      escape: "\x1b",
+      tab: "\t",
+      up: "\x1bOA",
+      down: "\x1bOB",
+      left: "\x1bOD",
+      right: "\x1bOC",
+      enter: "\r",
+      ctrlc: "\x03",
+    }
+
+    const sequence = keyMap[key]
+    if (sequence && wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(sequence)
+    }
+  }, [])
+
+  const initializeTerminal = async () => {
+    const [TerminalClass, FitAddonClass] = await Promise.all([
+      import("xterm").then((mod) => mod.Terminal),
+      import("xterm-addon-fit").then((mod) => mod.FitAddon),
+      import("xterm/css/xterm.css"),
+    ])
+
+    const fontSize = window.innerWidth < 768 ? 12 : 16
+
+    const term = new TerminalClass({
+      rendererType: "dom",
+      fontFamily: '"Courier", "Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace',
+      fontSize: fontSize,
+      lineHeight: 1,
+      cursorBlink: true,
+      scrollback: 2000,
+      disableStdin: false,
+      customGlyphs: true,
+      fontWeight: "500",
+      fontWeightBold: "700",
+      theme: {
+        background: "#000000",
+        foreground: "#ffffff",
+        cursor: "#ffffff",
+        cursorAccent: "#000000",
+        black: "#2e3436",
+        red: "#cc0000",
+        green: "#4e9a06",
+        yellow: "#c4a000",
+        blue: "#3465a4",
+        magenta: "#75507b",
+        cyan: "#06989a",
+        white: "#d3d7cf",
+        brightBlack: "#555753",
+        brightRed: "#ef2929",
+        brightGreen: "#8ae234",
+        brightYellow: "#fce94f",
+        brightBlue: "#729fcf",
+        brightMagenta: "#ad7fa8",
+        brightCyan: "#34e2e2",
+        brightWhite: "#eeeeec",
+      },
+    })
+
+    const fitAddon = new FitAddonClass()
+    term.loadAddon(fitAddon)
+    if (terminalContainerRef.current) {
+      term.open(terminalContainerRef.current)
+    }
+
+    termRef.current = term
+    fitAddonRef.current = fitAddon
+
+    setTimeout(() => {
+      if (fitAddonRef.current && termRef.current) {
+        fitAddonRef.current.fit()
+      }
+    }, 100)
+
+    const wsUrl = getScriptWebSocketUrl(sessionIdRef.current)
+    const ws = new WebSocket(wsUrl)
+    wsRef.current = ws
+
+    ws.onopen = () => {
+      setConnectionStatus("online")
+
+      if (keepAliveIntervalRef.current) {
+        clearInterval(keepAliveIntervalRef.current)
+      }
+      keepAliveIntervalRef.current = setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "ping" }))
+        }
+      }, 30000)
+
+      const initMessage = {
+        script_path: scriptPath,
+        params: {
+          EXECUTION_MODE: "web",
+        },
+      }
+
+      ws.send(JSON.stringify(initMessage))
+
+      setTimeout(() => {
+        if (fitAddonRef.current && termRef.current && ws.readyState === WebSocket.OPEN) {
+          const cols = termRef.current.cols
+          const rows = termRef.current.rows
+          ws.send(
+            JSON.stringify({
+              type: "resize",
+              cols: cols,
+              rows: rows,
+            }),
+          )
+        }
+      }, 100)
+    }
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data)
+
+        if (msg.type === "web_interaction" && msg.interaction) {
+          setIsWaitingNextInteraction(false)
+          if (waitingTimeoutRef.current) {
+            clearTimeout(waitingTimeoutRef.current)
+          }
+          setCurrentInteraction({
+            type: msg.interaction.type,
+            id: msg.interaction.id,
+            title: msg.interaction.title || "",
+            message: msg.interaction.message || "",
+            options: msg.interaction.options,
+            default: msg.interaction.default,
+          })
+          return
+        }
+
+        if (msg.type === "error") {
+          term.writeln(`\x1b[31m${msg.message}\x1b[0m`)
+          return
+        }
+      } catch {
+        // Not JSON, es output normal de terminal
+      }
+
+      term.write(event.data)
+
+      setIsWaitingNextInteraction(false)
+      if (waitingTimeoutRef.current) {
+        clearTimeout(waitingTimeoutRef.current)
+      }
+    }
+
+    ws.onerror = (error) => {
+      setConnectionStatus("offline")
+      term.writeln("\x1b[31mWebSocket error occurred\x1b[0m")
+    }
+
+    ws.onclose = (event) => {
+      setConnectionStatus("offline")
+      term.writeln("\x1b[33mConnection closed\x1b[0m")
+
+      if (keepAliveIntervalRef.current) {
+        clearInterval(keepAliveIntervalRef.current)
+        keepAliveIntervalRef.current = null
+      }
+
+      if (!isComplete) {
+        setIsComplete(true)
+      }
+    }
+
+    term.onData((data) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(data)
+      }
+    })
+
+    checkConnectionInterval.current = setInterval(() => {
+      if (wsRef.current) {
+        setConnectionStatus(
+          wsRef.current.readyState === WebSocket.OPEN
+            ? "online"
+            : wsRef.current.readyState === WebSocket.CONNECTING
+              ? "connecting"
+              : "offline",
+        )
+      }
+    }, 500)
+
+    let resizeTimeout: NodeJS.Timeout | null = null
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (resizeTimeout) clearTimeout(resizeTimeout)
+      resizeTimeout = setTimeout(() => {
+        if (fitAddonRef.current && termRef.current && wsRef.current?.readyState === WebSocket.OPEN) {
+          fitAddonRef.current.fit()
+          wsRef.current.send(
+            JSON.stringify({
+              type: "resize",
+              cols: termRef.current.cols,
+              rows: termRef.current.rows,
+            }),
+          )
+        }
+      }, 100)
+    })
+
+    if (terminalContainerRef.current) {
+      resizeObserver.observe(terminalContainerRef.current)
+    }
+  }
+
+  useEffect(() => {
+    const savedHeight = localStorage.getItem("scriptModalHeight")
+    if (savedHeight) {
+      const height = Number.parseInt(savedHeight, 10)
+      setModalHeight(height)
+      modalHeightRef.current = height
+    }
+
+    if (isOpen) {
+      initializeTerminal()
+    } else {
+      if (checkConnectionInterval.current) {
+        clearInterval(checkConnectionInterval.current)
+      }
+      if (waitingTimeoutRef.current) {
+        clearTimeout(waitingTimeoutRef.current)
+      }
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current)
+      }
+      if (wsRef.current) {
+        wsRef.current.close()
+        wsRef.current = null
+      }
+      if (termRef.current) {
+        termRef.current.dispose()
+        termRef.current = null
+      }
+
+      if (keepAliveIntervalRef.current) {
+        clearInterval(keepAliveIntervalRef.current)
+        keepAliveIntervalRef.current = null
+      }
+
+      sessionIdRef.current = Math.random().toString(36).substring(2, 8)
+      reconnectAttemptsRef.current = 0
+      setIsComplete(false)
+      setInteractionInput("")
+      setCurrentInteraction(null)
+      setIsWaitingNextInteraction(false)
+      setConnectionStatus("connecting")
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const updateDeviceType = () => {
+      const width = window.innerWidth
+      const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 0
+      const isTabletSize = width >= 768 && width <= 1366
+
+      setIsMobile(width < 768)
+      setIsTablet(isTouchDevice && isTabletSize)
+    }
+
+    updateDeviceType()
+    const handleResize = () => updateDeviceType()
+    window.addEventListener("resize", handleResize)
+
+    const handleVisibilityChange = () => {
+      if (!document.hidden && isOpen) {
+        if (wsRef.current?.readyState !== WebSocket.OPEN && !isComplete) {
+          attemptReconnect()
+        }
+      }
+    }
+
+    const handleFocus = () => {
+      if (isOpen && wsRef.current?.readyState !== WebSocket.OPEN && !isComplete) {
+        attemptReconnect()
+      }
+    }
+
+    let wakeLock: any = null
+    const requestWakeLock = async () => {
+      if ("wakeLock" in navigator && isOpen) {
+        try {
+          wakeLock = await (navigator as any).wakeLock.request("screen")
+        } catch (err) {
+          // Wake Lock no soportado o denegado, continuar sin él
+        }
+      }
+    }
+
+    requestWakeLock()
+
+    document.addEventListener("visibilitychange", handleVisibilityChange)
+    window.addEventListener("focus", handleFocus)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+      window.removeEventListener("focus", handleFocus)
+      if (wakeLock) {
+        wakeLock.release().catch(() => {})
+      }
+    }
+  }, [isOpen, isComplete, attemptReconnect])
+
+  const getScriptWebSocketUrl = (sid: string): string => {
+    if (typeof window === "undefined") {
+      return `ws://localhost:${API_PORT}/ws/script/${sid}`
+    }
+
+    const { protocol, hostname, port } = window.location
+    const isStandardPort = port === "" || port === "80" || port === "443"
+    const wsProtocol = protocol === "https:" ? "wss:" : "ws:"
+
+    if (isStandardPort) {
+      return `${wsProtocol}//${hostname}/ws/script/${sid}`
+    } else {
+      return `${wsProtocol}//${hostname}:${API_PORT}/ws/script/${sid}`
+    }
+  }
+
+  const handleInteractionResponse = (value: string) => {
+    if (!wsRef.current || !currentInteraction) {
+      return
+    }
+
+    if (value === "cancel" || value === "") {
+      setCurrentInteraction(null)
+      setInteractionInput("")
+      handleCloseModal()
+      return
+    }
+
+    const response = JSON.stringify({
+      type: "interaction_response",
+      id: currentInteraction.id,
+      value: value,
+    })
+
+    if (wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(response)
+    }
+
+    setCurrentInteraction(null)
+    setInteractionInput("")
+
+    waitingTimeoutRef.current = setTimeout(() => {
+      setIsWaitingNextInteraction(true)
+    }, 50)
+  }
+
+  const handleCloseModal = () => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.close()
+    }
+    if (checkConnectionInterval.current) {
+      clearInterval(checkConnectionInterval.current)
+    }
+    if (termRef.current) {
+      termRef.current.dispose()
+    }
+    onClose()
+  }
+
+  const handleResizeStart = (e: React.MouseEvent | React.TouchEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    setIsResizing(true)
+
+    const clientY = "touches" in e ? e.touches[0].clientY : e.clientY
+    const startY = clientY
+    const startHeight = modalHeight
+
+    const handleMove = (moveEvent: MouseEvent | TouchEvent) => {
+      const currentY = "touches" in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY
+      const deltaY = currentY - startY
+      const newHeight = Math.max(300, Math.min(window.innerHeight - 50, startHeight + deltaY))
+
+      modalHeightRef.current = newHeight
+      setModalHeight(newHeight)
+    }
+
+    const handleEnd = () => {
+      const finalHeight = modalHeightRef.current
+      setIsResizing(false)
+
+      document.removeEventListener("mousemove", handleMove as any)
+      document.removeEventListener("mouseup", handleEnd)
+      document.removeEventListener("touchmove", handleMove as any)
+      document.removeEventListener("touchend", handleEnd)
+      document.removeEventListener("touchcancel", handleEnd)
+
+      localStorage.setItem("scriptModalHeight", finalHeight.toString())
+
+      if (fitAddonRef.current && termRef.current && wsRef.current?.readyState === WebSocket.OPEN) {
+        setTimeout(() => {
+          fitAddonRef.current?.fit()
+          wsRef.current?.send(
+            JSON.stringify({
+              type: "resize",
+              cols: termRef.current.cols,
+              rows: termRef.current.rows,
+            }),
+          )
+        }, 100)
+      }
+    }
+
+    document.addEventListener("mousemove", handleMove as any)
+    document.addEventListener("mouseup", handleEnd)
+    document.addEventListener("touchmove", handleMove as any, { passive: false })
+    document.addEventListener("touchend", handleEnd)
+    document.addEventListener("touchcancel", handleEnd)
+  }
+
+  const sendCommand = (command: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(command)
+    }
+  }
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent
+          className="max-w-7xl p-0 flex flex-col gap-0 overflow-hidden"
+          style={{
+            height: isMobile ? "80vh" : `${modalHeight}px`,
+            maxHeight: "none",
+          }}
+          onInteractOutside={(e) => e.preventDefault()}
+          onEscapeKeyDown={(e) => e.preventDefault()}
+          hideClose
+        >
+          <DialogTitle className="sr-only">{title}</DialogTitle>
+
+          <div className="flex items-center gap-2 p-4 border-b">
+            <div>
+              <h2 className="text-lg font-semibold">{title}</h2>
+              {description && <p className="text-sm text-muted-foreground">{description}</p>}
+            </div>
+          </div>
+
+          <div className="overflow-hidden relative flex-1">
+            <div ref={terminalContainerRef} className="w-full h-full" />
+
+            {isWaitingNextInteraction && !currentInteraction && (
+              <div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+                <div className="flex flex-col items-center gap-3">
+                  <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+                  <p className="text-sm text-muted-foreground">Processing...</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {!isMobile && (
+            <div
+              ref={resizeBarRef}
+              onMouseDown={handleResizeStart}
+              onTouchStart={handleResizeStart}
+              className={`h-2 w-full cursor-row-resize transition-colors flex items-center justify-center group relative ${
+                isResizing ? "bg-blue-500" : "bg-zinc-800 hover:bg-blue-600"
+              }`}
+              style={{ touchAction: "none" }}
+            >
+              <GripHorizontal
+                className={`h-4 w-4 transition-colors pointer-events-none ${
+                  isResizing ? "text-white" : "text-zinc-600 group-hover:text-white"
+                }`}
+              />
+            </div>
+          )}
+
+          {(isMobile || isTablet) && (
+            <div className="flex items-center justify-center gap-1.5 px-1 py-2 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\x1b")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white min-w-[50px]"
+              >
+                ESC
+              </Button>
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\t")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white min-w-[50px]"
+              >
+                TAB
+              </Button>
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\x1bOA")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2.5 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white"
+              >
+                <ArrowUp className="h-4 w-4" />
+              </Button>
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\x1bOB")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2.5 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white"
+              >
+                <ArrowDown className="h-4 w-4" />
+              </Button>
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\x1bOD")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2.5 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white"
+              >
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\x1bOC")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2.5 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white"
+              >
+                <ArrowRight className="h-4 w-4" />
+              </Button>
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\r")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2.5 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white"
+              >
+                <CornerDownLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                onPointerDown={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  sendCommand("\x03")
+                }}
+                variant="outline"
+                size="sm"
+                className="h-8 px-2 text-xs bg-zinc-800 hover:bg-zinc-700 border-zinc-700 text-white min-w-[65px]"
+              >
+                CTRL+C
+              </Button>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between px-4 py-3 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <div className="flex items-center gap-3">
+              <Activity className="h-5 w-5 text-blue-500" />
+              <div
+                className={`w-2 h-2 rounded-full ${
+                  connectionStatus === "online"
+                    ? "bg-green-500"
+                    : connectionStatus === "connecting"
+                      ? "bg-blue-500"
+                      : "bg-red-500"
+                }`}
+                title={
+                  connectionStatus === "online"
+                    ? "Connected"
+                    : connectionStatus === "connecting"
+                      ? "Connecting"
+                      : "Disconnected"
+                }
+              ></div>
+              <span className="text-xs text-muted-foreground">
+                {connectionStatus === "online"
+                  ? "Online"
+                  : connectionStatus === "connecting"
+                    ? "Connecting..."
+                    : "Offline"}
+              </span>
+            </div>
+
+            <Button
+              onClick={handleCloseModal}
+              variant="outline"
+              className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
+            >
+              Close
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {currentInteraction && (
+        <Dialog open={true}>
+          <DialogContent
+            className="max-w-4xl max-h-[80vh] overflow-y-auto animate-in fade-in-0 zoom-in-95 duration-100"
+            onInteractOutside={(e) => e.preventDefault()}
+            onEscapeKeyDown={(e) => e.preventDefault()}
+            hideClose
+          >
+            <DialogTitle>{currentInteraction.title}</DialogTitle>
+            <div className="space-y-4">
+              <p
+                className="whitespace-pre-wrap"
+                dangerouslySetInnerHTML={{
+                  __html: currentInteraction.message.replace(/\\n/g, "<br/>").replace(/\n/g, "<br/>"),
+                }}
+              />
+
+              {currentInteraction.type === "yesno" && (
+                <div className="flex gap-2">
+                  <Button
+                    onClick={() => handleInteractionResponse("yes")}
+                    className="flex-1 bg-blue-600 hover:bg-blue-700 text-white transition-all duration-150"
+                  >
+                    Yes
+                  </Button>
+                  <Button
+                    onClick={() => handleInteractionResponse("cancel")}
+                    variant="outline"
+                    className="flex-1 hover:bg-red-600 hover:text-white hover:border-red-600 transition-all duration-150"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              )}
+
+              {currentInteraction.type === "menu" && currentInteraction.options && (
+                <div className="space-y-2">
+                  {currentInteraction.options.map((option, index) => (
+                    <Button
+                      key={option.value}
+                      onClick={() => handleInteractionResponse(option.value)}
+                      variant="outline"
+                      className="w-full justify-start hover:bg-blue-600 hover:text-white transition-all duration-100 animate-in fade-in-0 slide-in-from-left-2"
+                      style={{ animationDelay: `${index * 30}ms` }}
+                    >
+                      {option.label}
+                    </Button>
+                  ))}
+                  <Button
+                    onClick={() => handleInteractionResponse("cancel")}
+                    variant="outline"
+                    className="w-full hover:bg-red-600 hover:text-white hover:border-red-600 transition-all duration-150"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              )}
+
+              {(currentInteraction.type === "input" || currentInteraction.type === "inputbox") && (
+                <div className="space-y-2">
+                  <Label>Your input:</Label>
+                  <Input
+                    value={interactionInput}
+                    onChange={(e) => setInteractionInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        handleInteractionResponse(interactionInput)
+                      }
+                    }}
+                    placeholder={currentInteraction.default || ""}
+                    className="transition-all duration-150"
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={() => handleInteractionResponse(interactionInput)}
+                      className="flex-1 bg-blue-600 hover:bg-blue-700 transition-all duration-150"
+                    >
+                      Submit
+                    </Button>
+                    <Button
+                      onClick={() => handleInteractionResponse("cancel")}
+                      variant="outline"
+                      className="flex-1 hover:bg-red-600 hover:text-white hover:border-red-600 transition-all duration-150"
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              {currentInteraction.type === "msgbox" && (
+                <div className="flex gap-2">
+                  <Button
+                    onClick={() => handleInteractionResponse("ok")}
+                    className="flex-1 bg-blue-600 hover:bg-blue-700 transition-all duration-150"
+                  >
+                    OK
+                  </Button>
+                  <Button
+                    onClick={() => handleInteractionResponse("cancel")}
+                    variant="outline"
+                    className="flex-1 hover:bg-red-600 hover:text-white hover:border-red-600 transition-all duration-150"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  )
+}

AppImage/components/settings.tsx

@@ -0,0 +1,955 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
+import { Shield, Lock, User, AlertCircle, CheckCircle, Info, LogOut, Wrench, Package, Key, Copy, Eye, EyeOff, Ruler } from 'lucide-react'
+import { APP_VERSION } from "./release-notes-modal"
+import { getApiUrl, fetchApi } from "../lib/api-config"
+import { TwoFactorSetup } from "./two-factor-setup"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
+import { getNetworkUnit } from "../lib/format-network"
+
+interface ProxMenuxTool {
+  key: string
+  name: string
+  enabled: boolean
+}
+
+export function Settings() {
+  const [authEnabled, setAuthEnabled] = useState(false)
+  const [totpEnabled, setTotpEnabled] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [success, setSuccess] = useState("")
+
+  // Setup form state
+  const [showSetupForm, setShowSetupForm] = useState(false)
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+
+  // Change password form state
+  const [showChangePassword, setShowChangePassword] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+  const [confirmNewPassword, setConfirmNewPassword] = useState("")
+
+  const [show2FASetup, setShow2FASetup] = useState(false)
+  const [show2FADisable, setShow2FADisable] = useState(false)
+  const [disable2FAPassword, setDisable2FAPassword] = useState("")
+
+  const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([])
+  const [loadingTools, setLoadingTools] = useState(true)
+  const [expandedVersions, setExpandedVersions] = useState<Record<string, boolean>>({
+    [APP_VERSION]: true, // Current version expanded by default
+  })
+
+  // API Token state management
+  const [showApiTokenSection, setShowApiTokenSection] = useState(false)
+  const [apiToken, setApiToken] = useState("")
+  const [apiTokenVisible, setApiTokenVisible] = useState(false)
+  const [tokenPassword, setTokenPassword] = useState("")
+  const [tokenTotpCode, setTokenTotpCode] = useState("")
+  const [generatingToken, setGeneratingToken] = useState(false)
+  const [tokenCopied, setTokenCopied] = useState(false)
+
+  const [networkUnitSettings, setNetworkUnitSettings] = useState<"Bytes" | "Bits">("Bytes")
+  const [loadingUnitSettings, setLoadingUnitSettings] = useState(true)
+
+  useEffect(() => {
+    checkAuthStatus()
+    loadProxmenuxTools()
+    getUnitsSettings() // Load units settings on mount
+  }, [])
+
+  const checkAuthStatus = async () => {
+    try {
+      const response = await fetch(getApiUrl("/api/auth/status"))
+      const data = await response.json()
+      setAuthEnabled(data.auth_enabled || false)
+      setTotpEnabled(data.totp_enabled || false) // Get 2FA status
+    } catch (err) {
+      console.error("Failed to check auth status:", err)
+    }
+  }
+
+  const loadProxmenuxTools = async () => {
+    try {
+      const response = await fetch(getApiUrl("/api/proxmenux/installed-tools"))
+      const data = await response.json()
+
+      if (data.success) {
+        setProxmenuxTools(data.installed_tools || [])
+      }
+    } catch (err) {
+      console.error("Failed to load ProxMenux tools:", err)
+    } finally {
+      setLoadingTools(false)
+    }
+  }
+
+  const handleEnableAuth = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!username || !password) {
+      setError("Please fill in all fields")
+      return
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match")
+      return
+    }
+
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const response = await fetch(getApiUrl("/api/auth/setup"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+          enable_auth: true,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to enable authentication")
+      }
+
+      // Save token
+      localStorage.setItem("proxmenux-auth-token", data.token)
+      localStorage.setItem("proxmenux-auth-setup-complete", "true")
+
+      setSuccess("Authentication enabled successfully!")
+      setAuthEnabled(true)
+      setShowSetupForm(false)
+      setUsername("")
+      setPassword("")
+      setConfirmPassword("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to enable authentication")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDisableAuth = async () => {
+    if (
+      !confirm(
+        "Are you sure you want to disable authentication? This will remove password protection from your dashboard.",
+      )
+    ) {
+      return
+    }
+
+    setLoading(true)
+    setError("")
+    setSuccess("")
+
+    try {
+      const token = localStorage.getItem("proxmenux-auth-token")
+      const response = await fetch(getApiUrl("/api/auth/disable"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.message || "Failed to disable authentication")
+      }
+
+      localStorage.removeItem("proxmenux-auth-token")
+      localStorage.removeItem("proxmenux-auth-setup-complete")
+
+      setSuccess("Authentication disabled successfully! Reloading...")
+
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to disable authentication. Please try again.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChangePassword = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!currentPassword || !newPassword) {
+      setError("Please fill in all fields")
+      return
+    }
+
+    if (newPassword !== confirmNewPassword) {
+      setError("New passwords do not match")
+      return
+    }
+
+    if (newPassword.length < 6) {
+      setError("Password must be at least 6 characters")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const response = await fetch(getApiUrl("/api/auth/change-password"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("proxmenux-auth-token")}`,
+        },
+        body: JSON.stringify({
+          current_password: currentPassword,
+          new_password: newPassword,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to change password")
+      }
+
+      // Update token if provided
+      if (data.token) {
+        localStorage.setItem("proxmenux-auth-token", data.token)
+      }
+
+      setSuccess("Password changed successfully!")
+      setShowChangePassword(false)
+      setCurrentPassword("")
+      setNewPassword("")
+      setConfirmNewPassword("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to change password")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDisable2FA = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!disable2FAPassword) {
+      setError("Please enter your password")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const token = localStorage.getItem("proxmenux-auth-token")
+      const response = await fetch(getApiUrl("/api/auth/totp/disable"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ password: disable2FAPassword }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.message || "Failed to disable 2FA")
+      }
+
+      setSuccess("2FA disabled successfully!")
+      setTotpEnabled(false)
+      setShow2FADisable(false)
+      setDisable2FAPassword("")
+      checkAuthStatus()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to disable 2FA")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLogout = () => {
+    localStorage.removeItem("proxmenux-auth-token")
+    localStorage.removeItem("proxmenux-auth-setup-complete")
+    window.location.reload()
+  }
+
+  const handleGenerateApiToken = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!tokenPassword) {
+      setError("Please enter your password")
+      return
+    }
+
+    if (totpEnabled && !tokenTotpCode) {
+      setError("Please enter your 2FA code")
+      return
+    }
+
+    setGeneratingToken(true)
+
+    try {
+      const data = await fetchApi("/api/auth/generate-api-token", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          password: tokenPassword,
+          totp_token: totpEnabled ? tokenTotpCode : undefined,
+        }),
+      })
+
+      if (!data.success) {
+        setError(data.message || data.error || "Failed to generate API token")
+        return
+      }
+
+      if (!data.token) {
+        setError("No token received from server")
+        return
+      }
+
+      setApiToken(data.token)
+      setSuccess("API token generated successfully! Make sure to copy it now as you won't be able to see it again.")
+      setTokenPassword("")
+      setTokenTotpCode("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to generate API token. Please try again.")
+    } finally {
+      setGeneratingToken(false)
+    }
+  }
+
+  const copyApiToken = () => {
+    navigator.clipboard.writeText(apiToken)
+    setTokenCopied(true)
+    setTimeout(() => setTokenCopied(false), 2000)
+  }
+
+  const toggleVersion = (version: string) => {
+    setExpandedVersions((prev) => ({
+      ...prev,
+      [version]: !prev[version],
+    }))
+  }
+
+  const changeNetworkUnit = (unit: string) => {
+    const networkUnit = unit as "Bytes" | "Bits"
+    localStorage.setItem("proxmenux-network-unit", networkUnit)
+    setNetworkUnitSettings(networkUnit)
+    
+    // Dispatch custom event to notify other components
+    window.dispatchEvent(new CustomEvent("networkUnitChanged", { detail: networkUnit }))
+    
+    // Also dispatch storage event for backward compatibility
+    window.dispatchEvent(new StorageEvent("storage", {
+      key: "proxmenux-network-unit",
+      newValue: networkUnit,
+      url: window.location.href
+    }))
+  }
+
+  const getUnitsSettings = () => {
+    const networkUnit = getNetworkUnit()
+    setNetworkUnitSettings(networkUnit)
+    setLoadingUnitSettings(false)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">Settings</h1>
+        <p className="text-muted-foreground mt-2">Manage your dashboard security and preferences</p>
+      </div>
+
+      {/* Authentication Settings */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-blue-500" />
+            <CardTitle>Authentication</CardTitle>
+          </div>
+          <CardDescription>Protect your dashboard with username and password authentication</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
+              <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-red-500">{error}</p>
+            </div>
+          )}
+
+          {success && (
+            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
+              <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-green-500">{success}</p>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div
+                className={`w-10 h-10 rounded-full flex items-center justify-center ${authEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}
+              >
+                <Lock className={`h-5 w-5 ${authEnabled ? "text-green-500" : "text-gray-500"}`} />
+              </div>
+              <div>
+                <p className="font-medium">Authentication Status</p>
+                <p className="text-sm text-muted-foreground">
+                  {authEnabled ? "Password protection is enabled" : "No password protection"}
+                </p>
+              </div>
+            </div>
+            <div
+              className={`px-3 py-1 rounded-full text-sm font-medium ${authEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}
+            >
+              {authEnabled ? "Enabled" : "Disabled"}
+            </div>
+          </div>
+
+          {!authEnabled && !showSetupForm && (
+            <div className="space-y-3">
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-blue-500">
+                  Enable authentication to protect your dashboard when accessing from non-private networks.
+                </p>
+              </div>
+              <Button onClick={() => setShowSetupForm(true)} className="w-full bg-blue-500 hover:bg-blue-600">
+                <Shield className="h-4 w-4 mr-2" />
+                Enable Authentication
+              </Button>
+            </div>
+          )}
+
+          {!authEnabled && showSetupForm && (
+            <div className="space-y-4 border border-border rounded-lg p-4">
+              <h3 className="font-semibold">Setup Authentication</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="setup-username">Username</Label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="setup-username"
+                    type="text"
+                    placeholder="Enter username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    className="pl-10"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="setup-password">Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="setup-password"
+                    type="password"
+                    placeholder="Enter password (min 6 characters)"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pl-10"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="setup-confirm-password">Confirm Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="setup-confirm-password"
+                    type="password"
+                    placeholder="Confirm password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="pl-10"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <Button onClick={handleEnableAuth} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
+                  {loading ? "Enabling..." : "Enable"}
+                </Button>
+                <Button onClick={() => setShowSetupForm(false)} variant="outline" className="flex-1" disabled={loading}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {authEnabled && (
+            <div className="space-y-3">
+              <Button onClick={handleLogout} variant="outline" className="w-full bg-transparent">
+                <LogOut className="h-4 w-4 mr-2" />
+                Logout
+              </Button>
+
+              {!showChangePassword && (
+                <Button onClick={() => setShowChangePassword(true)} variant="outline" className="w-full">
+                  <Lock className="h-4 w-4 mr-2" />
+                  Change Password
+                </Button>
+              )}
+
+              {showChangePassword && (
+                <div className="space-y-4 border border-border rounded-lg p-4">
+                  <h3 className="font-semibold">Change Password</h3>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="current-password">Current Password</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="current-password"
+                        type="password"
+                        placeholder="Enter current password"
+                        value={currentPassword}
+                        onChange={(e) => setCurrentPassword(e.target.value)}
+                        className="pl-10"
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="new-password">New Password</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="new-password"
+                        type="password"
+                        placeholder="Enter new password (min 6 characters)"
+                        value={newPassword}
+                        onChange={(e) => setNewPassword(e.target.value)}
+                        className="pl-10"
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="confirm-new-password">Confirm New Password</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="confirm-new-password"
+                        type="password"
+                        placeholder="Confirm new password"
+                        value={confirmNewPassword}
+                        onChange={(e) => setConfirmNewPassword(e.target.value)}
+                        className="pl-10"
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={handleChangePassword}
+                      className="flex-1 bg-blue-500 hover:bg-blue-600"
+                      disabled={loading}
+                    >
+                      {loading ? "Changing..." : "Change Password"}
+                    </Button>
+                    <Button
+                      onClick={() => setShowChangePassword(false)}
+                      variant="outline"
+                      className="flex-1"
+                      disabled={loading}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              {!totpEnabled && (
+                <div className="space-y-3">
+                  <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                    <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                    <div className="text-sm text-blue-400">
+                      <p className="font-medium mb-1">Two-Factor Authentication (2FA)</p>
+                      <p className="text-blue-300">
+                        Add an extra layer of security by requiring a code from your authenticator app in addition to
+                        your password.
+                      </p>
+                    </div>
+                  </div>
+
+                  <Button onClick={() => setShow2FASetup(true)} variant="outline" className="w-full">
+                    <Shield className="h-4 w-4 mr-2" />
+                    Enable Two-Factor Authentication
+                  </Button>
+                </div>
+              )}
+
+              {totpEnabled && (
+                <div className="space-y-3">
+                  <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-center gap-2">
+                    <CheckCircle className="h-5 w-5 text-green-500" />
+                    <p className="text-sm text-green-500 font-medium">2FA is enabled</p>
+                  </div>
+
+                  {!show2FADisable && (
+                    <Button onClick={() => setShow2FADisable(true)} variant="outline" className="w-full">
+                      <Shield className="h-4 w-4 mr-2" />
+                      Disable 2FA
+                    </Button>
+                  )}
+
+                  {show2FADisable && (
+                    <div className="space-y-4 border border-border rounded-lg p-4">
+                      <h3 className="font-semibold">Disable Two-Factor Authentication</h3>
+                      <p className="text-sm text-muted-foreground">Enter your password to confirm</p>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="disable-2fa-password">Password</Label>
+                        <div className="relative">
+                          <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                          <Input
+                            id="disable-2fa-password"
+                            type="password"
+                            placeholder="Enter your password"
+                            value={disable2FAPassword}
+                            onChange={(e) => setDisable2FAPassword(e.target.value)}
+                            className="pl-10"
+                            disabled={loading}
+                          />
+                        </div>
+                      </div>
+
+                      <div className="flex gap-2">
+                        <Button onClick={handleDisable2FA} variant="destructive" className="flex-1" disabled={loading}>
+                          {loading ? "Disabling..." : "Disable 2FA"}
+                        </Button>
+                        <Button
+                          onClick={() => {
+                            setShow2FADisable(false)
+                            setDisable2FAPassword("")
+                            setError("")
+                          }}
+                          variant="outline"
+                          className="flex-1"
+                          disabled={loading}
+                        >
+                          Cancel
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              <Button onClick={handleDisableAuth} variant="destructive" className="w-full" disabled={loading}>
+                Disable Authentication
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Network Units Settings */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Ruler className="h-5 w-5 text-green-500" />
+            <CardTitle>Network Units</CardTitle>
+          </div>
+          <CardDescription>Change how network traffic is displayed</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {loadingUnitSettings ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin h-8 w-8 border-4 border-green-500 border-t-transparent rounded-full" />
+            </div>
+          ) : (
+            <div className="text-foreground flex items-center justify-between">
+              <div className="flex items-center">Network Unit Display</div>
+              <Select value={networkUnitSettings} onValueChange={changeNetworkUnit}>
+                <SelectTrigger className="w-28 h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Bytes">Bytes</SelectItem>
+                  <SelectItem value="Bits">Bits</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* API Access Tokens */}
+      {authEnabled && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Key className="h-5 w-5 text-purple-500" />
+              <CardTitle>API Access Tokens</CardTitle>
+            </div>
+            <CardDescription>
+              Generate long-lived API tokens for external integrations like Homepage and Home Assistant
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
+                <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-red-500">{error}</p>
+              </div>
+            )}
+
+            {success && (
+              <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
+                <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-green-500">{success}</p>
+              </div>
+            )}
+
+            <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+              <div className="flex items-start gap-3">
+                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                <div className="space-y-2 text-sm text-blue-400">
+                  <p className="font-medium">About API Tokens</p>
+                  <ul className="list-disc list-inside space-y-1 text-blue-300">
+                    <li>Tokens are valid for 1 year</li>
+                    <li>Use them to access APIs from external services</li>
+                    <li>Include in Authorization header: Bearer YOUR_TOKEN</li>
+                    <li>See README.md for complete integration examples</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {!showApiTokenSection && !apiToken && (
+              <Button onClick={() => setShowApiTokenSection(true)} className="w-full bg-purple-500 hover:bg-purple-600">
+                <Key className="h-4 w-4 mr-2" />
+                Generate New API Token
+              </Button>
+            )}
+
+            {showApiTokenSection && !apiToken && (
+              <div className="space-y-4 border border-border rounded-lg p-4">
+                <h3 className="font-semibold">Generate API Token</h3>
+                <p className="text-sm text-muted-foreground">
+                  Enter your credentials to generate a new long-lived API token
+                </p>
+
+                <div className="space-y-2">
+                  <Label htmlFor="token-password">Password</Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      id="token-password"
+                      type="password"
+                      placeholder="Enter your password"
+                      value={tokenPassword}
+                      onChange={(e) => setTokenPassword(e.target.value)}
+                      className="pl-10"
+                      disabled={generatingToken}
+                    />
+                  </div>
+                </div>
+
+                {totpEnabled && (
+                  <div className="space-y-2">
+                    <Label htmlFor="token-totp">2FA Code</Label>
+                    <div className="relative">
+                      <Shield className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="token-totp"
+                        type="text"
+                        placeholder="Enter 6-digit code"
+                        value={tokenTotpCode}
+                        onChange={(e) => setTokenTotpCode(e.target.value)}
+                        className="pl-10"
+                        maxLength={6}
+                        disabled={generatingToken}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <div className="flex gap-2">
+                  <Button
+                    onClick={handleGenerateApiToken}
+                    className="flex-1 bg-purple-500 hover:bg-purple-600"
+                    disabled={generatingToken}
+                  >
+                    {generatingToken ? "Generating..." : "Generate Token"}
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      setShowApiTokenSection(false)
+                      setTokenPassword("")
+                      setTokenTotpCode("")
+                      setError("")
+                    }}
+                    variant="outline"
+                    className="flex-1"
+                    disabled={generatingToken}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {apiToken && (
+              <div className="space-y-4 border border-green-500/20 bg-green-500/5 rounded-lg p-4">
+                <div className="flex items-center gap-2 text-green-500">
+                  <CheckCircle className="h-5 w-5" />
+                  <h3 className="font-semibold">Your API Token</h3>
+                </div>
+
+                <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 flex items-start gap-2">
+                  <AlertCircle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
+                  <div className="space-y-1">
+                    <p className="text-sm text-amber-600 dark:text-amber-400 font-semibold">
+                      ⚠️ Important: Save this token now!
+                    </p>
+                    <p className="text-xs text-amber-600/80 dark:text-amber-400/80">
+                      You won't be able to see it again. Store it securely.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Token</Label>
+                  <div className="relative">
+                    <Input
+                      value={apiToken}
+                      readOnly
+                      type={apiTokenVisible ? "text" : "password"}
+                      className="pr-20 font-mono text-sm"
+                    />
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => setApiTokenVisible(!apiTokenVisible)}
+                        className="h-7 w-7 p-0"
+                      >
+                        {apiTokenVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </Button>
+                      <Button size="sm" variant="ghost" onClick={copyApiToken} className="h-7 w-7 p-0">
+                        <Copy className={`h-4 w-4 ${tokenCopied ? "text-green-500" : ""}`} />
+                      </Button>
+                    </div>
+                  </div>
+                  {tokenCopied && (
+                    <p className="text-xs text-green-500 flex items-center gap-1">
+                      <CheckCircle className="h-3 w-3" />
+                      Copied to clipboard!
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-sm font-medium">How to use this token:</p>
+                  <div className="bg-muted/50 rounded p-3 text-xs font-mono">
+                    <p className="text-muted-foreground mb-2"># Add to request headers:</p>
+                    <p>Authorization: Bearer YOUR_TOKEN_HERE</p>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    See the README documentation for complete integration examples with Homepage and Home Assistant.
+                  </p>
+                </div>
+
+                <Button
+                  onClick={() => {
+                    setApiToken("")
+                    setShowApiTokenSection(false)
+                  }}
+                  variant="outline"
+                  className="w-full"
+                >
+                  Done
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* ProxMenux Optimizations */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Wrench className="h-5 w-5 text-orange-500" />
+            <CardTitle>ProxMenux Optimizations</CardTitle>
+          </div>
+          <CardDescription>System optimizations and utilities installed via ProxMenux</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {loadingTools ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin h-8 w-8 border-4 border-orange-500 border-t-transparent rounded-full" />
+            </div>
+          ) : proxmenuxTools.length === 0 ? (
+            <div className="text-center py-8">
+              <Package className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
+              <p className="text-muted-foreground">No ProxMenux optimizations installed yet</p>
+              <p className="text-sm text-muted-foreground mt-1">Run ProxMenux to configure system optimizations</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between mb-4 pb-2 border-b border-border">
+                <span className="text-sm font-medium text-muted-foreground">Installed Tools</span>
+                <span className="text-sm font-semibold text-orange-500">{proxmenuxTools.length} active</span>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {proxmenuxTools.map((tool) => (
+                  <div
+                    key={tool.key}
+                    className="flex items-center gap-2 p-3 bg-muted/50 rounded-lg border border-border hover:bg-muted transition-colors"
+                  >
+                    <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
+                    <span className="text-sm font-medium">{tool.name}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <TwoFactorSetup
+        open={show2FASetup}
+        onClose={() => setShow2FASetup(false)}
+        onSuccess={() => {
+          setSuccess("2FA enabled successfully!")
+          checkAuthStatus()
+        }}
+      />
+    </div>
+  )
+}

AppImage/components/sidebar.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import { LayoutDashboard, HardDrive, Network, Server, Cpu, FileText, SettingsIcon, Terminal } from "lucide-react"
+
+const menuItems = [
+  { name: "Overview", href: "/", icon: LayoutDashboard },
+  { name: "Storage", href: "/storage", icon: HardDrive },
+  { name: "Network", href: "/network", icon: Network },
+  { name: "Virtual Machines", href: "/virtual-machines", icon: Server },
+  { name: "Hardware", href: "/hardware", icon: Cpu },
+  { name: "System Logs", href: "/logs", icon: FileText },
+  { name: "Terminal", href: "/terminal", icon: Terminal },
+  { name: "Settings", href: "/settings", icon: SettingsIcon },
+]
+
+const Sidebar = ({ currentPath, setOpen }) => {
+  const handleNavigation = (tabName: string) => {
+    // Dispatch custom event to change tab in dashboard
+    const event = new CustomEvent("changeTab", { detail: { tab: tabName } })
+    window.dispatchEvent(event)
+    setOpen(false)
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() => handleNavigation("overview")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/" || currentPath === "/overview"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <LayoutDashboard className="h-5 w-5" />
+        <span>Overview</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("storage")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/storage"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <HardDrive className="h-5 w-5" />
+        <span>Storage</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("network")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/network"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Network className="h-5 w-5" />
+        <span>Network</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("vms")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/virtual-machines"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Server className="h-5 w-5" />
+        <span>VMs & LXCs</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("hardware")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/hardware"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Cpu className="h-5 w-5" />
+        <span>Hardware</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("logs")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/logs"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <FileText className="h-5 w-5" />
+        <span>System Logs</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("terminal")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/terminal"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Terminal className="h-5 w-5" />
+        <span>Terminal</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("settings")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/settings"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <SettingsIcon className="h-5 w-5" />
+        <span>Settings</span>
+      </button>
+    </div>
+  )
+}
+
+export default Sidebar

AppImage/components/storage-metrics.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Progress } from "./ui/progress"
+import { Badge } from "./ui/badge"
+import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity, AlertCircle } from "lucide-react"
+import { formatStorage } from "@/lib/utils"
+
+interface StorageData {
+  total: number
+  used: number
+  available: number
+  disks: DiskInfo[]
+}
+
+interface DiskInfo {
+  name: string
+  mountpoint: string
+  fstype: string
+  total: number
+  used: number
+  available: number
+  usage_percent: number
+  health: string
+  temperature: number
+}
+
+const fetchStorageData = async (): Promise<StorageData | null> => {
+  try {
+    console.log("[v0] Fetching storage data from Flask server...")
+    const response = await fetch("/api/storage", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      signal: AbortSignal.timeout(5000),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Flask server responded with status: ${response.status}`)
+    }
+
+    const data = await response.json()
+    console.log("[v0] Successfully fetched storage data from Flask:", data)
+    return data
+  } catch (error) {
+    console.error("[v0] Failed to fetch storage data from Flask server:", error)
+    return null
+  }
+}
+
+export function StorageMetrics() {
+  const [storageData, setStorageData] = useState<StorageData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true)
+      setError(null)
+      const result = await fetchStorageData()
+
+      if (!result) {
+        setError("Flask server not available. Please ensure the server is running.")
+      } else {
+        setStorageData(result)
+      }
+
+      setLoading(false)
+    }
+
+    fetchData()
+    const interval = setInterval(fetchData, 60000)
+    return () => clearInterval(interval)
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="text-center py-8">
+          <div className="text-lg font-medium text-foreground mb-2">Loading storage data...</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !storageData) {
+    return (
+      <div className="space-y-6">
+        <Card className="bg-red-500/10 border-red-500/20">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3 text-red-600">
+              <AlertCircle className="h-6 w-6" />
+              <div>
+                <div className="font-semibold text-lg mb-1">Flask Server Not Available</div>
+                <div className="text-sm">
+                  {error || "Unable to connect to the Flask server. Please ensure the server is running and try again."}
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const usagePercent = storageData.total > 0 ? (storageData.used / storageData.total) * 100 : 0
+
+  return (
+    <div className="space-y-6">
+      {/* Storage Overview Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total Storage</CardTitle>
+            <HardDrive className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{formatStorage(storageData.total)}</div>
+            <Progress value={usagePercent} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2">
+              {formatStorage(storageData.used)} used • {formatStorage(storageData.available)} available
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Used Storage</CardTitle>
+            <Database className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{formatStorage(storageData.used)}</div>
+            <Progress value={usagePercent} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2">{usagePercent.toFixed(1)}% of total space</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Archive className="h-5 w-5 mr-2" />
+              Available
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{formatStorage(storageData.available)}</div>
+            <div className="flex items-center mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                {((storageData.available / storageData.total) * 100).toFixed(1)}% Free
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">Available space</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Activity className="h-5 w-5 mr-2" />
+              Disks
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{storageData.disks.length}</div>
+            <div className="flex items-center space-x-2 mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                {storageData.disks.filter((d) => d.health === "healthy").length} Healthy
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">Storage devices</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Disk Details */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center">
+            <Database className="h-5 w-5 mr-2" />
+            Storage Devices
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {storageData.disks.map((disk, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
+              >
+                <div className="flex items-center space-x-4">
+                  <HardDrive className="h-5 w-5 text-muted-foreground" />
+                  <div>
+                    <div className="font-medium text-foreground">{disk.name}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {disk.fstype} • {disk.mountpoint}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-6">
+                  <div className="text-right">
+                    <div className="text-sm font-medium text-foreground">
+                      {formatStorage(disk.used)} / {formatStorage(disk.total)}
+                    </div>
+                    <Progress value={disk.usage_percent} className="w-24 mt-1" />
+                  </div>
+
+                  <div className="text-center">
+                    <div className="text-sm text-muted-foreground">Temp</div>
+                    <div className="text-sm font-medium text-foreground">{disk.temperature}°C</div>
+                  </div>
+
+                  <Badge
+                    variant="outline"
+                    className={
+                      disk.health === "healthy"
+                        ? "bg-green-500/10 text-green-500 border-green-500/20"
+                        : "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+                    }
+                  >
+                    {disk.health === "healthy" ? (
+                      <CheckCircle className="h-3 w-3 mr-1" />
+                    ) : (
+                      <AlertTriangle className="h-3 w-3 mr-1" />
+                    )}
+                    {disk.health}
+                  </Badge>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

AppImage/components/system-overview.tsx

@@ -0,0 +1,804 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Progress } from "./ui/progress"
+import { Badge } from "./ui/badge"
+import { Cpu, MemoryStick, Thermometer, Server, Zap, AlertCircle, HardDrive, Network } from "lucide-react"
+import { NodeMetricsCharts } from "./node-metrics-charts"
+import { NetworkTrafficChart } from "./network-traffic-chart"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
+import { fetchApi } from "../lib/api-config"
+import { formatNetworkTraffic, getNetworkUnit } from "../lib/format-network"
+
+interface SystemData {
+  cpu_usage: number
+  memory_usage: number
+  memory_total: number
+  memory_used: number
+  temperature: number
+  uptime: string
+  load_average: number[]
+  hostname: string
+  node_id: string
+  timestamp: string
+  cpu_cores?: number
+  cpu_threads?: number
+  proxmox_version?: string
+  kernel_version?: string
+  available_updates?: number
+}
+
+interface VMData {
+  vmid: number
+  name: string
+  status: string
+  cpu: number
+  mem: number
+  maxmem: number
+  disk: number
+  maxdisk: number
+  uptime: number
+  type?: string
+}
+
+interface StorageData {
+  total: number
+  used: number
+  available: number
+  disk_count: number
+  disks: Array<{
+    name: string
+    mountpoint: string
+    total: number
+    used: number
+    available: number
+    usage_percent: number
+  }>
+}
+
+interface NetworkData {
+  interfaces: Array<{
+    name: string
+    status: string
+    addresses: Array<{ ip: string; netmask: string }>
+  }>
+  traffic: {
+    bytes_sent: number
+    bytes_recv: number
+    packets_sent: number
+    packets_recv: number
+  }
+  physical_active_count?: number
+  physical_total_count?: number
+  bridge_active_count?: number
+  bridge_total_count?: number
+  physical_interfaces?: Array<{
+    name: string
+    status: string
+    addresses: Array<{ ip: string; netmask: string }>
+  }>
+  bridge_interfaces?: Array<{
+    name: string
+    status: string
+    addresses: Array<{ ip: string; netmask: string }>
+  }>
+}
+
+interface ProxmoxStorageData {
+  storage: Array<{
+    name: string
+    type: string
+    status: string
+    total: number
+    used: number
+    available: number
+    percent: number
+  }>
+}
+
+const fetchSystemData = async (retries = 3, delayMs = 500): Promise<SystemData | null> => {
+  for (let attempt = 0; attempt < retries; attempt++) {
+    try {
+      const data = await fetchApi<SystemData>("/api/system")
+      return data
+    } catch (error) {
+      if (attempt === retries - 1) {
+        console.error("[v0] Failed to fetch system data after retries:", error)
+        return null
+      }
+      // Wait before retry
+      await new Promise((resolve) => setTimeout(resolve, delayMs))
+    }
+  }
+  return null
+}
+
+const fetchVMData = async (): Promise<VMData[]> => {
+  try {
+    const data = await fetchApi<any>("/api/vms")
+    return Array.isArray(data) ? data : data.vms || []
+  } catch (error) {
+    console.error("[v0] Failed to fetch VM data:", error)
+    return []
+  }
+}
+
+const fetchStorageData = async (): Promise<StorageData | null> => {
+  try {
+    const data = await fetchApi<StorageData>("/api/storage/summary")
+    return data
+  } catch (error) {
+    console.log("[v0] Storage API not available (this is normal if not configured)")
+    return null
+  }
+}
+
+const fetchNetworkData = async (): Promise<NetworkData | null> => {
+  try {
+    const data = await fetchApi<NetworkData>("/api/network/summary")
+    return data
+  } catch (error) {
+    console.log("[v0] Network API not available (this is normal if not configured)")
+    return null
+  }
+}
+
+const fetchProxmoxStorageData = async (): Promise<ProxmoxStorageData | null> => {
+  try {
+    const data = await fetchApi<ProxmoxStorageData>("/api/proxmox-storage")
+    return data
+  } catch (error) {
+    console.log("[v0] Proxmox storage API not available")
+    return null
+  }
+}
+
+const getUnitsSettings = (): "Bytes" | "Bits" => {
+  if (typeof window === "undefined") return "Bytes"
+  const raw = window.localStorage.getItem("proxmenux-network-unit")
+  return raw && raw.toLowerCase() === "bits" ? "Bits" : "Bytes"
+}
+
+export function SystemOverview() {
+  const [systemData, setSystemData] = useState<SystemData | null>(null)
+  const [vmData, setVmData] = useState<VMData[]>([])
+  const [storageData, setStorageData] = useState<StorageData | null>(null)
+  const [proxmoxStorageData, setProxmoxStorageData] = useState<ProxmoxStorageData | null>(null)
+  const [networkData, setNetworkData] = useState<NetworkData | null>(null)
+  const [loadingStates, setLoadingStates] = useState({
+    system: true,
+    vms: true,
+    storage: true,
+    network: true,
+  })
+  const [error, setError] = useState<string | null>(null)
+  const [hasAttemptedLoad, setHasAttemptedLoad] = useState(false) // Added hasAttemptedLoad state
+  const [networkTimeframe, setNetworkTimeframe] = useState("day")
+  const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
+  const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes") // Added networkUnit state
+
+  useEffect(() => {
+    const fetchAllData = async () => {
+      const [systemResult, vmResult, storageResults, networkResult] = await Promise.all([
+        fetchSystemData().finally(() => setLoadingStates((prev) => ({ ...prev, system: false }))),
+        fetchVMData().finally(() => setLoadingStates((prev) => ({ ...prev, vms: false }))),
+        Promise.all([fetchStorageData(), fetchProxmoxStorageData()]).finally(() =>
+          setLoadingStates((prev) => ({ ...prev, storage: false })),
+        ),
+        fetchNetworkData().finally(() => setLoadingStates((prev) => ({ ...prev, network: false }))),
+      ])
+
+      setHasAttemptedLoad(true)
+
+      if (!systemResult) {
+        setError("Flask server not available. Please ensure the server is running.")
+        return
+      }
+
+      setSystemData(systemResult)
+      setVmData(vmResult)
+      setStorageData(storageResults[0])
+      setProxmoxStorageData(storageResults[1])
+      setNetworkData(networkResult)
+
+      setTimeout(async () => {
+        const refreshedSystemData = await fetchSystemData()
+        if (refreshedSystemData) {
+          setSystemData(refreshedSystemData)
+        }
+      }, 2000)
+    }
+
+    fetchAllData()
+
+    const systemInterval = setInterval(async () => {
+      const data = await fetchSystemData()
+      if (data) setSystemData(data)
+    }, 9000)
+
+    const vmInterval = setInterval(async () => {
+      const data = await fetchVMData()
+      setVmData(data)
+    }, 59000)
+
+    const storageInterval = setInterval(async () => {
+      const [storage, proxmoxStorage] = await Promise.all([fetchStorageData(), fetchProxmoxStorageData()])
+      if (storage) setStorageData(storage)
+      if (proxmoxStorage) setProxmoxStorageData(proxmoxStorage)
+    }, 59000)
+
+    const networkInterval = setInterval(async () => {
+      const data = await fetchNetworkData()
+      if (data) setNetworkData(data)
+    }, 59000)
+
+    setNetworkUnit(getNetworkUnit()) // Load initial setting
+
+    const handleUnitChange = (e: CustomEvent) => {
+      setNetworkUnit(e.detail === "Bits" ? "Bits" : "Bytes")
+    }
+
+    window.addEventListener("networkUnitChanged" as any, handleUnitChange)
+
+    return () => {
+      clearInterval(systemInterval)
+      clearInterval(vmInterval)
+      clearInterval(storageInterval)
+      clearInterval(networkInterval)
+      window.removeEventListener("networkUnitChanged" as any, handleUnitChange)
+    }
+  }, [])
+
+  if (!hasAttemptedLoad || loadingStates.system) {
+    return (
+      <div className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i} className="bg-card border-border animate-pulse">
+              <CardContent className="p-6">
+                <div className="h-4 bg-muted rounded w-1/2 mb-4"></div>
+                <div className="h-8 bg-muted rounded w-3/4 mb-2"></div>
+                <div className="h-2 bg-muted rounded w-full mb-2"></div>
+                <div className="h-3 bg-muted rounded w-2/3"></div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !systemData) {
+    return (
+      <div className="space-y-6">
+        <Card className="bg-red-500/10 border-red-500/20">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3 text-red-600">
+              <AlertCircle className="h-6 w-6" />
+              <div>
+                <div className="font-semibold text-lg mb-1">Flask Server Not Available</div>
+                <div className="text-sm">
+                  {error || "Unable to connect to the Flask server. Please ensure the server is running and try again."}
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const vmStats = {
+    total: vmData.length,
+    running: vmData.filter((vm) => vm.status === "running").length,
+    stopped: vmData.filter((vm) => vm.status === "stopped").length,
+    lxc: vmData.filter((vm) => vm.type === "lxc").length,
+    vms: vmData.filter((vm) => vm.type === "qemu" || !vm.type).length,
+  }
+
+  const getTemperatureStatus = (temp: number) => {
+    if (temp === 0) return { status: "N/A", color: "bg-gray-500/10 text-gray-500 border-gray-500/20" }
+    if (temp < 60) return { status: "Normal", color: "bg-green-500/10 text-green-500 border-green-500/20" }
+    if (temp < 75) return { status: "Warm", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" }
+    return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" }
+  }
+
+  const formatUptime = (seconds: number) => {
+    if (!seconds || seconds === 0) return "Stopped"
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+
+    if (days > 0) return `${days}d ${hours}h`
+    if (hours > 0) return `${hours}h ${minutes}m`
+    return `${minutes}m`
+  }
+
+  const formatBytes = (bytes: number) => {
+    return (bytes / 1024 ** 3).toFixed(2)
+  }
+
+  const tempStatus = getTemperatureStatus(systemData.temperature)
+
+  const localStorage = proxmoxStorageData?.storage.find((s) => s.name === "local")
+
+  const vmLxcStorages = proxmoxStorageData?.storage.filter(
+    (s) =>
+      (s.type === "lvm" || s.type === "lvmthin" || s.type === "zfspool" || s.type === "btrfs" || s.type === "dir") &&
+      s.type !== "nfs" &&
+      s.type !== "cifs" &&
+      s.type !== "iscsi" &&
+      s.name !== "local",
+  )
+
+  const vmLxcStorageTotal = vmLxcStorages?.reduce((acc, s) => acc + s.total, 0) || 0
+  const vmLxcStorageUsed = vmLxcStorages?.reduce((acc, s) => acc + s.used, 0) || 0
+  const vmLxcStorageAvailable = vmLxcStorages?.reduce((acc, s) => acc + s.available, 0) || 0
+  const vmLxcStoragePercent = vmLxcStorageTotal > 0 ? (vmLxcStorageUsed / vmLxcStorageTotal) * 100 : 0
+
+  const getLoadStatus = (load: number, cores: number) => {
+    if (load < cores) {
+      return { status: "Normal", color: "bg-green-500/10 text-green-500 border-green-500/20" }
+    } else if (load < cores * 1.5) {
+      return { status: "Moderate", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" }
+    } else {
+      return { status: "High", color: "bg-red-500/10 text-red-500 border-red-500/20" }
+    }
+  }
+
+  const systemAlerts = []
+  if (systemData.available_updates && systemData.available_updates > 0) {
+    systemAlerts.push({
+      type: "warning",
+      message: `${systemData.available_updates} updates available`,
+    })
+  }
+  if (vmStats.stopped > 0) {
+    systemAlerts.push({
+      type: "info",
+      message: `${vmStats.stopped} VM${vmStats.stopped > 1 ? "s" : ""} stopped`,
+    })
+  }
+  if (systemData.temperature > 75) {
+    systemAlerts.push({
+      type: "warning",
+      message: "High temperature detected",
+    })
+  }
+  if (localStorage && localStorage.percent > 90) {
+    systemAlerts.push({
+      type: "warning",
+      message: "System storage almost full",
+    })
+  }
+
+  const loadStatus = getLoadStatus(systemData.load_average[0], systemData.cpu_cores || 8)
+
+  const getTimeframeLabel = (timeframe: string): string => {
+    switch (timeframe) {
+      case "hour":
+        return "1h"
+      case "day":
+        return "24h"
+      case "week":
+        return "7d"
+      case "month":
+        return "30d"
+      case "year":
+        return "1y"
+      default:
+        return timeframe
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">CPU Usage</CardTitle>
+            <Cpu className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{systemData.cpu_usage}%</div>
+            <Progress value={systemData.cpu_usage} className="mt-2 [&>div]:bg-blue-500" />
+            <p className="text-xs text-muted-foreground mt-2">Real-time usage</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle>
+            <MemoryStick className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{systemData.memory_used.toFixed(1)} GB</div>
+            <Progress value={systemData.memory_usage} className="mt-2 [&>div]:bg-blue-500" />
+            <p className="text-xs text-muted-foreground mt-2">
+              <span className="text-green-500 font-medium">{systemData.memory_usage.toFixed(1)}%</span> of{" "}
+              {systemData.memory_total} GB
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Server className="h-5 w-5 mr-2" />
+              Active VM & LXC
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {loadingStates.vms ? (
+              <div className="space-y-2 animate-pulse">
+                <div className="h-8 bg-muted rounded w-12"></div>
+                <div className="h-5 bg-muted rounded w-24"></div>
+                <div className="h-4 bg-muted rounded w-32"></div>
+              </div>
+            ) : (
+              <>
+                <div className="text-xl lg:text-2xl font-bold text-foreground">{vmStats.running}</div>
+                <div className="mt-2 flex flex-wrap gap-1">
+                  <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                    {vmStats.running} Running
+                  </Badge>
+                  {vmStats.stopped > 0 && (
+                    <Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20">
+                      {vmStats.stopped} Stopped
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">
+                  Total: {vmStats.vms} VMs, {vmStats.lxc} LXC
+                </p>
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Temperature</CardTitle>
+            <Thermometer className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">
+              {systemData.temperature === 0 ? "N/A" : `${systemData.temperature}°C`}
+            </div>
+            <div className="flex items-center mt-2">
+              <Badge variant="outline" className={tempStatus.color}>
+                {tempStatus.status}
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">
+              {systemData.temperature === 0 ? "No sensor available" : "Live temperature reading"}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <NodeMetricsCharts />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <HardDrive className="h-5 w-5 mr-2" />
+              Storage Overview
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {loadingStates.storage ? (
+              <div className="space-y-4 animate-pulse">
+                <div className="h-6 bg-muted rounded w-full"></div>
+                <div className="h-4 bg-muted rounded w-3/4"></div>
+                <div className="h-4 bg-muted rounded w-2/3"></div>
+              </div>
+            ) : storageData ? (
+              <div className="space-y-4">
+                {(() => {
+                  const totalCapacity = (vmLxcStorageTotal || 0) + (localStorage?.total || 0)
+                  const totalUsed = (vmLxcStorageUsed || 0) + (localStorage?.used || 0)
+                  const totalAvailable = (vmLxcStorageAvailable || 0) + (localStorage?.available || 0)
+                  const totalPercent = totalCapacity > 0 ? (totalUsed / totalCapacity) * 100 : 0
+
+                  return totalCapacity > 0 ? (
+                    <div className="space-y-2 pb-4 border-b-2 border-border">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm font-medium text-foreground">Total Node Capacity:</span>
+                        <span className="text-lg font-bold text-foreground">
+                          {formatNetworkTraffic(totalCapacity, "Bytes")}
+                        </span>
+                      </div>
+                      <Progress
+                        value={totalPercent}
+                        className="mt-2 h-3 [&>div]:bg-gradient-to-r [&>div]:from-blue-500 [&>div]:to-purple-500"
+                      />
+                      <div className="flex justify-between items-center mt-1">
+                        <div className="flex items-center gap-3">
+                          <span className="text-xs text-muted-foreground">
+                            Used:{" "}
+                            <span className="font-semibold text-foreground">
+                              {formatNetworkTraffic(totalUsed, "Bytes")}
+                            </span>
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            Free:{" "}
+                            <span className="font-semibold text-green-500">
+                              {formatNetworkTraffic(totalAvailable, "Bytes")}
+                            </span>
+                          </span>
+                        </div>
+                        <span className="text-xs font-semibold text-muted-foreground">{totalPercent.toFixed(1)}%</span>
+                      </div>
+                    </div>
+                  ) : null
+                })()}
+
+                <div className="space-y-2 pb-3 border-b border-border">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-muted-foreground">Total Capacity:</span>
+                    <span className="text-lg font-semibold text-foreground">{storageData.total} TB</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-muted-foreground">Physical Disks:</span>
+                    <span className="text-sm font-semibold text-foreground">
+                      {storageData.disk_count} disk{storageData.disk_count !== 1 ? "s" : ""}
+                    </span>
+                  </div>
+                </div>
+
+                {vmLxcStorages && vmLxcStorages.length > 0 ? (
+                  <div className="space-y-2 pb-3 border-b border-border">
+                    <div className="text-xs font-medium text-muted-foreground mb-2">VM/LXC Storage</div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-muted-foreground">Used:</span>
+                      <span className="text-sm font-semibold text-foreground">
+                        {formatNetworkTraffic(vmLxcStorageUsed, "Bytes")}
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-muted-foreground">Available:</span>
+                      <span className="text-sm font-semibold text-green-500">
+                        {formatNetworkTraffic(vmLxcStorageAvailable, "Bytes")}
+                      </span>
+                    </div>
+                    <Progress value={vmLxcStoragePercent} className="mt-2 [&>div]:bg-blue-500" />
+                    <div className="flex justify-between items-center mt-1">
+                      <span className="text-xs text-muted-foreground">
+                        {formatNetworkTraffic(vmLxcStorageUsed, "Bytes")} /{" "}
+                        {formatNetworkTraffic(vmLxcStorageTotal, "Bytes")}
+                      </span>
+                      <span className="text-xs text-muted-foreground">{vmLxcStoragePercent.toFixed(1)}%</span>
+                    </div>
+                    {vmLxcStorages.length > 1 && (
+                      <div className="text-xs text-muted-foreground mt-1">
+                        {vmLxcStorages.length} storage volume{vmLxcStorages.length > 1 ? "s" : ""}
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="space-y-2 pb-3 border-b border-border">
+                    <div className="text-xs font-medium text-muted-foreground mb-2">VM/LXC Storage</div>
+                    <div className="text-center py-4 text-muted-foreground text-sm">No VM/LXC storage configured</div>
+                  </div>
+                )}
+
+                {localStorage && (
+                  <div className="space-y-2">
+                    <div className="text-xs font-medium text-muted-foreground mb-2">Local Storage (System)</div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-muted-foreground">Used:</span>
+                      <span className="text-sm font-semibold text-foreground">
+                        {formatNetworkTraffic(localStorage.used, "Bytes")}
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-muted-foreground">Available:</span>
+                      <span className="text-sm font-semibold text-green-500">
+                        {formatNetworkTraffic(localStorage.available, "Bytes")}
+                      </span>
+                    </div>
+                    <Progress value={localStorage.percent} className="mt-2 [&>div]:bg-purple-500" />
+                    <div className="flex justify-between items-center mt-1">
+                      <span className="text-xs text-muted-foreground">
+                        {formatNetworkTraffic(localStorage.used, "Bytes")} /{" "}
+                        {formatNetworkTraffic(localStorage.total, "Bytes")}
+                      </span>
+                      <span className="text-xs text-muted-foreground">{localStorage.percent.toFixed(1)}%</span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">Storage data not available</div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center justify-between">
+              <div className="flex items-center">
+                <Network className="h-5 w-5 mr-2" />
+                Network Overview
+              </div>
+              <Select value={networkTimeframe} onValueChange={setNetworkTimeframe}>
+                <SelectTrigger className="w-28 h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="hour">1 Hour</SelectItem>
+                  <SelectItem value="day">24 Hours</SelectItem>
+                  <SelectItem value="week">7 Days</SelectItem>
+                  <SelectItem value="month">30 Days</SelectItem>
+                  <SelectItem value="year">1 Year</SelectItem>
+                </SelectContent>
+              </Select>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {loadingStates.network ? (
+              <div className="space-y-4 animate-pulse">
+                <div className="h-6 bg-muted rounded w-full"></div>
+                <div className="h-4 bg-muted rounded w-3/4"></div>
+                <div className="h-4 bg-muted rounded w-2/3"></div>
+              </div>
+            ) : networkData ? (
+              <div className="space-y-4">
+                <div className="flex justify-between items-center pb-3 border-b border-border">
+                  <span className="text-sm text-muted-foreground">Active Interfaces:</span>
+                  <span className="text-lg font-semibold text-foreground">
+                    {(networkData.physical_active_count || 0) + (networkData.bridge_active_count || 0)}
+                  </span>
+                </div>
+
+                <div className="space-y-2">
+                  {networkData.physical_interfaces && networkData.physical_interfaces.length > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                      {networkData.physical_interfaces
+                        .filter((iface) => iface.status === "up")
+                        .map((iface) => (
+                          <Badge
+                            key={iface.name}
+                            variant="outline"
+                            className="bg-blue-500/10 text-blue-500 border-blue-500/20"
+                          >
+                            {iface.name}
+                          </Badge>
+                        ))}
+                    </div>
+                  )}
+
+                  {networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                      {networkData.bridge_interfaces
+                        .filter((iface) => iface.status === "up")
+                        .map((iface) => (
+                          <Badge
+                            key={iface.name}
+                            variant="outline"
+                            className="bg-green-500/10 text-green-500 border-green-500/20"
+                          >
+                            {iface.name}
+                          </Badge>
+                        ))}
+                    </div>
+                  )}
+                </div>
+
+                <div className="pt-2 border-t border-border space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-muted-foreground">Received:</span>
+                    <span className="text-lg font-semibold text-green-500 flex items-center gap-1">
+                      ↓{" "}
+                      {networkUnit === "Bytes"
+                        ? `${networkTotals.received.toFixed(2)} GB`
+                        : formatNetworkTraffic(networkTotals.received * 1024 * 1024 * 1024, "Bits")}
+                      <span className="text-xs text-muted-foreground">({getTimeframeLabel(networkTimeframe)})</span>
+                    </span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-muted-foreground">Sent:</span>
+                    <span className="text-lg font-semibold text-blue-500 flex items-center gap-1">
+                      ↑{" "}
+                      {networkUnit === "Bytes"
+                        ? `${networkTotals.sent.toFixed(2)} GB`
+                        : formatNetworkTraffic(networkTotals.sent * 1024 * 1024 * 1024, "Bits")}
+                      <span className="text-xs text-muted-foreground">({getTimeframeLabel(networkTimeframe)})</span>
+                    </span>
+                  </div>
+                </div>
+
+                <div className="pt-3 border-t border-border">
+                  <NetworkTrafficChart
+                    timeframe={networkTimeframe}
+                    onTotalsCalculated={setNetworkTotals}
+                    networkUnit={networkUnit}
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">Network data not available</div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Server className="h-5 w-5 mr-2" />
+              System Information
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Uptime:</span>
+              <span className="text-foreground">{systemData.uptime}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Proxmox Version:</span>
+              <span className="text-foreground">{systemData.proxmox_version || "N/A"}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Kernel:</span>
+              <span className="text-foreground font-mono text-sm">{systemData.kernel_version || "Linux"}</span>
+            </div>
+            {systemData.available_updates !== undefined && systemData.available_updates > 0 && (
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Available Updates:</span>
+                <Badge variant="outline" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
+                  {systemData.available_updates} packages
+                </Badge>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Zap className="h-5 w-5 mr-2" />
+              System Overview
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex justify-between items-center pb-3 border-b border-border">
+              <div className="flex flex-col">
+                <span className="text-sm text-muted-foreground">Load Average (1m):</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-lg font-semibold text-foreground font-mono">
+                  {systemData.load_average[0].toFixed(2)}
+                </span>
+                <Badge variant="outline" className={loadStatus.color}>
+                  {loadStatus.status}
+                </Badge>
+              </div>
+            </div>
+
+            <div className="flex justify-between items-center pb-3 border-b border-border">
+              <span className="text-sm text-muted-foreground">CPU Threads:</span>
+              <span className="text-lg font-semibold text-foreground">{systemData.cpu_threads || "N/A"}</span>
+            </div>
+
+            <div className="flex justify-between items-center pb-3 border-b border-border">
+              <span className="text-sm text-muted-foreground">Physical Disks:</span>
+              <span className="text-lg font-semibold text-foreground">{storageData?.disk_count || "N/A"}</span>
+            </div>
+
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-muted-foreground">Network Interfaces:</span>
+              <span className="text-lg font-semibold text-foreground">
+                {networkData?.physical_total_count || networkData?.physical_interfaces?.length || "N/A"}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

AppImage/components/theme-provider.tsx

@@ -0,0 +1,7 @@
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

AppImage/components/theme-toggle.tsx

@@ -0,0 +1,39 @@
+"use client"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+import { Button } from "./ui/button"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const handleThemeToggle = () => {
+    console.log("[v0] Current theme:", theme)
+    const newTheme = theme === "light" ? "dark" : "light"
+    console.log("[v0] Switching to theme:", newTheme)
+    setTheme(newTheme)
+  }
+
+  if (!mounted) {
+    return (
+      <Button variant="outline" size="sm" className="border-border bg-transparent w-9 h-9">
+        <Sun className="h-4 w-4" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Button variant="outline" size="sm" onClick={handleThemeToggle} className="border-border bg-transparent w-9 h-9">
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

AppImage/components/two-factor-setup.tsx

@@ -0,0 +1,261 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
+import { AlertCircle, CheckCircle, Copy, Shield, Check } from "lucide-react"
+import { getApiUrl } from "../lib/api-config"
+
+interface TwoFactorSetupProps {
+  open: boolean
+  onClose: () => void
+  onSuccess: () => void
+}
+
+export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps) {
+  const [step, setStep] = useState(1)
+  const [qrCode, setQrCode] = useState("")
+  const [secret, setSecret] = useState("")
+  const [backupCodes, setBackupCodes] = useState<string[]>([])
+  const [verificationCode, setVerificationCode] = useState("")
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [copiedSecret, setCopiedSecret] = useState(false)
+  const [copiedCodes, setCopiedCodes] = useState(false)
+
+  const handleSetupStart = async () => {
+    setError("")
+    setLoading(true)
+
+    try {
+      const token = localStorage.getItem("proxmenux-auth-token")
+      const response = await fetch(getApiUrl("/api/auth/totp/setup"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.message || "Failed to setup 2FA")
+      }
+
+      setQrCode(data.qr_code)
+      setSecret(data.secret)
+      setBackupCodes(data.backup_codes)
+      setStep(2)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to setup 2FA")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleVerify = async () => {
+    if (!verificationCode || verificationCode.length !== 6) {
+      setError("Please enter a 6-digit code")
+      return
+    }
+
+    setError("")
+    setLoading(true)
+
+    try {
+      const token = localStorage.getItem("proxmenux-auth-token")
+      const response = await fetch(getApiUrl("/api/auth/totp/enable"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ token: verificationCode }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.message || "Invalid verification code")
+      }
+
+      setStep(3)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Verification failed")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const copyToClipboard = (text: string, type: "secret" | "codes") => {
+    navigator.clipboard.writeText(text)
+    if (type === "secret") {
+      setCopiedSecret(true)
+      setTimeout(() => setCopiedSecret(false), 2000)
+    } else {
+      setCopiedCodes(true)
+      setTimeout(() => setCopiedCodes(false), 2000)
+    }
+  }
+
+  const handleClose = () => {
+    setStep(1)
+    setQrCode("")
+    setSecret("")
+    setBackupCodes([])
+    setVerificationCode("")
+    setError("")
+    onClose()
+  }
+
+  const handleFinish = () => {
+    handleClose()
+    onSuccess()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-blue-500" />
+            Setup Two-Factor Authentication
+          </DialogTitle>
+          <DialogDescription>Add an extra layer of security to your account</DialogDescription>
+        </DialogHeader>
+
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
+            <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-red-500">{error}</p>
+          </div>
+        )}
+
+        {step === 1 && (
+          <div className="space-y-4">
+            <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+              <p className="text-sm text-blue-500">
+                Two-factor authentication (2FA) adds an extra layer of security by requiring a code from your
+                authentication app in addition to your password.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium">You will need:</h4>
+              <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
+                <li>An authentication app (Google Authenticator, Authy, etc.)</li>
+                <li>Scan a QR code or enter a key manually</li>
+                <li>Store backup codes securely</li>
+              </ul>
+            </div>
+
+            <Button onClick={handleSetupStart} className="w-full bg-blue-500 hover:bg-blue-600" disabled={loading}>
+              {loading ? "Starting..." : "Start Setup"}
+            </Button>
+          </div>
+        )}
+
+        {step === 2 && (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <h4 className="font-medium">1. Scan the QR code</h4>
+              <p className="text-sm text-muted-foreground">Open your authentication app and scan this QR code</p>
+              {qrCode && (
+                <div className="flex justify-center p-4 bg-white rounded-lg">
+                  <img src={qrCode || "/placeholder.svg"} alt="QR Code" width={200} height={200} className="rounded" />
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium">Or enter the key manually:</h4>
+              <div className="flex gap-2">
+                <Input value={secret} readOnly className="font-mono text-sm" />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => copyToClipboard(secret, "secret")}
+                  title="Copy key"
+                >
+                  {copiedSecret ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+                </Button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium">2. Enter the verification code</h4>
+              <p className="text-sm text-muted-foreground">Enter the 6-digit code that appears in your app</p>
+              <Input
+                type="text"
+                placeholder="000000"
+                value={verificationCode}
+                onChange={(e) => setVerificationCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                className="text-center text-lg tracking-widest font-mono text-base"
+                maxLength={6}
+                disabled={loading}
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <Button onClick={handleVerify} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
+                {loading ? "Verifying..." : "Verify and Enable"}
+              </Button>
+              <Button onClick={handleClose} variant="outline" className="flex-1 bg-transparent" disabled={loading}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {step === 3 && (
+          <div className="space-y-4">
+            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-4 flex items-start gap-2">
+              <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="font-medium text-green-500">2FA Enabled Successfully</p>
+                <p className="text-sm text-green-500 mt-1">
+                  Your account is now protected with two-factor authentication
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium text-orange-500">Important: Save your backup codes</h4>
+              <p className="text-sm text-muted-foreground">
+                These codes will allow you to access your account if you lose access to your authentication app. Store
+                them in a safe place.
+              </p>
+
+              <div className="bg-muted/50 rounded-lg p-4 space-y-2">
+                <div className="flex justify-between items-center mb-2">
+                  <span className="text-sm font-medium">Backup Codes</span>
+                  <Button variant="outline" size="sm" onClick={() => copyToClipboard(backupCodes.join("\n"), "codes")}>
+                    {copiedCodes ? (
+                      <Check className="h-4 w-4 text-green-500 mr-2" />
+                    ) : (
+                      <Copy className="h-4 w-4 mr-2" />
+                    )}
+                    Copy All
+                  </Button>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  {backupCodes.map((code, index) => (
+                    <div key={index} className="bg-background rounded px-3 py-2 font-mono text-sm text-center">
+                      {code}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <Button onClick={handleFinish} className="w-full bg-blue-500 hover:bg-blue-600">
+              Finish
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

AppImage/components/ui/badge.tsx

@@ -0,0 +1,28 @@
+import type * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

AppImage/components/ui/button.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

AppImage/components/ui/card.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

AppImage/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

AppImage/components/ui/dialog.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    hideClose?: boolean
+  }
+>(({ className, children, hideClose, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        className,
+      )}
+      aria-describedby={props["aria-describedby"] || undefined}
+      {...props}
+    >
+      {children}
+      {!hideClose && (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

AppImage/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-lg border border-input bg-background px-4 py-2 text-sm shadow-sm transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 hover:border-ring/50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }

AppImage/components/ui/label.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

AppImage/components/ui/progress.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

AppImage/components/ui/scroll-area.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

AppImage/components/ui/select.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

AppImage/components/ui/sheet.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = DialogPrimitive.Root
+
+const SheetTrigger = DialogPrimitive.Trigger
+
+const SheetClose = DialogPrimitive.Close
+
+const SheetPortal = DialogPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, SheetContentProps>(
+  ({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <DialogPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  ),
+)
+SheetContent.displayName = DialogPrimitive.Content.displayName
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
+))
+SheetTitle.displayName = DialogPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+SheetDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

AppImage/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

AppImage/hooks/use-mobile.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+
+    // Check on mount
+    checkMobile()
+
+    // Listen for resize
+    window.addEventListener("resize", checkMobile)
+
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [])
+
+  return isMobile
+}

AppImage/lib/api-config.ts

@@ -0,0 +1,126 @@
+/**
+ * API Configuration for ProxMenux Monitor
+ * Handles API URL generation with automatic proxy detection
+ */
+
+/**
+ * API Server Port Configuration
+ * Default: 8008 (production)
+ * Can be changed to 8009 for beta testing
+ * This can also be set via NEXT_PUBLIC_API_PORT environment variable
+ */
+export const API_PORT = process.env.NEXT_PUBLIC_API_PORT || "8008"
+
+/**
+ * Gets the base URL for API calls
+ * Automatically detects if running behind a proxy by checking if we're on a standard port
+ *
+ * @returns Base URL for API endpoints
+ */
+export function getApiBaseUrl(): string {
+  if (typeof window === "undefined") {
+    console.log("[v0] getApiBaseUrl: Running on server (SSR)")
+    return ""
+  }
+
+  const { protocol, hostname, port } = window.location
+
+  console.log("[v0] getApiBaseUrl - protocol:", protocol, "hostname:", hostname, "port:", port)
+
+  // If accessing via standard ports (80/443) or no port, assume we're behind a proxy
+  // In this case, use relative URLs so the proxy handles routing
+  const isStandardPort = port === "" || port === "80" || port === "443"
+
+  console.log("[v0] getApiBaseUrl - isStandardPort:", isStandardPort)
+
+  if (isStandardPort) {
+    // Behind a proxy - use relative URL
+    console.log("[v0] getApiBaseUrl: Detected proxy access, using relative URLs")
+    return ""
+  } else {
+    // Direct access - use explicit API port
+    const baseUrl = `${protocol}//${hostname}:${API_PORT}`
+    console.log("[v0] getApiBaseUrl: Direct access detected, using:", baseUrl)
+    return baseUrl
+  }
+}
+
+/**
+ * Constructs a full API URL
+ *
+ * @param endpoint - API endpoint path (e.g., '/api/system')
+ * @returns Full API URL
+ */
+export function getApiUrl(endpoint: string): string {
+  const baseUrl = getApiBaseUrl()
+
+  // Ensure endpoint starts with /
+  const normalizedEndpoint = endpoint.startsWith("/") ? endpoint : `/${endpoint}`
+
+  return `${baseUrl}${normalizedEndpoint}`
+}
+
+/**
+ * Gets the JWT token from localStorage
+ *
+ * @returns JWT token or null if not authenticated
+ */
+export function getAuthToken(): string | null {
+  if (typeof window === "undefined") {
+    return null
+  }
+  const token = localStorage.getItem("proxmenux-auth-token")
+  console.log(
+    "[v0] getAuthToken called:",
+    token ? `Token found (length: ${token.length})` : "No token found in localStorage",
+  )
+  return token
+}
+
+/**
+ * Fetches data from an API endpoint with error handling
+ *
+ * @param endpoint - API endpoint path
+ * @param options - Fetch options
+ * @returns Promise with the response data
+ */
+export async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T> {
+  const url = getApiUrl(endpoint)
+
+  const token = getAuthToken()
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...(options?.headers as Record<string, string>),
+  }
+
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`
+    console.log("[v0] fetchApi:", endpoint, "- Authorization header ADDED")
+  } else {
+    console.log("[v0] fetchApi:", endpoint, "- NO TOKEN - Request will fail if endpoint is protected")
+  }
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers,
+      cache: "no-store",
+    })
+
+    console.log("[v0] fetchApi:", endpoint, "- Response status:", response.status)
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        console.error("[v0] fetchApi: 401 UNAUTHORIZED -", endpoint, "- Token present:", !!token)
+        throw new Error(`Unauthorized: ${endpoint}`)
+      }
+      throw new Error(`API request failed: ${response.status} ${response.statusText}`)
+    }
+
+    return response.json()
+  } catch (error) {
+    console.error("[v0] fetchApi error for", endpoint, ":", error)
+    throw error
+  }
+}

AppImage/lib/format-network.ts

@@ -0,0 +1,68 @@
+/**
+ * Utility functions for formatting network traffic data
+ * Supports conversion between Bytes and Bits based on user preferences
+ */
+
+export type NetworkUnit = 'Bytes' | 'Bits';
+
+/**
+ * Format network traffic value with appropriate unit
+ * @param bytes - Value in bytes
+ * @param unit - Target unit ('Bytes' or 'Bits')
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns Formatted string with value and unit
+ */
+export function formatNetworkTraffic(
+  bytes: number,
+  unit: NetworkUnit = 'Bytes',
+  decimals: number = 2
+): string {
+  if (bytes === 0) return unit === 'Bits' ? '0 b' : '0 B';
+
+  const k = unit === 'Bits' ? 1000 : 1024;
+  const dm = decimals < 0 ? 0 : Math.min(decimals, 2);
+  
+  // For Bits: convert bytes to bits first (multiply by 8)
+  const value = unit === 'Bits' ? bytes * 8 : bytes;
+  
+  const sizes = unit === 'Bits' 
+    ? ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb']
+    : ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+  const i = Math.floor(Math.log(value) / Math.log(k));
+  const finalDecimals = 2; // Always use 2 decimals for consistency
+  const formattedValue = parseFloat((value / Math.pow(k, i)).toFixed(finalDecimals));
+
+  return `${formattedValue} ${sizes[i]}`;
+}
+
+/**
+ * Get the current network unit preference from localStorage
+ * @returns 'Bytes' or 'Bits'
+ */
+export function getNetworkUnit(): NetworkUnit {
+  if (typeof window === 'undefined') return 'Bytes';
+  
+  const stored = localStorage.getItem('proxmenux-network-unit');
+  return stored === 'Bits' ? 'Bits' : 'Bytes';
+}
+
+/**
+ * Get the label for network traffic based on current unit
+ * @param direction - 'received' or 'sent'
+ * @returns Label string
+ */
+export function getNetworkLabel(direction: 'received' | 'sent'): string {
+  const unit = getNetworkUnit();
+  const prefix = direction === 'received' ? 'Received' : 'Sent';
+  return unit === 'Bits' ? `${prefix}` : `${prefix}`;
+}
+
+/**
+ * Get the unit suffix for displaying in charts
+ * @returns Unit suffix string (e.g., 'GB' or 'Gb')
+ */
+export function getNetworkUnitSuffix(): string {
+  const unit = getNetworkUnit();
+  return unit === 'Bits' ? 'b' : 'B';
+}

AppImage/lib/script-executor.ts

@@ -0,0 +1,39 @@
+import { exec } from "child_process"
+import { promisify } from "util"
+
+const execAsync = promisify(exec)
+
+interface ScriptExecutorOptions {
+  env?: Record<string, string>
+  timeout?: number
+}
+
+interface ScriptResult {
+  stdout: string
+  stderr: string
+  exitCode: number
+}
+
+export async function executeScript(scriptPath: string, options: ScriptExecutorOptions = {}): Promise<ScriptResult> {
+  const { env = {}, timeout = 300000 } = options // 5 minutes default timeout
+
+  try {
+    const { stdout, stderr } = await execAsync(`bash ${scriptPath}`, {
+      env: { ...process.env, ...env },
+      timeout,
+      maxBuffer: 1024 * 1024 * 10, // 10MB buffer
+    })
+
+    return {
+      stdout,
+      stderr,
+      exitCode: 0,
+    }
+  } catch (error: any) {
+    return {
+      stdout: error.stdout || "",
+      stderr: error.stderr || error.message || "Unknown error",
+      exitCode: error.code || 1,
+    }
+  }
+}

AppImage/lib/utils.ts

@@ -0,0 +1,21 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatStorage(sizeInGB: number): string {
+  if (sizeInGB < 1) {
+    // Less than 1 GB, show in MB
+    const mb = sizeInGB * 1024
+    return `${mb % 1 === 0 ? mb.toFixed(0) : mb.toFixed(1)} MB`
+  } else if (sizeInGB < 1024) {
+    // Less than 1024 GB, show in GB
+    return `${sizeInGB % 1 === 0 ? sizeInGB.toFixed(0) : sizeInGB.toFixed(1)} GB`
+  } else {
+    // 1024 GB or more, show in TB
+    const tb = sizeInGB / 1024
+    return `${tb % 1 === 0 ? tb.toFixed(0) : tb.toFixed(1)} TB`
+  }
+}

AppImage/next.config.mjs

@@ -0,0 +1,30 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  trailingSlash: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+  experimental: {
+    esmExternals: 'loose',
+  },
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        net: false,
+        tls: false,
+      };
+    }
+    return config;
+  },
+};
+
+export default nextConfig;

AppImage/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "ProxMenux-Monitor",
+  "version": "1.0.2",
+  "description": "Proxmox System Monitoring Dashboard",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "export": "next build"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.5.1",
+    "geist": "^1.3.1",
+    "input-otp": "1.4.1",
+    "lucide-react": "^0.454.0",
+    "next": "15.1.6",
+    "next-themes": "^0.4.6",
+    "react": "^19",
+    "react-day-picker": "9.8.0",
+    "react-dom": "^19",
+    "react-hook-form": "^7.60.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "2.15.4",
+    "socket.io-client": "^4.8.1",
+    "sonner": "^1.7.4",
+    "swr": "^2.2.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0",
+    "zod": "3.25.67"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

AppImage/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

AppImage/public/icons/alpine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#0d597f"><path d="M23.25 38.81v-6.745l-4.855 4.864c.474.333.968.635 1.48.906.463.243.87.434 1.303.58s.782.24 1.13.304.66.093.95.096m24.822-.562c.045.037.092.07.142.1a2.77 2.77 0 0 0 .385.203 2.93 2.93 0 0 0 .637.194c.296.06.598.088.9.087.3 0 .608-.03.955-.087a7.24 7.24 0 0 0 1.138-.301 9.96 9.96 0 0 0 1.32-.579c.52-.274 1.02-.58 1.503-.918l-3.685-3.6-12.21-12.258-5.356 5.356-7.23-7.455-18.14 17.935a13.82 13.82 0 0 0 1.5.918c.47.246.91.434 1.317.58a7.18 7.18 0 0 0 1.135.301 5.53 5.53 0 0 0 .955.087c.302.001.604-.028.9-.087a3.29 3.29 0 0 0 .637-.194 2.49 2.49 0 0 0 .385-.197l.145-.104 8.193-8.193 2.924-2.808 8.106 8.106 2.837 2.912a1.29 1.29 0 0 0 .145.101 2.52 2.52 0 0 0 .385.2c.206.085.42.15.637.194.255.052.556.087.903.087.3 0 .608-.03.955-.087a6.89 6.89 0 0 0 1.138-.301 9.95 9.95 0 0 0 1.32-.579c.52-.274 1.02-.58 1.503-.918l-6.508-6.37 1.2-1.2 5.63 5.63 3.283 3.254m-.07-33.96l15.998 27.714L48.003 59.71H15.996L-.002 31.997 15.996 4.283z"/><path d="M38.02 30.65l-4.262-4.256.304-.304 4.3 4.244z"/></svg>

AppImage/public/icons/arch.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" version="1.0">
+  <defs>
+    <linearGradient xlink:href="#a" id="d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.39377 0 0 .39375 978.34969 416.9815)" x1="541.33502" y1="104.50665" x2="606.91248" y2="303.14029"/>
+    <linearGradient gradientUnits="userSpaceOnUse" id="a" y2="129.3468" x2="112.49853" y1="6.1372099" x1="112.49854" gradientTransform="translate(287 -83)">
+      <stop offset="0" style="stop-color:#fff;stop-opacity:0"/>
+      <stop offset="1" style="stop-color:#fff;stop-opacity:.27450982"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop style="stop-color:#00bdec" offset="0"/>
+      <stop style="stop-color:#40bfde" offset="1"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop style="stop-color:#6e6e6e" offset="0"/>
+      <stop style="stop-color:#4d4d4d" offset="1"/>
+    </linearGradient>
+  </defs>
+  <path style="fill:#1793d1" d="M128 0c-11.39482 27.937051-18.31337 46.237163-31 73.34375 7.7785 8.245207 17.33826 17.811753 32.84375 28.65625-16.66992-6.859577-28.03357-13.728504-36.53125-20.875C77.076039 115.00489 51.621645 163.24639 0 256c40.562707-23.41756 72.007597-37.86167 101.3125-43.375-1.25376-5.40435-1.923505-11.27752-1.875-17.375l.03125-1.28125c.64379-25.99398 14.16934-45.98224 30.1875-44.625 16.01815 1.35723 28.48754 23.53727 27.84375 49.53125-.12127 4.89622-.6905 9.60082-1.65625 13.96875C184.83328 218.51691 215.98162 232.89667 256 256c-7.89193-14.52962-14.96051-27.61983-21.6875-40.09375-10.59609-8.21269-21.64301-18.89743-44.1875-30.46875 15.4958 4.02645 26.60184 8.6825 35.25 13.875C156.97985 71.972668 151.45422 55.040376 128 0z" transform="matrix(1 0 0 1 -.000002 4e-8)"/>
+  <path style="fill:#fff;fill-opacity:.16568047" d="M818.22607 548.55277c-41.18143-55.89508-50.72685-100.94481-53.14467-111.70015 21.96737 50.6686 21.81733 51.28995 53.14467 111.70015z" transform="matrix(1.34737 0 0 1.34737 -902.40019 -586.944907)"/>
+  <path style="fill:url(#d);fill-opacity:1" d="M765.09805 436.43495c-1.05641 2.59705-2.08559 5.1172-3.06152 7.51465-1.08115 2.65585-2.10928 5.19128-3.13111 7.677-1.02174 2.48575-2.03439 4.91156-3.03833 7.30591-1.00398 2.39446-2.01068 4.76169-3.03833 7.14355-1.02758 2.38177-2.06156 4.78845-3.15429 7.23633-1.09273 2.44796-2.23335 4.94504-3.43262 7.53784-1.19937 2.59282-2.45641 5.27815-3.80371 8.09448-.18662.39008-.41312.83402-.60303 1.22925 5.75521 6.09563 12.84133 13.14976 24.28345 21.15234-12.34021-5.07792-20.76511-10.15751-27.06665-15.44677-.32717.66791-.61387 1.26431-.95093 1.94824-.44365.90024-.97632 1.92315-1.43799 2.85278-.80967 1.66032-1.65574 3.36576-2.52807 5.12574-.33524.66652-.62948 1.24283-.97413 1.92504-5.50733 11.05265-12.33962 24.28304-21.12915 40.72754 24.09557-13.57581 50.08533-33.16242 97.29615-16.30493-2.36708-4.48319-4.54319-8.68756-6.58692-12.64038-2.0437-3.95294-3.94246-7.6555-5.70556-11.15601-1.76297-3.50043-3.39212-6.80069-4.917-9.92675-1.52486-3.12599-2.93832-6.0765-4.26757-8.90625-1.32934-2.8297-2.58106-5.55264-3.75733-8.16407-1.17634-2.6114-2.29708-5.11315-3.36304-7.58422-1.06607-2.4712-2.08657-4.89718-3.08471-7.30591-.99823-2.4088-1.97267-4.81178-2.94556-7.23633-.34772-.86638-.69553-1.7689-1.0437-2.64404-2.66339-6.25269-5.3982-12.73163-8.55835-20.15503z" transform="matrix(1.34737 0 0 1.34737 -902.40019 -586.944907)"/>
+</svg>

AppImage/public/icons/debian.svg

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 10.0, SVG Export Plug-In . SVG Version: 3.0.0 Build 77)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
+	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
+]>
+<svg 
+	 xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" i:viewOrigin="262 450" i:rulerOrigin="0 0" i:pageBounds="0 792 612 0"
+	 xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 width="87.041" height="108.445" viewBox="0 0 87.041 108.445" overflow="visible" enable-background="new 0 0 87.041 108.445"
+	 xml:space="preserve">
+	<metadata>
+		<variableSets  xmlns="&ns_vars;">
+			<variableSet  varSetName="binding1" locked="none">
+				<variables></variables>
+				<v:sampleDataSets  xmlns="&ns_custom;" xmlns:v="&ns_vars;"></v:sampleDataSets>
+			</variableSet>
+		</variableSets>
+		<sfw  xmlns="&ns_sfw;">
+			<slices></slices>
+			<sliceSourceBounds  y="341.555" x="262" width="87.041" height="108.445" bottomLeftOrigin="true"></sliceSourceBounds>
+		</sfw>
+	</metadata>
+	<g id="Layer_1" i:layer="yes" i:dimmedPercent="50" i:rgbTrio="#4F008000FFFF">
+		<g>
+			<path i:knockout="Off" fill="#A80030" d="M51.986,57.297c-1.797,0.025,0.34,0.926,2.686,1.287
+				c0.648-0.506,1.236-1.018,1.76-1.516C54.971,57.426,53.484,57.434,51.986,57.297"/>
+			<path i:knockout="Off" fill="#A80030" d="M61.631,54.893c1.07-1.477,1.85-3.094,2.125-4.766c-0.24,1.192-0.887,2.221-1.496,3.307
+				c-3.359,2.115-0.316-1.256-0.002-2.537C58.646,55.443,61.762,53.623,61.631,54.893"/>
+			<path i:knockout="Off" fill="#A80030" d="M65.191,45.629c0.217-3.236-0.637-2.213-0.924-0.978
+				C64.602,44.825,64.867,46.932,65.191,45.629"/>
+			<path i:knockout="Off" fill="#A80030" d="M45.172,1.399c0.959,0.172,2.072,0.304,1.916,0.533
+				C48.137,1.702,48.375,1.49,45.172,1.399"/>
+			<path i:knockout="Off" fill="#A80030" d="M47.088,1.932l-0.678,0.14l0.631-0.056L47.088,1.932"/>
+			<path i:knockout="Off" fill="#A80030" d="M76.992,46.856c0.107,2.906-0.85,4.316-1.713,6.812l-1.553,0.776
+				c-1.271,2.468,0.123,1.567-0.787,3.53c-1.984,1.764-6.021,5.52-7.313,5.863c-0.943-0.021,0.639-1.113,0.846-1.541
+				c-2.656,1.824-2.131,2.738-6.193,3.846l-0.119-0.264c-10.018,4.713-23.934-4.627-23.751-17.371
+				c-0.107,0.809-0.304,0.607-0.526,0.934c-0.517-6.557,3.028-13.143,9.007-15.832c5.848-2.895,12.704-1.707,16.893,2.197
+				c-2.301-3.014-6.881-6.209-12.309-5.91c-5.317,0.084-10.291,3.463-11.951,7.131c-2.724,1.715-3.04,6.611-4.227,7.507
+				C31.699,56.271,36.3,61.342,44.083,67.307c1.225,0.826,0.345,0.951,0.511,1.58c-2.586-1.211-4.954-3.039-6.901-5.277
+				c1.033,1.512,2.148,2.982,3.589,4.137c-2.438-0.826-5.695-5.908-6.646-6.115c4.203,7.525,17.052,13.197,23.78,10.383
+				c-3.113,0.115-7.068,0.064-10.566-1.229c-1.469-0.756-3.467-2.322-3.11-2.615c9.182,3.43,18.667,2.598,26.612-3.771
+				c2.021-1.574,4.229-4.252,4.867-4.289c-0.961,1.445,0.164,0.695-0.574,1.971c2.014-3.248-0.875-1.322,2.082-5.609l1.092,1.504
+				c-0.406-2.696,3.348-5.97,2.967-10.234c0.861-1.304,0.961,1.403,0.047,4.403c1.268-3.328,0.334-3.863,0.66-6.609
+				c0.352,0.923,0.814,1.904,1.051,2.878c-0.826-3.216,0.848-5.416,1.262-7.285c-0.408-0.181-1.275,1.422-1.473-2.377
+				c0.029-1.65,0.459-0.865,0.625-1.271c-0.324-0.186-1.174-1.451-1.691-3.877c0.375-0.57,1.002,1.478,1.512,1.562
+				c-0.328-1.929-0.893-3.4-0.916-4.88c-1.49-3.114-0.527,0.415-1.736-1.337c-1.586-4.947,1.316-1.148,1.512-3.396
+				c2.404,3.483,3.775,8.881,4.404,11.117c-0.48-2.726-1.256-5.367-2.203-7.922c0.73,0.307-1.176-5.609,0.949-1.691
+				c-2.27-8.352-9.715-16.156-16.564-19.818c0.838,0.767,1.896,1.73,1.516,1.881c-3.406-2.028-2.807-2.186-3.295-3.043
+				c-2.775-1.129-2.957,0.091-4.795,0.002c-5.23-2.774-6.238-2.479-11.051-4.217l0.219,1.023c-3.465-1.154-4.037,0.438-7.782,0.004
+				c-0.228-0.178,1.2-0.644,2.375-0.815c-3.35,0.442-3.193-0.66-6.471,0.122c0.808-0.567,1.662-0.942,2.524-1.424
+				c-2.732,0.166-6.522,1.59-5.352,0.295c-4.456,1.988-12.37,4.779-16.811,8.943l-0.14-0.933c-2.035,2.443-8.874,7.296-9.419,10.46
+				l-0.544,0.127c-1.059,1.793-1.744,3.825-2.584,5.67c-1.385,2.36-2.03,0.908-1.833,1.278c-2.724,5.523-4.077,10.164-5.246,13.97
+				c0.833,1.245,0.02,7.495,0.335,12.497c-1.368,24.704,17.338,48.69,37.785,54.228c2.997,1.072,7.454,1.031,11.245,1.141
+				c-4.473-1.279-5.051-0.678-9.408-2.197c-3.143-1.48-3.832-3.17-6.058-5.102l0.881,1.557c-4.366-1.545-2.539-1.912-6.091-3.037
+				l0.941-1.229c-1.415-0.107-3.748-2.385-4.386-3.646l-1.548,0.061c-1.86-2.295-2.851-3.949-2.779-5.23l-0.5,0.891
+				c-0.567-0.973-6.843-8.607-3.587-6.83c-0.605-0.553-1.409-0.9-2.281-2.484l0.663-0.758c-1.567-2.016-2.884-4.6-2.784-5.461
+				c0.836,1.129,1.416,1.34,1.99,1.533c-3.957-9.818-4.179-0.541-7.176-9.994l0.634-0.051c-0.486-0.732-0.781-1.527-1.172-2.307
+				l0.276-2.75C4.667,58.121,6.719,47.409,7.13,41.534c0.285-2.389,2.378-4.932,3.97-8.92l-0.97-0.167
+				c1.854-3.234,10.586-12.988,14.63-12.486c1.959-2.461-0.389-0.009-0.772-0.629c4.303-4.453,5.656-3.146,8.56-3.947
+				c3.132-1.859-2.688,0.725-1.203-0.709c5.414-1.383,3.837-3.144,10.9-3.846c0.745,0.424-1.729,0.655-2.35,1.205
+				c4.511-2.207,14.275-1.705,20.617,1.225c7.359,3.439,15.627,13.605,15.953,23.17l0.371,0.1
+				c-0.188,3.802,0.582,8.199-0.752,12.238L76.992,46.856"/>
+			<path i:knockout="Off" fill="#A80030" d="M32.372,59.764l-0.252,1.26c1.181,1.604,2.118,3.342,3.626,4.596
+				C34.661,63.502,33.855,62.627,32.372,59.764"/>
+			<path i:knockout="Off" fill="#A80030" d="M35.164,59.654c-0.625-0.691-0.995-1.523-1.409-2.352
+				c0.396,1.457,1.207,2.709,1.962,3.982L35.164,59.654"/>
+			<path i:knockout="Off" fill="#A80030" d="M84.568,48.916l-0.264,0.662c-0.484,3.438-1.529,6.84-3.131,9.994
+				C82.943,56.244,84.088,52.604,84.568,48.916"/>
+			<path i:knockout="Off" fill="#A80030" d="M45.527,0.537C46.742,0.092,48.514,0.293,49.803,0c-1.68,0.141-3.352,0.225-5.003,0.438
+				L45.527,0.537"/>
+			<path i:knockout="Off" fill="#A80030" d="M2.872,23.219c0.28,2.592-1.95,3.598,0.494,1.889
+				C4.676,22.157,2.854,24.293,2.872,23.219"/>
+			<path i:knockout="Off" fill="#A80030" d="M0,35.215c0.563-1.728,0.665-2.766,0.88-3.766C-0.676,33.438,0.164,33.862,0,35.215"/>
+		</g>
+	</g>
+</svg>

AppImage/public/icons/ubuntu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid"><path d="M32 16c0 8.836-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0s16 7.164 16 16z" fill="#dd4814"/><path d="M5.12 13.864c-1.18 0-2.137.956-2.137 2.137s.956 2.136 2.137 2.136S7.257 17.18 7.257 16 6.3 13.864 5.12 13.864zm15.252 9.71c-1.022.6-1.372 1.896-.782 2.917s1.895 1.372 2.917.782 1.372-1.895.782-2.917-1.896-1.37-2.917-.782zM9.76 16a6.23 6.23 0 0 1 2.653-5.105L10.852 8.28a9.3 9.3 0 0 0-3.838 5.394C7.69 14.224 8.12 15.06 8.12 16s-.432 1.776-1.106 2.326c.577 2.237 1.968 4.146 3.838 5.395l1.562-2.616A6.23 6.23 0 0 1 9.761 16zM16 9.76a6.24 6.24 0 0 1 6.215 5.687l3.044-.045a9.25 9.25 0 0 0-2.757-6.019c-.812.307-1.75.26-2.56-.208a2.99 2.99 0 0 1-1.461-2.118C17.7 6.84 16.86 6.72 16 6.72c-1.477 0-2.873.347-4.113.96l1.484 2.66c.8-.372 1.69-.58 2.628-.58zm0 12.48c-.94 0-1.83-.21-2.628-.58l-1.484 2.66c1.24.614 2.636.96 4.113.96a9.28 9.28 0 0 0 2.479-.338c.14-.858.65-1.648 1.46-2.118s1.75-.514 2.56-.207a9.25 9.25 0 0 0 2.757-6.019l-3.045-.045A6.24 6.24 0 0 1 16 22.24zm4.372-13.813c1.022.6 2.328.24 2.917-.78s.24-2.328-.78-2.918-2.328-.24-2.918.783-.24 2.327.782 2.917z" fill="#fff"/></svg>

AppImage/public/images/onboarding/README.md

@@ -0,0 +1,23 @@
+# Onboarding Images
+
+Place your screenshot images here with the following names:
+
+- `imagen1.png` - Overview section screenshot
+- `imagen2.png` - Storage section screenshot
+- `imagen3.png` - Network section screenshot
+- `imagen4.png` - VMs & LXCs section screenshot
+- `imagen5.png` - Hardware section screenshot
+- `imagen6.png` - System Logs section screenshot
+
+## Image Guidelines
+
+- **Format**: PNG or JPG
+- **Recommended size**: 1200x800px or similar aspect ratio
+- **Quality**: High quality screenshots showing the main features of each section
+- **Content**: Capture the full section with representative data
+
+## Notes
+
+- The last slide (Future Updates) doesn't need an image as it uses an icon
+- If an image fails to load, the component will show a fallback icon
+- Images should be optimized for web (compressed but still high quality)

AppImage/public/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "ProxMenux Monitor",
+  "short_name": "ProxMenux",
+  "description": "Proxmox System Dashboard and Monitor",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#2b2f36",
+  "theme_color": "#2b2f36",
+  "icons": [
+    {
+      "src": "/images/proxmenux-logo.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }
+  ]
+}

AppImage/scripts/AppRun

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+# ProxMenux Monitor AppImage Entry Point
+# This script is executed when the AppImage is run
+
+# Get the directory where this AppImage is mounted
+APPDIR="$(dirname "$(readlink -f "${0}")")"
+
+export PATH="${APPDIR}/usr/bin:${PATH}"
+export LD_LIBRARY_PATH="${APPDIR}/usr/lib/x86_64-linux-gnu:${APPDIR}/usr/lib:${APPDIR}/lib/x86_64-linux-gnu:${APPDIR}/lib:${LD_LIBRARY_PATH}"
+export PYTHONPATH="${APPDIR}/usr/lib/python3/dist-packages:${APPDIR}/usr/lib/python3/site-packages:${PYTHONPATH}"
+
+# Change to the AppImage directory
+cd "${APPDIR}"
+
+# Check for translation argument
+if [[ "$1" == "--translate" ]]; then
+    echo "🌐 Starting ProxMenux Translation Service..."
+    exec python3 "${APPDIR}/usr/bin/translate_cli.py" "${@:2}"
+else
+    echo "🚀 Starting ProxMenux Monitor Dashboard..."
+    echo ""
+    
+    echo "🔧 Hardware monitoring tools:"
+    [ -x "${APPDIR}/usr/bin/ipmitool" ] && echo "  ✅ ipmitool available" || echo "  ⚠️  ipmitool not available"
+    [ -x "${APPDIR}/usr/bin/sensors" ] && echo "  ✅ sensors available" || echo "  ⚠️  sensors not available"
+    [ -x "${APPDIR}/usr/bin/upsc" ] && echo "  ✅ upsc available" || echo "  ⚠️  upsc not available"
+    
+    if [ -x "${APPDIR}/usr/bin/ipmitool" ]; then
+        if ldd "${APPDIR}/usr/bin/ipmitool" 2>/dev/null | grep -q "libfreeipmi.so.17 => not found"; then
+            echo "  ⚠️  libfreeipmi.so.17 not found - ipmitool may not work"
+        elif ldd "${APPDIR}/usr/bin/ipmitool" 2>/dev/null | grep -q "libfreeipmi.so.17"; then
+            echo "  ✅ libfreeipmi.so.17 loaded successfully"
+        fi
+    fi
+    
+    echo ""
+    
+    # Start the Flask server
+    exec python3 "${APPDIR}/usr/bin/flask_server.py"
+fi

AppImage/scripts/auth_manager.py

@@ -0,0 +1,504 @@
+"""
+Authentication Manager Module
+Handles all authentication-related operations including:
+- Loading/saving auth configuration
+- Password hashing and verification
+- JWT token generation and validation
+- Auth status checking
+- Two-Factor Authentication (2FA/TOTP)
+"""
+
+import os
+import json
+import hashlib
+import secrets
+from datetime import datetime, timedelta
+from pathlib import Path
+
+try:
+    import jwt
+    JWT_AVAILABLE = True
+except ImportError:
+    JWT_AVAILABLE = False
+    print("Warning: PyJWT not available. Authentication features will be limited.")
+
+try:
+    import pyotp
+    import segno
+    import io
+    import base64
+    TOTP_AVAILABLE = True
+except ImportError:
+    TOTP_AVAILABLE = False
+    print("Warning: pyotp/segno not available. 2FA features will be disabled.")
+
+# Configuration
+CONFIG_DIR = Path.home() / ".config" / "proxmenux-monitor"
+AUTH_CONFIG_FILE = CONFIG_DIR / "auth.json"
+JWT_SECRET = "proxmenux-monitor-secret-key-change-in-production"
+JWT_ALGORITHM = "HS256"
+TOKEN_EXPIRATION_HOURS = 24
+
+
+def ensure_config_dir():
+    """Ensure the configuration directory exists"""
+    CONFIG_DIR.mkdir(parents=True, exist_ok=True)
+
+
+def load_auth_config():
+    """
+    Load authentication configuration from file
+    Returns dict with structure:
+    {
+        "enabled": bool,
+        "username": str,
+        "password_hash": str,
+        "declined": bool,
+        "configured": bool,
+        "totp_enabled": bool,  # 2FA enabled flag
+        "totp_secret": str,    # TOTP secret key
+        "backup_codes": list   # List of backup codes
+    }
+    """
+    if not AUTH_CONFIG_FILE.exists():
+        return {
+            "enabled": False,
+            "username": None,
+            "password_hash": None,
+            "declined": False,
+            "configured": False,
+            "totp_enabled": False,
+            "totp_secret": None,
+            "backup_codes": []
+        }
+    
+    try:
+        with open(AUTH_CONFIG_FILE, 'r') as f:
+            config = json.load(f)
+            # Ensure all required fields exist
+            config.setdefault("declined", False)
+            config.setdefault("configured", config.get("enabled", False) or config.get("declined", False))
+            config.setdefault("totp_enabled", False)
+            config.setdefault("totp_secret", None)
+            config.setdefault("backup_codes", [])
+            return config
+    except Exception as e:
+        print(f"Error loading auth config: {e}")
+        return {
+            "enabled": False,
+            "username": None,
+            "password_hash": None,
+            "declined": False,
+            "configured": False,
+            "totp_enabled": False,
+            "totp_secret": None,
+            "backup_codes": []
+        }
+
+
+def save_auth_config(config):
+    """Save authentication configuration to file"""
+    ensure_config_dir()
+    try:
+        with open(AUTH_CONFIG_FILE, 'w') as f:
+            json.dump(config, f, indent=2)
+        return True
+    except Exception as e:
+        print(f"Error saving auth config: {e}")
+        return False
+
+
+def hash_password(password):
+    """Hash a password using SHA-256"""
+    return hashlib.sha256(password.encode()).hexdigest()
+
+
+def verify_password(password, password_hash):
+    """Verify a password against its hash"""
+    return hash_password(password) == password_hash
+
+
+def generate_token(username):
+    """Generate a JWT token for the given username"""
+    if not JWT_AVAILABLE:
+        return None
+    
+    payload = {
+        'username': username,
+        'exp': datetime.utcnow() + timedelta(hours=TOKEN_EXPIRATION_HOURS),
+        'iat': datetime.utcnow()
+    }
+    
+    try:
+        token = jwt.encode(payload, JWT_SECRET, algorithm=JWT_ALGORITHM)
+        return token
+    except Exception as e:
+        print(f"Error generating token: {e}")
+        return None
+
+
+def verify_token(token):
+    """
+    Verify a JWT token
+    Returns username if valid, None otherwise
+    """
+    if not JWT_AVAILABLE or not token:
+        return None
+    
+    try:
+        payload = jwt.decode(token, JWT_SECRET, algorithms=[JWT_ALGORITHM])
+        return payload.get('username')
+    except jwt.ExpiredSignatureError:
+        print("Token has expired")
+        return None
+    except jwt.InvalidTokenError as e:
+        print(f"Invalid token: {e}")
+        return None
+
+
+def get_auth_status():
+    """
+    Get current authentication status
+    Returns dict with:
+    {
+        "auth_enabled": bool,
+        "auth_configured": bool,
+        "declined": bool,
+        "username": str or None,
+        "authenticated": bool,
+        "totp_enabled": bool  # 2FA status
+    }
+    """
+    config = load_auth_config()
+    return {
+        "auth_enabled": config.get("enabled", False),
+        "auth_configured": config.get("configured", False),
+        "declined": config.get("declined", False),
+        "username": config.get("username") if config.get("enabled") else None,
+        "authenticated": False,
+        "totp_enabled": config.get("totp_enabled", False)  # Include 2FA status
+    }
+
+
+def setup_auth(username, password):
+    """
+    Set up authentication with username and password
+    Returns (success: bool, message: str)
+    """
+    if not username or not password:
+        return False, "Username and password are required"
+    
+    if len(password) < 6:
+        return False, "Password must be at least 6 characters"
+    
+    config = {
+        "enabled": True,
+        "username": username,
+        "password_hash": hash_password(password),
+        "declined": False,
+        "configured": True,
+        "totp_enabled": False,
+        "totp_secret": None,
+        "backup_codes": []
+    }
+    
+    if save_auth_config(config):
+        return True, "Authentication configured successfully"
+    else:
+        return False, "Failed to save authentication configuration"
+
+
+def decline_auth():
+    """
+    Mark authentication as declined by user
+    Returns (success: bool, message: str)
+    """
+    config = load_auth_config()
+    config["enabled"] = False
+    config["declined"] = True
+    config["configured"] = True
+    config["username"] = None
+    config["password_hash"] = None
+    config["totp_enabled"] = False
+    config["totp_secret"] = None
+    config["backup_codes"] = []
+    
+    if save_auth_config(config):
+        return True, "Authentication declined"
+    else:
+        return False, "Failed to save configuration"
+
+
+def disable_auth():
+    """
+    Disable authentication (different from decline - can be re-enabled)
+    Returns (success: bool, message: str)
+    """
+    config = load_auth_config()
+    config["enabled"] = False
+    config["username"] = None
+    config["password_hash"] = None
+    config["declined"] = False
+    config["configured"] = False
+    config["totp_enabled"] = False
+    config["totp_secret"] = None
+    config["backup_codes"] = []
+    
+    if save_auth_config(config):
+        return True, "Authentication disabled"
+    else:
+        return False, "Failed to save configuration"
+
+
+def enable_auth():
+    """
+    Enable authentication (must already be configured)
+    Returns (success: bool, message: str)
+    """
+    config = load_auth_config()
+    
+    if not config.get("username") or not config.get("password_hash"):
+        return False, "Authentication not configured. Please set up username and password first."
+    
+    config["enabled"] = True
+    config["declined"] = False
+    
+    if save_auth_config(config):
+        return True, "Authentication enabled"
+    else:
+        return False, "Failed to save configuration"
+
+
+def change_password(old_password, new_password):
+    """
+    Change the authentication password
+    Returns (success: bool, message: str)
+    """
+    config = load_auth_config()
+    
+    if not config.get("enabled"):
+        return False, "Authentication is not enabled"
+    
+    if not verify_password(old_password, config.get("password_hash", "")):
+        return False, "Current password is incorrect"
+    
+    if len(new_password) < 6:
+        return False, "New password must be at least 6 characters"
+    
+    config["password_hash"] = hash_password(new_password)
+    
+    if save_auth_config(config):
+        return True, "Password changed successfully"
+    else:
+        return False, "Failed to save new password"
+
+
+def generate_totp_secret():
+    """Generate a new TOTP secret key"""
+    if not TOTP_AVAILABLE:
+        return None
+    return pyotp.random_base32()
+
+
+def generate_totp_qr(username, secret):
+    """
+    Generate a QR code for TOTP setup
+    Returns base64 encoded SVG image
+    """
+    if not TOTP_AVAILABLE:
+        return None
+    
+    try:
+        # Create TOTP URI
+        totp = pyotp.TOTP(secret)
+        uri = totp.provisioning_uri(
+            name=username,
+            issuer_name="ProxMenux Monitor"
+        )
+        
+        qr = segno.make(uri)
+        
+        # Convert to SVG string
+        buffer = io.BytesIO()
+        qr.save(buffer, kind='svg', scale=4, border=2)
+        svg_bytes = buffer.getvalue()
+        svg_content = svg_bytes.decode('utf-8')
+        
+        # Return as data URL
+        svg_base64 = base64.b64encode(svg_content.encode()).decode('utf-8')
+        return f"data:image/svg+xml;base64,{svg_base64}"
+    except Exception as e:
+        print(f"Error generating QR code: {e}")
+        return None
+
+
+def generate_backup_codes(count=8):
+    """Generate backup codes for 2FA recovery"""
+    codes = []
+    for _ in range(count):
+        # Generate 8-character alphanumeric code
+        code = ''.join(secrets.choice('ABCDEFGHJKLMNPQRSTUVWXYZ23456789') for _ in range(8))
+        # Format as XXXX-XXXX for readability
+        formatted = f"{code[:4]}-{code[4:]}"
+        codes.append({
+            "code": hashlib.sha256(formatted.encode()).hexdigest(),
+            "used": False
+        })
+    return codes
+
+
+def setup_totp(username):
+    """
+    Set up TOTP for a user
+    Returns (success: bool, secret: str, qr_code: str, backup_codes: list, message: str)
+    """
+    if not TOTP_AVAILABLE:
+        return False, None, None, None, "2FA is not available (pyotp/segno not installed)"
+    
+    config = load_auth_config()
+    
+    if not config.get("enabled"):
+        return False, None, None, None, "Authentication must be enabled first"
+    
+    if config.get("username") != username:
+        return False, None, None, None, "Invalid username"
+    
+    # Generate new secret and backup codes
+    secret = generate_totp_secret()
+    qr_code = generate_totp_qr(username, secret)
+    backup_codes_plain = []
+    backup_codes_hashed = generate_backup_codes()
+    
+    # Generate plain text backup codes for display (only returned once)
+    for i in range(8):
+        code = ''.join(secrets.choice('ABCDEFGHJKLMNPQRSTUVWXYZ23456789') for _ in range(8))
+        formatted = f"{code[:4]}-{code[4:]}"
+        backup_codes_plain.append(formatted)
+        backup_codes_hashed[i]["code"] = hashlib.sha256(formatted.encode()).hexdigest()
+    
+    # Store secret and hashed backup codes (not enabled yet until verified)
+    config["totp_secret"] = secret
+    config["backup_codes"] = backup_codes_hashed
+    
+    if save_auth_config(config):
+        return True, secret, qr_code, backup_codes_plain, "2FA setup initiated"
+    else:
+        return False, None, None, None, "Failed to save 2FA configuration"
+
+
+def verify_totp(username, token, use_backup=False):
+    """
+    Verify a TOTP token or backup code
+    Returns (success: bool, message: str)
+    """
+    if not TOTP_AVAILABLE and not use_backup:
+        return False, "2FA is not available"
+    
+    config = load_auth_config()
+    
+    if not config.get("totp_enabled"):
+        return False, "2FA is not enabled"
+    
+    if config.get("username") != username:
+        return False, "Invalid username"
+    
+    # Check backup code
+    if use_backup:
+        token_hash = hashlib.sha256(token.encode()).hexdigest()
+        for backup_code in config.get("backup_codes", []):
+            if backup_code["code"] == token_hash and not backup_code["used"]:
+                backup_code["used"] = True
+                save_auth_config(config)
+                return True, "Backup code accepted"
+        return False, "Invalid or already used backup code"
+    
+    # Check TOTP token
+    totp = pyotp.TOTP(config.get("totp_secret"))
+    if totp.verify(token, valid_window=1):  # Allow 1 time step tolerance
+        return True, "2FA verification successful"
+    else:
+        return False, "Invalid 2FA code"
+
+
+def enable_totp(username, verification_token):
+    """
+    Enable TOTP after successful verification
+    Returns (success: bool, message: str)
+    """
+    if not TOTP_AVAILABLE:
+        return False, "2FA is not available"
+    
+    config = load_auth_config()
+    
+    if not config.get("totp_secret"):
+        return False, "2FA has not been set up. Please set up 2FA first."
+    
+    if config.get("username") != username:
+        return False, "Invalid username"
+    
+    # Verify the token before enabling
+    totp = pyotp.TOTP(config.get("totp_secret"))
+    if not totp.verify(verification_token, valid_window=1):
+        return False, "Invalid verification code. Please try again."
+    
+    config["totp_enabled"] = True
+    
+    if save_auth_config(config):
+        return True, "2FA enabled successfully"
+    else:
+        return False, "Failed to enable 2FA"
+
+
+def disable_totp(username, password):
+    """
+    Disable TOTP (requires password confirmation)
+    Returns (success: bool, message: str)
+    """
+    config = load_auth_config()
+    
+    if config.get("username") != username:
+        return False, "Invalid username"
+    
+    if not verify_password(password, config.get("password_hash", "")):
+        return False, "Invalid password"
+    
+    config["totp_enabled"] = False
+    config["totp_secret"] = None
+    config["backup_codes"] = []
+    
+    if save_auth_config(config):
+        return True, "2FA disabled successfully"
+    else:
+        return False, "Failed to disable 2FA"
+
+
+def authenticate(username, password, totp_token=None):
+    """
+    Authenticate a user with username, password, and optional TOTP
+    Returns (success: bool, token: str or None, requires_totp: bool, message: str)
+    """
+    config = load_auth_config()
+    
+    if not config.get("enabled"):
+        return False, None, False, "Authentication is not enabled"
+    
+    if username != config.get("username"):
+        return False, None, False, "Invalid username or password"
+    
+    if not verify_password(password, config.get("password_hash", "")):
+        return False, None, False, "Invalid username or password"
+    
+    if config.get("totp_enabled"):
+        if not totp_token:
+            return False, None, True, "2FA code required"
+        
+        # Verify TOTP token or backup code
+        success, message = verify_totp(username, totp_token, use_backup=len(totp_token) == 9)  # Backup codes are formatted XXXX-XXXX
+        if not success:
+            return False, None, True, message
+    
+    token = generate_token(username)
+    if token:
+        return True, token, False, "Authentication successful"
+    else:
+        return False, None, False, "Failed to generate authentication token"

AppImage/scripts/build_appimage.sh

@@ -0,0 +1,492 @@
+#!/bin/bash
+
+# ProxMenux Monitor AppImage Builder
+# This script creates a single AppImage with Flask server, Next.js dashboard, and translation support
+
+set -e
+
+WORK_DIR="/tmp/proxmenux_build"
+APP_DIR="$WORK_DIR/ProxMenux.AppDir"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+DIST_DIR="$SCRIPT_DIR/../dist"
+APPIMAGE_ROOT="$SCRIPT_DIR/.."
+
+VERSION=$(node -p "require('$APPIMAGE_ROOT/package.json').version")
+APPIMAGE_NAME="ProxMenux-${VERSION}.AppImage"
+
+echo "🚀 Building ProxMenux Monitor AppImage v${VERSION} with hardware monitoring tools..."
+
+# Clean and create work directory
+rm -rf "$WORK_DIR"
+mkdir -p "$APP_DIR"
+mkdir -p "$DIST_DIR"
+
+# Download appimagetool if not exists
+if [ ! -f "$WORK_DIR/appimagetool" ]; then
+    echo "📥 Downloading appimagetool..."
+    wget -q "https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage" -O "$WORK_DIR/appimagetool"
+    chmod +x "$WORK_DIR/appimagetool"
+fi
+
+# Create directory structure
+mkdir -p "$APP_DIR/usr/bin"
+mkdir -p "$APP_DIR/usr/lib/python3/dist-packages"
+mkdir -p "$APP_DIR/usr/share/applications"
+mkdir -p "$APP_DIR/usr/share/icons/hicolor/256x256/apps"
+mkdir -p "$APP_DIR/web"
+
+echo "🔨 Building Next.js application..."
+cd "$APPIMAGE_ROOT"
+if [ ! -f "package.json" ]; then
+    echo "❌ Error: package.json not found in AppImage directory"
+    exit 1
+fi
+
+# Install dependencies if node_modules doesn't exist
+if [ ! -d "node_modules" ]; then
+    echo "📦 Installing dependencies..."
+    npm install
+fi
+
+echo "🏗️  Building Next.js static export..."
+npm run export
+
+echo "🔍 Checking export results..."
+if [ -d "out" ]; then
+    echo "✅ Export directory found"
+    echo "📁 Contents of out directory:"
+    ls -la out/
+    if [ -f "out/index.html" ]; then
+        echo "✅ index.html found in out directory"
+    else
+        echo "❌ index.html NOT found in out directory"
+        echo "📁 Looking for HTML files:"
+        find out/ -name "*.html" -type f || echo "No HTML files found"
+    fi
+else
+    echo "❌ Error: Next.js export failed - out directory not found"
+    echo "📁 Current directory contents:"
+    ls -la
+    echo "📁 Looking for any build outputs:"
+    find . -name "*.html" -type f 2>/dev/null || echo "No HTML files found anywhere"
+    exit 1
+fi
+
+# Return to script directory
+cd "$SCRIPT_DIR"
+
+# Copy Flask server
+echo "📋 Copying Flask server..."
+cp "$SCRIPT_DIR/flask_server.py" "$APP_DIR/usr/bin/"
+cp "$SCRIPT_DIR/flask_auth_routes.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  flask_auth_routes.py not found"
+cp "$SCRIPT_DIR/auth_manager.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  auth_manager.py not found"
+cp "$SCRIPT_DIR/jwt_middleware.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  jwt_middleware.py not found"
+cp "$SCRIPT_DIR/health_monitor.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  health_monitor.py not found"
+cp "$SCRIPT_DIR/health_persistence.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  health_persistence.py not found"
+cp "$SCRIPT_DIR/flask_health_routes.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  flask_health_routes.py not found"
+cp "$SCRIPT_DIR/flask_proxmenux_routes.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  flask_proxmenux_routes.py not found"
+cp "$SCRIPT_DIR/flask_terminal_routes.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  flask_terminal_routes.py not found"
+cp "$SCRIPT_DIR/hardware_monitor.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  hardware_monitor.py not found"
+cp "$SCRIPT_DIR/proxmox_storage_monitor.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  proxmox_storage_monitor.py not found"
+cp "$SCRIPT_DIR/flask_script_runner.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  flask_script_runner.py not found"
+
+echo "📋 Adding translation support..."
+cat > "$APP_DIR/usr/bin/translate_cli.py" << 'PYEOF'
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+ProxMenux translate CLI
+stdin JSON -> {"text":"...", "dest_lang":"es", "context":"...", "cache_file":"/usr/local/share/proxmenux/cache.json"}
+stdout JSON -> {"success":true,"text":"..."} or {"success":false,"error":"..."}
+"""
+import sys, json, re
+from pathlib import Path
+
+# Ensure embedded site-packages are discoverable
+HERE = Path(__file__).resolve().parents[2]  # .../AppDir
+DIST = HERE / "usr" / "lib" / "python3" / "dist-packages"
+SITE = HERE / "usr" / "lib" / "python3" / "site-packages"
+for p in (str(DIST), str(SITE)):
+    if p not in sys.path:
+        sys.path.insert(0, p)
+
+# Python 3.13 compat: inline 'cgi' shim
+try:
+    import cgi
+except Exception:
+    import types, html
+    def _parse_header(value: str):
+        value = str(value or "")
+        parts = [p.strip() for p in value.split(";")]
+        if not parts:
+            return "", {}
+        key = parts[0].lower()
+        params = {}
+        for item in parts[1:]:
+            if not item:
+                continue
+            if "=" in item:
+                k, v = item.split("=", 1)
+                k = k.strip().lower()
+                v = v.strip().strip('"').strip("'")
+                params[k] = v
+            else:
+                params[item.strip().lower()] = ""
+        return key, params
+    cgi = types.SimpleNamespace(parse_header=_parse_header, escape=html.escape)
+
+try:
+    from googletrans import Translator
+except Exception as e:
+    print(json.dumps({"success": False, "error": f"ImportError: {e}"}))
+    sys.exit(0)
+
+def load_json_stdin():
+    try:
+        return json.load(sys.stdin)
+    except Exception as e:
+        print(json.dumps({"success": False, "error": f"Invalid JSON input: {e}"}))
+        sys.exit(0)
+
+def ensure_cache(path: Path):
+    try:
+        path.parent.mkdir(parents=True, exist_ok=True)
+        if not path.exists():
+            path.write_text("{}", encoding="utf-8")
+        json.loads(path.read_text(encoding="utf-8") or "{}")
+    except Exception:
+        path.write_text("{}", encoding="utf-8")
+
+def read_cache(path: Path):
+    try:
+        return json.loads(path.read_text(encoding="utf-8") or "{}")
+    except Exception:
+        return {}
+
+def write_cache(path: Path, cache: dict):
+    tmp = path.with_suffix(".tmp")
+    tmp.write_text(json.dumps(cache, ensure_ascii=False), encoding="utf-8")
+    tmp.replace(path)
+
+def clean_translated(s: str) -> str:
+    s = re.sub(r'^.*?(Translate:|Traducir:|Traduire:|Übersetzen:|Tradurre:|Traduzir:|翻译:|翻訳:)', '', s, flags=re.IGNORECASE | re.DOTALL).strip()
+    s = re.sub(r'^.*?(Context:|Contexto:|Contexte:|Kontext:|Contesto:|上下文：|コンテキスト：).*?:', '', s, flags=re.IGNORECASE | re.DOTALL).strip()
+    return s.strip()
+
+def main():
+    req = load_json_stdin()
+    text = req.get("text", "")
+    dest = req.get("dest_lang", "en") or "en"
+    context = req.get("context", "")
+    cache_file = Path(req.get("cache_file", "")) if req.get("cache_file") else None
+
+    if dest == "en":
+        print(json.dumps({"success": True, "text": text}))
+        return
+
+    cache = {}
+    if cache_file:
+        ensure_cache(cache_file)
+        cache = read_cache(cache_file)
+        if text in cache and (dest in cache[text] or "notranslate" in cache[text]):
+            found = cache[text].get(dest) or cache[text].get("notranslate")
+            print(json.dumps({"success": True, "text": found}))
+            return
+
+    try:
+        full = (context + " " + text).strip() if context else text
+        tr = Translator()
+        result = tr.translate(full, dest=dest).text
+        result = clean_translated(result)
+
+        if cache_file:
+            cache.setdefault(text, {})
+            cache[text][dest] = result
+            write_cache(cache_file, cache)
+
+        print(json.dumps({"success": True, "text": result}))
+    except Exception as e:
+        print(json.dumps({"success": False, "error": str(e)}))
+
+if __name__ == "__main__":
+    main()
+PYEOF
+
+chmod +x "$APP_DIR/usr/bin/translate_cli.py"
+
+# Copy Next.js build
+echo "📋 Copying web dashboard..."
+if [ -d "$APPIMAGE_ROOT/out" ]; then
+    mkdir -p "$APP_DIR/web"
+    echo "📁 Copying from $APPIMAGE_ROOT/out to $APP_DIR/web"
+    cp -r "$APPIMAGE_ROOT/out"/* "$APP_DIR/web/"
+    
+    if [ -f "$APP_DIR/web/index.html" ]; then
+        echo "✅ index.html copied successfully to $APP_DIR/web/"
+    else
+        echo "❌ index.html NOT found after copying"
+        echo "📁 Contents of $APP_DIR/web:"
+        ls -la "$APP_DIR/web/" || echo "Directory is empty or doesn't exist"
+    fi
+    
+    if [ -d "$APPIMAGE_ROOT/public" ]; then
+        cp -r "$APPIMAGE_ROOT/public"/* "$APP_DIR/web/" 2>/dev/null || true
+    fi
+    cp "$APPIMAGE_ROOT/package.json" "$APP_DIR/web/"
+    
+    echo "✅ Next.js static export copied successfully"
+else
+    echo "❌ Error: Next.js export not found even after building"
+    exit 1
+fi
+
+# Copy AppRun script
+echo "📋 Copying AppRun script..."
+if [ -f "$SCRIPT_DIR/AppRun" ]; then
+    cp "$SCRIPT_DIR/AppRun" "$APP_DIR/AppRun"
+    chmod +x "$APP_DIR/AppRun"
+    echo "✅ AppRun script copied successfully"
+else
+    echo "❌ Error: AppRun script not found at $SCRIPT_DIR/AppRun"
+    exit 1
+fi
+
+# Create desktop file
+cat > "$APP_DIR/proxmenux-monitor.desktop" << EOF
+[Desktop Entry]
+Type=Application
+Name=ProxMenux Monitor
+Comment=Proxmox System Monitoring Dashboard with Translation Support
+Exec=AppRun
+Icon=proxmenux-monitor
+Categories=System;Monitor;
+Terminal=false
+StartupNotify=true
+EOF
+
+# Copy desktop file to applications directory
+cp "$APP_DIR/proxmenux-monitor.desktop" "$APP_DIR/usr/share/applications/"
+
+# Download and set icon
+echo "🎨 Setting up icon..."
+if [ -f "$APPIMAGE_ROOT/public/images/proxmenux-logo.png" ]; then
+    cp "$APPIMAGE_ROOT/public/images/proxmenux-logo.png" "$APP_DIR/proxmenux-monitor.png"
+else
+    wget -q "https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/logo.png" -O "$APP_DIR/proxmenux-monitor.png" || {
+        echo "⚠️  Could not download logo, creating placeholder..."
+        convert -size 256x256 xc:blue -fill white -gravity center -pointsize 24 -annotate +0+0 "PM" "$APP_DIR/proxmenux-monitor.png" 2>/dev/null || {
+            echo "⚠️  ImageMagick not available, skipping icon creation"
+        }
+    }
+fi
+
+if [ -f "$APP_DIR/proxmenux-monitor.png" ]; then
+    cp "$APP_DIR/proxmenux-monitor.png" "$APP_DIR/usr/share/icons/hicolor/256x256/apps/"
+fi
+
+echo "📦 Installing Python dependencies..."
+# Phase 1: Install googletrans with its old dependencies
+pip3 install --target "$APP_DIR/usr/lib/python3/dist-packages" \
+    googletrans==4.0.0-rc1 \
+    httpx==0.13.3 \
+    httpcore==0.9.1 \
+    h11==0.9.0 || true
+
+# Phase 2: Install modern Flask/WebSocket dependencies (will upgrade h11 and related packages)
+pip3 install --target "$APP_DIR/usr/lib/python3/dist-packages" --upgrade --no-deps \
+    flask \
+    flask-cors \
+    psutil \
+    requests \
+    PyJWT \
+    pyotp \
+    segno \
+    beautifulsoup4
+
+# Phase 3: Install WebSocket with newer h11
+pip3 install --target "$APP_DIR/usr/lib/python3/dist-packages" --upgrade \
+    h11>=0.14.0 \
+    wsproto>=1.2.0 \
+    simple-websocket>=0.10.0 \
+    flask-sock>=0.6.0
+
+cat > "$APP_DIR/usr/lib/python3/dist-packages/cgi.py" << 'PYEOF'
+from typing import Tuple, Dict
+try:
+    from html import escape as _html_escape
+except Exception:
+    def _html_escape(s, quote=True): return s
+
+__all__ = ["parse_header", "escape"]
+
+def escape(s, quote=True):
+    return _html_escape(s, quote=quote)
+
+def parse_header(value: str) -> Tuple[str, Dict[str, str]]:
+    if not isinstance(value, str):
+        value = str(value or "")
+    parts = [p.strip() for p in value.split(";")]
+    if not parts:
+        return "", {}
+    key = parts[0].lower()
+    params: Dict[str, str] = {}
+    for item in parts[1:]:
+        if not item:
+            continue
+        if "=" in item:
+            k, v = item.split("=", 1)
+            k = k.strip().lower()
+            v = v.strip().strip('"').strip("'")
+            params[k] = v
+        else:
+            params[item.strip().lower()] = ""
+    return key, params
+PYEOF
+
+echo "🔧 Installing hardware monitoring tools..."
+mkdir -p "$WORK_DIR/debs"
+cd "$WORK_DIR/debs"
+
+echo "📥 Downloading hardware monitoring tools (dynamic via APT)..."
+
+dl_pkg() {
+  local out="$1"; shift
+  local pkg deb_file
+  for pkg in "$@"; do
+    echo "  - trying: $pkg"
+    if apt-get download -y "$pkg" >/dev/null 2>&1; then
+      deb_file="$(ls -1 ${pkg}_*.deb 2>/dev/null | head -n1)"
+      if [ -n "$deb_file" ] && [ -f "$deb_file" ]; then
+        mv "$deb_file" "$out"
+        echo "    ✅ downloaded: $pkg -> $out"
+        return 0
+      fi
+    fi
+  done
+
+  if command -v sudo >/dev/null 2>&1 && sudo -n true >/dev/null 2>&1; then
+    echo "  ↻ retry with sudo apt-get update && download"
+    sudo apt-get update -qq || true
+    for pkg in "$@"; do
+      echo "  - trying (sudo): $pkg"
+      if sudo apt-get download -y "$pkg" >/dev/null 2>&1; then
+        deb_file="$(ls -1 ${pkg}_*.deb 2>/dev/null | head -n1)"
+        if [ -n "$deb_file" ] && [ -f "$deb_file" ]; then
+          mv "$deb_file" "$out"
+          echo "    ✅ downloaded (sudo): $pkg -> $out"
+          return 0
+        fi
+      fi
+    done
+  fi
+  echo "    ⚠️  none of the candidates could be downloaded for $out"
+  return 1
+}
+
+dl_pkg "ipmitool.deb"        "ipmitool"                         || true
+dl_pkg "libfreeipmi17.deb"   "libfreeipmi17"                    || true
+dl_pkg "lm-sensors.deb"      "lm-sensors"                       || true
+dl_pkg "nut-client.deb"      "nut-client"                       || true
+dl_pkg "libupsclient.deb"    "libupsclient6" "libupsclient5" "libupsclient4" || true
+
+echo "📦 Extracting .deb packages into AppDir..."
+extracted_count=0
+shopt -s nullglob
+for deb in *.deb; do
+  echo "  -> $deb"
+  if file "$deb" | grep -q "Debian binary package"; then
+    dpkg-deb -x "$deb" "$APP_DIR" && extracted_count=$((extracted_count + 1))
+  else
+    echo "    ⚠️  $deb is not a valid .deb, skipping"
+  fi
+done
+shopt -u nullglob
+
+if [ $extracted_count -eq 0 ]; then
+  echo "⚠️  No packages extracted; hardware/GPU monitoring may be unavailable"
+else
+  echo "✅ Extracted $extracted_count package(s)"
+fi
+
+if [ -d "$APP_DIR/bin" ]; then
+  echo "📋 Normalizing /bin -> /usr/bin"
+  mkdir -p "$APP_DIR/usr/bin"
+  cp -r "$APP_DIR/bin/"* "$APP_DIR/usr/bin/" 2>/dev/null || true
+  rm -rf "$APP_DIR/bin"
+fi
+
+echo "🔍 Sanity check (ldd + presence of libfreeipmi)"
+export LD_LIBRARY_PATH="$APP_DIR/lib:$APP_DIR/lib/x86_64-linux-gnu:$APP_DIR/usr/lib:$APP_DIR/usr/lib/x86_64-linux-gnu"
+
+if ! find "$APP_DIR/usr/lib" "$APP_DIR/lib" -maxdepth 3 -name 'libfreeipmi.so.17*' | grep -q .; then
+  echo "❌ libfreeipmi.so.17 not found inside AppDir (ipmitool will fail)"
+  exit 1
+fi
+
+if [ -x "$APP_DIR/usr/bin/ipmitool" ] && ldd "$APP_DIR/usr/bin/ipmitool" | grep -q 'not found'; then
+  echo "❌ ipmitool has unresolved libs:"
+  ldd "$APP_DIR/usr/bin/ipmitool" | grep 'not found' || true
+  exit 1
+fi
+
+if [ -x "$APP_DIR/usr/bin/upsc" ] && ldd "$APP_DIR/usr/bin/upsc" | grep -q 'not found'; then
+  echo "⚠️ upsc has unresolved libs, trying to auto-fix..."
+  missing="$(ldd "$APP_DIR/usr/bin/upsc" | awk '/not found/{print $1}' | tr -d ' ')"
+  echo "   missing: $missing"
+  case "$missing" in
+    libupsclient.so.6) need_pkg="libupsclient6" ;;
+    libupsclient.so.5) need_pkg="libupsclient5" ;;
+    libupsclient.so.4) need_pkg="libupsclient4" ;;
+    *) need_pkg="" ;;
+  esac
+
+  if [ -n "$need_pkg" ]; then
+    echo "   downloading: $need_pkg"
+    dl_pkg "libupsclient_autofix.deb" "$need_pkg" || true
+    if [ -f "libupsclient_autofix.deb" ]; then
+      dpkg-deb -x "libupsclient_autofix.deb" "$APP_DIR"
+      echo "   re-checking ldd for upsc..."
+      if ldd "$APP_DIR/usr/bin/upsc" | grep -q 'not found'; then
+        echo "❌ upsc still has unresolved libs:"
+        ldd "$APP_DIR/usr/bin/upsc" | grep 'not found' || true
+        exit 1
+      fi
+    else
+      echo "❌ could not download $need_pkg automatically"
+      exit 1
+    fi
+  else
+    echo "❌ unknown missing library for upsc: $missing"
+    exit 1
+  fi
+fi
+
+echo "✅ Sanity check OK (ipmitool/upsc ready; libfreeipmi present)"
+
+# Info rápida
+[ -x "$APP_DIR/usr/bin/sensors" ]         && echo "  • sensors: OK"            || echo "  • sensors: missing"
+[ -x "$APP_DIR/usr/bin/ipmitool" ]        && echo "  • ipmitool: OK"           || echo "  • ipmitool: missing"
+[ -x "$APP_DIR/usr/bin/upsc" ]            && echo "  • upsc: OK"               || echo "  • upsc: missing"
+[ -x "$APP_DIR/usr/bin/nvidia-smi" ]      && echo "  • nvidia-smi: OK"         || echo "  • nvidia-smi: missing"
+[ -x "$APP_DIR/usr/bin/intel_gpu_top" ]   && echo "  • intel-gpu-tools: OK"    || echo "  • intel-gpu-tools: missing"
+[ -x "$APP_DIR/usr/bin/radeontop" ]       && echo "  • radeontop: OK"          || echo "  • radeontop: missing"
+
+# Build AppImage
+echo "🔨 Building unified AppImage v${VERSION}..."
+cd "$WORK_DIR"
+export NO_CLEANUP=1
+export APPIMAGE_EXTRACT_AND_RUN=1
+ARCH=x86_64 ./appimagetool --no-appstream --verbose "$APP_DIR" "$APPIMAGE_NAME"
+
+# Move to dist directory
+mv "$APPIMAGE_NAME" "$DIST_DIR/"
+
+echo "✅ Unified AppImage created: $DIST_DIR/$APPIMAGE_NAME"
+echo ""
+echo "📋 Usage:"
+echo "   Dashboard: ./$APPIMAGE_NAME"
+echo "   Translation: ./$APPIMAGE_NAME --translate"
+echo ""
+echo "🚀 Installation:"
+echo "   sudo cp $DIST_DIR/$APPIMAGE_NAME /usr/local/bin/proxmenux-monitor"
+echo "   sudo chmod +x /usr/local/bin/proxmenux-monitor"

AppImage/scripts/flask_auth_routes.py

@@ -0,0 +1,278 @@
+"""
+Flask Authentication Routes
+Provides REST API endpoints for authentication management
+"""
+
+from flask import Blueprint, jsonify, request
+import auth_manager
+import jwt
+import datetime
+
+auth_bp = Blueprint('auth', __name__)
+
+@auth_bp.route('/api/auth/status', methods=['GET'])
+def auth_status():
+    """Get current authentication status"""
+    try:
+        status = auth_manager.get_auth_status()
+        
+        token = request.headers.get('Authorization', '').replace('Bearer ', '')
+        if token:
+            username = auth_manager.verify_token(token)
+            if username:
+                status['authenticated'] = True
+        
+        return jsonify(status)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/setup', methods=['POST'])
+def auth_setup():
+    """Set up authentication with username and password"""
+    try:
+        data = request.json
+        username = data.get('username')
+        password = data.get('password')
+        
+        success, message = auth_manager.setup_auth(username, password)
+        
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/decline', methods=['POST'])
+def auth_decline():
+    """Decline authentication setup"""
+    try:
+        success, message = auth_manager.decline_auth()
+        
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/login', methods=['POST'])
+def auth_login():
+    """Authenticate user and return JWT token"""
+    try:
+        data = request.json
+        username = data.get('username')
+        password = data.get('password')
+        totp_token = data.get('totp_token')  # Optional 2FA token
+        
+        success, token, requires_totp, message = auth_manager.authenticate(username, password, totp_token)
+        
+        if success:
+            return jsonify({"success": True, "token": token, "message": message})
+        elif requires_totp:
+            return jsonify({"success": False, "requires_totp": True, "message": message}), 200
+        else:
+            return jsonify({"success": False, "message": message}), 401
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/enable', methods=['POST'])
+def auth_enable():
+    """Enable authentication"""
+    try:
+        success, message = auth_manager.enable_auth()
+        
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/disable', methods=['POST'])
+def auth_disable():
+    """Disable authentication"""
+    try:
+        token = request.headers.get('Authorization', '').replace('Bearer ', '')
+        if not token or not auth_manager.verify_token(token):
+            return jsonify({"success": False, "message": "Unauthorized"}), 401
+            
+        success, message = auth_manager.disable_auth()
+        
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/change-password', methods=['POST'])
+def auth_change_password():
+    """Change authentication password"""
+    try:
+        data = request.json
+        old_password = data.get('old_password')
+        new_password = data.get('new_password')
+        
+        success, message = auth_manager.change_password(old_password, new_password)
+        
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/skip', methods=['POST'])
+def auth_skip():
+    """Skip authentication setup (same as decline)"""
+    try:
+        success, message = auth_manager.decline_auth()
+        
+        if success:
+            # Return success with clear indication that APIs should be accessible
+            return jsonify({
+                "success": True, 
+                "message": message,
+                "auth_declined": True  # Add explicit flag for frontend
+            })
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/totp/setup', methods=['POST'])
+def totp_setup():
+    """Initialize TOTP setup for a user"""
+    try:
+        token = request.headers.get('Authorization', '').replace('Bearer ', '')
+        username = auth_manager.verify_token(token)
+        
+        if not username:
+            return jsonify({"success": False, "message": "Unauthorized"}), 401
+        
+        success, secret, qr_code, backup_codes, message = auth_manager.setup_totp(username)
+        
+        if success:
+            return jsonify({
+                "success": True,
+                "secret": secret,
+                "qr_code": qr_code,
+                "backup_codes": backup_codes,
+                "message": message
+            })
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/totp/enable', methods=['POST'])
+def totp_enable():
+    """Enable TOTP after verification"""
+    try:
+        token = request.headers.get('Authorization', '').replace('Bearer ', '')
+        username = auth_manager.verify_token(token)
+        
+        if not username:
+            return jsonify({"success": False, "message": "Unauthorized"}), 401
+        
+        data = request.json
+        verification_token = data.get('token')
+        
+        if not verification_token:
+            return jsonify({"success": False, "message": "Verification token required"}), 400
+        
+        success, message = auth_manager.enable_totp(username, verification_token)
+        
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/totp/disable', methods=['POST'])
+def totp_disable():
+    """Disable TOTP (requires password confirmation)"""
+    try:
+        token = request.headers.get('Authorization', '').replace('Bearer ', '')
+        username = auth_manager.verify_token(token)
+        
+        if not username:
+            return jsonify({"success": False, "message": "Unauthorized"}), 401
+        
+        data = request.json
+        password = data.get('password')
+        
+        if not password:
+            return jsonify({"success": False, "message": "Password required"}), 400
+        
+        success, message = auth_manager.disable_totp(username, password)
+        
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@auth_bp.route('/api/auth/generate-api-token', methods=['POST'])
+def generate_api_token():
+    """Generate a long-lived API token for external integrations (Homepage, Home Assistant, etc.)"""
+    try:
+        auth_header = request.headers.get('Authorization', '')
+        token = auth_header.replace('Bearer ', '')
+        
+        if not token:
+            return jsonify({"success": False, "message": "Unauthorized. Please log in first."}), 401
+        
+        username = auth_manager.verify_token(token)
+        
+        if not username:
+            return jsonify({"success": False, "message": "Invalid or expired session. Please log in again."}), 401
+        
+        data = request.json
+        password = data.get('password')
+        totp_token = data.get('totp_token')  # Optional 2FA token
+        token_name = data.get('token_name', 'API Token')  # Optional token description
+        
+        if not password:
+            return jsonify({"success": False, "message": "Password is required"}), 400
+        
+        # Authenticate user with password and optional 2FA
+        success, _, requires_totp, message = auth_manager.authenticate(username, password, totp_token)
+        
+        if success:
+            # Generate a long-lived token (1 year expiration)
+            api_token = jwt.encode({
+                'username': username,
+                'token_name': token_name,
+                'exp': datetime.datetime.utcnow() + datetime.timedelta(days=365),
+                'iat': datetime.datetime.utcnow()
+            }, auth_manager.JWT_SECRET, algorithm='HS256')
+            
+            return jsonify({
+                "success": True, 
+                "token": api_token,
+                "token_name": token_name,
+                "expires_in": "365 days",
+                "message": "API token generated successfully. Store this token securely, it will not be shown again."
+            })
+        elif requires_totp:
+            return jsonify({"success": False, "requires_totp": True, "message": message}), 200
+        else:
+            return jsonify({"success": False, "message": message}), 401
+    except Exception as e:
+        print(f"[ERROR] generate_api_token: {str(e)}")  # Log error for debugging
+        return jsonify({"success": False, "message": f"Internal error: {str(e)}"}), 500

AppImage/scripts/flask_health_routes.py

@@ -0,0 +1,74 @@
+"""
+Flask routes for health monitoring with persistence support
+"""
+
+from flask import Blueprint, jsonify, request
+from health_monitor import health_monitor
+from health_persistence import health_persistence
+
+health_bp = Blueprint('health', __name__)
+
+@health_bp.route('/api/health/status', methods=['GET'])
+def get_health_status():
+    """Get overall health status summary"""
+    try:
+        status = health_monitor.get_overall_status()
+        return jsonify(status)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@health_bp.route('/api/health/details', methods=['GET'])
+def get_health_details():
+    """Get detailed health status with all checks"""
+    try:
+        details = health_monitor.get_detailed_status()
+        return jsonify(details)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@health_bp.route('/api/system-info', methods=['GET'])
+def get_system_info():
+    """
+    Get lightweight system info for header display.
+    Returns: hostname, uptime, and health status with proper structure.
+    """
+    try:
+        info = health_monitor.get_system_info()
+        
+        if 'health' in info:
+            status_map = {
+                'OK': 'healthy',
+                'WARNING': 'warning',
+                'CRITICAL': 'critical',
+                'UNKNOWN': 'warning'
+            }
+            current_status = info['health'].get('status', 'OK').upper()
+            info['health']['status'] = status_map.get(current_status, 'healthy')
+        
+        return jsonify(info)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@health_bp.route('/api/health/acknowledge', methods=['POST'])
+def acknowledge_error():
+    """Acknowledge an error manually (user dismissed it)"""
+    try:
+        data = request.get_json()
+        if not data or 'error_key' not in data:
+            return jsonify({'error': 'error_key is required'}), 400
+        
+        error_key = data['error_key']
+        health_persistence.acknowledge_error(error_key)
+        return jsonify({'success': True, 'message': 'Error acknowledged'})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@health_bp.route('/api/health/active-errors', methods=['GET'])
+def get_active_errors():
+    """Get all active persistent errors"""
+    try:
+        category = request.args.get('category')
+        errors = health_persistence.get_active_errors(category)
+        return jsonify({'errors': errors})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500

AppImage/scripts/flask_proxmenux_routes.py

@@ -0,0 +1,75 @@
+from flask import Blueprint, jsonify
+import json
+import os
+
+proxmenux_bp = Blueprint('proxmenux', __name__)
+
+# Tool descriptions mapping
+TOOL_DESCRIPTIONS = {
+    'lvm_repair': 'LVM PV Headers Repair',
+    'repo_cleanup': 'Repository Cleanup',
+    'subscription_banner': 'Subscription Banner Removal',
+    'time_sync': 'Time Synchronization',
+    'apt_languages': 'APT Language Skip',
+    'journald': 'Journald Optimization',
+    'logrotate': 'Logrotate Optimization',
+    'system_limits': 'System Limits Increase',
+    'entropy': 'Entropy Generation (haveged)',
+    'memory_settings': 'Memory Settings Optimization',
+    'kernel_panic': 'Kernel Panic Configuration',
+    'apt_ipv4': 'APT IPv4 Force',
+    'kexec': 'kexec for quick reboots',
+    'network_optimization': 'Network Optimizations',
+    'bashrc_custom': 'Bashrc Customization',
+    'figurine': 'Figurine',
+    'fastfetch': 'Fastfetch',
+    'log2ram': 'Log2ram (SSD Protection)',
+    'amd_fixes': 'AMD CPU (Ryzen/EPYC) fixes',
+    'persistent_network': 'Setting persistent network interfaces'
+}
+
+@proxmenux_bp.route('/api/proxmenux/installed-tools', methods=['GET'])
+def get_installed_tools():
+    """Get list of installed ProxMenux tools/optimizations"""
+    installed_tools_path = '/usr/local/share/proxmenux/installed_tools.json'
+    
+    try:
+        if not os.path.exists(installed_tools_path):
+            return jsonify({
+                'success': True,
+                'installed_tools': [],
+                'message': 'No ProxMenux optimizations installed yet'
+            })
+        
+        with open(installed_tools_path, 'r') as f:
+            data = json.load(f)
+        
+        # Convert to list format with descriptions
+        tools = []
+        for tool_key, enabled in data.items():
+            if enabled:  # Only include enabled tools
+                tools.append({
+                    'key': tool_key,
+                    'name': TOOL_DESCRIPTIONS.get(tool_key, tool_key.replace('_', ' ').title()),
+                    'enabled': enabled
+                })
+        
+        # Sort alphabetically by name
+        tools.sort(key=lambda x: x['name'])
+        
+        return jsonify({
+            'success': True,
+            'installed_tools': tools,
+            'total_count': len(tools)
+        })
+    
+    except json.JSONDecodeError:
+        return jsonify({
+            'success': False,
+            'error': 'Invalid JSON format in installed_tools.json'
+        }), 500
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500

AppImage/scripts/flask_script_runner.py

@@ -0,0 +1,261 @@
+#!/usr/bin/env python3
+"""
+Script Runner System for ProxMenux
+Executes bash scripts and provides real-time log streaming with interactive menu support
+"""
+
+import os
+import sys
+import json
+import subprocess
+import threading
+import time
+from datetime import datetime
+from pathlib import Path
+import uuid
+
+class ScriptRunner:
+    """Manages script execution with real-time log streaming and menu interactions"""
+    
+    def __init__(self):
+        self.active_sessions = {}
+        self.log_dir = Path("/var/log/proxmenux/scripts")
+        self.log_dir.mkdir(parents=True, exist_ok=True)
+        self.interaction_handlers = {}
+    
+    def create_session(self, script_name):
+        """Create a new script execution session"""
+        session_id = str(uuid.uuid4())[:8]
+        log_file = self.log_dir / f"{script_name}_{session_id}_{int(time.time())}.log"
+        
+        self.active_sessions[session_id] = {
+            'script_name': script_name,
+            'log_file': str(log_file),
+            'start_time': datetime.now().isoformat(),
+            'status': 'initializing',
+            'process': None,
+            'exit_code': None,
+            'pending_interaction': None
+        }
+        
+        return session_id
+    
+    def execute_script(self, script_path, session_id, env_vars=None):
+        """Execute a script in web mode with logging"""
+        if session_id not in self.active_sessions:
+            return {'success': False, 'error': 'Invalid session ID'}
+        
+        session = self.active_sessions[session_id]
+        log_file = session['log_file']
+        
+        print(f"[DEBUG] execute_script called for session {session_id}", file=sys.stderr, flush=True)
+        print(f"[DEBUG] Script path: {script_path}", file=sys.stderr, flush=True)
+        print(f"[DEBUG] Log file: {log_file}", file=sys.stderr, flush=True)
+        
+        # Prepare environment
+        env = os.environ.copy()
+        env['EXECUTION_MODE'] = 'web'
+        env['LOG_FILE'] = log_file
+        
+        if env_vars:
+            env.update(env_vars)
+        
+        print(f"[DEBUG] Environment variables set: EXECUTION_MODE=web, LOG_FILE={log_file}", file=sys.stderr, flush=True)
+        
+        # Initialize log file
+        with open(log_file, 'w') as f:
+            init_line = json.dumps({
+                'type': 'init',
+                'session_id': session_id,
+                'script': script_path,
+                'timestamp': int(time.time())
+            }) + '\n'
+            f.write(init_line)
+            print(f"[DEBUG] Wrote init line to log: {init_line.strip()}", file=sys.stderr, flush=True)
+        
+        try:
+            # Execute script
+            session['status'] = 'running'
+            print(f"[DEBUG] Starting subprocess with /bin/bash {script_path}", file=sys.stderr, flush=True)
+            
+            process = subprocess.Popen(
+                ['/bin/bash', script_path],
+                env=env,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.STDOUT,
+                bufsize=0  # Unbuffered
+            )
+            
+            print(f"[DEBUG] Process started with PID: {process.pid}", file=sys.stderr, flush=True)
+            session['process'] = process
+            
+            lines_read = [0]  # Lista para compartir entre threads
+            
+            def monitor_output():
+                print(f"[DEBUG] monitor_output thread started for session {session_id}", file=sys.stderr, flush=True)
+                print(f"[DEBUG] Will monitor log file: {log_file}", file=sys.stderr, flush=True)
+                
+                try:
+                    # Read log file in real-time (similar to tail -f)
+                    last_position = 0
+                    
+                    # Wait a moment for script to start writing
+                    time.sleep(0.5)
+                    
+                    while process.poll() is None or last_position < os.path.getsize(log_file):
+                        try:
+                            if os.path.exists(log_file):
+                                with open(log_file, 'r') as log_f:
+                                    log_f.seek(last_position)
+                                    new_lines = log_f.readlines()
+                                    
+                                    for line in new_lines:
+                                        decoded_line = line.rstrip()
+                                        if decoded_line:  # Skip empty lines
+                                            lines_read[0] += 1
+                                            print(f"[DEBUG] Read line {lines_read[0]} from log: {decoded_line[:100]}...", file=sys.stderr, flush=True)
+                                            
+                                            # Check for interaction requests in the line
+                                            if 'WEB_INTERACTION:' in decoded_line:
+                                                print(f"[DEBUG] Detected WEB_INTERACTION line: {decoded_line}", file=sys.stderr, flush=True)
+                                                session['pending_interaction'] = decoded_line
+                                    
+                                    last_position = log_f.tell()
+                        
+                        except Exception as e:
+                            print(f"[DEBUG ERROR] Error reading log file: {e}", file=sys.stderr, flush=True)
+                        
+                        time.sleep(0.1)  # Poll every 100ms
+                    
+                    print(f"[DEBUG] monitor_output thread finished. Total lines read: {lines_read[0]}", file=sys.stderr, flush=True)
+                    
+                except Exception as e:
+                    print(f"[DEBUG ERROR] Exception in monitor_output: {e}", file=sys.stderr, flush=True)
+            
+            monitor_thread = threading.Thread(target=monitor_output, daemon=False)
+            monitor_thread.start()
+            
+            print(f"[DEBUG] Waiting for process to complete...", file=sys.stderr, flush=True)
+            
+            # Wait for completion
+            process.wait()
+            print(f"[DEBUG] Process exited with code: {process.returncode}", file=sys.stderr, flush=True)
+            
+            monitor_thread.join(timeout=30)
+            if monitor_thread.is_alive():
+                print(f"[DEBUG WARNING] monitor_thread still alive after 30s timeout", file=sys.stderr, flush=True)
+            else:
+                print(f"[DEBUG] monitor_thread joined successfully", file=sys.stderr, flush=True)
+            
+            session['exit_code'] = process.returncode
+            session['status'] = 'completed' if process.returncode == 0 else 'failed'
+            session['end_time'] = datetime.now().isoformat()
+            
+            print(f"[DEBUG] Script execution completed. Lines captured: {lines_read[0]}", file=sys.stderr, flush=True)
+            
+            return {
+                'success': True,
+                'session_id': session_id,
+                'exit_code': process.returncode,
+                'log_file': log_file
+            }
+            
+        except Exception as e:
+            print(f"[DEBUG ERROR] Exception in execute_script: {e}", file=sys.stderr, flush=True)
+            session['status'] = 'error'
+            session['error'] = str(e)
+            return {
+                'success': False,
+                'error': str(e)
+            }
+    
+    def get_session_status(self, session_id):
+        """Get current status of a script execution session"""
+        if session_id not in self.active_sessions:
+            return {'success': False, 'error': 'Session not found'}
+        
+        session = self.active_sessions[session_id]
+        return {
+            'success': True,
+            'session_id': session_id,
+            'status': session['status'],
+            'start_time': session['start_time'],
+            'script_name': session['script_name'],
+            'exit_code': session['exit_code'],
+            'pending_interaction': session.get('pending_interaction')
+        }
+    
+    def respond_to_interaction(self, session_id, interaction_id, value):
+        """Respond to a script interaction request"""
+        if session_id not in self.active_sessions:
+            return {'success': False, 'error': 'Session not found'}
+        
+        session = self.active_sessions[session_id]
+        
+        # Write response to file that script is waiting for
+        response_file = f"/tmp/nvidia_response_{interaction_id}.json"
+        with open(response_file, 'w') as f:
+            json.dump({
+                'interaction_id': interaction_id,
+                'value': value,
+                'timestamp': int(time.time())
+            }, f)
+        
+        # Clear pending interaction
+        session['pending_interaction'] = None
+        
+        return {'success': True}
+    
+    def stream_logs(self, session_id):
+        """Generator that yields log entries as they are written"""
+        if session_id not in self.active_sessions:
+            yield json.dumps({'type': 'error', 'message': 'Invalid session ID'})
+            return
+        
+        session = self.active_sessions[session_id]
+        log_file = session['log_file']
+        
+        # Wait for log file to be created
+        timeout = 10
+        start = time.time()
+        while not os.path.exists(log_file) and (time.time() - start) < timeout:
+            time.sleep(0.1)
+        
+        if not os.path.exists(log_file):
+            yield json.dumps({'type': 'error', 'message': 'Log file not created'})
+            return
+        
+        # Stream log file
+        with open(log_file, 'r') as f:
+            # Start from beginning
+            f.seek(0)
+            
+            while session['status'] in ['initializing', 'running']:
+                line = f.readline()
+                if line:
+                    # Try to parse as JSON, yield as-is if not JSON
+                    try:
+                        log_entry = json.loads(line.strip())
+                        yield json.dumps(log_entry)
+                    except json.JSONDecodeError:
+                        yield json.dumps({'type': 'raw', 'message': line.strip()})
+                else:
+                    time.sleep(0.1)
+            
+            # Read any remaining lines after completion
+            for line in f:
+                try:
+                    log_entry = json.loads(line.strip())
+                    yield json.dumps(log_entry)
+                except json.JSONDecodeError:
+                    yield json.dumps({'type': 'raw', 'message': line.strip()})
+    
+    def cleanup_session(self, session_id):
+        """Clean up a completed session"""
+        if session_id in self.active_sessions:
+            del self.active_sessions[session_id]
+            return {'success': True}
+        return {'success': False, 'error': 'Session not found'}
+
+# Global instance
+script_runner = ScriptRunner()

AppImage/scripts/flask_terminal_routes.py

@@ -0,0 +1,465 @@
+#!/usr/bin/env python3
+"""
+ProxMenux Terminal WebSocket Routes
+Provides a WebSocket endpoint for interactive terminal sessions
+"""
+
+from flask import Blueprint, jsonify, request
+from flask_sock import Sock
+import subprocess
+import os
+import pty
+import select
+import struct
+import fcntl
+import termios
+import threading
+import time
+import requests
+import json
+import tempfile
+import base64
+
+terminal_bp = Blueprint('terminal', __name__)
+sock = Sock()
+
+# Active terminal sessions
+active_sessions = {}
+
+@terminal_bp.route('/api/terminal/health', methods=['GET'])
+def terminal_health():
+    """Health check for terminal service"""
+    return {'success': True, 'active_sessions': len(active_sessions)}
+
+@terminal_bp.route('/api/terminal/search-command', methods=['GET'])
+def search_command():
+    """Proxy endpoint for cheat.sh API to avoid CORS issues"""
+    query = request.args.get('q', '')
+    
+    if not query or len(query) < 2:
+        return jsonify({'error': 'Query too short'}), 400
+    
+    try:
+        url = f'https://cht.sh/{query.replace(" ", "+")}?QT'
+        headers = {
+            'User-Agent': 'curl/7.68.0'
+        }
+        
+        response = requests.get(url, headers=headers, timeout=10)
+        
+        if response.status_code == 200:
+            content = response.text
+            examples = []
+            current_description = []
+            
+            for line in content.split('\n'):
+                stripped = line.strip()
+                
+                # Ignorar líneas vacías
+                if not stripped:
+                    continue
+                
+                # Si es un comentario
+                if stripped.startswith('#'):
+                    # Acumular descripciones
+                    current_description.append(stripped[1:].strip())
+                # Si no es comentario, es un comando
+                elif stripped and not stripped.startswith('http'):
+                    # Unir las descripciones acumuladas
+                    description = ' '.join(current_description) if current_description else ''
+                    
+                    examples.append({
+                        'description': description,
+                        'command': stripped
+                    })
+                    
+                    # Resetear descripciones para el siguiente comando
+                    current_description = []
+            
+            return jsonify({
+                'success': True,
+                'examples': examples
+            })
+        else:
+            return jsonify({
+                'success': False,
+                'error': f'API returned status {response.status_code}'
+            }), response.status_code
+            
+    except requests.Timeout:
+        return jsonify({
+            'success': False,
+            'error': 'Request timeout'
+        }), 504
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+def set_winsize(fd, rows, cols):
+    """Set terminal window size"""
+    try:
+        winsize = struct.pack('HHHH', rows, cols, 0, 0)
+        fcntl.ioctl(fd, termios.TIOCSWINSZ, winsize)
+    except Exception as e:
+        print(f"Error setting window size: {e}")
+
+def read_and_forward_output(master_fd, ws):
+    """Read from PTY and send to WebSocket"""
+    while True:
+        try:
+            # Use select with timeout to check if data is available
+            r, _, _ = select.select([master_fd], [], [], 0.01)
+            if master_fd in r:
+                try:
+                    data = os.read(master_fd, 4096)
+                    if data:
+                        ws.send(data.decode('utf-8', errors='ignore'))
+                    else:
+                        break
+                except OSError:
+                    break
+        except Exception as e:
+            print(f"Error reading from PTY: {e}")
+            break
+
+@sock.route('/ws/terminal')
+def terminal_websocket(ws):
+    """WebSocket endpoint for terminal sessions"""
+    
+    # Create pseudo-terminal
+    master_fd, slave_fd = pty.openpty()
+    
+    # Start bash process
+    shell_process = subprocess.Popen(
+        ['/bin/bash', '-i'],
+        stdin=slave_fd,
+        stdout=slave_fd,
+        stderr=slave_fd,
+        preexec_fn=os.setsid,
+        cwd='/',
+        env=dict(os.environ, TERM='xterm-256color', PS1='\\u@\\h:\\w\\$ ')
+    )
+    
+    session_id = id(ws)
+    active_sessions[session_id] = {
+        'process': shell_process,
+        'master_fd': master_fd
+    }
+    
+    # Set non-blocking mode for master_fd
+    flags = fcntl.fcntl(master_fd, fcntl.F_GETFL)
+    fcntl.fcntl(master_fd, fcntl.F_SETFL, flags | os.O_NONBLOCK)
+    
+    # Set initial terminal size
+    set_winsize(master_fd, 30, 120)
+    
+    # Start thread to read PTY output and forward to WebSocket
+    output_thread = threading.Thread(
+        target=read_and_forward_output,
+        args=(master_fd, ws),
+        daemon=True
+    )
+    output_thread.start()
+    
+    try:
+        while True:
+            # Receive data from WebSocket (blocking)
+            data = ws.receive(timeout=None)
+            
+            if data is None:
+                # Client closed connection
+                break
+
+            handled = False
+
+            # Try to handle JSON control messages (e.g. resize)
+            if isinstance(data, str):
+                try:
+                    msg = json.loads(data)
+                except Exception:
+                    msg = None
+
+                if isinstance(msg, dict) and msg.get('type') == 'resize':
+                    cols = int(msg.get('cols', 120))
+                    rows = int(msg.get('rows', 30))
+                    set_winsize(master_fd, rows, cols)
+                    handled = True
+
+            if handled:
+                # Control message processed, do not send to bash
+                continue
+
+            # Optional: legacy resize escape sequence support
+            if isinstance(data, str) and data.startswith('\x1b[8;'):
+                try:
+                    parts = data[4:-1].split(';')
+                    rows, cols = int(parts[0]), int(parts[1])
+                    set_winsize(master_fd, rows, cols)
+                    continue
+                except Exception:
+                    pass
+            
+            # Send input to bash
+            try:
+                os.write(master_fd, data.encode('utf-8'))
+            except OSError as e:
+                print(f"Error writing to PTY: {e}")
+                break
+            
+            # Check if process is still alive
+            if shell_process.poll() is not None:
+                break
+                
+    except Exception as e:
+        print(f"Terminal session error: {e}")
+    finally:
+        # Cleanup
+        try:
+            shell_process.terminate()
+            shell_process.wait(timeout=1)
+        except:
+            try:
+                shell_process.kill()
+            except:
+                pass
+        
+        try:
+            os.close(master_fd)
+        except:
+            pass
+        
+        try:
+            os.close(slave_fd)
+        except:
+            pass
+        
+        if session_id in active_sessions:
+            del active_sessions[session_id]
+
+@sock.route('/ws/script/<session_id>')
+def script_websocket(ws, session_id):
+    """WebSocket endpoint for executing scripts with hybrid web mode"""
+    
+    try:
+        init_data = ws.receive(timeout=10)
+        
+        if not init_data:
+            error_msg = '{"type": "error", "message": "No script data received"}\r\n'
+            ws.send(error_msg)
+            return
+            
+        script_data = json.loads(init_data)
+        
+        script_path = script_data.get('script_path')
+        params = script_data.get('params', {})
+        
+        if not script_path:
+            error_msg = '{"type": "error", "message": "No script_path provided"}\r\n'
+            ws.send(error_msg)
+            return
+        
+        if not os.path.exists(script_path):
+            error_msg = f'{{"type": "error", "message": "Script not found: {script_path}"}}\r\n'
+            ws.send(error_msg)
+            return
+            
+    except Exception as e:
+        error_msg = f'{{"type": "error", "message": "Invalid init data: {str(e)}"}}\r\n'
+        ws.send(error_msg)
+        return
+    
+    web_log_fd, web_log_path = tempfile.mkstemp(suffix='.log', prefix='proxmenux_web_')
+    
+    # Create pseudo-terminal for script execution
+    master_fd, slave_fd = pty.openpty()
+    
+    env = os.environ.copy()
+    env['EXECUTION_MODE'] = 'web'
+    env['WEB_LOG'] = web_log_path
+    for key, value in params.items():
+        env[key] = str(value)
+    env['PYTHONUNBUFFERED'] = '1'
+    env['TERM'] = 'xterm-256color'
+    
+    script_process = subprocess.Popen(
+        ['/bin/bash', script_path],
+        stdin=slave_fd,
+        stdout=slave_fd,
+        stderr=slave_fd,
+        preexec_fn=os.setsid,
+        env=env
+    )
+    
+    # Set non-blocking mode for master_fd
+    flags = fcntl.fcntl(master_fd, fcntl.F_GETFL)
+    fcntl.fcntl(master_fd, fcntl.F_SETFL, flags | os.O_NONBLOCK)
+    
+    # Set terminal size
+    set_winsize(master_fd, 30, 120)
+    
+    def monitor_web_log():
+        last_position = 0
+        
+        while script_process.poll() is None:
+            try:
+                if os.path.exists(web_log_path):
+                    with open(web_log_path, 'r') as f:
+                        f.seek(last_position)
+                        new_lines = f.readlines()
+                        last_position = f.tell()
+                        
+                        for line in new_lines:
+                            line = line.strip()
+                            if line.startswith('WEB_INTERACTION:'):
+                                try:
+                                    # Parse: WEB_INTERACTION:type:id:title_b64:message_b64[:options_json]
+                                    parts = line[16:].split(':', 4)
+                                    interaction_type = parts[0]
+                                    interaction_id = parts[1]
+                                    title_b64 = parts[2]
+                                    message_b64 = parts[3]
+                                    
+                                    title = base64.b64decode(title_b64).decode('utf-8')
+                                    message = base64.b64decode(message_b64).decode('utf-8')
+                                    
+                                    interaction_data = {
+                                        'type': 'web_interaction',
+                                        'interaction': {
+                                            'type': interaction_type,
+                                            'id': interaction_id,
+                                            'title': title,
+                                            'message': message
+                                        }
+                                    }
+                                    
+                                    # Parse options for menu
+                                    if interaction_type == 'menu' and len(parts) > 4:
+                                        options_json = parts[4]
+                                        interaction_data['interaction']['options'] = json.loads(options_json)
+                                    
+                                    # Parse default for inputbox
+                                    if interaction_type == 'inputbox' and len(parts) > 4:
+                                        default_b64 = parts[4]
+                                        interaction_data['interaction']['default'] = base64.b64decode(default_b64).decode('utf-8')
+                                    
+                                    # Send interaction to WebSocket
+                                    ws.send(json.dumps(interaction_data))
+                                    
+                                except Exception as e:
+                                    pass
+                
+                time.sleep(0.01)
+            except Exception as e:
+                break
+    
+    web_log_thread = threading.Thread(target=monitor_web_log, daemon=True)
+    web_log_thread.start()
+    
+    # Thread to read script output and forward to WebSocket
+    def read_script_output():
+        while True:
+            try:
+                r, _, _ = select.select([master_fd], [], [], 0.01)
+                if master_fd in r:
+                    try:
+                        data = os.read(master_fd, 4096)
+                        if not data:
+                            break
+                        
+                        text = data.decode('utf-8', errors='ignore')
+                        
+                        # Send raw text to terminal
+                        try:
+                            ws.send(text)
+                        except Exception as e:
+                            break
+                            
+                    except OSError as e:
+                        break
+            except Exception as e:
+                break
+        
+        script_process.wait()
+        exit_code = script_process.returncode if script_process.returncode is not None else 0
+        
+        try:
+            ws.send(f'\r\n[Script exited with code {exit_code}]\r\n')
+        except Exception as e:
+            pass
+    
+    output_thread = threading.Thread(target=read_script_output, daemon=True)
+    output_thread.start()
+    
+    try:
+        while True:
+            data = ws.receive(timeout=None)
+            
+            if data is None:
+                break
+            
+            try:
+                msg = json.loads(data)
+                
+                if msg.get('type') == 'interaction_response':
+                    interaction_id = msg.get('id')
+                    value = msg.get('value')
+                    
+                    # Write response to the file the script is waiting for
+                    response_file = f"/tmp/proxmenux_response_{interaction_id}"
+                    
+                    with open(response_file, 'w') as f:
+                        f.write(value)
+                    
+                    continue
+                
+                # Handle resize
+                if msg.get('type') == 'resize':
+                    cols = int(msg.get('cols', 120))
+                    rows = int(msg.get('rows', 30))
+                    set_winsize(master_fd, rows, cols)
+                    continue
+                    
+            except json.JSONDecodeError:
+                # Raw text input, send to script
+                try:
+                    os.write(master_fd, data.encode('utf-8'))
+                except OSError as e:
+                    break
+            
+            if script_process.poll() is not None:
+                break
+                
+    except Exception as e:
+        pass
+    finally:
+        try:
+            script_process.terminate()
+            script_process.wait(timeout=1)
+        except:
+            try:
+                script_process.kill()
+            except:
+                pass
+        
+        try:
+            os.close(master_fd)
+        except:
+            pass
+        
+        try:
+            os.close(slave_fd)
+        except:
+            pass
+        
+        try:
+            os.close(web_log_fd)
+            os.unlink(web_log_path)
+        except:
+            pass
+
+def init_terminal_routes(app):
+    """Initialize terminal routes with Flask app"""
+    sock.init_app(app)
+    app.register_blueprint(terminal_bp)

AppImage/scripts/hardware_monitor.py

@@ -0,0 +1,413 @@
+#!/usr/bin/env python3
+"""
+Hardware Monitor - RAPL Power Monitoring and GPU Identification
+
+This module provides:
+1. CPU power consumption monitoring using Intel RAPL (Running Average Power Limit)
+2. PCI GPU identification for better fan labeling
+3. HBA controller detection and temperature monitoring
+
+Only contains these specialized functions - all other hardware monitoring 
+is handled by flask_server.py to avoid code duplication.
+"""
+
+import os
+import time
+import subprocess
+import re
+from typing import Dict, Any, Optional
+
+# Global variable to store previous energy reading for power calculation
+_last_energy_reading = {'energy_uj': None, 'timestamp': None}
+
+
+def get_pci_gpu_map() -> Dict[str, Dict[str, str]]:
+    """
+    Get a mapping of PCI addresses to GPU names from lspci.
+    
+    This function parses lspci output to identify GPU models by their PCI addresses,
+    which allows us to provide meaningful names for GPU fans in sensors output.
+    
+    Returns:
+        dict: Mapping of PCI addresses (e.g., '02:00.0') to GPU info
+              Example: {
+                  '02:00.0': {
+                      'vendor': 'NVIDIA', 
+                      'name': 'GeForce GTX 1080',
+                      'full_name': 'NVIDIA Corporation GP104 [GeForce GTX 1080]'
+                  }
+              }
+    """
+    gpu_map = {}
+    
+    try:
+        # Run lspci to get VGA/3D/Display controllers
+        result = subprocess.run(
+            ['lspci', '-nn'],
+            capture_output=True,
+            text=True,
+            timeout=5
+        )
+        
+        if result.returncode == 0:
+            for line in result.stdout.split('\n'):
+                if 'VGA compatible controller' in line or '3D controller' in line or 'Display controller' in line:
+                    # Example line: "02:00.0 VGA compatible controller [0300]: NVIDIA Corporation GP104 [GeForce GTX 1080] [10de:1b80]"
+                    match = re.match(r'^([0-9a-f]{2}:[0-9a-f]{2}\.[0-9a-f])\s+.*:\s+(.+?)\s+\[([0-9a-f]{4}):([0-9a-f]{4})\]', line)
+                    
+                    if match:
+                        pci_address = match.group(1)
+                        device_name = match.group(2).strip()
+                        
+                        # Extract vendor
+                        vendor = None
+                        if 'NVIDIA' in device_name.upper() or 'GEFORCE' in device_name.upper() or 'QUADRO' in device_name.upper():
+                            vendor = 'NVIDIA'
+                        elif 'AMD' in device_name.upper() or 'RADEON' in device_name.upper():
+                            vendor = 'AMD'
+                        elif 'INTEL' in device_name.upper() or 'ARC' in device_name.upper():
+                            vendor = 'Intel'
+                        
+                        # Extract model name (text between brackets is usually the commercial name)
+                        bracket_match = re.search(r'\[([^\]]+)\]', device_name)
+                        if bracket_match:
+                            model_name = bracket_match.group(1)
+                        else:
+                            # Fallback: use everything after the vendor name
+                            if vendor:
+                                model_name = device_name.split(vendor)[-1].strip()
+                            else:
+                                model_name = device_name
+                        
+                        gpu_map[pci_address] = {
+                            'vendor': vendor if vendor else 'Unknown',
+                            'name': model_name,
+                            'full_name': device_name
+                        }
+    
+    except Exception:
+        pass
+    
+    return gpu_map
+
+
+def get_power_info() -> Optional[Dict[str, Any]]:
+    """
+    Get CPU power consumption using Intel RAPL interface.
+    
+    This function measures power consumption by reading energy counters
+    from /sys/class/powercap/intel-rapl interfaces and calculating
+    the power draw based on the change in energy over time.
+    
+    Used as fallback when IPMI power monitoring is not available.
+    
+    Returns:
+        dict: Power meter information with 'name', 'watts', and 'adapter' keys
+              or None if RAPL interface is unavailable
+              
+    Example:
+        {
+            'name': 'CPU Power',
+            'watts': 45.32,
+            'adapter': 'Intel RAPL (CPU only)'
+        }
+    """
+    global _last_energy_reading
+    
+    rapl_path = '/sys/class/powercap/intel-rapl/intel-rapl:0/energy_uj'
+    
+    if os.path.exists(rapl_path):
+        try:
+            # Read current energy value in microjoules
+            with open(rapl_path, 'r') as f:
+                current_energy_uj = int(f.read().strip())
+            current_time = time.time()
+            
+            watts = 0.0
+            
+            # Calculate power if we have a previous reading
+            if _last_energy_reading['energy_uj'] is not None and _last_energy_reading['timestamp'] is not None:
+                time_diff = current_time - _last_energy_reading['timestamp']
+                if time_diff > 0:
+                    energy_diff = current_energy_uj - _last_energy_reading['energy_uj']
+                    # Handle counter overflow (wraps around at max value)
+                    if energy_diff < 0:
+                        energy_diff = current_energy_uj
+                    # Power (W) = Energy (µJ) / time (s) / 1,000,000
+                    watts = round((energy_diff / time_diff) / 1000000, 2)
+            
+            # Store current reading for next calculation
+            _last_energy_reading['energy_uj'] = current_energy_uj
+            _last_energy_reading['timestamp'] = current_time
+            
+            # Detect CPU vendor for display purposes
+            cpu_vendor = 'CPU'
+            try:
+                with open('/proc/cpuinfo', 'r') as f:
+                    cpuinfo = f.read()
+                    if 'GenuineIntel' in cpuinfo:
+                        cpu_vendor = 'Intel'
+                    elif 'AuthenticAMD' in cpuinfo:
+                        cpu_vendor = 'AMD'
+            except:
+                pass
+            
+            return {
+                'name': 'CPU Power',
+                'watts': watts,
+                'adapter': f'{cpu_vendor} RAPL (CPU only)'
+            }
+        except Exception:
+            pass
+    
+    return None
+
+
+def get_hba_info() -> list[Dict[str, Any]]:
+    """
+    Detect HBA/RAID controllers from lspci.
+    
+    This function identifies LSI/Broadcom, Adaptec, and other RAID/HBA controllers
+    present in the system via lspci output.
+    
+    Returns:
+        list: List of HBA controller dictionaries
+              Example: [
+                  {
+                      'pci_address': '01:00.0',
+                      'vendor': 'LSI/Broadcom',
+                      'model': 'SAS3008 PCI-Express Fusion-MPT SAS-3',
+                      'controller_id': 0
+                  }
+              ]
+    """
+    hba_list = []
+    
+    try:
+        # Run lspci to find RAID/SAS controllers
+        result = subprocess.run(
+            ['lspci', '-nn'],
+            capture_output=True,
+            text=True,
+            timeout=5
+        )
+        
+        if result.returncode == 0:
+            controller_id = 0
+            for line in result.stdout.split('\n'):
+                # Look for RAID bus controller, SCSI storage controller, Serial Attached SCSI controller
+                if any(keyword in line for keyword in ['RAID bus controller', 'SCSI storage controller', 'Serial Attached SCSI']):
+                    # Example: "01:00.0 RAID bus controller [0104]: Broadcom / LSI SAS3008 PCI-Express Fusion-MPT SAS-3 [1000:0097]"
+                    match = re.match(r'^([0-9a-f]{2}:[0-9a-f]{2}\.[0-9a-f])\s+.*:\s+(.+?)\s+\[([0-9a-f]{4}):([0-9a-f]{4})\]', line)
+                    
+                    if match:
+                        pci_address = match.group(1)
+                        device_name = match.group(2).strip()
+                        
+                        # Extract vendor
+                        vendor = 'Unknown'
+                        if 'LSI' in device_name.upper() or 'BROADCOM' in device_name.upper() or 'AVAGO' in device_name.upper():
+                            vendor = 'LSI/Broadcom'
+                        elif 'ADAPTEC' in device_name.upper():
+                            vendor = 'Adaptec'
+                        elif 'ARECA' in device_name.upper():
+                            vendor = 'Areca'
+                        elif 'HIGHPOINT' in device_name.upper():
+                            vendor = 'HighPoint'
+                        elif 'DELL' in device_name.upper():
+                            vendor = 'Dell'
+                        elif 'HP' in device_name.upper() or 'HEWLETT' in device_name.upper():
+                            vendor = 'HP'
+                        
+                        # Extract model name
+                        model_name = device_name
+                        # Remove vendor prefix if present
+                        for v in ['Broadcom / LSI', 'Broadcom', 'LSI Logic', 'LSI', 'Adaptec', 'Areca', 'HighPoint', 'Dell', 'HP', 'Hewlett-Packard']:
+                            if model_name.startswith(v):
+                                model_name = model_name[len(v):].strip()
+                        
+                        hba_list.append({
+                            'pci_address': pci_address,
+                            'vendor': vendor,
+                            'model': model_name,
+                            'controller_id': controller_id,
+                            'full_name': device_name
+                        })
+                        controller_id += 1
+    
+    except Exception:
+        pass
+    
+    return hba_list
+
+
+def get_hba_temperatures() -> list[Dict[str, Any]]:
+    """
+    Get HBA controller temperatures using storcli64 or megacli.
+    
+    This function attempts to read temperature data from LSI/Broadcom RAID controllers
+    using the storcli64 tool (preferred) or megacli as fallback.
+    
+    Returns:
+        list: List of temperature dictionaries
+              Example: [
+                  {
+                      'name': 'HBA Controller 0',
+                      'temperature': 65,
+                      'adapter': 'LSI/Broadcom SAS3008'
+                  }
+              ]
+    """
+    temperatures = []
+    
+    # Check which tool is available
+    storcli_paths = [
+        '/opt/MegaRAID/storcli/storcli64',
+        '/usr/sbin/storcli64',
+        '/usr/local/sbin/storcli64',
+        'storcli64'
+    ]
+    
+    megacli_paths = [
+        '/opt/MegaRAID/MegaCli/MegaCli64',
+        '/usr/sbin/megacli',
+        '/usr/local/sbin/megacli',
+        'megacli'
+    ]
+    
+    storcli_path = None
+    megacli_path = None
+    
+    # Find storcli64
+    for path in storcli_paths:
+        try:
+            result = subprocess.run([path, '-v'], capture_output=True, timeout=2)
+            if result.returncode == 0:
+                storcli_path = path
+                break
+        except:
+            continue
+    
+    # Try storcli64 first (preferred)
+    if storcli_path:
+        try:
+            # Get list of controllers
+            result = subprocess.run(
+                [storcli_path, 'show'],
+                capture_output=True,
+                text=True,
+                timeout=10
+            )
+            
+            if result.returncode == 0:
+                # Parse controller IDs
+                controller_ids = []
+                for line in result.stdout.split('\n'):
+                    match = re.search(r'^\s*(\d+)\s+', line)
+                    if match and 'Ctl' in line:
+                        controller_ids.append(match.group(1))
+                
+                # Get temperature for each controller
+                for ctrl_id in controller_ids:
+                    try:
+                        temp_result = subprocess.run(
+                            [storcli_path, f'/c{ctrl_id}', 'show', 'temperature'],
+                            capture_output=True,
+                            text=True,
+                            timeout=10
+                        )
+                        
+                        if temp_result.returncode == 0:
+                            # Parse temperature from output
+                            for line in temp_result.stdout.split('\n'):
+                                if 'ROC temperature' in line or 'Controller Temp' in line:
+                                    temp_match = re.search(r'(\d+)\s*C', line)
+                                    if temp_match:
+                                        temp_c = int(temp_match.group(1))
+                                        
+                                        # Get HBA info for better naming
+                                        hba_list = get_hba_info()
+                                        adapter_name = 'LSI/Broadcom Controller'
+                                        if int(ctrl_id) < len(hba_list):
+                                            hba = hba_list[int(ctrl_id)]
+                                            adapter_name = f"{hba['vendor']} {hba['model']}"
+                                        
+                                        temperatures.append({
+                                            'name': f'HBA Controller {ctrl_id}',
+                                            'temperature': temp_c,
+                                            'adapter': adapter_name
+                                        })
+                                        break
+                    except:
+                        continue
+        except:
+            pass
+    
+    # Fallback to megacli if storcli not available
+    elif not temperatures:
+        for path in megacli_paths:
+            try:
+                result = subprocess.run([path, '-v'], capture_output=True, timeout=2)
+                if result.returncode == 0:
+                    megacli_path = path
+                    break
+            except:
+                continue
+        
+        if megacli_path:
+            try:
+                # Get adapter count
+                result = subprocess.run(
+                    [megacli_path, '-adpCount'],
+                    capture_output=True,
+                    text=True,
+                    timeout=10
+                )
+                
+                if result.returncode == 0:
+                    # Parse adapter count
+                    adapter_count = 0
+                    for line in result.stdout.split('\n'):
+                        if 'Controller Count' in line:
+                            count_match = re.search(r'(\d+)', line)
+                            if count_match:
+                                adapter_count = int(count_match.group(1))
+                                break
+                    
+                    # Get temperature for each adapter
+                    for adapter_id in range(adapter_count):
+                        try:
+                            temp_result = subprocess.run(
+                                [megacli_path, '-AdpAllInfo', f'-a{adapter_id}'],
+                                capture_output=True,
+                                text=True,
+                                timeout=10
+                            )
+                            
+                            if temp_result.returncode == 0:
+                                # Parse temperature
+                                for line in temp_result.stdout.split('\n'):
+                                    if 'ROC temperature' in line or 'Controller Temp' in line:
+                                        temp_match = re.search(r'(\d+)\s*C', line)
+                                        if temp_match:
+                                            temp_c = int(temp_match.group(1))
+                                            
+                                            # Get HBA info for better naming
+                                            hba_list = get_hba_info()
+                                            adapter_name = 'LSI/Broadcom Controller'
+                                            if adapter_id < len(hba_list):
+                                                hba = hba_list[adapter_id]
+                                                adapter_name = f"{hba['vendor']} {hba['model']}"
+                                            
+                                            temperatures.append({
+                                                'name': f'HBA Controller {adapter_id}',
+                                                'temperature': temp_c,
+                                                'adapter': adapter_name
+                                            })
+                                            break
+                        except:
+                            continue
+            except:
+                pass
+    
+    return temperatures

AppImage/scripts/health_persistence.py

@@ -0,0 +1,367 @@
+"""
+Health Monitor Persistence Module
+Manages persistent error tracking across AppImage updates using SQLite.
+Stores errors in /root/.config/proxmenux-monitor/health_monitor.db
+
+Features:
+- Persistent error storage (survives AppImage updates)
+- Smart error resolution (auto-clear when VM starts, or after 48h)
+- Event system for future Telegram notifications
+- Manual acknowledgment support
+
+Author: MacRimi
+Version: 1.0
+"""
+
+import sqlite3
+import json
+import os
+from datetime import datetime, timedelta
+from typing import Dict, List, Any, Optional
+from pathlib import Path
+
+class HealthPersistence:
+    """Manages persistent health error tracking"""
+    
+    # Error retention periods (seconds)
+    VM_ERROR_RETENTION = 48 * 3600  # 48 hours
+    LOG_ERROR_RETENTION = 24 * 3600  # 24 hours
+    DISK_ERROR_RETENTION = 48 * 3600  # 48 hours
+    UPDATES_SUPPRESSION = 180 * 24 * 3600  # 180 days (6 months)
+    
+    def __init__(self):
+        """Initialize persistence with database in config directory"""
+        self.data_dir = Path('/root/.config/proxmenux-monitor')
+        self.data_dir.mkdir(parents=True, exist_ok=True)
+        
+        self.db_path = self.data_dir / 'health_monitor.db'
+        self._init_database()
+    
+    def _init_database(self):
+        """Initialize SQLite database with required tables"""
+        conn = sqlite3.connect(str(self.db_path))
+        cursor = conn.cursor()
+        
+        # Errors table
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS errors (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                error_key TEXT UNIQUE NOT NULL,
+                category TEXT NOT NULL,
+                severity TEXT NOT NULL,
+                reason TEXT NOT NULL,
+                details TEXT,
+                first_seen TEXT NOT NULL,
+                last_seen TEXT NOT NULL,
+                resolved_at TEXT,
+                acknowledged INTEGER DEFAULT 0,
+                notification_sent INTEGER DEFAULT 0
+            )
+        ''')
+        
+        # Events table (for future Telegram notifications)
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS events (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                event_type TEXT NOT NULL,
+                error_key TEXT NOT NULL,
+                timestamp TEXT NOT NULL,
+                data TEXT
+            )
+        ''')
+        
+        # Indexes for performance
+        cursor.execute('CREATE INDEX IF NOT EXISTS idx_error_key ON errors(error_key)')
+        cursor.execute('CREATE INDEX IF NOT EXISTS idx_category ON errors(category)')
+        cursor.execute('CREATE INDEX IF NOT EXISTS idx_resolved ON errors(resolved_at)')
+        cursor.execute('CREATE INDEX IF NOT EXISTS idx_events_error ON events(error_key)')
+        
+        conn.commit()
+        conn.close()
+    
+    def record_error(self, error_key: str, category: str, severity: str, 
+                    reason: str, details: Optional[Dict] = None) -> Dict[str, Any]:
+        """
+        Record or update an error.
+        Returns event info (new_error, updated, etc.)
+        """
+        conn = sqlite3.connect(str(self.db_path))
+        cursor = conn.cursor()
+        
+        now = datetime.now().isoformat()
+        details_json = json.dumps(details) if details else None
+        
+        cursor.execute('''
+            SELECT acknowledged, resolved_at 
+            FROM errors 
+            WHERE error_key = ? AND acknowledged = 1
+        ''', (error_key,))
+        ack_check = cursor.fetchone()
+        
+        if ack_check and ack_check[1]:  # Has resolved_at timestamp
+            try:
+                resolved_dt = datetime.fromisoformat(ack_check[1])
+                hours_since_ack = (datetime.now() - resolved_dt).total_seconds() / 3600
+                
+                if category == 'updates':
+                    # Updates: suppress for 180 days (6 months)
+                    suppression_hours = self.UPDATES_SUPPRESSION / 3600
+                else:
+                    # Other errors: suppress for 24 hours
+                    suppression_hours = 24
+                
+                if hours_since_ack < suppression_hours:
+                    # Skip re-adding recently acknowledged errors
+                    conn.close()
+                    return {'type': 'skipped_acknowledged', 'needs_notification': False}
+            except Exception:
+                pass
+        
+        cursor.execute('''
+            SELECT id, first_seen, notification_sent, acknowledged, resolved_at 
+            FROM errors WHERE error_key = ?
+        ''', (error_key,))
+        existing = cursor.fetchone()
+        
+        event_info = {'type': 'updated', 'needs_notification': False}
+        
+        if existing:
+            error_id, first_seen, notif_sent, acknowledged, resolved_at = existing
+            
+            if acknowledged == 1:
+                conn.close()
+                return {'type': 'skipped_acknowledged', 'needs_notification': False}
+            
+            # Update existing error (only if NOT acknowledged)
+            cursor.execute('''
+                UPDATE errors 
+                SET last_seen = ?, severity = ?, reason = ?, details = ?
+                WHERE error_key = ? AND acknowledged = 0
+            ''', (now, severity, reason, details_json, error_key))
+            
+            # Check if severity escalated
+            cursor.execute('SELECT severity FROM errors WHERE error_key = ?', (error_key,))
+            old_severity_row = cursor.fetchone()
+            if old_severity_row:
+                old_severity = old_severity_row[0]
+                if old_severity == 'WARNING' and severity == 'CRITICAL':
+                    event_info['type'] = 'escalated'
+                    event_info['needs_notification'] = True
+        else:
+            # Insert new error
+            cursor.execute('''
+                INSERT INTO errors 
+                (error_key, category, severity, reason, details, first_seen, last_seen)
+                VALUES (?, ?, ?, ?, ?, ?, ?)
+            ''', (error_key, category, severity, reason, details_json, now, now))
+            
+            event_info['type'] = 'new'
+            event_info['needs_notification'] = True
+        
+        # Record event
+        self._record_event(cursor, event_info['type'], error_key, 
+                          {'severity': severity, 'reason': reason})
+        
+        conn.commit()
+        conn.close()
+        
+        return event_info
+    
+    def resolve_error(self, error_key: str, reason: str = 'auto-resolved'):
+        """Mark an error as resolved"""
+        conn = sqlite3.connect(str(self.db_path))
+        cursor = conn.cursor()
+        
+        now = datetime.now().isoformat()
+        
+        cursor.execute('''
+            UPDATE errors 
+            SET resolved_at = ?
+            WHERE error_key = ? AND resolved_at IS NULL
+        ''', (now, error_key))
+        
+        if cursor.rowcount > 0:
+            self._record_event(cursor, 'resolved', error_key, {'reason': reason})
+        
+        conn.commit()
+        conn.close()
+    
+    def acknowledge_error(self, error_key: str):
+        """
+        Manually acknowledge an error (won't notify again or re-appear for 24h).
+        Also marks as resolved so it disappears from active errors.
+        """
+        conn = sqlite3.connect(str(self.db_path))
+        cursor = conn.cursor()
+        
+        now = datetime.now().isoformat()
+        
+        cursor.execute('''
+            UPDATE errors 
+            SET acknowledged = 1, resolved_at = ?
+            WHERE error_key = ?
+        ''', (now, error_key))
+        
+        self._record_event(cursor, 'acknowledged', error_key, {})
+        
+        conn.commit()
+        conn.close()
+    
+    def get_active_errors(self, category: Optional[str] = None) -> List[Dict[str, Any]]:
+        """Get all active (unresolved) errors, optionally filtered by category"""
+        conn = sqlite3.connect(str(self.db_path))
+        conn.row_factory = sqlite3.Row
+        cursor = conn.cursor()
+        
+        if category:
+            cursor.execute('''
+                SELECT * FROM errors 
+                WHERE resolved_at IS NULL AND category = ?
+                ORDER BY severity DESC, last_seen DESC
+            ''', (category,))
+        else:
+            cursor.execute('''
+                SELECT * FROM errors 
+                WHERE resolved_at IS NULL
+                ORDER BY severity DESC, last_seen DESC
+            ''')
+        
+        rows = cursor.fetchall()
+        conn.close()
+        
+        errors = []
+        for row in rows:
+            error_dict = dict(row)
+            if error_dict.get('details'):
+                error_dict['details'] = json.loads(error_dict['details'])
+            errors.append(error_dict)
+        
+        return errors
+    
+    def cleanup_old_errors(self):
+        """Clean up old resolved errors and auto-resolve stale errors"""
+        conn = sqlite3.connect(str(self.db_path))
+        cursor = conn.cursor()
+        
+        now = datetime.now()
+        
+        # Delete resolved errors older than 7 days
+        cutoff_resolved = (now - timedelta(days=7)).isoformat()
+        cursor.execute('DELETE FROM errors WHERE resolved_at < ?', (cutoff_resolved,))
+        
+        # Auto-resolve VM/CT errors older than 48h
+        cutoff_vm = (now - timedelta(seconds=self.VM_ERROR_RETENTION)).isoformat()
+        cursor.execute('''
+            UPDATE errors 
+            SET resolved_at = ?
+            WHERE category = 'vms' 
+              AND resolved_at IS NULL 
+              AND first_seen < ?
+              AND acknowledged = 0
+        ''', (now.isoformat(), cutoff_vm))
+        
+        # Auto-resolve log errors older than 24h
+        cutoff_logs = (now - timedelta(seconds=self.LOG_ERROR_RETENTION)).isoformat()
+        cursor.execute('''
+            UPDATE errors 
+            SET resolved_at = ?
+            WHERE category = 'logs' 
+              AND resolved_at IS NULL 
+              AND first_seen < ?
+              AND acknowledged = 0
+        ''', (now.isoformat(), cutoff_logs))
+        
+        # Delete old events (>30 days)
+        cutoff_events = (now - timedelta(days=30)).isoformat()
+        cursor.execute('DELETE FROM events WHERE timestamp < ?', (cutoff_events,))
+        
+        conn.commit()
+        conn.close()
+    
+    def check_vm_running(self, vm_id: str) -> bool:
+        """
+        Check if a VM/CT is running and resolve error if so.
+        Returns True if running and error was resolved.
+        """
+        import subprocess
+        
+        try:
+            # Check qm status for VMs
+            result = subprocess.run(
+                ['qm', 'status', vm_id],
+                capture_output=True,
+                text=True,
+                timeout=2
+            )
+            
+            if result.returncode == 0 and 'running' in result.stdout.lower():
+                self.resolve_error(f'vm_{vm_id}', 'VM started')
+                return True
+            
+            # Check pct status for containers
+            result = subprocess.run(
+                ['pct', 'status', vm_id],
+                capture_output=True,
+                text=True,
+                timeout=2
+            )
+            
+            if result.returncode == 0 and 'running' in result.stdout.lower():
+                self.resolve_error(f'ct_{vm_id}', 'Container started')
+                return True
+            
+            return False
+            
+        except Exception:
+            return False
+    
+    def _record_event(self, cursor, event_type: str, error_key: str, data: Dict):
+        """Internal: Record an event"""
+        cursor.execute('''
+            INSERT INTO events (event_type, error_key, timestamp, data)
+            VALUES (?, ?, ?, ?)
+        ''', (event_type, error_key, datetime.now().isoformat(), json.dumps(data)))
+    
+    def get_unnotified_errors(self) -> List[Dict[str, Any]]:
+        """Get errors that need Telegram notification"""
+        conn = sqlite3.connect(str(self.db_path))
+        conn.row_factory = sqlite3.Row
+        cursor = conn.cursor()
+        
+        cursor.execute('''
+            SELECT * FROM errors 
+            WHERE notification_sent = 0 
+              AND resolved_at IS NULL 
+              AND acknowledged = 0
+            ORDER BY severity DESC, first_seen ASC
+        ''')
+        
+        rows = cursor.fetchall()
+        conn.close()
+        
+        errors = []
+        for row in rows:
+            error_dict = dict(row)
+            if error_dict.get('details'):
+                error_dict['details'] = json.loads(error_dict['details'])
+            errors.append(error_dict)
+        
+        return errors
+    
+    def mark_notified(self, error_key: str):
+        """Mark error as notified"""
+        conn = sqlite3.connect(str(self.db_path))
+        cursor = conn.cursor()
+        
+        cursor.execute('''
+            UPDATE errors 
+            SET notification_sent = 1
+            WHERE error_key = ?
+        ''', (error_key,))
+        
+        conn.commit()
+        conn.close()
+
+
+# Global instance
+health_persistence = HealthPersistence()

AppImage/scripts/jwt_middleware.py

@@ -0,0 +1,98 @@
+"""
+JWT Middleware Module
+Provides decorator to protect Flask routes with JWT authentication
+Automatically checks auth status and validates tokens
+"""
+
+from flask import request, jsonify
+from functools import wraps
+from auth_manager import load_auth_config, verify_token
+
+
+def require_auth(f):
+    """
+    Decorator to protect Flask routes with JWT authentication
+    
+    Behavior:
+    - If auth is disabled or declined: Allow access (no token required)
+    - If auth is enabled: Require valid JWT token in Authorization header
+    - Returns 401 if auth required but token missing/invalid
+    
+    Usage:
+        @app.route('/api/protected')
+        @require_auth
+        def protected_route():
+            return jsonify({"data": "secret"})
+    """
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        # Check if authentication is enabled
+        config = load_auth_config()
+        
+        # If auth is disabled or declined, allow access
+        if not config.get("enabled", False) or config.get("declined", False):
+            return f(*args, **kwargs)
+        
+        # Auth is enabled, require token
+        auth_header = request.headers.get('Authorization')
+        
+        if not auth_header:
+            return jsonify({
+                "error": "Authentication required",
+                "message": "No authorization header provided"
+            }), 401
+        
+        # Extract token from "Bearer <token>" format
+        parts = auth_header.split()
+        if len(parts) != 2 or parts[0].lower() != 'bearer':
+            return jsonify({
+                "error": "Invalid authorization header",
+                "message": "Authorization header must be in format: Bearer <token>"
+            }), 401
+        
+        token = parts[1]
+        
+        # Verify token
+        username = verify_token(token)
+        if not username:
+            return jsonify({
+                "error": "Invalid or expired token",
+                "message": "Please log in again"
+            }), 401
+        
+        # Token is valid, allow access
+        return f(*args, **kwargs)
+    
+    return decorated_function
+
+
+def optional_auth(f):
+    """
+    Decorator for routes that can optionally use auth
+    Passes username if authenticated, None otherwise
+    
+    Usage:
+        @app.route('/api/optional')
+        @optional_auth
+        def optional_route(username=None):
+            if username:
+                return jsonify({"message": f"Hello {username}"})
+            return jsonify({"message": "Hello guest"})
+    """
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        config = load_auth_config()
+        username = None
+        
+        if config.get("enabled", False):
+            auth_header = request.headers.get('Authorization')
+            if auth_header:
+                parts = auth_header.split()
+                if len(parts) == 2 and parts[0].lower() == 'bearer':
+                    username = verify_token(parts[1])
+        
+        # Inject username into kwargs
+        kwargs['username'] = username
+        return f(*args, **kwargs)
+    
+    return decorated_function

AppImage/scripts/proxmox_storage_monitor.py

@@ -0,0 +1,202 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+ProxMenux - Proxmox Storage Monitor
+Monitors configured Proxmox storages and tracks unavailable storages
+"""
+
+import json
+import subprocess
+import socket
+from typing import Dict, List, Any, Optional
+
+
+class ProxmoxStorageMonitor:
+    """Monitor Proxmox storage configuration and status"""
+    
+    def __init__(self):
+        self.configured_storages: Dict[str, Dict[str, Any]] = {}
+        self._load_configured_storages()
+    
+    def _get_node_name(self) -> str:
+        """Get current Proxmox node name"""
+        try:
+            result = subprocess.run(
+                ['pvesh', 'get', '/nodes', '--output-format', 'json'],
+                capture_output=True,
+                text=True,
+                timeout=5
+            )
+            if result.returncode == 0:
+                nodes = json.loads(result.stdout)
+                hostname = socket.gethostname()
+                for node in nodes:
+                    if node.get('node') == hostname:
+                        return hostname
+                if nodes:
+                    return nodes[0].get('node', hostname)
+            return socket.gethostname()
+        except Exception:
+            return socket.gethostname()
+    
+    def _load_configured_storages(self) -> None:
+        """Load configured storages from Proxmox configuration"""
+        try:
+            local_node = self._get_node_name()
+            
+            # Read storage configuration from pvesh
+            result = subprocess.run(
+                ['pvesh', 'get', '/storage', '--output-format', 'json'],
+                capture_output=True,
+                text=True,
+                timeout=5
+            )
+            
+            if result.returncode != 0:
+                return
+            
+            storages = json.loads(result.stdout)
+            
+            for storage in storages:
+                storage_id = storage.get('storage')
+                if not storage_id:
+                    continue
+                
+                # Check if storage is enabled for this node
+                nodes = storage.get('nodes')
+                if nodes and local_node not in nodes.split(','):
+                    continue
+                
+                disabled = storage.get('disable', 0)
+                if disabled == 1:
+                    continue
+                
+                self.configured_storages[storage_id] = {
+                    'name': storage_id,
+                    'type': storage.get('type', 'unknown'),
+                    'content': storage.get('content', ''),
+                    'path': storage.get('path', ''),
+                    'enabled': True
+                }
+        
+        except Exception:
+            pass
+    
+    def get_storage_status(self) -> Dict[str, List[Dict[str, Any]]]:
+        """
+        Get storage status, including unavailable storages
+        
+        Returns:
+            {
+                'available': [...],
+                'unavailable': [...]
+            }
+        """
+        try:
+            local_node = self._get_node_name()
+            
+            # Get current storage status from pvesh
+            result = subprocess.run(
+                ['pvesh', 'get', '/cluster/resources', '--type', 'storage', '--output-format', 'json'],
+                capture_output=True,
+                text=True,
+                timeout=10
+            )
+            
+            if result.returncode != 0:
+                return {'available': [], 'unavailable': list(self.configured_storages.values())}
+            
+            resources = json.loads(result.stdout)
+            
+            # Track which configured storages are available
+            available_storages = []
+            unavailable_storages = []
+            seen_storage_names = set()
+            
+            for resource in resources:
+                node = resource.get('node', '')
+                
+                # Filter only local node storages
+                if node != local_node:
+                    continue
+                
+                name = resource.get('storage', 'unknown')
+                seen_storage_names.add(name)
+                storage_type = resource.get('plugintype', 'unknown')
+                status = resource.get('status', 'unknown')
+                
+                try:
+                    total = int(resource.get('maxdisk', 0))
+                    used = int(resource.get('disk', 0))
+                    available = total - used if total > 0 else 0
+                except (ValueError, TypeError):
+                    total = 0
+                    used = 0
+                    available = 0
+                
+                # Calculate percentage
+                percent = (used / total * 100) if total > 0 else 0.0
+                
+                # Convert bytes to GB
+                total_gb = round(total / (1024**3), 2)
+                used_gb = round(used / (1024**3), 2)
+                available_gb = round(available / (1024**3), 2)
+                
+                storage_info = {
+                    'name': name,
+                    'type': storage_type,
+                    'total': total_gb,
+                    'used': used_gb,
+                    'available': available_gb,
+                    'percent': round(percent, 2),
+                    'node': node
+                }
+                
+                # Check if storage is available
+                if total == 0 or status.lower() != "available":
+                    storage_info['status'] = 'error'
+                    storage_info['status_detail'] = 'unavailable' if total == 0 else status
+                    unavailable_storages.append(storage_info)
+                else:
+                    storage_info['status'] = 'active'
+                    available_storages.append(storage_info)
+            
+            # Check for configured storages that are completely missing
+            for storage_name, storage_config in self.configured_storages.items():
+                if storage_name not in seen_storage_names:
+                    unavailable_storages.append({
+                        'name': storage_name,
+                        'type': storage_config['type'],
+                        'status': 'error',
+                        'status_detail': 'not_found',
+                        'total': 0,
+                        'used': 0,
+                        'available': 0,
+                        'percent': 0,
+                        'node': local_node
+                    })
+            
+            return {
+                'available': available_storages,
+                'unavailable': unavailable_storages
+            }
+        
+        except Exception:
+            return {
+                'available': [],
+                'unavailable': list(self.configured_storages.values())
+            }
+    
+    def get_unavailable_count(self) -> int:
+        """Get count of unavailable storages"""
+        status = self.get_storage_status()
+        return len(status['unavailable'])
+    
+    def reload_configuration(self) -> None:
+        """Reload storage configuration from Proxmox"""
+        self.configured_storages.clear()
+        self._load_configured_storages()
+
+
+# Global instance
+proxmox_storage_monitor = ProxmoxStorageMonitor()

AppImage/tailwind.config.js

@@ -0,0 +1,65 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{ts,tsx,js,jsx}",
+    "./components/**/*.{ts,tsx,js,jsx}",
+    "./pages/**/*.{ts,tsx,js,jsx}",
+    "./src/**/*.{ts,tsx,js,jsx}",
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+
+        card: "var(--card)",
+        "card-foreground": "var(--card-foreground)",
+
+        popover: "var(--popover)",
+        "popover-foreground": "var(--popover-foreground)",
+
+        primary: "var(--primary)",
+        "primary-foreground": "var(--primary-foreground)",
+
+        secondary: "var(--secondary)",
+        "secondary-foreground": "var(--secondary-foreground)",
+
+        muted: "var(--muted)",
+        "muted-foreground": "var(--muted-foreground)",
+
+        accent: "var(--accent)",
+        "accent-foreground": "var(--accent-foreground)",
+
+        destructive: "var(--destructive)",
+        "destructive-foreground": "var(--destructive-foreground)",
+
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+
+        "chart-1": "var(--chart-1)",
+        "chart-2": "var(--chart-2)",
+        "chart-3": "var(--chart-3)",
+        "chart-4": "var(--chart-4)",
+        "chart-5": "var(--chart-5)",
+
+        sidebar: "var(--sidebar)",
+        "sidebar-foreground": "var(--sidebar-foreground)",
+        "sidebar-primary": "var(--sidebar-primary)",
+        "sidebar-primary-foreground": "var(--sidebar-primary-foreground)",
+        "sidebar-accent": "var(--sidebar-accent)",
+        "sidebar-accent-foreground": "var(--sidebar-accent-foreground)",
+        "sidebar-border": "var(--sidebar-border)",
+        "sidebar-ring": "var(--sidebar-ring)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+        xl: "calc(var(--radius) + 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};

AppImage/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

AppImage/types/hardware.ts

@@ -0,0 +1,217 @@
+import { fetchApi } from "@/lib/api-config"
+
+export interface Temperature {
+  name: string
+  original_name?: string
+  current: number
+  high?: number
+  critical?: number
+  adapter?: string
+}
+
+export interface PowerMeter {
+  name: string
+  watts: number
+  adapter?: string
+}
+
+export interface NetworkInterface {
+  name: string
+  type: string
+  speed?: string
+  status?: string
+}
+
+export interface StorageDevice {
+  name: string
+  type: string
+  size?: string
+  model?: string
+  driver?: string
+  interface?: string
+  serial?: string
+  family?: string
+  firmware?: string
+  rotation_rate?: number | string
+  form_factor?: string
+  sata_version?: string
+  pcie_gen?: string // e.g., "PCIe 4.0"
+  pcie_width?: string // e.g., "x4"
+  pcie_max_gen?: string // Maximum supported PCIe generation
+  pcie_max_width?: string // Maximum supported PCIe lanes
+  sas_version?: string // e.g., "SAS-3"
+  sas_speed?: string // e.g., "12Gb/s"
+  link_speed?: string // Generic link speed info
+}
+
+export interface PCIDevice {
+  slot: string
+  type: string
+  device: string
+  vendor: string
+  class: string
+  driver?: string
+  kernel_module?: string
+  irq?: string
+  memory_address?: string
+  link_speed?: string
+  capabilities?: string[]
+  gpu_memory?: string
+  gpu_driver_version?: string
+  gpu_cuda_version?: string
+  gpu_compute_capability?: string
+  gpu_power_draw?: string
+  gpu_temperature?: number
+  gpu_utilization?: number
+  gpu_memory_used?: string
+  gpu_memory_total?: string
+  gpu_clock_speed?: string
+  gpu_memory_clock?: string
+}
+
+export interface Fan {
+  name: string
+  original_name?: string
+  speed: number
+  unit: string
+  adapter?: string
+}
+
+export interface PowerSupply {
+  name: string
+  watts: number
+  status?: string
+}
+
+export interface UPS {
+  name: string
+  host?: string
+  is_remote?: boolean
+  connection_type?: string
+  status: string
+  model?: string
+  manufacturer?: string
+  serial?: string
+  device_type?: string
+  firmware?: string
+  driver?: string
+  battery_charge?: string
+  battery_charge_raw?: number
+  battery_voltage?: string
+  battery_date?: string
+  time_left?: string
+  time_left_seconds?: number
+  load_percent?: string
+  load_percent_raw?: number
+  input_voltage?: string
+  input_frequency?: string
+  output_voltage?: string
+  output_frequency?: string
+  real_power?: string
+  apparent_power?: string
+  [key: string]: any
+}
+
+export interface GPU {
+  slot: string
+  name: string
+  vendor: string
+  type: string
+  pci_class?: string
+  pci_driver?: string
+  pci_kernel_module?: string
+  driver_version?: string
+  memory_total?: string
+  memory_used?: string
+  memory_free?: string
+  temperature?: number
+  power_draw?: string
+  power_limit?: string
+  utilization_gpu?: number
+  utilization_memory?: number
+  clock_graphics?: string
+  clock_memory?: string
+  engine_render?: number
+  engine_blitter?: number
+  engine_video?: number
+  engine_video_enhance?: number
+  pcie_gen?: string
+  pcie_width?: string
+  fan_speed?: number
+  fan_unit?: string
+  processes?: Array<{
+    pid: string
+    name: string
+    memory: string
+  }>
+  has_monitoring_tool?: boolean
+  note?: string
+}
+
+export interface DiskHardwareInfo {
+  type?: string
+  driver?: string
+  interface?: string
+  model?: string
+  serial?: string
+  family?: string
+  firmware?: string
+  rotation_rate?: string
+  form_factor?: string
+  sata_version?: string
+}
+
+export interface NetworkHardwareInfo {
+  driver?: string
+  kernel_modules?: string
+  subsystem?: string
+  max_link_speed?: string
+  max_link_width?: string
+  current_link_speed?: string
+  current_link_width?: string
+  interface_name?: string
+  interface_speed?: string
+  mac_address?: string
+}
+
+export interface HardwareData {
+  cpu?: {
+    model?: string
+    cores_per_socket?: number
+    sockets?: number
+    total_threads?: number
+    l3_cache?: string
+    virtualization?: string
+  }
+  motherboard?: {
+    manufacturer?: string
+    model?: string
+    bios?: {
+      vendor?: string
+      version?: string
+      date?: string
+    }
+  }
+  memory_modules?: Array<{
+    slot: string
+    size?: string
+    type?: string
+    speed?: string
+    manufacturer?: string
+  }>
+  temperatures?: Temperature[]
+  power_meter?: PowerMeter
+  network_cards?: NetworkInterface[]
+  storage_devices?: StorageDevice[]
+  pci_devices?: PCIDevice[]
+  gpus?: GPU[]
+  fans?: Fan[]
+  power_supplies?: PowerSupply[]
+  ups?: UPS | UPS[]
+}
+
+export const fetcher = async (url: string) => {
+  // Extract just the endpoint from the URL if it's a full URL
+  const endpoint = url.startsWith("http") ? new URL(url).pathname : url
+  return fetchApi(endpoint)
+}

CHANGELOG.md

@@ -1,3 +1,494 @@
+## 2026-03-14
+
+### New version v1.1.9 — *Helper Scripts Catalog Rebuilt*
+
+### Changed
+
+- **Helper Scripts Menu — Full Catalog Rebuild**
+  The Helper Scripts catalog has been completely rebuilt to adapt to the new data architecture of the [Community Scripts](https://community-scripts.github.io/ProxmoxVE/) project.
+
+  The previous implementation relied on a `metadata.json` file that no longer exists in the upstream repository. The catalog now connects directly to the **PocketBase API** (`db.community-scripts.org`), which is the new official data source for the project.
+
+  A new GitHub Actions workflow generates a local `helpers_cache.json` index that replaces the old metadata dependency. This new cache is richer, more structured, and includes:
+  - Script type, slug, description, notes, and default credentials
+  - OS variants per script (e.g. Debian, Alpine) — each shown as a separate selectable option in the menu
+  - Direct GitHub URL and **Mirror URL** (`git.community-scripts.org`) for every script
+  - Category names embedded directly in the cache — no external requests needed to build the menu
+  - Additional metadata: default port, website, logo, update support, ARM availability
+
+  Scripts that support multiple OS variants (e.g. Docker with Alpine and Debian) now correctly show **one entry per OS**, each with its own GitHub and Mirror download option — restoring the behavior that existed before the upstream migration.
+
+---
+
+### 🎖 Special Acknowledgment
+
+This update would not have been possible without the openness and collaboration of the **Community Scripts** maintainers.
+
+When the upstream metadata structure changed and broke the ProxMenux catalog, the maintainers responded quickly, explained the new architecture in detail, and provided all the information needed to rebuild the integration cleanly.
+
+Special thanks to:
+
+- **MickLeskCanbiZ ([@MickLesk](https://github.com/MickLesk))** — for documenting the new script path structure by type and slug, and for the clear and direct technical guidance.
+- **Michel Roegl-Brunner ([@michelroegl-brunner](https://github.com/michelroegl-brunner))** — for explaining the new PocketBase collections structure (`script_scripts`, `script_categories`).
+
+The Helper Scripts project is an extraordinary resource for the Proxmox community. The scripts belong entirely to their authors and maintainers — ProxMenux simply offers a guided way to discover and launch them. All credit goes to the community behind [community-scripts/ProxmoxVE](https://github.com/community-scripts/ProxmoxVE).
+
+## 2025-09-18
+
+### New version v1.1.8 — *ProxMenux Offline Mode*
+
+![ProxMenux Offline](https://macrimi.github.io/ProxMenux/ProxMenux_offline.png)
+
+---
+
+### Added
+
+- **Offline Execution Mode (no GitHub dependency)**  
+  All ProxMenux core scripts now run **entirely locally**, without requiring live requests to GitHub (`raw.githubusercontent.com`).  
+  This change provides:
+  - Greater stability during execution
+  - No interruptions due to network timeouts or regional GitHub blocks
+  - Support for **offline or isolated environments**
+
+  ⚠️ This update resolves recent issues where users in certain regions were unable to run scripts due to CDN or TLS filtering errors while downloading `.sh` files from GitHub raw URLs.
+
+  **🎖 Special Acknowledgment: @cod378**  
+  This offline conversion has been made possible thanks to the extraordinary work of **@cod378**,  
+  who redesigned the entire internal logic of the installer and updater, refactored the file management system,  
+  and implemented the new fully local execution workflow.  
+  Without his collaboration, dedication, and technical contribution, this transformation would not have been possible.
+
+- **ProxMenux Monitor v1.0.1**  
+  This update brings a major leap in the **ProxMenux Monitor** interface.  
+  New features and improvements:
+  - `Proxy Support`: Access ProxMenux through reverse proxies with full functionality
+  - `Authentication System`: Secure your dashboard with password protection
+  - `Two-Factor Authentication (2FA)`: Optional TOTP support for enhanced security
+  - `PCIe Link Speed Detection`: View NVMe connection speeds and detect performance bottlenecks
+  - `Enhanced Storage Display`: Auto-formats disk sizes (GB → TB when appropriate)
+  - `SATA/SAS Interface Info`: Detect and show storage type (SATA, SAS, NVMe, etc.)
+  - `Health Monitoring System`: Built-in system health check with dismissible alerts
+  - Improved rendering across browsers and better performance
+
+- **Helper Scripts Menu (Mirror Support)**  
+  The `Helper Scripts` menu now:
+  - Detects **mirror URLs** and shows alternative download options when available
+  - Lists available OS versions when a helper script is version-dependent (e.g. template installers)
+
+---
+
+### Fixed
+
+- Minor fixes and refinements throughout the codebase to ensure full offline compatibility and a smoother user experience.
+
+
+
+## 2025-09-04
+
+### New version v1.1.7
+
+### Added
+
+- **ProxMenux Monitor**  
+  Your new monitoring tool for Proxmox. Discover all the features that will help you manage and supervise your infrastructure efficiently.
+
+  ProxMenux Monitor is designed to support future updates where **actions can be triggered without using the terminal**, and managed through a **user-friendly interface** accessible across multiple formats and devices.
+
+  Access it at: **http://your-server-ip:8008**
+
+  ![ProxMenux Monitor](https://macrimi.github.io/ProxMenux/monitor/welcome.png)
+- **New Banner Removal Method**  
+  A new function to disable the Proxmox subscription message with improved safety:
+  - Creates a full backup before modifying any files
+  - Shows a clear warning that breaking changes may occur with future GUI updates
+  - If the GUI fails to load, the user can revert changes via SSH from the post-install menu using the **"Uninstall Options → Restore Banner"** tool
+
+  Special thanks to **@eryonki** for providing the improved method.
+
+---
+
+### Improved
+
+- **CORAL TPU Installer Updated for PVE 9**  
+  The CORAL TPU driver installer now supports both **Proxmox VE 8 and VE 9**, ensuring compatibility with the latest kernels and udev rules.
+
+- **Log2RAM Installation & Integration**  
+  - Log2RAM installation is now idempotent and can be safely run multiple times.
+  - Automatically adjusts `journald` configuration to align with the size and behavior of Log2RAM.
+  - Ensures journaling is correctly tuned to avoid overflows or RAM exhaustion on low-memory systems.
+
+- **Network Optimization Function (LXC + NFS)**  
+  Improved to prevent “martian source” warnings in setups where **LXC containers share storage with VMs** over NFS within the same server.
+
+- **APT Upgrade Progress**  
+  When running full system upgrades via ProxMenux, a **real-time progress bar** is now displayed, giving the user clear visibility into the update process.
+
+---
+
+### Fixed
+
+- Other small improvements and fixes to optimize runtime performance and eliminate minor bugs.
+
+
+
+## 2025-01-10
+
+### New version v1.1.6
+
+![Shared Resources Menu](https://macrimi.github.io/ProxMenux/share/main-menu.png)
+
+
+### Added
+
+- **New Menu: Mount and Share Manager**  
+  Introduced a comprehensive new menu for managing shared resources between Proxmox host and LXC containers:
+
+  **Host Configuration Options:**
+  - **Configure NFS Shared on Host** - Add, view, and remove NFS shared resources on the Proxmox server with automatic export management
+  - **Configure Samba Shared on Host** - Add, view, and remove Samba/CIFS shared resources on the Proxmox server with share configuration  
+  - **Configure Local Shared on Host** - Create and manage local shared directories with proper permissions on the Proxmox host
+
+  **LXC Integration Options:**
+  - **Configure LXC Mount Points (Host ↔ Container)** - **Core feature** that enables mounting host directories into LXC containers with automatic permission handling. Includes the ability to **view existing mount points** for each container in a clear, organized way and **remove mount points** with proper verification that the process completed successfully. Especially optimized for **unprivileged containers** where UID/GID mapping is critical.
+  - **Configure NFS Client in LXC** - Set up NFS client inside privileged containers
+  - **Configure Samba Client in LXC** - Set up Samba client inside privileged containers  
+  - **Configure NFS Server in LXC** - Install NFS server inside privileged containers
+  - **Configure Samba Server in LXC** - Install Samba server inside privileged containers
+
+  **Documentation & Support:**
+  - **Help & Info (commands)** - Comprehensive guides with step-by-step manual instructions for all sharing scenarios
+
+  The entire system is built around the **LXC Mount Points** functionality, which automatically detects filesystem types, handles permission mapping between host and container users, and provides seamless integration for both privileged and unprivileged containers.
+
+---
+
+### Improved
+
+- **Log2RAM Auto-Detection Enhancement**  
+  In the automatic post-install script, the Log2RAM installation function now prompts the user when automatic disk ssd/m2 detection fails.
+  This ensures Log2RAM can still be installed on systems where automatic disk detection doesn't work properly.
+
+---
+
+### Fixed
+
+- **Proxmox Update Repository Verification**  
+  Fixed an issue in the Proxmox update function where empty repository source files would cause errors during conflict verification. The function now properly handles empty `/etc/apt/sources.list.d/` files without throwing false warnings.
+
+  Thanks to **@JF_Car** for reporting this issue.
+
+---
+
+### Acknowledgments
+
+Special thanks to **@JF_Car**, **@ghosthvj**, and **@jonatanc** for their testing, valuable feedback, and suggestions that helped refine the shared resources functionality and improve the overall user experience.
+
+
+
+## 2025-08-20
+
+### New version v1.1.5
+
+### Added
+
+- **New Script: Upgrade PVE 8 to PVE 9**  
+  Added a full upgrade tool located under `Utilities and Tools`. It provides:
+  1. **Automatic upgrade** from PVE 8 to 9
+  2. **Interactive upgrade** with step-by-step confirmations
+  3. **Check-only mode** using `check-pve8to9`
+  4. **Manual instructions** shown in order for users who prefer to upgrade manually
+
+- **New Tools in System Utilities**
+  - [`s-tui`](https://github.com/amanusk/s-tui): Terminal-based CPU monitoring with graphs
+  - [`intel-gpu-tools`](https://gitlab.freedesktop.org/drm/igt-gpu-tools): Useful for Intel GPU diagnostics
+
+---
+
+### Improved
+
+- **APT Upgrade Handling**  
+  The PVE upgrade function now blocks the process if any package prompts for manual confirmation. This avoids partial upgrades and ensures consistency.
+
+- **Network Optimization (sysctl)**  
+  - Obsolete kernel parameters removed (e.g., `tcp_tw_recycle`, `nf_conntrack_helper`) to prevent warnings in **Proxmox 9 / kernel 6.14**
+  - Now generates only valid, up-to-date sysctl parameters
+
+- **AMD CPU Patch Handling**  
+  - Now applies correct `idle=nomwait` and KVM options (`ignore_msrs=1`, `report_ignored_msrs=0`)
+  - Expected warning is now documented and safely handled for stability with Ryzen/EPYC
+
+- **Timezone & NTP Fixes**  
+  - Automatically detects timezone using public IP geolocation
+  - Falls back to UTC if detection fails
+  - Restarts Postfix after timezone set → resolves `/var/spool/postfix/etc/localtime` mismatch warning
+
+- **Repository & Package Installer Logic**  
+  - Now verifies that working repositories exist before installing any package
+  - If none are available, adds a fallback **Debian stable** repository
+  - Replaces deprecated `mlocate` with `plocate` (compatible with Debian 13 and Proxmox 9)
+
+- **Improved Logs and User Feedback**  
+  - Actions that fail now provide precise messages (instead of falsely marking as success)
+  - Helps users clearly understand what's been applied or skipped
+
+
+
+## 2025-08-06
+
+### New version v1.1.4
+
+### Added
+
+- **Proxmox 9 Compatibility Preparation**  
+  This version prepares **ProxMenux** for the upcoming **Proxmox VE 9**:
+  - The function to add the official Proxmox repositories now supports the new `.sources` format used in Proxmox 9, while maintaining backward compatibility with Proxmox 8.
+  - Banner removal is now optionally supported for Proxmox 9.
+
+- **xshok-proxmox Detection**  
+  Added a check to detect if the `xshok-proxmox` post-install script has already been executed.  
+  If detected, a warning is shown to avoid conflicting adjustments:
+
+  ```
+  It appears that you have already executed the xshok-proxmox post-install script on this system.
+
+  If you continue, some adjustments may be duplicated or conflict with those already made by xshok.
+
+  Do you want to continue anyway?
+  ```
+
+---
+
+### Improved
+
+- **Banner Removal (Proxmox 8.4.9+)**  
+  Updated the logic for removing the subscription banner in **Proxmox 8.4.9**, due to changes in `proxmoxlib.js`.
+
+- **LXC Disk Passthrough (Persistent UUID)**  
+  The function to add a physical disk to an LXC container now uses **UUID-based persistent paths**.  
+  This ensures that disks remain correctly mounted, even if the `/dev/sdX` order changes due to new hardware.
+
+  ```bash
+  PERSISTENT_DISK=$(get_persistent_path "$DISK")
+  if [[ "$PERSISTENT_DISK" != "$DISK" ]] ...
+  ```
+
+- **System Utilities Installer**  
+  Now checks whether APT sources are available before installing selected tools.  
+  If a new Proxmox installation has no active repos, it will **automatically add the default sources** to avoid installation failure.
+
+- **IOMMU Activation on ZFS Systems**  
+  The function that enables IOMMU for passthrough now verifies existing kernel parameters to avoid duplication if the user has already configured them manually.
+
+---
+
+### Fixed
+
+- Minor code cleanup and improved runtime performance across several modules.
+
+
+
+## 2025-07-20
+
+### Changed
+
+- **Subscription Banner Removal (Proxmox 8.4.5+)**  
+  Improved the `remove_subscription_banner` function to ensure compatibility with Proxmox 8.4.5, where the banner removal method was failing after clean installations.
+
+- **Improved Log2RAM Detection**  
+  In both the automatic and customizable post-install scripts, the logic for Log2RAM installation has been improved.  
+  Now it correctly detects if Log2RAM is already configured and avoids triggering errors or reconfiguration.
+
+- **Optimized Figurine Installation**  
+  The `install_figurine` function now avoids duplicating `.bashrc` entries if the customization for the root prompt already exists.
+
+
+### Added
+
+- **New Function: Persistent Network Interface Naming**  
+  Added a new function `setup_persistent_network` to create stable network interface names using `.link` files based on MAC addresses.  
+  This avoids unpredictable renaming (e.g., `enp2s0` becoming `enp3s0`) when hardware changes, PCI topology shifts, or passthrough configurations are applied.
+
+  **Why use `.link` files?**  
+  Because predictable interface names in `systemd` can change with hardware reordering or replacement. Using static `.link` files bound to MAC addresses ensures consistency, especially on systems with multiple NICs or passthrough setups.
+
+  Special thanks to [@Andres_Eduardo_Rojas_Moya] for contributing the persistent  
+  network naming function and for the original idea.
+
+```bash
+[Match]
+MACAddress=XX:XX:XX:XX:XX:XX
+
+[Link]
+Name=eth0
+```
+
+
+## 2025-07-01
+
+### New version v1.1.3
+
+![Installer Menu](https://macrimi.github.io/ProxMenux/install/install.png)
+
+- **Dual Installation Modes for ProxMenux**  
+  The installer now offers two distinct modes:  
+  1. **Lite version (no translations):** Only installs two official Debian packages (`dialog`, `jq`) to enable menus and JSON parsing. No files are written beyond the configuration directory.  
+  2. **Full version (with translations):** Uses a virtual environment and allows selecting the interface language during installation.  
+
+  When updating, if the user switches from full to lite, the old version will be **automatically removed** for a clean transition.
+
+### Added
+
+- **New Script: Automated Post-Installation Setup**  
+  A new minimal post-install script that performs essential setup automatically:  
+  - System upgrade and sync  
+  - Remove enterprise banner  
+  - Optimize APT, journald, logrotate, system limits  
+  - Improve kernel panic handling, memory settings, entropy, network  
+  - Add `.bashrc` tweaks and **Log2RAM auto-install** (if SSD/M.2 is detected)
+
+- **New Function: Log2RAM Configuration**  
+  Now available in both the customizable and automatic post-install scripts.  
+  On systems with SSD/NVMe, Log2RAM is **enabled automatically** to preserve disk life.
+
+- **New Menus:**
+  - 🧰 **System Utilities Menu**  
+    Lets users select and install useful CLI tools with proper command validation.
+  - 🌐 **Network Configuration & Repair**  
+    A new interactive menu for analyzing and repairing network interfaces.
+
+### Improved
+
+- **Post-Install Menu Logic**  
+  Options are now grouped more logically for better usability.
+
+- **VM Creation Menu**  
+  Enhanced with improved CPU model support and custom options.
+
+- **UUP Dump ISO Creator Script**  
+  - Added option to **customize the temporary folder location**  
+  - Fixed issue where entire temp folder was deleted instead of just contents  
+    💡 Suggested by [@igrokit](https://github.com/igrokit)  
+    [#17](https://github.com/MacRimi/ProxMenux/issues/17), [#11](https://github.com/MacRimi/ProxMenux/issues/11)
+
+- **Physical Disk to LXC Script**  
+  Now handles **XFS-formatted disks** correctly.  
+  Thanks to [@antroxin](https://github.com/antroxin) for reporting and testing!
+
+- **System Utilities Installer**  
+  Rewritten to **verify command availability** after installation, ensuring tools work as expected.  
+  🐛 Fix for [#18](https://github.com/MacRimi/ProxMenux/issues/18) by [@DST73](https://github.com/DST73)
+
+### Fixed
+
+- **Enable IOMMU on ZFS**  
+  The detection and configuration for enabling IOMMU on ZFS-based systems is now fully functional.  
+  🐛 Fix for [#15](https://github.com/MacRimi/ProxMenux/issues/15) by [@troponaut](https://github.com/troponaut)
+
+### Other
+
+- Performance and code cleanup improvements across several modules.
+
+
+
+## 2025-06-06
+
+### Added
+
+- **New Menu: Proxmox PVE Helper Scripts**  
+  Officially introduced the new **Proxmox PVE Helper Scripts** menu, replacing the previous: Esenciales Proxmox.  
+  This new menu includes:
+  - Script search by name in real time
+  - Category-based browsing
+
+  It’s a cleaner, faster, and more functional way to access community scripts in Proxmox.
+
+  ![Helper Scripts Menu](https://macrimi.github.io/ProxMenux/menu-helpers-script.png)
+
+
+- **New CPU Models in VM Creation**  
+  The CPU selection menu in VM creation has been greatly expanded to support advanced QEMU and x86-64 CPU profiles.  
+  This allows better compatibility with modern guest systems and fine-tuning performance for specific workloads, including nested virtualization and hardware-assisted features.
+
+
+  ![CPU Config](https://macrimi.github.io/ProxMenux/vm/config-cpu.png)
+
+  Thanks to **@Nida Légé (Nidouille)** for suggesting this enhancement.
+
+
+- **Support for `.raw` Disk Images**  
+  The disk import tool for VMs now supports `.raw` files, in addition to `.img`, `.qcow2`, and `.vmdk`.  
+  This improves compatibility when working with disk exports from other hypervisors or backup tools.
+
+  💡 Suggested by **@guilloking** in [GitHub Issue #5](https://github.com/MacRimi/ProxMenux/issues/5)
+
+
+- **Locale Detection in Language Skipping**  
+  The function that disables extra APT languages now includes:
+  - Automatic locale detection (`LANG`)
+  - Auto-generation of `en_US.UTF-8` if none is found
+  - Prevents warnings during script execution due to undefined locale
+
+
+### Improved
+
+- **APT Language Skipping Logic**  
+  Improved locale handling ensures system compatibility before disabling translations:
+  ```bash
+  if ! locale -a | grep -qi "^${default_locale//-/_}$"; then
+      echo "$default_locale UTF-8" >> /etc/locale.gen
+      locale-gen "$default_locale"
+  fi
+  ```
+
+- **System Update Speed**  
+  Post-install system upgrades are now faster:  
+  - The upgrade process (`dist-upgrade`) is separated from container template index updates.
+  - Index refresh is now an optional feature selected in the script.
+
+
+
+## 2025-05-27
+
+### Fixed
+- **Kali Linux ISO URL Updated**  
+  Fixed the incorrect download URL for Kali Linux ISO in the Linux installer module. The new correct path is:  
+  ```
+  https://cdimage.kali.org/kali-2025.1c/kali-linux-2025.1c-installer-amd64.iso
+  ```
+
+### Improved
+- **Faster Dialog Menu Transitions**  
+  Improved UI responsiveness across all interactive menus by replacing `whiptail` with `dialog`, offering faster transitions and smoother navigation.
+
+- **Coral USB Support in LXC**  
+  Improved the logic for configuring Coral USB TPU passthrough into LXC containers:
+  - Refactored configuration into modular blocks with better structure and inline comments.
+  - Clear separation of Coral USB (`/dev/coral`) and Coral M.2 (`/dev/apex_0`) logic.
+  - Maintains backward compatibility with existing LXC configurations.
+  - Introduced persistent Coral USB passthrough using a udev rule:
+    ```bash
+    # Create udev rule for Coral USB
+    SUBSYSTEM=="usb", ATTRS{idVendor}=="18d1", ATTRS{idProduct}=="9302", MODE="0666", TAG+="uaccess", SYMLINK+="coral"
+    
+    # Map /dev/coral if it exists
+    if [ -e /dev/coral ]; then
+        echo "lxc.mount.entry: /dev/coral dev/coral none bind,optional,create=file" >> "$CONFIG_FILE"
+    fi
+    ```
+  - Special thanks to **@Blaspt** for validating the persistent Coral USB passthrough and suggesting the use of `/dev/coral` symbolic link.
+
+
+### Added
+- **Persistent Coral USB Passthrough Support**  
+  Added udev rule support for Coral USB devices to persistently map them as `/dev/coral`, enabling consistent passthrough across reboots. This path is automatically detected and mapped in the container configuration.
+
+- **RSS Feed Integration**  
+  Added support for generating an RSS feed for the changelog, allowing users to stay informed of updates through news clients.
+
+- **Release Service Automation**  
+  Implemented a new release management service to automate publishing and tagging of versions, starting with version **v1.1.2**.
+
+
 ## 2025-05-13
 
 ### Fixed

CODE_OF_CONDUCT.md

@@ -29,6 +29,7 @@ Instead, please report it privately via email:
 
 📧 proxmenux@macrimi.pro
 
+For detailed information on security vulnerabilities and how to report them, please refer to our [Security Policy](./SECURITY.md).
 
 ## 🤝 3. Community Guidelines