v2.5.2: redesign Tunnels section in Settings

Download release ZIP from git.evilfox.cc when git is unavailable, add upgrade_panel API, and show a primary Update panel button.

README.md

@@ -228,6 +228,12 @@ GitHub Actions workflows in `.github/workflows/`:
 
 ## 📋 Fix / changelog (this fork)
 
+### v2.5.2
+*   **Tunnels UI redesign** — Settings → Tunnels: grouped layout (public access / outbound VPN), provider cards, status pills, responsive grid.
+
+### v2.5.1
+*   **One-click panel update** — Settings → About → **Update panel**: downloads release ZIP from Gitea (or `git checkout` when `.git` exists), runs `pip install`, restarts.
+
 ### v2.5.0
 *   **NordVPN in Tunnels** — connect/disconnect outbound NordVPN from Settings (official `nordvpn` CLI; optional country/city).
 

app.py

@@ -102,7 +102,7 @@ else:
     application_path = os.path.dirname(__file__)
 
 DATA_FILE = os.path.join(application_path, 'data.json')  # legacy JSON; used only for one-shot import / export
-CURRENT_VERSION = "v2.5.0"
+CURRENT_VERSION = "v2.5.2"
 RELEASES_REPO_URL = repo_url()
 RELEASES_API_LATEST = api_latest_url()
 BIN_DIR = os.environ.get('TUNNEL_BIN_DIR', os.path.join(application_path, 'bin'))
@@ -5682,7 +5682,7 @@ async def api_check_updates(request: Request):
             'releases_url': f'{RELEASES_REPO_URL}/releases',
             'body': body,
             'can_auto_update': bool(mode.get('can_auto_update')),
-            'update_mode': mode.get('mode'),
+            'update_mode': mode.get('update_method') or mode.get('mode'),
             'mode': mode,
         }
     except Exception as e:
@@ -5690,26 +5690,28 @@ async def api_check_updates(request: Request):
         return JSONResponse({'error': str(e)}, status_code=502)
 
 
+async def _fetch_latest_release_tag() -> str:
+    async with httpx.AsyncClient(timeout=15.0, follow_redirects=True) as client:
+        resp = await client.get(RELEASES_API_LATEST, headers={'Accept': 'application/json'})
+    if resp.status_code >= 400:
+        raise RuntimeError(f'Release API returned HTTP {resp.status_code}')
+    data = resp.json() if resp.content else {}
+    return (data.get('tag_name') or data.get('name') or '').strip()
+
+
 @app.post('/api/settings/apply_update', tags=["Settings"])
 async def api_apply_update(request: Request, req: ApplyUpdateRequest):
-    """Pull the selected release tag from git.evilfox.cc and restart the panel."""
+    """Install a release tag (git checkout or archive download) and restart the panel."""
     if not _check_admin(request):
         return JSONResponse({'error': 'Forbidden'}, status_code=403)
     updater = UpdateManager(application_path, CURRENT_VERSION)
     target = (req.target_version or '').strip()
     if not target:
-        # Resolve latest if UI did not pass a tag
         try:
-            async with httpx.AsyncClient(timeout=15.0, follow_redirects=True) as client:
-                resp = await client.get(
-                    RELEASES_API_LATEST,
-                    headers={'Accept': 'application/json'},
-                )
-            if resp.status_code < 400 and resp.content:
-                payload = resp.json()
-                target = (payload.get('tag_name') or payload.get('name') or '').strip()
-        except Exception:
+            target = await _fetch_latest_release_tag()
+        except Exception as e:
             logger.exception('Failed to resolve latest tag for apply_update')
+            return JSONResponse({'error': str(e)}, status_code=502)
     if not target:
         return JSONResponse({'error': 'No target version specified'}, status_code=400)
 
@@ -5719,13 +5721,54 @@ async def api_apply_update(request: Request, req: ApplyUpdateRequest):
         bool(req.allow_dirty),
     )
     if result.get('status') != 'success':
-        return JSONResponse({'error': result.get('message') or 'Update failed', **result}, status_code=500)
+        status_code = 409 if result.get('needs_confirm_dirty') else 500
+        return JSONResponse({'error': result.get('message') or 'Update failed', **result}, status_code=status_code)
 
     if result.get('restart'):
         UpdateManager.schedule_restart(1.5)
     return result
 
 
+@app.post('/api/settings/upgrade_panel', tags=["Settings"])
+async def api_upgrade_panel(request: Request):
+    """One-click: fetch latest release, install if newer, restart."""
+    if not _check_admin(request):
+        return JSONResponse({'error': 'Forbidden'}, status_code=403)
+    updater = UpdateManager(application_path, CURRENT_VERSION)
+    mode = updater.detect_mode()
+    if not mode.get('can_auto_update'):
+        return JSONResponse({
+            'error': (
+                'In-panel update is not available for this install. '
+                'Use git clone / writable app directory, or rebuild Docker on the host.'
+            ),
+            'mode': mode,
+        }, status_code=400)
+    try:
+        latest = await _fetch_latest_release_tag()
+    except Exception as e:
+        return JSONResponse({'error': str(e)}, status_code=502)
+    if not latest:
+        return JSONResponse({'error': 'Could not resolve latest release tag'}, status_code=502)
+    if not version_gt(latest, CURRENT_VERSION):
+        return {
+            'status': 'success',
+            'up_to_date': True,
+            'current_version': CURRENT_VERSION,
+            'latest_version': latest,
+            'message': 'Already on the latest version',
+        }
+
+    result = await asyncio.to_thread(updater.apply_update, latest, True)
+    if result.get('status') != 'success':
+        return JSONResponse({'error': result.get('message') or 'Update failed', **result}, status_code=500)
+    if result.get('restart'):
+        UpdateManager.schedule_restart(1.5)
+    result['up_to_date'] = False
+    result['previous_version'] = CURRENT_VERSION
+    return result
+
+
 @app.get('/api/settings/tunnels/status', tags=["Settings"])
 async def api_tunnels_status(request: Request):
     if not _check_admin(request):

managers/update_manager.py

@@ -1,14 +1,19 @@
-"""Panel self-update from the EvilFox Gitea repository."""
+"""Panel self-update from the EvilFox Gitea repository (git or release archive)."""
 
 from __future__ import annotations
 
 import logging
 import os
 import re
+import shutil
 import subprocess
 import sys
+import tempfile
 import threading
 import time
+import urllib.error
+import urllib.request
+import zipfile
 from typing import Optional
 
 logger = logging.getLogger(__name__)
@@ -18,6 +23,13 @@ DEFAULT_GIT_URL = 'https://git.evilfox.cc/test2/Amnezia-Web-Panel-main.git'
 DEFAULT_API_LATEST = 'https://git.evilfox.cc/api/v1/repos/test2/Amnezia-Web-Panel-main/releases/latest'
 UPDATE_REMOTE = 'panel-update'
 
+ARCHIVE_SKIP_DIRS = frozenset({
+    '__pycache__', '.git', 'bin', 'data', 'node_modules', '.venv', 'venv', '.cursor',
+})
+ARCHIVE_SKIP_FILES = frozenset({
+    '.env', 'data.json', 'tunnels_state.json',
+})
+
 
 def _env(name: str, default: str) -> str:
     return (os.environ.get(name) or default).strip()
@@ -51,7 +63,6 @@ def parse_version(value: str) -> tuple:
             parts.append(int(m.group(1)) if m else 0)
     while len(parts) < 3:
         parts.append(0)
-    # release > prerelease: empty pre sorts higher
     pre_rank = 0 if not pre else 1
     return (parts[0], parts[1], parts[2], pre_rank, pre)
 
@@ -60,6 +71,13 @@ def version_gt(a: str, b: str) -> bool:
     return parse_version(a) > parse_version(b)
 
 
+def normalize_tag(value: str) -> str:
+    tag = (value or '').strip()
+    if not tag:
+        return ''
+    return tag if tag.startswith('v') else f'v{tag}'
+
+
 def _run(cmd: list, cwd: str, timeout: int = 120) -> tuple[int, str, str]:
     try:
         proc = subprocess.run(
@@ -83,23 +101,62 @@ class UpdateManager:
         self.app_root = os.path.abspath(app_root)
         self.current_version = current_version
 
+    def _in_docker(self) -> bool:
+        return os.path.exists('/.dockerenv') or os.environ.get('PANEL_IN_DOCKER') == '1'
+
+    def _docker_update_allowed(self) -> bool:
+        return os.environ.get('PANEL_UPDATE_ALLOW_DOCKER', '').strip().lower() in ('1', 'true', 'yes')
+
+    def _app_root_writable(self) -> bool:
+        probe = os.path.join(self.app_root, '.panel_update_write_probe')
+        try:
+            with open(probe, 'w', encoding='utf-8') as fh:
+                fh.write('ok')
+            os.remove(probe)
+            return True
+        except OSError:
+            return False
+
     def detect_mode(self) -> dict:
         frozen = bool(getattr(sys, 'frozen', False))
-        in_docker = os.path.exists('/.dockerenv') or os.environ.get('PANEL_IN_DOCKER') == '1'
+        in_docker = self._in_docker()
         git_dir = os.path.join(self.app_root, '.git')
         is_git = os.path.isdir(git_dir)
         git_ok = False
         if is_git and not frozen:
             code, _, _ = _run(['git', '--version'], self.app_root, timeout=10)
             git_ok = code == 0
-        can_auto = bool(git_ok and not frozen)
-        mode = 'git' if can_auto else ('docker' if in_docker else ('binary' if frozen else 'manual'))
+
+        writable = self._app_root_writable()
+        can_git = bool(git_ok and is_git and not frozen)
+        can_archive = bool(
+            writable
+            and not frozen
+            and (not in_docker or self._docker_update_allowed())
+        )
+        can_auto = can_git or can_archive
+
+        if can_git:
+            method = 'git'
+        elif can_archive:
+            method = 'archive'
+        elif in_docker:
+            method = 'docker'
+        elif frozen:
+            method = 'binary'
+        else:
+            method = 'manual'
+
         return {
-            'mode': mode,
+            'mode': method,
+            'update_method': method,
             'can_auto_update': can_auto,
+            'can_git_update': can_git,
+            'can_archive_update': can_archive,
             'is_git': is_git,
             'frozen': frozen,
             'in_docker': in_docker,
+            'writable': writable,
             'app_root': self.app_root,
             'repo_url': repo_url(),
             'git_url': git_url(),
@@ -131,31 +188,27 @@ class UpdateManager:
         code, out, _ = _run(['git', 'status', '--porcelain'], self.app_root, timeout=30)
         return code == 0 and bool(out.strip())
 
-    def apply_update(self, target_version: str, allow_dirty: bool = False) -> dict:
-        mode = self.detect_mode()
-        if not mode['can_auto_update']:
-            return {
-                'status': 'error',
-                'message': (
-                    'Auto-update requires a git checkout of the panel sources. '
-                    'Docker/binary installs: pull a new image or download a release manually.'
-                ),
-                'mode': mode,
-            }
-
-        target = (target_version or '').strip()
-        if not re.match(r'^v?\d+(\.\d+){0,3}([.-][\w.]+)?$', target):
-            return {'status': 'error', 'message': f'Invalid target version: {target_version}'}
-        if not target.startswith('v'):
-            target = 'v' + target
+    def _pip_install(self) -> tuple[bool, str]:
+        req = os.path.join(self.app_root, 'requirements.txt')
+        if not os.path.isfile(req):
+            return True, ''
+        code_p, out_p, err_p = _run(
+            [sys.executable, '-m', 'pip', 'install', '-r', req],
+            self.app_root,
+            timeout=300,
+        )
+        log = (out_p or err_p or '')[:1500]
+        return code_p == 0, log
 
+    def _apply_git_update(self, target: str, allow_dirty: bool) -> dict:
         if not allow_dirty and self.working_tree_dirty():
             return {
                 'status': 'error',
                 'message': (
-                    'Working tree has local changes. Commit/stash them or set allow_dirty, '
-                    'then retry auto-update.'
+                    'Working tree has local changes. Confirm update anyway to force checkout, '
+                    'or commit/stash changes first.'
                 ),
+                'needs_confirm_dirty': True,
             }
 
         err = self._ensure_update_remote()
@@ -168,35 +221,28 @@ class UpdateManager:
             timeout=180,
         )
         if code != 0:
-            return {
-                'status': 'error',
-                'message': f'git fetch failed: {stderr or out or code}',
-            }
+            return {'status': 'error', 'message': f'git fetch failed: {stderr or out or code}'}
 
-        # Prefer annotated/lightweight tag; fall back to remote main tip if tag missing
+        # Ensure tag is present locally
         code, _, _ = _run(
             ['git', 'rev-parse', '-q', '--verify', f'refs/tags/{target}'],
             self.app_root,
             timeout=15,
         )
-        if code == 0:
-            checkout_ref = target
-        else:
-            # tag might only exist as FETCH_HEAD / remote tag
-            code2, _, _ = _run(
-                ['git', 'rev-parse', '-q', '--verify', f'refs/tags/{target}^{{}}'],
+        if code != 0:
+            _run(
+                ['git', 'fetch', '--depth', '1', UPDATE_REMOTE, f'refs/tags/{target}:refs/tags/{target}'],
                 self.app_root,
-                timeout=15,
+                timeout=120,
             )
-            checkout_ref = target if code2 == 0 else f'tags/{target}'
 
+        checkout_ref = f'tags/{target}'
         code, out, stderr = _run(
             ['git', 'checkout', '--force', checkout_ref],
             self.app_root,
             timeout=60,
         )
         if code != 0:
-            # last resort: checkout remote main
             code_m, out_m, err_m = _run(
                 ['git', 'checkout', '--force', '-B', 'main', f'{UPDATE_REMOTE}/main'],
                 self.app_root,
@@ -209,31 +255,130 @@ class UpdateManager:
                 }
             checkout_ref = f'{UPDATE_REMOTE}/main'
 
-        req = os.path.join(self.app_root, 'requirements.txt')
-        pip_log = ''
-        if os.path.isfile(req):
-            code_p, out_p, err_p = _run(
-                [sys.executable, '-m', 'pip', 'install', '-r', req],
-                self.app_root,
-                timeout=300,
-            )
-            pip_log = (out_p or err_p or '')[:1500]
-            if code_p != 0:
-                return {
-                    'status': 'error',
-                    'message': f'pip install failed after checkout: {err_p or out_p or code_p}',
-                    'checkout': checkout_ref,
-                }
+        ok, pip_log = self._pip_install()
+        if not ok:
+            return {
+                'status': 'error',
+                'message': f'pip install failed after checkout: {pip_log[:500]}',
+                'checkout': checkout_ref,
+                'method': 'git',
+            }
 
         return {
             'status': 'success',
-            'message': f'Updated to {target}. Panel will restart.',
+            'message': f'Updated to {target} via git. Panel will restart.',
             'target_version': target,
             'checkout': checkout_ref,
             'pip': pip_log[:500],
+            'method': 'git',
             'restart': True,
         }
 
+    def _archive_urls(self, tag: str) -> list[str]:
+        base = repo_url()
+        return [
+            f'{base}/archive/{tag}.zip',
+            f'{base}/archive/{tag.lstrip("v")}.zip',
+            f'{api_latest_url().rsplit("/releases/latest", 1)[0]}/archive/{tag}.zip',
+        ]
+
+    def _download_archive(self, tag: str, dest_path: str) -> None:
+        last_err = 'unknown error'
+        for url in self._archive_urls(tag):
+            try:
+                req = urllib.request.Request(url, headers={'User-Agent': 'Amnezia-Web-Panel-Updater'})
+                with urllib.request.urlopen(req, timeout=180) as resp:
+                    with open(dest_path, 'wb') as out:
+                        shutil.copyfileobj(resp, out)
+                if os.path.getsize(dest_path) > 1024:
+                    return
+                last_err = f'empty archive from {url}'
+            except urllib.error.HTTPError as e:
+                last_err = f'HTTP {e.code} for {url}'
+            except Exception as e:
+                last_err = str(e)
+        raise RuntimeError(f'Failed to download release archive: {last_err}')
+
+    @staticmethod
+    def _extract_zip_root(extract_dir: str) -> str:
+        entries = [e for e in os.listdir(extract_dir) if e not in ('.', '..')]
+        if len(entries) == 1:
+            only = os.path.join(extract_dir, entries[0])
+            if os.path.isdir(only):
+                return only
+        return extract_dir
+
+    def _sync_tree(self, src_root: str) -> None:
+        for root, dirs, files in os.walk(src_root):
+            dirs[:] = [d for d in dirs if d not in ARCHIVE_SKIP_DIRS]
+            rel = os.path.relpath(root, src_root)
+            dest_root = self.app_root if rel in ('.', '') else os.path.join(self.app_root, rel)
+            os.makedirs(dest_root, exist_ok=True)
+            for fname in files:
+                if fname in ARCHIVE_SKIP_FILES:
+                    continue
+                src_file = os.path.join(root, fname)
+                dest_file = os.path.join(dest_root, fname)
+                shutil.copy2(src_file, dest_file)
+
+    def _apply_archive_update(self, target: str) -> dict:
+        tmpdir = tempfile.mkdtemp(prefix='panel-update-')
+        zip_path = os.path.join(tmpdir, f'{target}.zip')
+        extract_dir = os.path.join(tmpdir, 'extract')
+        try:
+            self._download_archive(target, zip_path)
+            os.makedirs(extract_dir, exist_ok=True)
+            with zipfile.ZipFile(zip_path, 'r') as zf:
+                zf.extractall(extract_dir)
+            src_root = self._extract_zip_root(extract_dir)
+            if not os.path.isdir(src_root):
+                return {'status': 'error', 'message': 'Invalid release archive layout'}
+            self._sync_tree(src_root)
+        except Exception as e:
+            return {'status': 'error', 'message': str(e), 'method': 'archive'}
+        finally:
+            shutil.rmtree(tmpdir, ignore_errors=True)
+
+        ok, pip_log = self._pip_install()
+        if not ok:
+            return {
+                'status': 'error',
+                'message': f'Files updated but pip install failed: {pip_log[:500]}',
+                'method': 'archive',
+            }
+
+        return {
+            'status': 'success',
+            'message': f'Updated to {target} from release archive. Panel will restart.',
+            'target_version': target,
+            'pip': pip_log[:500],
+            'method': 'archive',
+            'restart': True,
+        }
+
+    def apply_update(self, target_version: str, allow_dirty: bool = False) -> dict:
+        mode = self.detect_mode()
+        target = normalize_tag(target_version)
+        if not target or not re.match(r'^v\d+(\.\d+){0,3}([.-][\w.]+)?$', target):
+            return {'status': 'error', 'message': f'Invalid target version: {target_version}'}
+
+        if mode.get('can_git_update'):
+            return self._apply_git_update(target, allow_dirty)
+        if mode.get('can_archive_update'):
+            return self._apply_archive_update(target)
+
+        hint = (
+            'Cannot update from inside this install. '
+            'Use a git clone or writable source directory, or rebuild the Docker image on the host.'
+        )
+        if mode.get('in_docker'):
+            hint = (
+                'Docker image install: on the host run '
+                '`git pull && docker compose up -d --build` '
+                '(or set PANEL_UPDATE_ALLOW_DOCKER=1 if /app is bind-mounted).'
+            )
+        return {'status': 'error', 'message': hint, 'mode': mode}
+
     @staticmethod
     def schedule_restart(delay_sec: float = 1.5) -> None:
         def _restart():

static/css/style.css

@@ -1623,6 +1623,319 @@ a:hover {
     gap: var(--space-md);
 }
 
+/* ===== Tunnels (Settings) ===== */
+.tunnels-card .tunnels-header {
+    margin-bottom: var(--space-lg);
+}
+
+.tunnels-card .tunnels-header .card-title {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.tunnels-card .tunnels-subtitle {
+    margin: var(--space-xs) 0 0;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    line-height: 1.45;
+}
+
+.tunnels-local {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-md) var(--space-lg);
+    margin-bottom: var(--space-lg);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-focus);
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.06));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.tunnels-local-icon {
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    background: var(--accent-gradient);
+    font-size: 1.25rem;
+    box-shadow: var(--shadow-glow);
+}
+
+.tunnels-local-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.tunnels-local-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-muted);
+    margin-bottom: var(--space-xs);
+}
+
+.tunnels-local-url {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.tunnels-local-url code {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+    background: transparent;
+    padding: 0;
+}
+
+.tunnels-section {
+    margin-bottom: var(--space-lg);
+}
+
+.tunnels-section:last-of-type {
+    margin-bottom: var(--space-md);
+}
+
+.tunnels-section-title {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin: 0 0 var(--space-sm) var(--space-xs);
+}
+
+.tunnels-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: var(--space-md);
+}
+
+.tunnel-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    transition: border-color var(--transition-base), box-shadow var(--transition-base);
+}
+
+.tunnel-card:hover {
+    border-color: var(--border-hover);
+}
+
+.tunnel-card--running {
+    border-color: var(--success-border);
+    box-shadow: 0 0 0 1px var(--success-border), inset 0 1px 0 rgba(34, 197, 94, 0.06);
+}
+
+.tunnel-card--connected {
+    border-color: var(--success-border);
+    box-shadow: 0 0 0 1px var(--success-border);
+}
+
+.tunnel-card-head {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-md);
+}
+
+.tunnel-card-icon {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #fff;
+}
+
+.tunnel-card-icon--cloudflare { background: linear-gradient(135deg, #f38020, #faae40); }
+.tunnel-card-icon--ngrok { background: linear-gradient(135deg, #1f2d3d, #3d5a80); }
+.tunnel-card-icon--warp { background: linear-gradient(135deg, #f38020, #e85d04); }
+.tunnel-card-icon--nordvpn { background: linear-gradient(135deg, #4687ff, #2b4eff); }
+.tunnel-card-icon--local { background: var(--accent-gradient); }
+
+.tunnel-card-meta {
+    flex: 1;
+    min-width: 0;
+}
+
+.tunnel-card-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin: 0;
+    line-height: 1.3;
+}
+
+.tunnel-card-desc {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    margin: var(--space-xs) 0 0;
+    line-height: 1.4;
+}
+
+.tunnel-status-pill {
+    flex-shrink: 0;
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: var(--radius-full);
+    white-space: nowrap;
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
+.tunnel-status-pill--ok {
+    background: var(--success-bg);
+    color: var(--success);
+    border-color: var(--success-border);
+}
+
+.tunnel-status-pill--info {
+    background: var(--info-bg);
+    color: var(--info);
+    border-color: rgba(59, 130, 246, 0.25);
+}
+
+.tunnel-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.tunnel-url-box {
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    border: 1px dashed var(--border-color);
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    line-height: 1.45;
+    min-height: 2.5rem;
+}
+
+.tunnel-url-box--empty {
+    font-style: italic;
+    color: var(--text-muted);
+}
+
+.tunnel-url-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-top: var(--space-xs);
+}
+
+.tunnel-url-row:first-child {
+    margin-top: 0;
+}
+
+.tunnel-url-row code {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.8rem;
+    color: var(--text-accent);
+    background: transparent;
+    padding: 0;
+}
+
+.tunnel-status-line {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    line-height: 1.45;
+}
+
+.tunnel-status-line--server {
+    font-family: ui-monospace, monospace;
+    font-size: 0.78rem;
+    color: var(--text-accent);
+    padding: var(--space-xs) var(--space-sm);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm);
+}
+
+.tunnel-hint {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    line-height: 1.4;
+    margin: 0;
+}
+
+.tunnel-card-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+    margin-top: auto;
+}
+
+.tunnel-card-actions .btn {
+    flex: 1;
+    min-width: 7rem;
+    justify-content: center;
+}
+
+.tunnel-card-actions--triple .btn {
+    min-width: 5.5rem;
+}
+
+.tunnel-nordvpn-fields {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-sm);
+}
+
+.tunnels-footnote {
+    margin: var(--space-md) 0 0;
+    padding: var(--space-md);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    border-left: 3px solid var(--accent);
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+@media (max-width: 640px) {
+    .tunnels-local {
+        flex-direction: column;
+        align-items: stretch;
+        text-align: center;
+    }
+
+    .tunnels-local-url {
+        flex-direction: column;
+    }
+
+    .tunnels-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .tunnel-nordvpn-fields {
+        grid-template-columns: 1fr;
+    }
+}
+
 .mt-md {
     margin-top: var(--space-md);
 }

templates/settings.html

@@ -204,112 +204,147 @@
         </div>
 
         <!-- BLOCK Tunnels -->
-        <div class="card">
-            <h3 class="card-title" style="margin-bottom: var(--space-lg);">🌍 {{ _('tunnels_title') }}</h3>
-            <div style="display: flex; flex-direction: column; gap: var(--space-md);">
-                <div style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
-                    <div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
-                        <strong>{{ _('local_server') }}</strong>
-                        <span class="badge badge-info">{{ _('active') }}</span>
-                    </div>
-                    <div style="display:flex; gap:var(--space-sm); align-items:center;">
-                        <code id="localServerUrl" style="flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text-secondary);">{{ request.url.scheme }}://{{ request.url.netloc }}</code>
+        <div class="card tunnels-card">
+            <div class="tunnels-header">
+                <h3 class="card-title">🌍 {{ _('tunnels_title') }}</h3>
+                <p class="tunnels-subtitle">{{ _('tunnels_subtitle') }}</p>
+            </div>
+
+            <div class="tunnels-local">
+                <div class="tunnels-local-icon" aria-hidden="true">🏠</div>
+                <div class="tunnels-local-body">
+                    <div class="tunnels-local-label">{{ _('local_server') }}</div>
+                    <div class="tunnels-local-url">
+                        <code id="localServerUrl">{{ request.url.scheme }}://{{ request.url.netloc }}</code>
                         <button type="button" class="btn btn-secondary btn-sm" onclick="copyElementText('localServerUrl')">{{ _('copy') }}</button>
                     </div>
                 </div>
+                <span class="tunnel-status-pill tunnel-status-pill--ok">{{ _('active') }}</span>
+            </div>
 
-                <div class="tunnel-row" data-provider="cloudflare" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
-                    <div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
-                        <strong>Cloudflare Quick Tunnel</strong>
-                        <span class="badge badge-secondary" id="cloudflareInstallBadge">{{ _('not_installed') }}</span>
-                    </div>
-                    <div id="cloudflarePublicUrls" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('tunnel_no_public_url') }}</div>
-                    <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm);">
-                        <button type="button" class="btn btn-primary" id="cloudflareTunnelBtn" onclick="enableTunnel('cloudflare')">
-                            <span id="cloudflareTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
-                            <div class="spinner hidden" id="cloudflareTunnelSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                        <button type="button" class="btn btn-secondary hidden" id="cloudflareStopBtn" onclick="stopTunnel('cloudflare')">
-                            <span id="cloudflareStopBtnText">{{ _('tunnel_stop') }}</span>
-                            <div class="spinner hidden" id="cloudflareStopSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                        <button type="button" class="btn btn-danger hidden" id="cloudflareDeleteBtn" onclick="deleteTunnel('cloudflare')">
-                            <span id="cloudflareDeleteBtnText">{{ _('tunnel_delete') }}</span>
-                            <div class="spinner hidden" id="cloudflareDeleteSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                    </div>
-                </div>
+            <div class="tunnels-section">
+                <h4 class="tunnels-section-title">{{ _('tunnels_section_inbound') }}</h4>
+                <div class="tunnels-grid">
+                    <article class="tunnel-card tunnel-row" data-provider="cloudflare" id="tunnelCard-cloudflare">
+                        <div class="tunnel-card-head">
+                            <div class="tunnel-card-icon tunnel-card-icon--cloudflare" aria-hidden="true">☁</div>
+                            <div class="tunnel-card-meta">
+                                <h5 class="tunnel-card-title">Cloudflare Quick Tunnel</h5>
+                                <p class="tunnel-card-desc">{{ _('tunnel_cloudflare_desc') }}</p>
+                            </div>
+                            <span class="tunnel-status-pill" id="cloudflareInstallBadge">{{ _('not_installed') }}</span>
+                        </div>
+                        <div class="tunnel-card-body">
+                            <div id="cloudflarePublicUrls" class="tunnel-url-box tunnel-url-box--empty">{{ _('tunnel_no_public_url') }}</div>
+                        </div>
+                        <div class="tunnel-card-actions tunnel-card-actions--triple">
+                            <button type="button" class="btn btn-primary btn-sm" id="cloudflareTunnelBtn" onclick="enableTunnel('cloudflare')">
+                                <span id="cloudflareTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
+                                <div class="spinner hidden" id="cloudflareTunnelSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                            <button type="button" class="btn btn-secondary btn-sm hidden" id="cloudflareStopBtn" onclick="stopTunnel('cloudflare')">
+                                <span id="cloudflareStopBtnText">{{ _('tunnel_stop') }}</span>
+                                <div class="spinner hidden" id="cloudflareStopSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                            <button type="button" class="btn btn-danger btn-sm hidden" id="cloudflareDeleteBtn" onclick="deleteTunnel('cloudflare')">
+                                <span id="cloudflareDeleteBtnText">{{ _('tunnel_delete') }}</span>
+                                <div class="spinner hidden" id="cloudflareDeleteSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                        </div>
+                    </article>
 
-                <div class="tunnel-row" data-provider="ngrok" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
-                    <div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
-                        <strong>ngrok Tunnel + Authtoken</strong>
-                        <span class="badge badge-secondary" id="ngrokInstallBadge">{{ _('not_installed') }}</span>
-                    </div>
-                    <div class="form-group" style="margin-bottom: var(--space-sm);">
-                        <input type="password" class="form-input" id="ngrokAuthtoken" placeholder="{{ _('ngrok_authtoken_placeholder') }}" autocomplete="off">
-                    </div>
-                    <div id="ngrokPublicUrls" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('tunnel_no_public_url') }}</div>
-                    <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm);">
-                        <button type="button" class="btn btn-primary" id="ngrokTunnelBtn" onclick="enableTunnel('ngrok')">
-                            <span id="ngrokTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
-                            <div class="spinner hidden" id="ngrokTunnelSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                        <button type="button" class="btn btn-secondary hidden" id="ngrokStopBtn" onclick="stopTunnel('ngrok')">
-                            <span id="ngrokStopBtnText">{{ _('tunnel_stop') }}</span>
-                            <div class="spinner hidden" id="ngrokStopSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                        <button type="button" class="btn btn-danger hidden" id="ngrokDeleteBtn" onclick="deleteTunnel('ngrok')">
-                            <span id="ngrokDeleteBtnText">{{ _('tunnel_delete') }}</span>
-                            <div class="spinner hidden" id="ngrokDeleteSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                    </div>
-                </div>
-
-
-                <div class="tunnel-row" data-provider="warp" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
-                    <div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
-                        <strong>Cloudflare WARP</strong>
-                        <span class="badge badge-secondary" id="warpInstallBadge">{{ _('not_installed') }}</span>
-                    </div>
-                    <div id="warpStatusText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('warp_status_unknown') }}</div>
-                    <div id="warpHintText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('warp_hint') }}</div>
-                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);">
-                        <button type="button" class="btn btn-primary" id="warpConnectBtn" onclick="connectWarp()">
-                            <span id="warpConnectBtnText">{{ _('warp_connect') }}</span>
-                            <div class="spinner hidden" id="warpConnectSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                        <button type="button" class="btn btn-secondary hidden" id="warpDisconnectBtn" onclick="disconnectWarp()">
-                            <span id="warpDisconnectBtnText">{{ _('warp_disconnect') }}</span>
-                            <div class="spinner hidden" id="warpDisconnectSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="tunnel-row" data-provider="nordvpn" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
-                    <div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
-                        <strong>NordVPN</strong>
-                        <span class="badge badge-secondary" id="nordvpnInstallBadge">{{ _('not_installed') }}</span>
-                    </div>
-                    <div id="nordvpnStatusText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('nordvpn_status_unknown') }}</div>
-                    <div id="nordvpnServerText" class="form-hint hidden" style="margin-bottom: var(--space-sm);"></div>
-                    <div id="nordvpnHintText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('nordvpn_hint') }}</div>
-                    <div class="grid" style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm);">
-                        <input type="text" class="form-input" id="nordvpnCountry" placeholder="{{ _('nordvpn_country_placeholder') }}" autocomplete="off">
-                        <input type="text" class="form-input" id="nordvpnCity" placeholder="{{ _('nordvpn_city_placeholder') }}" autocomplete="off">
-                    </div>
-                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);">
-                        <button type="button" class="btn btn-primary" id="nordvpnConnectBtn" onclick="connectNordvpn()">
-                            <span id="nordvpnConnectBtnText">{{ _('nordvpn_connect') }}</span>
-                            <div class="spinner hidden" id="nordvpnConnectSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                        <button type="button" class="btn btn-secondary hidden" id="nordvpnDisconnectBtn" onclick="disconnectNordvpn()">
-                            <span id="nordvpnDisconnectBtnText">{{ _('nordvpn_disconnect') }}</span>
-                            <div class="spinner hidden" id="nordvpnDisconnectSpinner" style="width:14px; height:14px;"></div>
-                        </button>
-                    </div>
+                    <article class="tunnel-card tunnel-row" data-provider="ngrok" id="tunnelCard-ngrok">
+                        <div class="tunnel-card-head">
+                            <div class="tunnel-card-icon tunnel-card-icon--ngrok" aria-hidden="true">N</div>
+                            <div class="tunnel-card-meta">
+                                <h5 class="tunnel-card-title">ngrok</h5>
+                                <p class="tunnel-card-desc">{{ _('tunnel_ngrok_desc') }}</p>
+                            </div>
+                            <span class="tunnel-status-pill" id="ngrokInstallBadge">{{ _('not_installed') }}</span>
+                        </div>
+                        <div class="tunnel-card-body">
+                            <input type="password" class="form-input" id="ngrokAuthtoken" placeholder="{{ _('ngrok_authtoken_placeholder') }}" autocomplete="off">
+                            <div id="ngrokPublicUrls" class="tunnel-url-box tunnel-url-box--empty">{{ _('tunnel_no_public_url') }}</div>
+                        </div>
+                        <div class="tunnel-card-actions tunnel-card-actions--triple">
+                            <button type="button" class="btn btn-primary btn-sm" id="ngrokTunnelBtn" onclick="enableTunnel('ngrok')">
+                                <span id="ngrokTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
+                                <div class="spinner hidden" id="ngrokTunnelSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                            <button type="button" class="btn btn-secondary btn-sm hidden" id="ngrokStopBtn" onclick="stopTunnel('ngrok')">
+                                <span id="ngrokStopBtnText">{{ _('tunnel_stop') }}</span>
+                                <div class="spinner hidden" id="ngrokStopSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                            <button type="button" class="btn btn-danger btn-sm hidden" id="ngrokDeleteBtn" onclick="deleteTunnel('ngrok')">
+                                <span id="ngrokDeleteBtnText">{{ _('tunnel_delete') }}</span>
+                                <div class="spinner hidden" id="ngrokDeleteSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                        </div>
+                    </article>
                 </div>
             </div>
-            <p class="form-hint" style="margin-top: var(--space-md);">{{ _('tunnels_hint') }}</p>
+
+            <div class="tunnels-section">
+                <h4 class="tunnels-section-title">{{ _('tunnels_section_outbound') }}</h4>
+                <div class="tunnels-grid">
+                    <article class="tunnel-card tunnel-row" data-provider="warp" id="tunnelCard-warp">
+                        <div class="tunnel-card-head">
+                            <div class="tunnel-card-icon tunnel-card-icon--warp" aria-hidden="true">W</div>
+                            <div class="tunnel-card-meta">
+                                <h5 class="tunnel-card-title">Cloudflare WARP</h5>
+                                <p class="tunnel-card-desc">{{ _('tunnel_warp_desc') }}</p>
+                            </div>
+                            <span class="tunnel-status-pill" id="warpInstallBadge">{{ _('not_installed') }}</span>
+                        </div>
+                        <div class="tunnel-card-body">
+                            <p id="warpStatusText" class="tunnel-status-line">{{ _('warp_status_unknown') }}</p>
+                            <p id="warpHintText" class="tunnel-hint">{{ _('warp_hint') }}</p>
+                        </div>
+                        <div class="tunnel-card-actions">
+                            <button type="button" class="btn btn-primary btn-sm" id="warpConnectBtn" onclick="connectWarp()">
+                                <span id="warpConnectBtnText">{{ _('warp_connect') }}</span>
+                                <div class="spinner hidden" id="warpConnectSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                            <button type="button" class="btn btn-secondary btn-sm hidden" id="warpDisconnectBtn" onclick="disconnectWarp()">
+                                <span id="warpDisconnectBtnText">{{ _('warp_disconnect') }}</span>
+                                <div class="spinner hidden" id="warpDisconnectSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                        </div>
+                    </article>
+
+                    <article class="tunnel-card tunnel-row" data-provider="nordvpn" id="tunnelCard-nordvpn">
+                        <div class="tunnel-card-head">
+                            <div class="tunnel-card-icon tunnel-card-icon--nordvpn" aria-hidden="true">N</div>
+                            <div class="tunnel-card-meta">
+                                <h5 class="tunnel-card-title">NordVPN</h5>
+                                <p class="tunnel-card-desc">{{ _('tunnel_nordvpn_desc') }}</p>
+                            </div>
+                            <span class="tunnel-status-pill" id="nordvpnInstallBadge">{{ _('not_installed') }}</span>
+                        </div>
+                        <div class="tunnel-card-body">
+                            <p id="nordvpnStatusText" class="tunnel-status-line">{{ _('nordvpn_status_unknown') }}</p>
+                            <p id="nordvpnServerText" class="tunnel-status-line tunnel-status-line--server hidden"></p>
+                            <p id="nordvpnHintText" class="tunnel-hint">{{ _('nordvpn_hint') }}</p>
+                            <div class="tunnel-nordvpn-fields">
+                                <input type="text" class="form-input" id="nordvpnCountry" placeholder="{{ _('nordvpn_country_placeholder') }}" autocomplete="off">
+                                <input type="text" class="form-input" id="nordvpnCity" placeholder="{{ _('nordvpn_city_placeholder') }}" autocomplete="off">
+                            </div>
+                        </div>
+                        <div class="tunnel-card-actions">
+                            <button type="button" class="btn btn-primary btn-sm" id="nordvpnConnectBtn" onclick="connectNordvpn()">
+                                <span id="nordvpnConnectBtnText">{{ _('nordvpn_connect') }}</span>
+                                <div class="spinner hidden" id="nordvpnConnectSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                            <button type="button" class="btn btn-secondary btn-sm hidden" id="nordvpnDisconnectBtn" onclick="disconnectNordvpn()">
+                                <span id="nordvpnDisconnectBtnText">{{ _('nordvpn_disconnect') }}</span>
+                                <div class="spinner hidden" id="nordvpnDisconnectSpinner" style="width:14px; height:14px;"></div>
+                            </button>
+                        </div>
+                    </article>
+                </div>
+            </div>
+
+            <p class="tunnels-footnote">{{ _('tunnels_hint') }}</p>
         </div>
 
         <!-- BLOCK SSL/HTTPS -->
@@ -622,11 +657,15 @@
                 </div>
 
                 <div style="display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap;">
+                    <button type="button" class="btn btn-primary" onclick="upgradePanel()" id="upgradePanelBtn" style="flex:1; min-width:180px;">
+                        <span id="upgradePanelBtnText">⬆ {{ _('upgrade_panel') }}</span>
+                        <div class="spinner hidden" id="upgradePanelSpinner" style="width:14px; height:14px;"></div>
+                    </button>
                     <button type="button" class="btn btn-secondary" onclick="checkForUpdates()" id="checkUpdateBtn" style="flex:1; min-width:140px;">
                         <span id="checkUpdateBtnText">🔄 {{ _('check_updates') }}</span>
                         <div class="spinner hidden" id="checkUpdateSpinner" style="width:14px; height:14px;"></div>
                     </button>
-                    <button type="button" class="btn btn-primary hidden" onclick="applyPanelUpdate()" id="applyUpdateBtn" style="flex:1; min-width:140px;">
+                    <button type="button" class="btn btn-secondary hidden" onclick="applyPanelUpdate()" id="applyUpdateBtn" style="flex:1; min-width:140px;">
                         <span id="applyUpdateBtnText">⬆ {{ _('apply_update') }}</span>
                         <div class="spinner hidden" id="applyUpdateSpinner" style="width:14px; height:14px;"></div>
                     </button>
@@ -945,31 +984,45 @@
         const el = document.getElementById(`${provider}PublicUrls`);
         if (!el) return;
         if (!urls || !urls.length) {
+            el.className = 'tunnel-url-box tunnel-url-box--empty';
             el.textContent = _('tunnel_no_public_url');
             return;
         }
+        el.className = 'tunnel-url-box';
         el.innerHTML = urls.map((url, idx) => `
-            <div style="display:flex; gap:var(--space-sm); align-items:center; margin-top:${idx ? 'var(--space-xs)' : '0'};">
-                <code id="${provider}PublicUrl${idx}" style="flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text-secondary);">${escapeHTML(url)}</code>
+            <div class="tunnel-url-row">
+                <code id="${provider}PublicUrl${idx}">${escapeHTML(url)}</code>
                 <button type="button" class="btn btn-secondary btn-sm" onclick="copyElementText('${provider}PublicUrl${idx}')">${_('copy')}</button>
             </div>
         `).join('');
     }
 
+    function setTunnelStatusPill(badge, { ok, info, text }) {
+        if (!badge) return;
+        badge.className = 'tunnel-status-pill' + (ok ? ' tunnel-status-pill--ok' : (info ? ' tunnel-status-pill--info' : ''));
+        badge.textContent = text;
+    }
+
     function updateTunnelProvider(provider, status) {
         const badge = document.getElementById(`${provider}InstallBadge`);
         const text = document.getElementById(`${provider}TunnelBtnText`);
         const startBtn = document.getElementById(`${provider}TunnelBtn`);
         const stopBtn = document.getElementById(`${provider}StopBtn`);
         const deleteBtn = document.getElementById(`${provider}DeleteBtn`);
+        const card = document.getElementById(`tunnelCard-${provider}`);
         if (!badge || !text) return;
 
-        badge.className = status.installed ? 'badge badge-success' : 'badge badge-secondary';
-        badge.textContent = status.installed ? _('installed') : _('not_installed');
-        text.textContent = status.running ? _('tunnel_running') : (status.installed ? _('tunnel_enable') : _('tunnel_install_enable'));
-        if (startBtn) startBtn.disabled = !!status.running;
-        if (stopBtn) stopBtn.classList.toggle('hidden', !status.running);
+        const running = !!status.running;
+        setTunnelStatusPill(badge, {
+            ok: running,
+            info: !running && status.installed,
+            text: running ? _('tunnel_running') : (status.installed ? _('installed') : _('not_installed')),
+        });
+        text.textContent = running ? _('tunnel_running') : (status.installed ? _('tunnel_enable') : _('tunnel_install_enable'));
+        if (startBtn) startBtn.disabled = running;
+        if (stopBtn) stopBtn.classList.toggle('hidden', !running);
         if (deleteBtn) deleteBtn.classList.toggle('hidden', !status.installed);
+        if (card) card.classList.toggle('tunnel-card--running', running);
         renderTunnelUrls(provider, status.public_urls || (status.public_url ? [status.public_url] : []));
     }
 
@@ -993,12 +1046,16 @@
         const connectBtn = document.getElementById('warpConnectBtn');
         const disconnectBtn = document.getElementById('warpDisconnectBtn');
         const connectText = document.getElementById('warpConnectBtnText');
+        const card = document.getElementById('tunnelCard-warp');
         if (!badge || !statusText || !connectBtn || !disconnectBtn || !connectText) return;
 
         const installed = !!status.installed;
         const connected = !!status.connected || status.status === 'connected';
-        badge.className = connected ? 'badge badge-success' : (installed ? 'badge badge-info' : 'badge badge-secondary');
-        badge.textContent = connected ? _('warp_connected') : (installed ? _('installed') : _('not_installed'));
+        setTunnelStatusPill(badge, {
+            ok: connected,
+            info: !connected && installed,
+            text: connected ? _('warp_connected') : (installed ? _('installed') : _('not_installed')),
+        });
 
         const statusKey = `warp_status_${status.status || 'unknown'}`;
         statusText.textContent = _(statusKey) || status.status || _('warp_status_unknown');
@@ -1006,6 +1063,7 @@
         connectText.textContent = installed ? _('warp_connect') : _('warp_install_required');
         connectBtn.disabled = connected;
         disconnectBtn.classList.toggle('hidden', !connected);
+        if (card) card.classList.toggle('tunnel-card--connected', connected);
     }
 
     async function connectWarp() {
@@ -1058,12 +1116,16 @@
         const connectBtn = document.getElementById('nordvpnConnectBtn');
         const disconnectBtn = document.getElementById('nordvpnDisconnectBtn');
         const connectText = document.getElementById('nordvpnConnectBtnText');
+        const card = document.getElementById('tunnelCard-nordvpn');
         if (!badge || !statusText || !connectBtn || !disconnectBtn || !connectText) return;
 
         const installed = !!status.installed;
         const connected = !!status.connected || status.status === 'connected';
-        badge.className = connected ? 'badge badge-success' : (installed ? 'badge badge-info' : 'badge badge-secondary');
-        badge.textContent = connected ? _('nordvpn_connected') : (installed ? _('installed') : _('not_installed'));
+        setTunnelStatusPill(badge, {
+            ok: connected,
+            info: !connected && installed,
+            text: connected ? _('nordvpn_connected') : (installed ? _('installed') : _('not_installed')),
+        });
 
         const statusKey = `nordvpn_status_${status.status || 'unknown'}`;
         statusText.textContent = _(statusKey) || status.status || _('nordvpn_status_unknown');
@@ -1076,6 +1138,7 @@
         connectText.textContent = installed ? _('nordvpn_connect') : _('nordvpn_install_required');
         connectBtn.disabled = connected;
         disconnectBtn.classList.toggle('hidden', !connected);
+        if (card) card.classList.toggle('tunnel-card--connected', connected);
     }
 
     async function connectNordvpn() {
@@ -1614,16 +1677,26 @@
             statusDiv.classList.remove('hidden');
 
             if (modeHint) {
-                const mode = data.update_mode || (data.mode && data.mode.mode) || '';
-                if (data.can_auto_update) {
-                    modeHint.textContent = "{{ _('auto_update_ready')|default('Git auto-update is available for this install.') }}";
-                } else if (mode === 'docker') {
-                    modeHint.textContent = "{{ _('auto_update_docker')|default('Docker install: rebuild/pull image, or use a git checkout for one-click update.') }}";
+                const method = data.update_mode || (data.mode && data.mode.update_method) || (data.mode && data.mode.mode) || '';
+                if (!data.can_auto_update) {
+                    if (method === 'docker') {
+                        modeHint.textContent = "{{ _('auto_update_docker')|default('Docker: on the host run git pull && docker compose up -d --build.') }}";
+                    } else {
+                        modeHint.textContent = "{{ _('auto_update_manual')|default('One-click update needs a writable install directory or git clone.') }}";
+                    }
+                } else if (method === 'archive') {
+                    modeHint.textContent = "{{ _('auto_update_archive')|default('One-click update downloads the release ZIP from git.evilfox.cc and restarts the panel.') }}";
                 } else {
-                    modeHint.textContent = "{{ _('auto_update_manual')|default('One-click update needs a git clone. You can still download a release.') }}";
+                    modeHint.textContent = "{{ _('auto_update_ready')|default('Git auto-update is available for this install.') }}";
                 }
             }
 
+            const upgradeBtn = document.getElementById('upgradePanelBtn');
+            if (upgradeBtn) {
+                upgradeBtn.disabled = !data.can_auto_update;
+                upgradeBtn.title = data.can_auto_update ? '' : (modeHint ? modeHint.textContent : '');
+            }
+
             if (data.update_available && latestVersion) {
                 statusDiv.innerHTML = `<span style="color: var(--success); font-weight: bold;">{{ _('update_available')|default('Update available') }}: ${latestVersion}</span>`;
                 statusDiv.style.border = '1px solid var(--success)';
@@ -1656,7 +1729,7 @@
             showToast("{{ _('update_no_target')|default('No target version. Check for updates first.') }}", 'error');
             return;
         }
-        if (!confirm("{{ _('apply_update_confirm')|default('Install update from git and restart the panel?') }} " + target)) {
+        if (!confirm("{{ _('apply_update_confirm')|default('Install update from git.evilfox.cc and restart the panel?') }} " + target)) {
             return;
         }
         applyBtn.disabled = true;
@@ -1665,7 +1738,7 @@
         try {
             const data = await apiCall('/api/settings/apply_update', 'POST', {
                 target_version: target,
-                allow_dirty: false,
+                allow_dirty: true,
             });
             showToast(data.message || "{{ _('update_restarting')|default('Updated. Restarting…') }}", 'success');
             setTimeout(() => { window.location.reload(); }, 3500);
@@ -1677,6 +1750,38 @@
         }
     }
 
+    async function upgradePanel() {
+        const btn = document.getElementById('upgradePanelBtn');
+        const text = document.getElementById('upgradePanelBtnText');
+        const spinner = document.getElementById('upgradePanelSpinner');
+        const latest = (latestUpdateInfo && latestUpdateInfo.latest_version) || '';
+        const confirmMsg = latest
+            ? ("{{ _('upgrade_panel_confirm')|default('Download and install') }} " + latest + "?")
+            : "{{ _('upgrade_panel_confirm_latest')|default('Check for updates and install the latest release?') }}";
+        if (!confirm(confirmMsg)) return;
+
+        btn.disabled = true;
+        spinner.classList.remove('hidden');
+        text.textContent = "{{ _('upgrade_panel_working')|default('Updating panel…') }}";
+        try {
+            const data = await apiCall('/api/settings/upgrade_panel', 'POST', {});
+            if (data.up_to_date) {
+                showToast("{{ _('upgrade_panel_up_to_date')|default('Already on the latest version') }}", 'info');
+                await checkForUpdates(true);
+                return;
+            }
+            showToast(data.message || "{{ _('update_restarting')|default('Updated. Restarting…') }}", 'success');
+            setTimeout(() => { window.location.reload(); }, 4000);
+        } catch (err) {
+            showToast(_('error') + ': ' + err.message, 'error');
+            await checkForUpdates(true);
+        } finally {
+            btn.disabled = false;
+            spinner.classList.add('hidden');
+            text.textContent = "⬆ {{ _('upgrade_panel')|default('Update panel') }}";
+        }
+    }
+
     // Auto-check once on Settings load
     setTimeout(() => checkForUpdates(true), 800);
 

translations/en.json

@@ -267,6 +267,13 @@
     "api_docs_title":  "🔌 API Documentation",
     "api_docs_hint":  "Use these interfaces to explore the panel\u0027s API capabilities",
     "tunnels_title":  "Tunnels",
+    "tunnels_subtitle":  "Expose the panel to the internet or route outbound traffic through a VPN.",
+    "tunnels_section_inbound":  "Public access",
+    "tunnels_section_outbound":  "Outbound VPN",
+    "tunnel_cloudflare_desc":  "Free HTTPS URL via Cloudflare — no account required.",
+    "tunnel_ngrok_desc":  "Stable tunnel with your ngrok authtoken.",
+    "tunnel_warp_desc":  "Route server traffic through Cloudflare WARP.",
+    "tunnel_nordvpn_desc":  "Connect this host to NordVPN servers.",
     "local_server":  "Local Server",
     "tunnel_install_enable":  "Install \u0026 Enable",
     "tunnel_enable":  "Enable Tunnel",
@@ -489,7 +496,13 @@
     "auto_update_hint":  "Auto-update pulls the release tag from git.evilfox.cc (git checkout required).",
     "auto_update_ready":  "Git auto-update is available for this install.",
     "auto_update_docker":  "Docker install: rebuild/pull image, or use a git checkout for one-click update.",
-    "auto_update_manual":  "One-click update needs a git clone. You can still download a release.",
+    "auto_update_manual":  "One-click update needs a writable install directory or git clone. You can still download a release.",
+    "auto_update_archive":  "One-click update downloads the release ZIP from git.evilfox.cc and restarts the panel.",
+    "upgrade_panel":  "Update panel",
+    "upgrade_panel_confirm":  "Download and install",
+    "upgrade_panel_confirm_latest":  "Check for updates and install the latest release?",
+    "upgrade_panel_working":  "Updating panel…",
+    "upgrade_panel_up_to_date":  "Already on the latest version",
     "warp_hint":  "WARP routes this host outbound through Cloudflare. It does not create a public panel URL like Quick Tunnel or ngrok.",
     "warp_install_hint":  "Install the official Cloudflare WARP client first, then restart the panel.",
     "warp_install_required":  "Install WARP first",

translations/fa.json

@@ -256,7 +256,14 @@
     "bot_hint":  "پس از تغییر توکن تنظیمات را ذخیره کنید تا ربات بازراه‌اندازی شود.",
     "api_docs_title":  "🔌 مستندات API",
     "api_docs_hint":  "از این رابط‌ها برای بررسی قابلیت‌های API استفاده کنید",
-    "tunnels_title":  "Tunnels",
+    "tunnels_title":  "تونل‌ها",
+    "tunnels_subtitle":  "پنل را در اینترنت منتشر کنید یا ترافیک خروجی را از طریق VPN هدایت کنید.",
+    "tunnels_section_inbound":  "دسترسی عمومی",
+    "tunnels_section_outbound":  "VPN خروجی",
+    "tunnel_cloudflare_desc":  "آدرس HTTPS رایگان از Cloudflare — بدون ثبت‌نام.",
+    "tunnel_ngrok_desc":  "تونل پایدار با authtoken ngrok شما.",
+    "tunnel_warp_desc":  "هدایت ترافیک سرور از طریق Cloudflare WARP.",
+    "tunnel_nordvpn_desc":  "اتصال این میزبان به سرورهای NordVPN.",
     "local_server":  "سرور محلی",
     "tunnel_install_enable":  "نصب و فعال‌سازی",
     "tunnel_enable":  "فعال‌سازی تونل",
@@ -552,5 +559,11 @@
     "auto_update_hint":  "Auto-update pulls the release tag from git.evilfox.cc (git checkout required).",
     "auto_update_ready":  "Git auto-update is available for this install.",
     "auto_update_docker":  "Docker install: rebuild/pull image, or use a git checkout for one-click update.",
-    "auto_update_manual":  "One-click update needs a git clone. You can still download a release."
+    "auto_update_manual":  "One-click update needs a git clone. You can still download a release.",
+    "auto_update_archive":  "One-click update downloads the release ZIP from git.evilfox.cc and restarts the panel.",
+    "upgrade_panel":  "Update panel",
+    "upgrade_panel_confirm":  "Download and install",
+    "upgrade_panel_confirm_latest":  "Check for updates and install the latest release?",
+    "upgrade_panel_working":  "Updating panel…",
+    "upgrade_panel_up_to_date":  "Already on the latest version"
 }

translations/fr.json

@@ -257,6 +257,13 @@
     "api_docs_title":  "🔌 Documentation API",
     "api_docs_hint":  "Utilisez ces interfaces pour explorer l\u0027API",
     "tunnels_title":  "Tunnels",
+    "tunnels_subtitle":  "Exposez le panneau sur Internet ou routez le trafic sortant via un VPN.",
+    "tunnels_section_inbound":  "Accès public",
+    "tunnels_section_outbound":  "VPN sortant",
+    "tunnel_cloudflare_desc":  "URL HTTPS gratuite via Cloudflare — sans compte.",
+    "tunnel_ngrok_desc":  "Tunnel stable avec votre authtoken ngrok.",
+    "tunnel_warp_desc":  "Routez le trafic du serveur via Cloudflare WARP.",
+    "tunnel_nordvpn_desc":  "Connectez cet hôte aux serveurs NordVPN.",
     "local_server":  "Serveur local",
     "tunnel_install_enable":  "Installer et activer",
     "tunnel_enable":  "Activer le tunnel",
@@ -552,5 +559,11 @@
     "auto_update_hint":  "Auto-update pulls the release tag from git.evilfox.cc (git checkout required).",
     "auto_update_ready":  "Git auto-update is available for this install.",
     "auto_update_docker":  "Docker install: rebuild/pull image, or use a git checkout for one-click update.",
-    "auto_update_manual":  "One-click update needs a git clone. You can still download a release."
+    "auto_update_manual":  "One-click update needs a git clone. You can still download a release.",
+    "auto_update_archive":  "One-click update downloads the release ZIP from git.evilfox.cc and restarts the panel.",
+    "upgrade_panel":  "Update panel",
+    "upgrade_panel_confirm":  "Download and install",
+    "upgrade_panel_confirm_latest":  "Check for updates and install the latest release?",
+    "upgrade_panel_working":  "Updating panel…",
+    "upgrade_panel_up_to_date":  "Already on the latest version"
 }

translations/ru.json

@@ -267,6 +267,13 @@
     "api_docs_title":  "🔌 API Документация",
     "api_docs_hint":  "Используйте эти интерфейсы для изучения возможностей API панели",
     "tunnels_title":  "Туннели",
+    "tunnels_subtitle":  "Публикация панели в интернете или исходящий трафик через VPN.",
+    "tunnels_section_inbound":  "Публичный доступ",
+    "tunnels_section_outbound":  "Исходящий VPN",
+    "tunnel_cloudflare_desc":  "Бесплатный HTTPS-адрес через Cloudflare — без регистрации.",
+    "tunnel_ngrok_desc":  "Стабильный туннель с вашим authtoken ngrok.",
+    "tunnel_warp_desc":  "Маршрутизация трафика сервера через Cloudflare WARP.",
+    "tunnel_nordvpn_desc":  "Подключение хоста к серверам NordVPN.",
     "local_server":  "Локальный сервер",
     "tunnel_install_enable":  "Установить и включить",
     "tunnel_enable":  "Включить туннель",
@@ -489,7 +496,13 @@
     "auto_update_hint":  "Автообновление тянет тег релиза с git.evilfox.cc (нужен git clone панели).",
     "auto_update_ready":  "Для этой установки доступно автообновление через git.",
     "auto_update_docker":  "Docker: пересоберите/подтяните образ или используйте git clone для обновления в один клик.",
-    "auto_update_manual":  "Обновление в один клик требует git clone. Можно скачать релиз вручную.",
+    "auto_update_manual":  "Обновление в один клик требует git clone или каталог с правами записи. Можно скачать релиз вручную.",
+    "auto_update_archive":  "Обновление в один клик: скачивает ZIP релиза с git.evilfox.cc и перезапускает панель.",
+    "upgrade_panel":  "Обновить панель",
+    "upgrade_panel_confirm":  "Скачать и установить",
+    "upgrade_panel_confirm_latest":  "Проверить обновления и установить последний релиз?",
+    "upgrade_panel_working":  "Обновление панели…",
+    "upgrade_panel_up_to_date":  "Уже установлена последняя версия",
     "warp_hint":  "WARP направляет исходящий трафик этого хоста через Cloudflare. Он не создаёт публичный URL панели как Quick Tunnel или ngrok.",
     "warp_install_hint":  "Сначала установите официальный клиент Cloudflare WARP, затем перезапустите панель.",
     "warp_install_required":  "Сначала установите WARP",

translations/zh.json

@@ -257,6 +257,13 @@
     "api_docs_title":  "🔌 API 文档",
     "api_docs_hint":  "使用这些接口了解面板功能",
     "tunnels_title":  "Tunnels",
+    "tunnels_subtitle":  "将面板暴露到互联网，或通过 VPN 路由出站流量。",
+    "tunnels_section_inbound":  "公网访问",
+    "tunnels_section_outbound":  "出站 VPN",
+    "tunnel_cloudflare_desc":  "通过 Cloudflare 获取免费 HTTPS 地址，无需注册。",
+    "tunnel_ngrok_desc":  "使用 ngrok authtoken 的稳定隧道。",
+    "tunnel_warp_desc":  "通过 Cloudflare WARP 路由服务器流量。",
+    "tunnel_nordvpn_desc":  "将此主机连接到 NordVPN 服务器。",
     "local_server":  "本地服务器",
     "tunnel_install_enable":  "安装并启用",
     "tunnel_enable":  "启用隧道",
@@ -552,5 +559,11 @@
     "auto_update_hint":  "Auto-update pulls the release tag from git.evilfox.cc (git checkout required).",
     "auto_update_ready":  "Git auto-update is available for this install.",
     "auto_update_docker":  "Docker install: rebuild/pull image, or use a git checkout for one-click update.",
-    "auto_update_manual":  "One-click update needs a git clone. You can still download a release."
+    "auto_update_manual":  "One-click update needs a git clone. You can still download a release.",
+    "auto_update_archive":  "One-click update downloads the release ZIP from git.evilfox.cc and restarts the panel.",
+    "upgrade_panel":  "Update panel",
+    "upgrade_panel_confirm":  "Download and install",
+    "upgrade_panel_confirm_latest":  "Check for updates and install the latest release?",
+    "upgrade_panel_working":  "Updating panel…",
+    "upgrade_panel_up_to_date":  "Already on the latest version"
 }