Merge branch 'fix/filewatch_syncloop_fix'

feat: Implement user authentication and login screen

Merge commit 'a14210c458d5f6c6a4875ca8228db63c0b73cf75'

.env_sample

@@ -0,0 +1,31 @@
+# Timezone
+TZ=Asia/Tokyo
+
+# Enable authentication (required)
+# 1 = enabled, 0 = disabled
+PLEXPLAYLISTSYNC_AUTH_ENABLED=1
+
+# Login username/password (required if auth enabled)
+PLEXPLAYLISTSYNC_AUTH_USERNAME=USERNAME
+PLEXPLAYLISTSYNC_AUTH_PASSWORD=CHANGE_PASSWORD
+
+# Strongly recommended: stable token signing secret (or tokens will become invalid after container restart)
+# Use a sufficiently long random string
+PLEXPLAYLISTSYNC_AUTH_TOKEN_SECRET=REPLACE_WITH_A_RANDOM_STRING
+
+# Token TTL seconds (optional)
+PLEXPLAYLISTSYNC_AUTH_TOKEN_TTL_SECONDS=86400
+
+# CORS allowlist (optional)
+# Default is empty (CORS disabled; same-origin only).
+# Accepts comma-separated list or a JSON array.
+# Example:
+# PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173
+# or
+# PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS=["https://your.domain"]
+PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS=
+
+# Allow cookies/credentials for allowlisted origins (optional)
+# 1 = enabled, 0 = disabled
+# Note: if origins contains '*', credentials will be forced off.
+PLEXPLAYLISTSYNC_CORS_ALLOW_CREDENTIALS=0

.gitattributes

@@ -0,0 +1,8 @@
+# Normalize line endings to avoid CRLF issues in Linux containers
+* text=auto
+
+# Shell scripts must be LF for correct shebang parsing
+*.sh text eol=lf
+
+# PowerShell scripts are typically CRLF on Windows
+*.ps1 text eol=crlf

.gitignore

@@ -62,6 +62,9 @@ local_settings.py
 db.sqlite3
 db.sqlite3-journal
 
+# App runtime logs
+app/logs/
+
 # Flask stuff:
 instance/
 .webassets-cache
@@ -176,3 +179,11 @@ cython_debug/
 
 # Built Visual Studio Code Extensions
 *.vsix
+
+# data
+data/*
+playlists/*
+docker-compose.yml
+
+# Local dev config may contain Plex token
+app/config.json

Dockerfile

@@ -6,9 +6,13 @@ ENV PYTHONDONTWRITEBYTECODE=1 \
 WORKDIR /app
 
 RUN apt-get update \
-    && apt-get install -y --no-install-recommends build-essential \
+    && apt-get install -y --no-install-recommends build-essential tzdata \
     && rm -rf /var/lib/apt/lists/*
 
+COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
+RUN sed -i 's/\r$//' /usr/local/bin/docker-entrypoint.sh \
+    && chmod +x /usr/local/bin/docker-entrypoint.sh
+
 COPY requirements.txt ./
 RUN pip install --no-cache-dir -r requirements.txt
 
@@ -17,4 +21,6 @@ COPY frontend ./frontend
 
 EXPOSE 8080
 
+ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]
+
 CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8080"]

README.md

@@ -26,6 +26,22 @@ PlexPlaylistSync 是一个用于同步 Plex 播放列表和本地 `.m3u`/`.m3u8`
 docker compose up --build
 ```
 
+### 配置容器时区
+
+本项目支持通过 `docker-compose.yml` 的环境变量 `TZ` 配置容器运行时区（需要使用有效的 IANA 时区名，例如 `Asia/Shanghai`、`UTC`、`America/New_York`）。
+
+- 临时指定（当前终端会话生效）：
+
+```bash
+TZ=UTC docker compose up --build
+```
+
+- 或在项目根目录创建 `.env`：
+
+```env
+TZ=Asia/Shanghai
+```
+
 - 默认会以 `--reload` 模式启动，监听本地 8080 端口，可在浏览器访问 `http://localhost:8080`。
 - 通过 `./app/config.json` 保存的 Plex 配置信息会在主机和容器间共享，便于调试时保留登录 token 等数据。
 - 如需自定义端口或其他参数，可在 `docker-compose.yml` 中调整。

app/config.json

@@ -1,28 +0,0 @@
-{
-    "theme": "auto",
-    "token": "",
-    "server_url": "",
-    "server_scheme": "https",
-    "server_port": "32400",
-    "timeout": 9,
-    "library_name": "",
-    "sync_mode": "merge_local_primary",
-    "local_path": "playlist",
-    "path_rules": [],
-    "path_mapping": {
-        "mode": "SIMPLE",
-        "simple": [],
-        "regex": {
-            "local_pre": [],
-            "local_post": [],
-            "remote_pre": [],
-            "remote_post": []
-        }
-    },
-    "schedule_mode": "DISABLED",
-    "schedule_cron": "",
-    "schedule_daily_time": "02:00",
-    "schedule_weekly_days": [0],
-    "schedule_weekly_time": "03:00",
-    "schedule_auto_watch": false
-}

app/main.py

@@ -1,11 +1,12 @@
 import os
+import json
 from datetime import datetime
 from typing import Sequence
 
 from fastapi import FastAPI, Form, HTTPException, Query, Request
 from fastapi.middleware.cors import CORSMiddleware
 import asyncio
-from fastapi.responses import FileResponse, HTMLResponse, RedirectResponse, StreamingResponse
+from fastapi.responses import FileResponse, HTMLResponse, RedirectResponse, StreamingResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from pydantic import BaseModel, Field
@@ -13,13 +14,137 @@ from pydantic import BaseModel, Field
 from app.utils.config import server_config
 from app.utils.local_playlist import load_local_playlist, scan_local_playlists
 from app.utils.logger import logger
-from app.utils.playlist_merge import SyncMode, TEST_PLAYLIST_DIR, sync_all_playlists
+from app.utils.playlist_merge import SyncMode, SYNC_ARTIFACTS_DIR, sync_all_playlists
 from app.utils.plex_client import plex_client
 from app.utils.scheduler import start_scheduler, update_scheduler_job, get_next_run_time, validate_cron_expression
 from app.utils.sync_manager import sync_manager
+from app.utils.auth import load_auth_config, issue_token, verify_token
 
 app = FastAPI()
 
+
+def _parse_cors_allowed_origins(raw: str | None) -> list[str]:
+    if not raw:
+        return []
+
+    value = raw.strip()
+    if not value:
+        return []
+
+    if value == "*":
+        return ["*"]
+
+    try:
+        if value.startswith("["):
+            parsed = json.loads(value)
+            if isinstance(parsed, list):
+                origins = [str(item).strip() for item in parsed]
+            else:
+                origins = [str(parsed).strip()]
+        else:
+            origins = [part.strip() for part in value.split(",")]
+    except Exception:
+        logger.warning(
+            "Invalid PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS; CORS will be disabled."
+        )
+        return []
+
+    return [origin for origin in origins if origin]
+
+
+def _env_truthy(name: str, default: str = "0") -> bool:
+    value = os.getenv(name, default)
+    return str(value).strip().lower() in {"1", "true", "yes", "y", "on"}
+
+
+_CORS_ALLOWED_ORIGINS = _parse_cors_allowed_origins(
+    os.getenv("PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS", "")
+)
+_CORS_ALLOW_CREDENTIALS = (
+    False
+    if "*" in _CORS_ALLOWED_ORIGINS
+    else _env_truthy("PLEXPLAYLISTSYNC_CORS_ALLOW_CREDENTIALS", "0")
+)
+
+# --- Optional API Authentication (username/password) ---
+AUTH_CONFIG = load_auth_config()
+
+
+class LoginPayload(BaseModel):
+    username: str
+    password: str
+
+
+@app.get("/api/auth/config")
+async def get_auth_config():
+    return {"enabled": AUTH_CONFIG.enabled}
+
+
+@app.post("/api/auth/login")
+async def api_login(payload: LoginPayload):
+    if not AUTH_CONFIG.enabled:
+        raise HTTPException(status_code=400, detail="Authentication is disabled")
+
+    if payload.username != AUTH_CONFIG.username or payload.password != AUTH_CONFIG.password:
+        raise HTTPException(status_code=401, detail="Invalid credentials")
+
+    token = issue_token(AUTH_CONFIG, payload.username)
+    return {
+        "token": token,
+        "username": payload.username,
+        "expires_in": AUTH_CONFIG.token_ttl_seconds,
+    }
+
+
+@app.get("/api/auth/me")
+async def api_me(request: Request):
+    if not AUTH_CONFIG.enabled:
+        return {"username": ""}
+
+    auth_header = request.headers.get("authorization", "")
+    if auth_header.lower().startswith("bearer "):
+        token = auth_header.split(" ", 1)[1].strip()
+    else:
+        token = ""
+
+    payload = verify_token(AUTH_CONFIG, token) if token else None
+    if not payload:
+        raise HTTPException(status_code=401, detail="Unauthorized")
+    return {"username": payload.get("u", "")}
+
+
+@app.post("/api/auth/logout")
+async def api_logout():
+    # Stateless token auth; client clears token.
+    return {"status": "success"}
+
+
+_AUTH_API_WHITELIST = {
+    "/api/auth/config",
+    "/api/auth/login",
+}
+
+
+@app.middleware("http")
+async def auth_middleware(request: Request, call_next):
+    if AUTH_CONFIG.enabled and request.url.path.startswith("/api"):
+        if request.method.upper() == "OPTIONS":
+            return await call_next(request)
+        if request.url.path not in _AUTH_API_WHITELIST:
+            auth_header = request.headers.get("authorization", "")
+            token = ""
+            if auth_header.lower().startswith("bearer "):
+                token = auth_header.split(" ", 1)[1].strip()
+
+            # For endpoints like EventSource(SSE) where custom headers are not available.
+            if not token:
+                token = request.query_params.get("access_token", "").strip()
+
+            if not token or not verify_token(AUTH_CONFIG, token):
+                return JSONResponse(status_code=401, content={"detail": "Unauthorized"})
+
+    return await call_next(request)
+
 @app.on_event("startup")
 async def startup_event():
     sync_manager.set_event_loop(asyncio.get_running_loop())
@@ -27,8 +152,8 @@ async def startup_event():
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=_CORS_ALLOWED_ORIGINS,
-    allow_credentials=True,
+    allow_credentials=_CORS_ALLOW_CREDENTIALS,
     allow_methods=["*"],
     allow_headers=["*"],
 )
@@ -499,8 +624,8 @@ async def api_connect(payload: ConnectRequest):
 async def api_playlists(server: str = Query(..., pattern="(?i)^(local|cloud)$"), local_path: str | None = None):
     server_type = server.lower()
     if server_type == "local":
-        resolved_path = local_path or server_config.local_path
+        # local_path is intentionally fixed; ignore query overrides.
-        server_config.set_and_save_config(local_path=resolved_path)
+        resolved_path = server_config.local_path
         playlists = _scan_local_playlists_with_meta(resolved_path)
         return {"playlists": [item.model_dump() for item in playlists]}
 
@@ -542,7 +667,8 @@ async def api_sync(payload: SyncRequest):
     except ValueError as exc:
         raise HTTPException(status_code=400, detail=str(exc))
 
-    local_dir = payload.local_path or server_config.local_path
+    # local_path is intentionally fixed; ignore request overrides.
+    local_dir = server_config.local_path
     
     # Use sync_manager to execute sync, ensuring state is updated
     try:
@@ -567,7 +693,7 @@ async def api_sync(payload: SyncRequest):
         "conflict_count": conflict_count,
         "delete_count": deleted_count,
         "playlist_count": len(results),
-        "output_dir": TEST_PLAYLIST_DIR,
+        "output_dir": SYNC_ARTIFACTS_DIR,
     }
 
 
@@ -611,23 +737,24 @@ def _build_home_context(
 
 # 显示主页
 @app.get("/", response_class=HTMLResponse)
-async def home(request: Request, local_path: str = "playlist"):
+async def home(request: Request, local_path: str = "playlists"):
     index_path = os.path.join(FRONTEND_DIST_PATH, "index.html")
     if os.path.exists(index_path):
         return FileResponse(index_path)
 
-    context = _build_home_context(request, local_path or server_config.local_path)
+    # local_path is intentionally fixed; ignore query overrides.
+    context = _build_home_context(request, server_config.local_path)
     return templates.TemplateResponse("home.html", context)
 
 
 @app.post("/sync", response_class=HTMLResponse)
-async def trigger_sync(request: Request, mode: str = Form(...), local_path: str = Form("playlist")):
+async def trigger_sync(request: Request, mode: str = Form(...), local_path: str = Form("playlists")):
     try:
         sync_mode = SyncMode(mode)
     except ValueError:
         context = _build_home_context(
             request,
-            local_path,
+            server_config.local_path,
             message=f"未知的同步策略：{mode}",
             message_type="danger",
             selected_mode=mode,
@@ -636,17 +763,17 @@ async def trigger_sync(request: Request, mode: str = Form(...), local_path: str
 
     try:
         results = sync_all_playlists(
-            local_dir=local_path,
+            local_dir=server_config.local_path,
             mode=sync_mode,
-            test_folder=TEST_PLAYLIST_DIR,
+            test_folder=SYNC_ARTIFACTS_DIR,
         )
         merged_count = sum(len(item.merged_paths) for item in results)
         conflict_count = sum(len(item.conflicts) for item in results)
         deleted_count = sum(1 for item in results if item.action == "deleted")
         context = _build_home_context(
             request,
-            local_path,
+            server_config.local_path,
-            message="同步完成，输出已写入测试目录用于验证。",
+            message="同步完成，输出已写入同步工作目录（Artifacts）。",
             message_type="success",
             sync_result={
                 "mode": sync_mode.value,
@@ -658,7 +785,7 @@ async def trigger_sync(request: Request, mode: str = Form(...), local_path: str
                 "conflict_count": conflict_count,
                 "delete_count": deleted_count,
                 "playlist_count": len(results),
-                "output_dir": TEST_PLAYLIST_DIR,
+                "output_dir": SYNC_ARTIFACTS_DIR,
             },
             selected_mode=sync_mode.value,
         )
@@ -667,7 +794,7 @@ async def trigger_sync(request: Request, mode: str = Form(...), local_path: str
         logger.warning(f"Sync failed: {exc}")
         context = _build_home_context(
             request,
-            local_path,
+            server_config.local_path,
             message=f"同步失败：{exc}",
             message_type="danger",
             selected_mode=sync_mode.value,
@@ -678,7 +805,7 @@ async def trigger_sync(request: Request, mode: str = Form(...), local_path: str
 @app.post("/path-rules", response_class=HTMLResponse)
 async def save_path_rules(
     request: Request,
-    local_path: str = Form("playlist"),
+    local_path: str = Form("playlists"),
     pattern: list[str] | None = Form(None),
     replacement: list[str] | None = Form(None),
 ):
@@ -696,7 +823,7 @@ async def save_path_rules(
 
     context = _build_home_context(
         request,
-        local_path,
+        server_config.local_path,
         message="正则规则已保存并会在同步前应用。",
         message_type="success",
     )

app/utils/auth.py

@@ -0,0 +1,104 @@
+import base64
+import hashlib
+import hmac
+import json
+import os
+import time
+from dataclasses import dataclass
+
+from app.utils.logger import logger
+
+
+def _parse_bool(value: str | None, default: bool = False) -> bool:
+    if value is None:
+        return default
+    return value.strip().lower() in {"1", "true", "yes", "y", "on"}
+
+
+def _b64url_encode(data: bytes) -> str:
+    return base64.urlsafe_b64encode(data).decode("utf-8").rstrip("=")
+
+
+def _b64url_decode(data: str) -> bytes:
+    padding = "=" * (-len(data) % 4)
+    return base64.urlsafe_b64decode((data + padding).encode("utf-8"))
+
+
+@dataclass(frozen=True)
+class AuthConfig:
+    enabled: bool
+    username: str
+    password: str
+    token_secret: bytes
+    token_ttl_seconds: int
+
+
+def load_auth_config() -> AuthConfig:
+    enabled = _parse_bool(os.environ.get("PLEXPLAYLISTSYNC_AUTH_ENABLED"), default=False)
+    username = os.environ.get("PLEXPLAYLISTSYNC_AUTH_USERNAME", "").strip()
+    password = os.environ.get("PLEXPLAYLISTSYNC_AUTH_PASSWORD", "")
+    ttl = int(os.environ.get("PLEXPLAYLISTSYNC_AUTH_TOKEN_TTL_SECONDS", "86400"))
+    ttl = max(60, ttl)
+
+    secret_env = os.environ.get("PLEXPLAYLISTSYNC_AUTH_TOKEN_SECRET", "").strip()
+    if secret_env:
+        token_secret = secret_env.encode("utf-8")
+    elif enabled:
+        # If auth is enabled but no explicit secret is set, fall back to an ephemeral secret.
+        # This means tokens become invalid after restart, which is acceptable for this project.
+        token_secret = os.urandom(32)
+        logger.warning(
+            "PLEXPLAYLISTSYNC_AUTH_TOKEN_SECRET not set; using ephemeral secret (tokens reset on restart)."
+        )
+    else:
+        token_secret = b""
+
+    if enabled:
+        if not username or not password:
+            raise RuntimeError(
+                "Auth enabled but missing credentials: please set PLEXPLAYLISTSYNC_AUTH_USERNAME and PLEXPLAYLISTSYNC_AUTH_PASSWORD."
+            )
+
+    return AuthConfig(
+        enabled=enabled,
+        username=username,
+        password=password,
+        token_secret=token_secret,
+        token_ttl_seconds=ttl,
+    )
+
+
+def issue_token(config: AuthConfig, username: str) -> str:
+    now = int(time.time())
+    payload = {"u": username, "exp": now + config.token_ttl_seconds}
+    payload_bytes = json.dumps(payload, separators=(",", ":"), ensure_ascii=False).encode("utf-8")
+    payload_b64 = _b64url_encode(payload_bytes)
+
+    sig = hmac.new(config.token_secret, payload_b64.encode("utf-8"), hashlib.sha256).digest()
+    sig_b64 = _b64url_encode(sig)
+    return f"{payload_b64}.{sig_b64}"
+
+
+def verify_token(config: AuthConfig, token: str) -> dict | None:
+    try:
+        payload_b64, sig_b64 = token.split(".", 1)
+    except ValueError:
+        return None
+
+    try:
+        expected_sig = hmac.new(
+            config.token_secret, payload_b64.encode("utf-8"), hashlib.sha256
+        ).digest()
+        actual_sig = _b64url_decode(sig_b64)
+        if not hmac.compare_digest(expected_sig, actual_sig):
+            return None
+
+        payload = json.loads(_b64url_decode(payload_b64).decode("utf-8"))
+        exp = int(payload.get("exp", 0))
+        if exp <= int(time.time()):
+            return None
+        if not payload.get("u"):
+            return None
+        return payload
+    except Exception:
+        return None

app/utils/backup.py

@@ -1,5 +1,7 @@
 import os
 import zipfile
+import hashlib
+import re
 from datetime import datetime
 from typing import List
 from app.utils.logger import logger
@@ -7,11 +9,39 @@ from app.utils.config import server_config
 from app.utils.local_playlist import load_local_playlist
 from app.utils.plex_client import plex_client
 
-# Default backup directory
+# Default backup directory (repo root /backups)
-BACKUP_DIR = os.path.abspath(
+DEFAULT_BACKUP_DIR = os.path.abspath(
     os.path.join(os.path.dirname(__file__), "..", "..", "backups")
 )
 
+# Allow Docker / users to relocate backups for centralized host backup.
+# Example: /app/data/backup
+BACKUP_DIR = os.path.abspath(
+    os.environ.get("PLEXPLAYLISTSYNC_BACKUP_DIR", DEFAULT_BACKUP_DIR)
+)
+
+
+def _safe_zip_entry_name(name: str, extension: str = ".m3u8") -> str:
+    """Return a safe zip entry filename.
+
+    Prevents zip-slip style paths and avoids problematic characters.
+    """
+
+    original = (name or "").strip()
+    base = os.path.basename(original)
+    base = re.sub(r"[\x00-\x1f\x7f]", "_", base)
+    invalid = set('<>:"/\\|?*')
+    cleaned = "".join(("_" if ch in invalid else ch) for ch in base).strip().strip(". ")
+    if not cleaned:
+        cleaned = "playlist"
+
+    cleaned = cleaned[:160].rstrip().strip(". ")
+    if cleaned != original:
+        digest = hashlib.sha1(original.encode("utf-8", errors="ignore")).hexdigest()[:8]
+        cleaned = f"{cleaned}__{digest}"
+
+    return f"{cleaned}{extension}"
+
 
 def ensure_backup_dir():
     """Ensure the backup directory exists."""
@@ -112,7 +142,7 @@ def backup_local_playlists(local_path: str) -> str | None:
                 
                 # Get the playlist name without extension and add .m3u8 extension
                 playlist_name = os.path.splitext(entry.name)[0]
-                archive_name = f"{playlist_name}.m3u8"
+                archive_name = _safe_zip_entry_name(playlist_name)
                 
                 # Write to zip
                 zipf.writestr(archive_name, content)
@@ -211,7 +241,7 @@ def backup_cloud_playlists(library_name: str) -> str | None:
                     
                     if len(lines) > 1:  # More than just #EXTM3U
                         content = "\n".join(lines)
-                        archive_name = f"{playlist.title}.m3u8"
+                        archive_name = _safe_zip_entry_name(getattr(playlist, "title", "playlist"))
                         zipf.writestr(archive_name, content)
                         playlist_count += 1
                         

app/utils/config.py

@@ -2,7 +2,27 @@ import json
 import os
 from app.utils.logger import logger
 
+
+def _redact_for_log(value: object) -> object:
+    if not isinstance(value, dict):
+        return value
+    redacted = dict(value)
+    for key in ("token", "password"):
+        if key in redacted and redacted.get(key):
+            redacted[key] = "***"
+    return redacted
+
+
+def _redact_server_config_dict(state: dict) -> dict:
+    if not isinstance(state, dict):
+        return {}
+    redacted = dict(state)
+    if redacted.get("token"):
+        redacted["token"] = "***"
+    return redacted
+
 DEFAULT_SYNC_MODE = "merge_local_primary"
+LOCAL_PLAYLISTS_FOLDER = "playlists"
 DEFAULT_PATH_MAPPING = {
     "mode": "SIMPLE",
     "simple": [],
@@ -14,10 +34,22 @@ DEFAULT_PATH_MAPPING = {
     }
 }
 
-CONFIG_PATH = os.path.abspath(
+DEFAULT_CONFIG_PATH = os.path.abspath(
     os.path.join(os.path.dirname(__file__), "..", "config.json")
 )
 
+# Allow Docker / users to relocate config for backup convenience.
+# Example: /app/data/config/config.json
+CONFIG_PATH = os.path.abspath(
+    os.environ.get("PLEXPLAYLISTSYNC_CONFIG_PATH", DEFAULT_CONFIG_PATH)
+)
+
+
+def _ensure_parent_dir(file_path: str) -> None:
+    parent = os.path.dirname(os.path.abspath(file_path))
+    if parent and not os.path.isdir(parent):
+        os.makedirs(parent, exist_ok=True)
+
 
 class ServerConfig:
 
@@ -30,16 +62,18 @@ class ServerConfig:
         self.timeout = 9
         self.library_name = ""
         self.sync_mode = DEFAULT_SYNC_MODE
-        self.local_path = "playlist"
+        # Local playlists folder is intentionally fixed and not part of config.
+        # Docker volume should mount host ./playlists -> container /app/playlists.
+        self.local_path = LOCAL_PLAYLISTS_FOLDER
         self.path_rules: list[dict[str, str]] = []  # Legacy field for backward compatibility
         self.path_mapping: dict = DEFAULT_PATH_MAPPING.copy()
         self.schedule_mode = "DISABLED"
         self.schedule_cron = ""
-        self.schedule_daily_time = "02:00"
+        self.schedule_daily_time = "00:00"
         self.schedule_weekly_days = [0]
-        self.schedule_weekly_time = "03:00"
+        self.schedule_weekly_time = "00:00"
         self.schedule_auto_watch = False
-        self.backup_enabled = False
+        self.backup_enabled = True
         self.backup_retention_count = 5
         self.load()
 
@@ -47,7 +81,7 @@ class ServerConfig:
         try:
             with open(CONFIG_PATH, "r", encoding="utf-8") as f:
                 config = json.load(f)
-            logger.debug(f"Loaded server config: {config}")
+            logger.debug(f"Loaded server config: {_redact_for_log(config)}")
         except FileNotFoundError:
             # 如果配置文件不存在，使用默认值
             self.save()
@@ -66,7 +100,8 @@ class ServerConfig:
         self.timeout = config.get("timeout", 9)
         self.library_name = config.get("library_name", "")
         self.sync_mode = config.get("sync_mode", DEFAULT_SYNC_MODE)
-        self.local_path = config.get("local_path", "playlist")
+        # local_path is fixed by design and not configurable.
+        self.local_path = LOCAL_PLAYLISTS_FOLDER
         self.path_rules = config.get("path_rules", []) or []
         
         # Load path_mapping with default fallback
@@ -94,9 +129,10 @@ class ServerConfig:
         self.backup_enabled = config.get("backup_enabled", False)
         self.backup_retention_count = config.get("backup_retention_count", 5)
         logger.info(f"Server config loaded.")
-        logger.debug(f"Current server config: {self.__dict__}")
+        logger.debug(f"Current server config: {_redact_server_config_dict(self.__dict__)}")
 
     def save(self):
+        _ensure_parent_dir(CONFIG_PATH)
         config = {
             "theme": self.theme,
             "token": self.token,
@@ -106,7 +142,6 @@ class ServerConfig:
             "timeout": self.timeout,
             "library_name": self.library_name,
             "sync_mode": self.sync_mode,
-            "local_path": self.local_path,
             "path_rules": self.path_rules,
             "path_mapping": self.path_mapping,
             "schedule_mode": self.schedule_mode,
@@ -120,7 +155,8 @@ class ServerConfig:
         }
         with open(CONFIG_PATH, "w", encoding="utf-8") as f:
             json.dump(config, f, indent=4, ensure_ascii=False)
-        logger.info(f"Server config saved: {config}")
+        logger.info(f"Server config saved.")
+        logger.debug(f"Saved server config: {_redact_for_log(config)}")
 
     def set_url(self, url: str) -> None:
         self.url = url
@@ -143,9 +179,6 @@ class ServerConfig:
     def set_sync_mode(self, sync_mode: str) -> None:
         self.sync_mode = sync_mode
 
-    def set_local_path(self, local_path: str) -> None:
-        self.local_path = local_path or "playlist"
-
     def set_theme(self, theme: str) -> None:
         # check theme is valid
         if theme not in ["auto", "dark", "light"]:
@@ -207,7 +240,6 @@ class ServerConfig:
         timeout: int | None = None,
         library_name: str | None = None,
         sync_mode: str | None = None,
-        local_path: str | None = None,
         path_rules: list[dict[str, str]] | None = None,
         path_mapping: dict | None = None,
     ) -> None:
@@ -227,8 +259,6 @@ class ServerConfig:
             self.set_library(library_name)
         if sync_mode is not None:
             self.set_sync_mode(sync_mode)
-        if local_path is not None:
-            self.set_local_path(local_path)
         if path_rules is not None:
             self.set_path_rules(path_rules)
         if path_mapping is not None:

app/utils/local_playlist.py

@@ -78,10 +78,28 @@ def write_local_playlist(playlist_path: str, tracks: List[str]) -> bool:
         bool: True if successful, False otherwise.
     """
     try:
-        with open(playlist_path, 'w', encoding="utf-8") as file:
+        desired_lines = ["#EXTM3U\n"] + [f"{track}\n" for track in tracks]
-            file.write("#EXTM3U\n")
+        desired_content = "".join(desired_lines)
-            for track in tracks:
+
-                file.write(f"{track}\n")
+        # Avoid rewriting identical content to prevent watcher feedback loops.
+        if os.path.exists(playlist_path):
+            try:
+                with open(playlist_path, 'r', encoding="utf-8") as existing_file:
+                    existing_content = existing_file.read()
+                if existing_content == desired_content:
+                    logger.debug(f"Playlist unchanged; skipping write: {playlist_path}")
+                    return True
+            except Exception as e:
+                # If read fails, fall back to rewriting.
+                logger.debug(f"Failed to read existing playlist for comparison ({playlist_path}): {e}")
+
+        # Write via temp file then replace for safer updates.
+        os.makedirs(os.path.dirname(os.path.abspath(playlist_path)), exist_ok=True)
+        tmp_path = f"{playlist_path}.tmp"
+        with open(tmp_path, 'w', encoding="utf-8") as file:
+            file.write(desired_content)
+        os.replace(tmp_path, playlist_path)
+
         logger.info(f"Written {len(tracks)} songs to the playlist: {playlist_path}")
         return True
     except Exception as e:

app/utils/playlist_merge.py

@@ -12,10 +12,13 @@ from app.utils.plex_client import plex_client
 from merge3 import Merge3
 
 
-TEST_PLAYLIST_DIR = os.path.abspath(
+SYNC_ARTIFACTS_DIR = os.path.abspath(
-    os.path.join(os.path.dirname(__file__), "..", "test_playlists")
+    os.path.join(os.path.dirname(__file__), "..", "..", "data", "sync_artifacts")
 )
 
+# Backward-compat alias (older API / logs used this name).
+TEST_PLAYLIST_DIR = SYNC_ARTIFACTS_DIR
+
 
 class ConflictResolutionStrategy(str, Enum):
     LOCAL_PRIORITY = "local_priority"
@@ -159,9 +162,37 @@ class MergeResult:
     conflicts: list[dict]
 
 
-def _ensure_test_dir(folder: str = TEST_PLAYLIST_DIR) -> str:
+def _ensure_dir(path: str) -> str:
-    os.makedirs(folder, exist_ok=True)
+    os.makedirs(path, exist_ok=True)
-    return folder
+    return path
+
+
+def _safe_folder_name(name: str, max_len: int = 120) -> str:
+    """Make a filesystem-safe folder name (especially for Windows hosts).
+
+    This is used for artifacts folders persisted to the host.
+    """
+
+    if not name:
+        return "(unnamed)"
+
+    # Windows-disallowed characters plus path separators.
+    invalid = set('<>:"/\\|?*')
+    cleaned = "".join(("_" if ch in invalid else ch) for ch in name).strip()
+    if not cleaned:
+        cleaned = "(unnamed)"
+    if len(cleaned) > max_len:
+        cleaned = cleaned[:max_len].rstrip()
+    return cleaned
+
+
+def _playlist_artifact_dir(artifacts_root: str, playlist_name: str) -> str:
+    return os.path.join(artifacts_root, _safe_folder_name(playlist_name))
+
+
+def _artifact_file(playlist_folder: str, category: str, filename: str) -> str:
+    category_dir = _ensure_dir(os.path.join(playlist_folder, category))
+    return os.path.join(category_dir, filename)
 
 
 def _read_text_if_exists(path: str) -> tuple[str, bool]:
@@ -174,26 +205,27 @@ def _read_text_if_exists(path: str) -> tuple[str, bool]:
         return "", False
 
 
-def _save_playlist_to_folder(filename: str, paths: Sequence[str], folder: str) -> str:
+def _save_playlist_text(path: str, text: str) -> str:
-    _ensure_test_dir(folder)
+    """Write text if changed (avoid triggering unnecessary file events)."""
-    file_path = os.path.join(folder, filename)
-    logger.info(f"Saving playlist to: {file_path}")
 
-    new_content = save_paths(paths)
+    _ensure_dir(os.path.dirname(path))
 
-    # Check if content has changed before writing to avoid triggering unnecessary file events
+    if os.path.exists(path):
-    if os.path.exists(file_path):
         try:
-            with open(file_path, "r", encoding="utf-8") as f:
+            with open(path, "r", encoding="utf-8") as file:
-                current_content = f.read()
+                if file.read() == text:
-            if current_content == new_content:
+                    return path
-                return file_path
         except OSError:
             pass
 
-    with open(file_path, "w", encoding="utf-8") as file:
+    with open(path, "w", encoding="utf-8") as file:
-        file.write(new_content)
+        file.write(text)
-    return file_path
+    return path
+
+
+def _save_playlist_paths(path: str, paths: Sequence[str]) -> str:
+    logger.info(f"Saving playlist to: {path}")
+    return _save_playlist_text(path, save_paths(paths))
 
 
 def _normalize_inputs(
@@ -205,9 +237,9 @@ def _normalize_inputs(
     local_paths = load_paths(local_text)
     remote_paths = load_paths(remote_text)
 
-    _save_playlist_to_folder("base_playlist.m3u8", base_paths, folder)
+    _save_playlist_paths(_artifact_file(folder, "base", "base_prev.m3u8"), base_paths)
-    _save_playlist_to_folder("local_input.m3u8", local_paths, folder)
+    _save_playlist_paths(_artifact_file(folder, "inputs", "local_input.m3u8"), local_paths)
-    _save_playlist_to_folder("remote_input.m3u8", remote_paths, folder)
+    _save_playlist_paths(_artifact_file(folder, "inputs", "remote_input.m3u8"), remote_paths)
 
     return base_paths, local_paths, remote_paths
 
@@ -275,14 +307,13 @@ def _write_results(
     else:
         remote_lines = list(merged_lines)
     
-    _save_playlist_to_folder("local_result.m3u8", local_lines, folder)
+    _save_playlist_paths(_artifact_file(folder, "outputs", "local_result.m3u8"), local_lines)
-    _save_playlist_to_folder("remote_result.m3u8", remote_lines, folder)
+    _save_playlist_paths(_artifact_file(folder, "outputs", "remote_result.m3u8"), remote_lines)
-    _save_playlist_to_folder("base_next.m3u8", merged_lines, folder)
+    _save_playlist_paths(_artifact_file(folder, "base", "base_next.m3u8"), merged_lines)
 
 
 def _write_delete_marker(playlist: str, folder: str) -> str:
-    _ensure_test_dir(folder)
+    marker_path = _artifact_file(folder, "meta", "delete.txt")
-    marker_path = os.path.join(folder, "delete.txt")
     with open(marker_path, "w", encoding="utf-8") as file:
         file.write(f"delete playlist {playlist}")
     return marker_path
@@ -418,7 +449,7 @@ def merge_playlists(
     local_text: str,
     remote_text: str,
     strategy: ConflictResolutionStrategy = ConflictResolutionStrategy.LOCAL_PRIORITY,
-    test_folder: str = TEST_PLAYLIST_DIR,
+    test_folder: str = SYNC_ARTIFACTS_DIR,
     compiled_rules: CompiledRegexRules | None = None,
 ) -> MergeResult:
     """Merge playlists using diff3 and resolve conflicts per strategy.
@@ -494,19 +525,42 @@ def _load_local_playlists(local_dir: str) -> dict[str, str]:
 def _load_playlist_snapshots(playlist: str, folder: str) -> tuple[str, str, str, bool, bool]:
     """Load base/local/remote texts for a playlist from its test folder."""
 
-    playlist_folder = os.path.join(folder, playlist)
+    playlist_folder = _playlist_artifact_dir(folder, playlist)
+
+    # Prefer new organized layout.
     base_text, base_exists = _read_text_if_exists(
-        os.path.join(playlist_folder, "base_next.m3u8")
+        os.path.join(playlist_folder, "base", "base_next.m3u8")
     )
     if not base_text:
-        alt_text, _ = _read_text_if_exists(
+        alt_text, alt_exists = _read_text_if_exists(
-            os.path.join(playlist_folder, "base_playlist.m3u8")
+            os.path.join(playlist_folder, "base", "base_prev.m3u8")
         )
         base_text = base_text or alt_text
+        base_exists = base_exists or alt_exists
+
+    # Backward-compat: legacy flat file layout.
+    if not base_text:
+        legacy_text, legacy_exists = _read_text_if_exists(
+            os.path.join(playlist_folder, "base_next.m3u8")
+        )
+        base_text = base_text or legacy_text
+        base_exists = base_exists or legacy_exists
+    if not base_text:
+        legacy_text, legacy_exists = _read_text_if_exists(
+            os.path.join(playlist_folder, "base_playlist.m3u8")
+        )
+        base_text = base_text or legacy_text
+        base_exists = base_exists or legacy_exists
 
     remote_text, remote_exists = _read_text_if_exists(
-        os.path.join(playlist_folder, "remote_input.m3u8")
+        os.path.join(playlist_folder, "inputs", "remote_input.m3u8")
     )
+    if not remote_text:
+        legacy_remote, legacy_exists = _read_text_if_exists(
+            os.path.join(playlist_folder, "remote_input.m3u8")
+        )
+        remote_text = remote_text or legacy_remote
+        remote_exists = remote_exists or legacy_exists
 
     return base_text, remote_text, playlist_folder, remote_exists, base_exists
 
@@ -748,7 +802,7 @@ def _compile_simple_mapping_rules(simple_mappings: list[dict]) -> CompiledRegexR
 
 
 def sync_all_playlists(
-    local_dir: str, mode: SyncMode, test_folder: str = TEST_PLAYLIST_DIR
+    local_dir: str, mode: SyncMode, test_folder: str = SYNC_ARTIFACTS_DIR
 ) -> list[PlaylistSyncResult]:
     """Synchronize all playlists that can be matched by name.
     
@@ -795,18 +849,14 @@ def sync_all_playlists(
         legacy_compiled_rules = _compile_regex_rules(server_config.path_rules)
         logger.info("Using legacy path_rules for preprocessing")
     
-    _ensure_test_dir(test_folder)
+    _ensure_dir(test_folder)
-    logger.info(f"Syncing playlists to test folder: {test_folder}")
+    logger.info(f"Sync artifacts folder: {test_folder}")
     local_playlists = _load_local_playlists(local_dir)
     remote_playlists = _fetch_remote_playlists()
     playlist_names: set[str] = set(local_playlists.keys())
 
     playlist_names.update(remote_playlists.keys())
 
-    for entry in os.scandir(test_folder):
-        if entry.is_dir():
-            playlist_names.add(entry.name)
-
     results: list[PlaylistSyncResult] = []
 
     for playlist in sorted(playlist_names):

app/utils/plex_client.py

@@ -79,9 +79,7 @@ class PlexClient:
             # Update the base URL and connection status
             self.base_url = build_plex_url(scheme, url, port)
             self.connected = True
-            logger.info(
+            logger.info(f"Connected to Plex server at {self.base_url}.")
-                f"Connected to Plex server at {self.base_url} with token: {self.token}"
-            )
             return self.server, self.token
         except Exception as e:
             logger.warning(f"Failed to connect to Plex server: {str(e)}")
@@ -106,9 +104,7 @@ class PlexClient:
         self.token = account.authenticationToken
 
         self.server = PlexServer(self.base_url, self.token, timeout=timeout)
-        logger.debug(
+        logger.debug(f"Connected to Plex server with username: {username}.")
-            f"Connected to Plex server with username: {username}, token: {self.token}"
-        )
         return self.server, self.token
 
     def _connect_with_token(
@@ -124,7 +120,7 @@ class PlexClient:
         self.base_url = build_plex_url(scheme, url, port)
 
         self.server = PlexServer(self.base_url, token, timeout=timeout)
-        logger.debug(f"Connected to Plex server with token: {token}")
+        logger.debug("Connected to Plex server with token.")
         return self.server, token
 
     def _connect_check(self):

app/utils/sync_manager.py

@@ -2,6 +2,9 @@ import threading
 import asyncio
 import json
 import os
+import hashlib
+import re
+import time
 from datetime import datetime
 from app.utils.logger import logger
 from app.utils.playlist_merge import sync_all_playlists, SyncMode
@@ -19,6 +22,23 @@ class SyncManager:
         self._last_error = None
         self._listeners = [] # List of asyncio.Queue
         self._loop = None
+        # Suppress watcher events briefly after we write/delete local playlists.
+        # This prevents feedback loops where a sync triggers another sync.
+        self._watcher_suppress_until = 0.0
+
+        # Tunable defaults (seconds). Keep short to avoid missing real user edits.
+        self._watcher_suppress_after_write_seconds = 2.5
+        self._watcher_suppress_after_sync_seconds = 2.5
+
+    def suppress_watcher_events(self, seconds: float):
+        now = time.monotonic()
+        with self._lock:
+            self._watcher_suppress_until = max(self._watcher_suppress_until, now + float(seconds))
+
+    @property
+    def is_watcher_suppressed(self) -> bool:
+        with self._lock:
+            return time.monotonic() < self._watcher_suppress_until
 
     def set_event_loop(self, loop):
         self._loop = loop
@@ -76,6 +96,11 @@ class SyncManager:
             self._is_syncing = True
             self._last_status = "syncing"
             self._last_error = None
+            # Preemptively suppress watcher in case the poller notices changes right after.
+            self._watcher_suppress_until = max(
+                self._watcher_suppress_until,
+                time.monotonic() + self._watcher_suppress_after_sync_seconds,
+            )
         
         self._notify_listeners()
         logger.info(f"Starting sync (Source: {trigger_source})...")
@@ -136,16 +161,17 @@ class SyncManager:
             try:
                 if action == "synced":
                     # 1. Write Local
-                    local_result_path = os.path.join(output_dir, "local_result.m3u8")
+                    local_result_path = os.path.join(output_dir, "outputs", "local_result.m3u8")
                     if os.path.exists(local_result_path):
                         tracks = load_local_playlist(local_result_path)
-                        dest_path = os.path.join(server_config.local_path, f"{playlist_name}.m3u8")
+                        dest_path = self._safe_local_playlist_path(server_config.local_path, playlist_name, ".m3u8")
                         # Ensure directory exists
                         os.makedirs(os.path.dirname(dest_path), exist_ok=True)
+                        self.suppress_watcher_events(self._watcher_suppress_after_write_seconds)
                         write_local_playlist(dest_path, tracks)
                     
                     # 2. Write Remote (Plex)
-                    remote_result_path = os.path.join(output_dir, "remote_result.m3u8")
+                    remote_result_path = os.path.join(output_dir, "outputs", "remote_result.m3u8")
                     if os.path.exists(remote_result_path):
                         tracks = load_local_playlist(remote_result_path)
                         if server_config.library_name:
@@ -156,10 +182,12 @@ class SyncManager:
 
                 elif action == "deleted":
                     # Delete Local
-                    dest_path = os.path.join(server_config.local_path, f"{playlist_name}.m3u8")
+                    dest_path = self._safe_local_playlist_path(server_config.local_path, playlist_name, ".m3u8")
+                    self.suppress_watcher_events(self._watcher_suppress_after_write_seconds)
                     delete_local_playlist(dest_path)
                     # Also check for .m3u
-                    dest_path_m3u = os.path.join(server_config.local_path, f"{playlist_name}.m3u")
+                    dest_path_m3u = self._safe_local_playlist_path(server_config.local_path, playlist_name, ".m3u")
+                    self.suppress_watcher_events(self._watcher_suppress_after_write_seconds)
                     delete_local_playlist(dest_path_m3u)
                     
                     # Delete Remote
@@ -167,8 +195,63 @@ class SyncManager:
             except Exception as e:
                 logger.error(f"Error applying sync result for playlist {playlist_name}: {e}")
 
+    @staticmethod
+    def _safe_local_playlist_path(local_dir: str, playlist_name: str, extension: str) -> str:
+        base_dir = os.path.abspath(local_dir or "")
+        if not base_dir:
+            raise ValueError("Local playlist directory is not configured")
+
+        original = (playlist_name or "").strip()
+        # Drop any path components.
+        name = os.path.basename(original)
+        # Remove control chars.
+        name = re.sub(r"[\x00-\x1f\x7f]", "_", name)
+        # Replace path separators and Windows-invalid characters.
+        invalid = set('<>:"/\\|?*')
+        cleaned = "".join(("_" if ch in invalid else ch) for ch in name).strip().strip(". ")
+
+        windows_reserved = {
+            "CON", "PRN", "AUX", "NUL",
+            *(f"COM{i}" for i in range(1, 10)),
+            *(f"LPT{i}" for i in range(1, 10)),
+        }
+
+        needs_hash = False
+        if not cleaned:
+            cleaned = "playlist"
+            needs_hash = True
+        if cleaned.upper() in windows_reserved:
+            needs_hash = True
+        if cleaned != original:
+            needs_hash = True
+
+        cleaned = cleaned[:160].rstrip().strip(". ")
+        if not cleaned:
+            cleaned = "playlist"
+            needs_hash = True
+
+        if needs_hash:
+            digest = hashlib.sha1(original.encode("utf-8", errors="ignore")).hexdigest()[:8]
+            cleaned = f"{cleaned}__{digest}"
+
+        filename = f"{cleaned}{extension}"
+        candidate = os.path.abspath(os.path.join(base_dir, filename))
+
+        # Ensure the final path stays within base_dir.
+        if os.path.commonpath([base_dir, candidate]) != base_dir:
+            raise ValueError("Refusing to write outside local playlist directory")
+
+        return candidate
+
     def _complete_sync(self, status, error=None):
+        now = time.monotonic()
         with self._lock:
+            # Keep watcher suppression a bit after sync finishes, since PollingObserver
+            # may detect file changes on the next polling tick.
+            self._watcher_suppress_until = max(
+                self._watcher_suppress_until,
+                now + self._watcher_suppress_after_sync_seconds,
+            )
             self._last_status = status
             self._last_error = error
             self._last_sync_time = datetime.now()

app/utils/watcher.py

@@ -22,22 +22,36 @@ class PlaylistEventHandler(FileSystemEventHandler):
         if event.is_directory:
             return
 
+        # For moved events, the interesting path is the destination.
+        event_path = getattr(event, "dest_path", None) if event.event_type == "moved" else event.src_path
+        if not event_path:
+            return
+        
         # Filter out noisy events. Only listen to actual changes.
         # 'opened' and 'closed' (without write) are read events and should be ignored.
         if event.event_type not in ['created', 'modified', 'deleted', 'moved']:
             return
 
         # Ignore temporary files or hidden files
-        filename = os.path.basename(event.src_path)
+        filename = os.path.basename(event_path)
         if filename.startswith('.'):
             return
 
+        # Only watch playlist files to avoid noisy triggers.
+        if not filename.lower().endswith((".m3u", ".m3u8")):
+            return
+
         # Prevent feedback loops: if sync is in progress, ignore events
         if sync_manager.is_syncing:
-            logger.debug(f"[Watcher] Ignoring event {event.event_type} on {event.src_path} because sync is in progress.")
+            logger.debug(f"[Watcher] Ignoring event {event.event_type} on {event_path} because sync is in progress.")
             return
 
-        logger.info(f"[Watcher] Accepted file change: {event.event_type} {event.src_path}")
+        # Prevent feedback loops: ignore events right after sync writes/deletes.
+        if getattr(sync_manager, "is_watcher_suppressed", False):
+            logger.debug(f"[Watcher] Ignoring event {event.event_type} on {event_path} because watcher is suppressed.")
+            return
+
+        logger.info(f"[Watcher] Accepted file change: {event.event_type} {event_path}")
         self.trigger_sync()
 
     def trigger_sync(self):

docker-compose.yml

@@ -1,13 +0,0 @@
-services:
-  plex-playlist-sync:
-    build: .
-    command: uvicorn app.main:app --host 0.0.0.0 --port 8080 --reload
-    ports:
-      - "8888:8080"
-    volumes:
-      - path_to_your_playlist:/app/playlist
-    environment:
-      - PYTHONUNBUFFERED=1
-      - PYTHONDONTWRITEBYTECODE=1
-      - LOG_LEVEL=INFO
-    restart: unless-stopped

docker-compose_sample.yml

@@ -0,0 +1,36 @@
+services:
+  plex-playlist-sync:
+    build: .
+    command: uvicorn app.main:app --host 0.0.0.0 --port 8080 --no-server-header
+    ports:
+      - "8888:8080"
+    volumes:
+      - PATH_TO_YOUR_PLAYLISTS:/app/playlists
+      - PATH_TO_DATA/backup:/app/data/backup
+      - PATH_TO_DATA/config:/app/data/config
+      - PATH_TO_DATA/sync_artifacts:/app/data/sync_artifacts
+    environment:
+      - PYTHONUNBUFFERED=1
+      - PYTHONDONTWRITEBYTECODE=1
+      - PLEXPLAYLISTSYNC_CONFIG_PATH=/app/data/config/config.json
+      - PLEXPLAYLISTSYNC_BACKUP_DIR=/app/data/backup
+      - TZ=${TZ:-UTC}
+      - LOG_LEVEL=${LOG_LEVEL:-INFO}
+      # CORS (default: disabled / same-origin only)
+      # Comma-separated list or JSON array. Example:
+      # - PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173
+      # - PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS=["https://your.domain"]
+      # Use '*' only if you understand the risk (credentials will be forced off).
+      - PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS=${PLEXPLAYLISTSYNC_CORS_ALLOWED_ORIGINS:-}
+      # Optional: allow cookies/credentials for allowed origins (ignored when origins contains '*')
+      - PLEXPLAYLISTSYNC_CORS_ALLOW_CREDENTIALS=${PLEXPLAYLISTSYNC_CORS_ALLOW_CREDENTIALS:-0}
+      # Optional API auth (protects /api/*).
+      # Set PLEXPLAYLISTSYNC_AUTH_ENABLED=1 to enable.
+      - PLEXPLAYLISTSYNC_AUTH_ENABLED=${PLEXPLAYLISTSYNC_AUTH_ENABLED:-0}
+      - PLEXPLAYLISTSYNC_AUTH_USERNAME=${PLEXPLAYLISTSYNC_AUTH_USERNAME:-}
+      - PLEXPLAYLISTSYNC_AUTH_PASSWORD=${PLEXPLAYLISTSYNC_AUTH_PASSWORD:-}
+      # Optional: stable signing secret for tokens (recommended if auth enabled).
+      - PLEXPLAYLISTSYNC_AUTH_TOKEN_SECRET=${PLEXPLAYLISTSYNC_AUTH_TOKEN_SECRET:-}
+      # Optional: token TTL seconds
+      - PLEXPLAYLISTSYNC_AUTH_TOKEN_TTL_SECONDS=${PLEXPLAYLISTSYNC_AUTH_TOKEN_TTL_SECONDS:-86400}
+    restart: unless-stopped

docker-entrypoint.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env sh
+set -eu
+
+# Configure timezone inside the container if TZ is provided.
+# This avoids relying on host mounts like /etc/localtime, which are awkward on Windows.
+if [ "${TZ:-}" != "" ]; then
+  ZONEINFO="/usr/share/zoneinfo/${TZ}"
+  if [ -e "$ZONEINFO" ]; then
+    ln -snf "$ZONEINFO" /etc/localtime
+    echo "$TZ" > /etc/timezone
+  else
+    echo "[entrypoint] Warning: TZ='$TZ' not found at $ZONEINFO; keeping existing timezone." >&2
+  fi
+fi
+
+exec "$@"

frontend/App.tsx

@@ -15,7 +15,10 @@ import { SYNC_BANNER_PADDING_X, SYNC_BANNER_PADDING_Y, SYNC_BANNER_MIN_WIDTH } f
 import ServerPanel from './components/ServerPanel';
 import StrategySelector from './components/StrategySelector';
 import ConnectionModal from './components/ConnectionModal';
-import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff, Type, Code2 } from 'lucide-react';
+import LoginScreen from './components/LoginScreen';
+import OverflowMarquee from './components/OverflowMarquee';
+import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff, Type, Code2, Archive, Languages, LogOut } from 'lucide-react';
+import { useLanguage } from './LanguageContext';
 
 interface Toast {
   id: number;
@@ -112,6 +115,13 @@ const useStripeAnimation = (syncState: SyncState) => {
 };
 
 const App: React.FC = () => {
+  const { t, language, setLanguage } = useLanguage();
+
+  // Auth (optional; controlled by backend /api/auth/config)
+  const [authReady, setAuthReady] = useState(false);
+  const [authEnabled, setAuthEnabled] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [currentUser, setCurrentUser] = useState('');
   const [localPlaylists, setLocalPlaylists] = useState<Playlist[]>([]);
   const [cloudPlaylists, setCloudPlaylists] = useState<Playlist[]>([]);
   const [cloudServerInfo, setCloudServerInfo] = useState<PlexServerConnection | undefined>(undefined);
@@ -134,6 +144,7 @@ const App: React.FC = () => {
 
   // Connection Modal State
   const [isConnectionModalOpen, setIsConnectionModalOpen] = useState(false);
+  const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
 
   // Strategy State
   const [currentStrategy, setCurrentStrategy] = useState<SyncStrategy>(SyncStrategy.LOCAL_OVERWRITE);
@@ -167,6 +178,75 @@ const App: React.FC = () => {
     retentionCount: 5
   });
 
+  useEffect(() => {
+    let cancelled = false;
+
+    const initAuth = async () => {
+      try {
+        const cfg = await apiService.getAuthConfig();
+        const enabled = cfg.status === 'success' ? !!cfg.data.enabled : false;
+        if (cancelled) return;
+        setAuthEnabled(enabled);
+
+        if (!enabled) {
+          setIsAuthenticated(true);
+          setAuthReady(true);
+          return;
+        }
+
+        const savedToken = localStorage.getItem('plexsync-token');
+        const savedUser = localStorage.getItem('plexsync-username');
+        if (!savedToken || !savedUser) {
+          setIsAuthenticated(false);
+          setCurrentUser('');
+          setAuthReady(true);
+          return;
+        }
+
+        const me = await apiService.me();
+        if (me.status === 'success') {
+          setIsAuthenticated(true);
+          setCurrentUser(me.data.username || savedUser);
+        } else {
+          localStorage.removeItem('plexsync-token');
+          localStorage.removeItem('plexsync-username');
+          setIsAuthenticated(false);
+          setCurrentUser('');
+        }
+      } catch {
+        // If auth discovery fails, fall back to no-auth to keep local dev workable.
+        setAuthEnabled(false);
+        setIsAuthenticated(true);
+      } finally {
+        if (!cancelled) setAuthReady(true);
+      }
+    };
+
+    initAuth();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleLoginSuccess = (token: string, username: string) => {
+    localStorage.setItem('plexsync-token', token);
+    localStorage.setItem('plexsync-username', username);
+    setCurrentUser(username);
+    setIsAuthenticated(true);
+  };
+
+  const handleLogout = async () => {
+    try {
+      await apiService.logout();
+    } catch {
+      // ignore
+    }
+    localStorage.removeItem('plexsync-token');
+    localStorage.removeItem('plexsync-username');
+    setIsAuthenticated(false);
+    setCurrentUser('');
+  };
+
   // Toast Notification System
   const [toasts, setToasts] = useState<Toast[]>([]);
   const timeoutsRef = useRef<{[key: number]: ReturnType<typeof setTimeout>}>({});
@@ -269,13 +349,15 @@ const App: React.FC = () => {
        loadSchedule();
 
        if (settings.mode === ScheduleMode.DISABLED) {
-          addToast("Scheduled tasks disabled.");
+         addToast(t('toasts.scheduleDisabled'));
+       } else if (settings.mode === ScheduleMode.CRON && settings.cronExpression.trim() === '') {
+         addToast(t('toasts.scheduleEmpty'));
        } else {
-          addToast("Scheduled task updated successfully.");
+         addToast(t('toasts.scheduleStarted'));
        }
        return true;
     } else {
-       addToast(result.message || "Failed to update schedule.");
+       addToast(result.message || t('toasts.scheduleFailed'));
        return false;
     }
   };
@@ -285,14 +367,15 @@ const App: React.FC = () => {
     const result = await apiService.saveBackupSettings(settings);
     if (result.status === 'success') {
       setBackupSettings(settings);
-      addToast('Backup settings have been saved.');
+      addToast(t('toasts.backupSaved'));
     } else {
-      addToast(result.message || 'Failed to save backup settings.');
+      addToast(result.message || t('toasts.backupFailed'));
     }
   };
 
   // Fetch Local Playlists
   const refreshLocal = useCallback(async () => {
+    if (!authReady || !isAuthenticated) return;
     if (localAbortRef.current) localAbortRef.current.abort();
     const abortController = new AbortController();
     localAbortRef.current = abortController;
@@ -304,19 +387,20 @@ const App: React.FC = () => {
     }
     setLoadingLocal(false);
     localAbortRef.current = null;
-  }, [localPath]);
+  }, [authReady, isAuthenticated, localPath]);
 
   const cancelLocalRefresh = () => {
     if (localAbortRef.current) {
       localAbortRef.current.abort();
       localAbortRef.current = null;
       setLoadingLocal(false);
-      addToast("Local refresh cancelled.");
+      addToast(t('toasts.localRefreshCancelled'));
     }
   };
 
   // Fetch Cloud Playlists and Info
   const refreshCloud = useCallback(async () => {
+    if (!authReady || !isAuthenticated) return;
     if (cloudAbortRef.current) cloudAbortRef.current.abort();
     const abortController = new AbortController();
     cloudAbortRef.current = abortController;
@@ -338,26 +422,28 @@ const App: React.FC = () => {
       setLoadingCloud(false);
       cloudAbortRef.current = null;
     }
-  }, []);
+  }, [authReady, isAuthenticated]);
 
   const cancelCloudRefresh = () => {
     if (cloudAbortRef.current) {
       cloudAbortRef.current.abort();
       cloudAbortRef.current = null;
       setLoadingCloud(false);
-      addToast("Cloud refresh cancelled.");
+      addToast(t('toasts.cloudRefreshCancelled'));
     }
   };
 
   // Load persisted configuration
   useEffect(() => {
+    if (!authReady || !isAuthenticated) return;
     loadSettings();
     loadSchedule();
     loadBackupSettings();
-  }, [loadSettings, loadSchedule, loadBackupSettings]);
+  }, [authReady, isAuthenticated, loadSettings, loadSchedule, loadBackupSettings]);
 
   // Initial Load
   useEffect(() => {
+    if (!authReady || !isAuthenticated) return;
     refreshLocal();
     refreshCloud();
     return () => {
@@ -365,16 +451,16 @@ const App: React.FC = () => {
       if (localAbortRef.current) localAbortRef.current.abort();
       if (cloudAbortRef.current) cloudAbortRef.current.abort();
     }
-  }, [refreshLocal, refreshCloud]);
+  }, [authReady, isAuthenticated, refreshLocal, refreshCloud]);
 
   // Handle Strategy Change
   const handleStrategyChange = async (strategy: SyncStrategy, label: string) => {
     setCurrentStrategy(strategy);
     const result = await apiService.updateSyncStrategy(strategy);
     if (result.status === 'success') {
-      addToast(`Selected strategy "${label}" has been saved.`);
+      addToast(t('toasts.strategySaved', { strategy: label }));
     } else {
-      addToast(result.message || 'Failed to save sync strategy.');
+      addToast(result.message || t('toasts.strategySaveFailed'));
     }
   };
 
@@ -383,14 +469,15 @@ const App: React.FC = () => {
     setPathMappingConfig(config);
     const result = await apiService.savePathMapping(config);
     if (result.status === 'success') {
-      addToast('Path mapping rules have been saved.');
+      addToast(t('toasts.mappingSaved'));
     } else {
-      addToast(result.message || 'Failed to save path mapping rules.');
+      addToast(result.message || t('toasts.mappingSaveFailed'));
     }
   };
 
   // Handle Sync Trigger
   const handleSyncTrigger = async () => {
+    if (!authReady || !isAuthenticated) return;
     if (syncState !== SyncState.IDLE) return;
 
     setSyncState(SyncState.SYNCING);
@@ -410,14 +497,23 @@ const App: React.FC = () => {
       }, SYNC_SUCCESS_TOTAL_MS);
     } else {
       setSyncState(SyncState.ERROR);
-      addToast(result.message || 'Sync failed. Please check connection.');
+      addToast(result.message || t('toasts.syncFailed'));
       setTimeout(() => setSyncState(SyncState.IDLE), SYNC_ERROR_RESET_MS);
     }
   };
 
   // SSE for sync status
   useEffect(() => {
-    const eventSource = new EventSource(`${import.meta.env.VITE_API_BASE_URL || ''}/api/sync/events`);
+    if (!authReady || !isAuthenticated) return;
+
+    const base = `${import.meta.env.VITE_API_BASE_URL || ''}/api/sync/events`;
+    const url = new URL(base, window.location.origin);
+    if (authEnabled) {
+      const token = localStorage.getItem('plexsync-token');
+      if (!token) return;
+      url.searchParams.set('access_token', token);
+    }
+    const eventSource = new EventSource(url.toString());
 
     eventSource.onmessage = (event) => {
       try {
@@ -457,11 +553,11 @@ const App: React.FC = () => {
                 setSyncState(SyncState.SUCCESS);
                 refreshLocal();
                 refreshCloud();
-                addToast("Background sync completed successfully.");
+               addToast(t('toasts.backgroundSyncSuccess'));
                 setTimeout(() => setSyncState(SyncState.IDLE), SYNC_SUCCESS_TOTAL_MS);
              } else if (status === 'error') {
                 setSyncState(SyncState.ERROR);
-                addToast(`Background sync failed: ${error}`);
+               addToast(t('toasts.backgroundSyncFailed', { error: error || '' }));
                 setTimeout(() => setSyncState(SyncState.IDLE), SYNC_ERROR_RESET_MS);
              }
           } else {
@@ -484,7 +580,24 @@ const App: React.FC = () => {
     return () => {
       eventSource.close();
     };
-  }, [syncState, refreshLocal, refreshCloud, addToast]);
+  }, [authReady, isAuthenticated, authEnabled, syncState, refreshLocal, refreshCloud, addToast]);
+
+  if (!authReady) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900 text-gray-200">
+        {t('common.loading')}
+      </div>
+    );
+  }
+
+  if (authEnabled && !isAuthenticated) {
+    return (
+      <LoginScreen
+        onLoginSuccess={handleLoginSuccess}
+        onLoginError={(msg) => addToast(msg)}
+      />
+    );
+  }
 
   const handleConnectSuccess = async (serverInfo: PlexServerConnection) => {
     setCloudServerInfo(serverInfo);
@@ -519,25 +632,23 @@ const App: React.FC = () => {
 
   const getScheduleDisplayInfo = () => {
     const result = {
-        label: 'Schedule', 
+      label: t('dashboard.autoSync'),
-        value: 'Not configured', 
+      value: t('schedule.notConfigured'),
-        active: false,
+      active: false,
-        autoWatch: scheduleSettings.autoWatch 
+      autoWatch: scheduleSettings.autoWatch,
     };
 
     if (scheduleSettings.mode === ScheduleMode.DISABLED) {
-      result.label = 'Auto-Sync';
+      result.value = t('common.disabled');
-      result.value = 'Disabled';
       return result;
     }
 
-    let label = 'Schedule';
+    if (scheduleSettings.mode === ScheduleMode.CRON && scheduleSettings.cronExpression.trim() === '') {
-    if (scheduleSettings.mode === ScheduleMode.CRON) label = 'Cron Schedule';
+      result.value = t('dashboard.notSet');
-    else if (scheduleSettings.mode === ScheduleMode.DAILY) label = 'Daily Schedule';
+    } else {
-    else if (scheduleSettings.mode === ScheduleMode.WEEKLY) label = 'Weekly Schedule';
+      result.value = nextRunTime ? `${nextRunTime}` : t('common.loading');
+    }
 
-    result.label = label;
-    result.value = nextRunTime ? `Next: ${nextRunTime}` : 'Calculating...';
     result.active = true;
     return result;
   };
@@ -547,41 +658,59 @@ const App: React.FC = () => {
   // Helper: Calculate Path Mapping Info
   const getPathMappingDisplayInfo = (config: PathMappingConfig) => {
     let count = 0;
-    let modeLabel = '';
     let Icon = Type;
 
     if (config.mode === PathMappingMode.SIMPLE) {
-        modeLabel = 'Simple';
+      count = config.simple.length;
-        count = config.simple.length;
+      Icon = Type;
-        Icon = Type;
     } else {
-        modeLabel = 'Regex';
+      count =
-        count = config.regex.localPre.length +
+        config.regex.localPre.length +
-                config.regex.localPost.length + 
+        config.regex.localPost.length +
-                config.regex.remotePre.length + 
+        config.regex.remotePre.length +
-                config.regex.remotePost.length;
+        config.regex.remotePost.length;
-        Icon = Code2;
+      Icon = Code2;
     }
 
     if (count === 0) {
-        return {
+      return {
-            label: 'Path Mapping',
+        label: t('dashboard.mapping'),
-            value: 'Not Set',
+        value: t('dashboard.notSet'),
-            active: false,
+        active: false,
-            Icon: Icon
+        Icon,
-        };
+      };
     }
 
+    const modeLabel = config.mode === PathMappingMode.SIMPLE ? t('mapping.simple') : t('mapping.regex');
+
     return {
-        label: 'Path Mapping',
+      label: t('dashboard.mapping'),
-        value: `${modeLabel} (${count})`,
+      value: `${modeLabel} (${count})`,
-        active: true,
+      active: true,
-        Icon: Icon
+      Icon,
     };
   };
 
   const pathMappingInfo = getPathMappingDisplayInfo(pathMappingConfig);
 
+  // Helper: Calculate Backup Info
+  const getBackupDisplayInfo = (settings: BackupSettings) => {
+    if (!settings.enabled) {
+      return {
+        label: t('dashboard.backup'),
+        value: t('common.disabled'),
+        active: false,
+      };
+    }
+    return {
+      label: t('dashboard.backup'),
+      value: t('dashboard.keep', { count: settings.retentionCount }),
+      active: true,
+    };
+  };
+
+  const backupInfo = getBackupDisplayInfo(backupSettings);
+
   return (
     <div className="min-h-screen flex flex-col bg-gray-900 text-gray-100 font-sans overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-800 via-gray-900 to-black">
       
@@ -649,59 +778,127 @@ const App: React.FC = () => {
                    <ArrowLeftRight size={24} strokeWidth={2.5} />
                 </div>
                 <h1 className="text-xl font-bold tracking-tight text-white">
-                  Plex<span className="text-plex-orange">Sync</span>
+                  <span className="text-plex-orange">PMS</span> Playlist Sync
                 </h1>
               </div>
               
               {/* Normal Toolbar Right */}
               <div className="flex items-center gap-4">
-                  {/* Path Mapping Info */}
+                  
-                  <div className="flex flex-col items-end hidden md:flex border-r border-gray-700/50 pr-4 mr-1">
+                  {/* Unified Status Dock */}
-                     <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
+                  <div className="hidden md:flex items-center bg-gray-900/40 border border-gray-700/50 rounded-lg p-1 mr-2 backdrop-blur-sm shadow-sm transition-all hover:bg-gray-900/60 hover:border-gray-600/50">
-                       {pathMappingInfo.label}
+                      
-                     </span>
+                      {/* Path Mapping Section */}
-                     <div className={`text-xs font-mono flex items-center gap-1.5 ${pathMappingInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
+                      <div className="flex flex-col px-3 py-0.5 border-r border-gray-700/30 w-[120px] group/item">
-                        {pathMappingInfo.active && <pathMappingInfo.Icon size={12} />}
+                         <span className={`text-[9px] font-bold uppercase tracking-widest transition-colors ${pathMappingInfo.active ? 'text-plex-orange' : 'text-gray-500 group-hover/item:text-gray-400'}`}>{pathMappingInfo.label}</span>
-                        <span>{pathMappingInfo.value}</span>
+                         <div className={`flex items-center gap-1.5 text-xs font-medium ${pathMappingInfo.active ? 'text-blue-400' : 'text-gray-600'}`}>
-                     </div>
+                            <pathMappingInfo.Icon size={12} strokeWidth={2.5} className="flex-shrink-0" />
+                              <OverflowMarquee>
+                                {pathMappingInfo.active ? pathMappingInfo.value : t('common.none')}
+                              </OverflowMarquee>
+                         </div>
+                      </div>
+
+                      {/* Backup Section */}
+                      <div className="flex flex-col px-3 py-0.5 border-r border-gray-700/30 w-[100px] group/item">
+                         <span className={`text-[9px] font-bold uppercase tracking-widest transition-colors ${backupInfo.active ? 'text-plex-orange' : 'text-gray-500 group-hover/item:text-gray-400'}`}>{backupInfo.label}</span>
+                         <div className={`flex items-center gap-1.5 text-xs font-medium ${backupInfo.active ? 'text-indigo-400' : 'text-gray-600'}`}>
+                            <Archive size={12} strokeWidth={2.5} className="flex-shrink-0" />
+                           <OverflowMarquee>
+                             {backupInfo.active ? t('dashboard.retain', { count: backupSettings.retentionCount }) : backupInfo.value}
+                           </OverflowMarquee>
+                         </div>
+                      </div>
+
+                      {/* Schedule Section */}
+                      <div className="flex flex-col px-3 py-0.5 w-[180px] group/item">
+                         <div className="flex items-center justify-between">
+                            <span className={`text-[9px] font-bold uppercase tracking-widest transition-colors ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-500 group-hover/item:text-gray-400'}`}>{scheduleInfo.label}</span>
+                            {/* Watch Indicator Badge */}
+                            <div 
+                                className={`flex items-center gap-1 px-1 rounded-[2px] transition-colors ${scheduleInfo.autoWatch ? 'text-plex-orange bg-plex-orange/10' : 'text-gray-700 bg-gray-800'}`}
+                                title={scheduleInfo.autoWatch ? t('dashboard.watchModeActive') : t('dashboard.watchModeDisabled')}
+                            >
+                                {scheduleInfo.autoWatch ? <Eye size={9} /> : <EyeOff size={9} />}
+                                <span className="text-[8px] font-bold uppercase">{t('dashboard.watch')}</span>
+                            </div>
+                         </div>
+                         <div className={`flex items-center gap-1.5 text-xs font-medium mt-0.5 ${scheduleInfo.active ? 'text-green-400' : 'text-gray-600'}`}>
+                            <Clock size={12} strokeWidth={2.5} className="flex-shrink-0" />
+                           <OverflowMarquee>
+                            {scheduleInfo.active ? scheduleInfo.value : t('common.disabled')}
+                           </OverflowMarquee>
+                         </div>
+                      </div>
                   </div>
 
-                  {/* Schedule Info */}
+                  <div className="flex items-center gap-4">
-                  <div className="flex flex-col items-end mr-2 md:mr-0 hidden md:flex">
+                    {/* Language Switcher */}
-                     <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
+                    <div className="relative">
-                       {scheduleInfo.label}
+                      <button
-                     </span>
+                        onClick={() => setIsLangMenuOpen(!isLangMenuOpen)}
-                     <div className="text-xs font-mono flex items-center gap-1.5">
+                        className="flex items-center justify-center w-9 h-9 rounded-full border border-gray-700 bg-gray-800/50 text-gray-400 hover:text-white hover:bg-gray-700 transition-all"
-                       {/* Schedule Part */}
+                        title={t('common.switchLanguage')}
-                       <div className={`flex items-center gap-1.5 ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
+                      >
-                          {scheduleInfo.active && <Clock size={12} />}
+                        <Languages size={18} />
-                          <span>{scheduleInfo.value}</span>
+                      </button>
-                       </div>
+                      {isLangMenuOpen && (
+                        <>
+                          <div className="fixed inset-0 z-40" onClick={() => setIsLangMenuOpen(false)}></div>
+                          <div className="absolute right-0 top-full mt-2 w-32 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-50 overflow-hidden">
+                            <button 
+                              onClick={() => { setLanguage('en'); setIsLangMenuOpen(false); }}
+                              className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'en' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                            >
+                              English
+                            </button>
+                            <button 
+                              onClick={() => { setLanguage('es'); setIsLangMenuOpen(false); }}
+                              className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'es' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                            >
+                              Español
+                            </button>
+                            <button 
+                              onClick={() => { setLanguage('chs'); setIsLangMenuOpen(false); }}
+                              className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'chs' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                            >
+                              简体中文
+                            </button>
+                            <button 
+                              onClick={() => { setLanguage('cht'); setIsLangMenuOpen(false); }}
+                              className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'cht' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                            >
+                              繁體中文
+                            </button>
+                          </div>
+                        </>
+                      )}
+                    </div>
 
-                       {/* Watch Part */}
+                    {/* Connection Status Button */}
-                       <span className="text-gray-700 mx-0.5">|</span>
+                    <button 
-                       <div 
+                      onClick={() => setIsConnectionModalOpen(true)}
-                         className={`flex items-center gap-1 ${scheduleInfo.autoWatch ? 'text-plex-orange' : 'text-gray-600'}`} 
+                      className={`flex items-center justify-center w-9 h-9 rounded-full border transition-all duration-300 hover:scale-105 active:scale-95 shadow-md 
-                         title={scheduleInfo.autoWatch ? "Local Playlist Monitoring Enabled" : "Local Playlist Monitoring Disabled"}
+                        ${isConnected 
-                       >
+                          ? "bg-green-500/10 border-green-500/50 text-green-400 hover:bg-green-500/20 hover:shadow-green-500/20"
-                           {scheduleInfo.autoWatch ? <Eye size={12} /> : <EyeOff size={12} />}
+                          : "bg-red-500/10 border-red-500/50 text-red-400 hover:bg-red-500/20 hover:shadow-red-500/20"
-                           <span className="text-[10px] font-sans font-bold">WATCH</span>
+                        }`}
-                       </div>
+                      title={isConnected ? t('dashboard.connected') : t('dashboard.disconnected')}
-                     </div>
+                    >
+                      {isConnected ? <Server size={18} /> : <ServerOff size={18} />}
+                    </button>
+
+                    {/* Logout (rightmost) */}
+                    {authEnabled && isAuthenticated && (
+                      <button
+                        onClick={handleLogout}
+                        className="flex items-center justify-center w-9 h-9 rounded-full border border-gray-700 bg-gray-800/50 text-gray-400 hover:text-white hover:bg-gray-700 transition-all"
+                        title={t('auth.logout')}
+                      >
+                        <LogOut size={18} />
+                      </button>
+                    )}
                   </div>
-
-                  {/* Connection Status Button */}
-                  <button
-                    onClick={() => setIsConnectionModalOpen(true)}
-                    className={`flex items-center justify-center w-9 h-9 rounded-full border transition-all duration-300 hover:scale-105 active:scale-95 shadow-md ${
-                      isConnected
-                        ? "bg-green-500/10 border-green-500/50 text-green-400 hover:bg-green-500/20 hover:shadow-green-500/20"
-                        : "bg-red-500/10 border-red-500/50 text-red-400 hover:bg-red-500/20 hover:shadow-red-500/20"
-                      }`}
-                    title={isConnected ? "Connected to Plex" : "Disconnected"}
-                  >
-                    {isConnected ? <Server size={18} /> : <ServerOff size={18} />}
-                  </button>
               </div>
             </>
           ) : (
@@ -715,7 +912,7 @@ const App: React.FC = () => {
                  }}
                >
                   <h1 className={`text-xl md:text-2xl font-black tracking-[0.2em] uppercase whitespace-nowrap transition-colors duration-300 ${syncState === SyncState.SUCCESS ? 'text-[#22c55e]' : 'text-[#F59E0B]'}`}>
-                    {syncState === SyncState.SYNCING ? 'SYNCHRONIZING' : 'SYNC COMPLETE'}
+                    {syncState === SyncState.SYNCING ? t('dashboard.synchronizing') : t('dashboard.syncComplete')}
                   </h1>
                </div>
             </div>
@@ -800,7 +997,7 @@ const App: React.FC = () => {
       
       {/* Footer */}
       <footer className="flex-none py-4 text-center text-xs text-gray-600 border-t border-white/5 bg-gray-900/50 backdrop-blur">
-        <p>&copy; {new Date().getFullYear()} PlexSync Manager. Connected to Docker backend.</p>
+        <p>{t('app.footer', { year: new Date().getFullYear() })}</p>
       </footer>
 
       {/* Modals */}

frontend/LanguageContext.tsx

@@ -0,0 +1,63 @@
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { translations, Language } from './translations';
+
+interface LanguageContextProps {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  t: (path: string, params?: Record<string, string | number>) => string;
+}
+
+const LanguageContext = createContext<LanguageContextProps | undefined>(undefined);
+
+export const LanguageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [language, setLanguageState] = useState<Language>('en');
+
+  useEffect(() => {
+    const savedLang = localStorage.getItem('plexsync-language') as Language;
+    if (savedLang && translations[savedLang]) {
+      setLanguageState(savedLang);
+    }
+  }, []);
+
+  const setLanguage = (lang: Language) => {
+    setLanguageState(lang);
+    localStorage.setItem('plexsync-language', lang);
+  };
+
+  const t = (path: string, params?: Record<string, string | number>): string => {
+    const keys = path.split('.');
+    let current: any = translations[language];
+
+    for (const key of keys) {
+      if (current[key] === undefined) {
+        console.warn(`Missing translation for key: ${path} in language: ${language}`);
+        return path;
+      }
+      current = current[key];
+    }
+
+    let text = current as string;
+
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        text = text.replace(`{${key}}`, String(value));
+      });
+    }
+
+    return text;
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage, t }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};

frontend/components/ConnectionModal.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { PlexConnectionSettings, PlexServerConnection, PlexLibrary } from '../types';
 import { apiService } from '../services/api';
 import { X, Server, Lock, User, Key, Globe, Eye, EyeOff, CheckCircle, Library, ChevronDown, ChevronRight, Settings, Loader2 } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
 
 interface ConnectionModalProps {
   isOpen: boolean;
@@ -13,6 +14,7 @@ interface ConnectionModalProps {
 }
 
 const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onConnectSuccess, onShowMessage, initialSettings }) => {
+  const { t } = useLanguage();
   const [formData, setFormData] = useState<PlexConnectionSettings>({
     protocol: 'http',
     address: '',
@@ -90,9 +92,9 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
        onConnectSuccess(updatedInfo);
        const saveResult = await apiService.updateLibrary(lib.title);
        if (saveResult.status !== 'success') {
-         onShowMessage(saveResult.message || 'Failed to save library selection');
+         onShowMessage(saveResult.message || t('toasts.librarySaveFailed'));
        } else {
-         onShowMessage(`Library switched to ${lib.title}`);
+         onShowMessage(t('toasts.librarySwitched', { library: lib.title }));
        }
     }
   };
@@ -112,7 +114,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
         abortControllerRef.current.abort();
         abortControllerRef.current = null;
         setIsConnecting(false);
-        setError("Connection cancelled by user.");
+        setError(t('toasts.connectionCancelled'));
       }
       return;
     }
@@ -141,7 +143,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
 
       const info = result.data.serverInfo;
       setConnectedServerInfo(info);
-      onShowMessage(`Successfully connected to ${info.name || 'Plex Server'}`);
+      onShowMessage(t('toasts.connectedTo', { name: info.name || 'Plex Server' }));
 
       const libs = info.libraries || [];
       const musicLibraries = libs.filter((lib) => lib.type === 'artist').sort((a, b) => a.title.localeCompare(b.title));
@@ -157,13 +159,13 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
           });
           const saveResult = await apiService.updateLibrary(defaultLib.title);
           if (saveResult.status !== 'success') {
-            setError(saveResult.message || 'Failed to save library selection');
+            setError(saveResult.message || t('toasts.librarySaveFailed'));
           }
       } else {
           onConnectSuccess(info);
       }
     } else {
-      setError(result.message || "Connection failed");
+      setError(result.message || t('server.connectionFailed'));
     }
   };
 
@@ -183,7 +185,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
         <div className="px-6 py-4 bg-gray-800 border-b border-gray-700 flex items-center justify-between flex-none">
           <h3 className="text-lg font-semibold text-white flex items-center gap-2">
             <Server size={18} className={isConnected ? "text-green-400" : "text-plex-orange"} />
-            {isConnected ? 'Server Connected' : 'Connect Plex Server'}
+            {isConnected ? t('connection.titleConnected') : t('connection.titleConnect')}
           </h3>
           <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
             <X size={20} />
@@ -202,7 +204,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
 
             {/* Server Connection */}
             <div className="space-y-3">
-                <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Server Details</label>
+              <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">{t('connection.serverDetails')}</label>
                 <div className="grid grid-cols-4 gap-3">
                 <div className="col-span-1">
                     <select
@@ -226,7 +228,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                         name="address"
                         required
                         disabled={isConnected || isConnecting}
-                        placeholder="IP Address or Domain"
+                      placeholder={t('connection.address')}
                         value={formData.address}
                         onChange={handleChange}
                         className={`w-full h-10 pl-9 pr-3 bg-gray-800 border border-gray-600 rounded-md text-sm text-white placeholder-gray-500 focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange transition-all ${isConnected ? 'opacity-60 cursor-not-allowed' : ''}`}
@@ -240,7 +242,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                     type="text" 
                     name="port"
                     disabled={isConnected || isConnecting}
-                    placeholder="Port (e.g. 32400)"
+                  placeholder={t('connection.port')}
                     value={formData.port}
                     onChange={handleChange}
                     className={`w-full h-10 px-3 bg-gray-800 border border-gray-600 rounded-md text-sm text-white placeholder-gray-500 focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange transition-all ${isConnected ? 'opacity-60 cursor-not-allowed' : ''}`}
@@ -252,7 +254,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
 
             {/* Authentication */}
             <div className="space-y-3">
-                <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Authentication</label>
+              <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">{t('connection.authentication')}</label>
                 
                 {/* Token */}
                 <div className="relative">
@@ -263,7 +265,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                     type="text" 
                     name="token"
                     disabled={isConnected || isConnecting}
-                    placeholder="X-Plex-Token (Optional)"
+                  placeholder={t('connection.token')}
                     value={formData.token}
                     onChange={handleChange}
                     className={`w-full h-10 pl-9 pr-3 bg-gray-800 border border-gray-600 rounded-md text-sm text-white placeholder-gray-500 focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange transition-all font-mono ${isConnected ? 'opacity-60 cursor-not-allowed' : ''}`}
@@ -285,7 +287,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                             type="text" 
                             name="username"
                             disabled={isTokenProvided || isConnecting}
-                            placeholder="Username / Email"
+                          placeholder={t('connection.username')}
                             value={formData.username}
                             onChange={handleChange}
                             className={`w-full h-10 pl-9 pr-3 rounded-md text-sm transition-all focus:outline-none ${disabledInputClass}`}
@@ -301,7 +303,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                             type={showPassword ? "text" : "password"} 
                             name="password"
                             disabled={isTokenProvided || isConnecting}
-                            placeholder="Password"
+                          placeholder={t('connection.password')}
                             value={formData.password}
                             onChange={handleChange}
                             className={`w-full h-10 pl-9 pr-10 rounded-md text-sm transition-all focus:outline-none ${disabledInputClass}`}
@@ -329,7 +331,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                 >
                   <div className="flex items-center gap-2">
                     <Settings size={14} />
-                    <span>Advanced Options</span>
+                    <span>{t('connection.advanced')}</span>
                   </div>
                   {showAdvanced ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
                 </button>
@@ -337,7 +339,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                 {showAdvanced && (
                   <div className="p-3 bg-gray-900/50 space-y-3 animate-in slide-in-from-top-2">
                     <div>
-                      <label className="text-xs text-gray-500 mb-1 block">Connection Timeout (Seconds)</label>
+                      <label className="text-xs text-gray-500 mb-1 block">{t('connection.timeout')}</label>
                       <input 
                         type="number"
                         min="1"
@@ -366,15 +368,15 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                     {isConnecting ? (
                       <>
                         <Loader2 size={16} className="animate-spin" />
-                        <span>Connecting... <span className="opacity-75 font-normal ml-1">(Cancel)</span></span>
+                        <span>{t('connection.connecting')} <span className="opacity-75 font-normal ml-1">({t('common.cancel')})</span></span>
                       </>
-                    ) : 'Connect Server'}
+                    ) : t('connection.connectBtn')}
                 </button>
             ) : (
                 <div className="mt-2 p-2 bg-green-500/10 border border-green-500/20 rounded-lg text-center">
                     <p className="text-green-400 text-sm font-semibold flex items-center justify-center gap-2">
                         <CheckCircle size={16} />
-                        Connected Successfully
+                      {t('connection.connectedSuccess')}
                     </p>
                 </div>
             )}
@@ -383,7 +385,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
             {/* Library Selection - Appears after connection */}
             {isConnected && libraries.length > 0 && (
                 <div className="mt-6 pt-5 border-t border-gray-700 animate-in slide-in-from-top-2 fade-in">
-                    <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider block mb-2">Select Library to Sync</label>
+                  <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider block mb-2">{t('connection.selectLibrary')}</label>
                     <div className="relative">
                         <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                             <Library size={14} className="text-plex-orange" />
@@ -407,7 +409,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                             onClick={onClose}
                             className="px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors border border-gray-600 hover:border-gray-500"
                         >
-                            Done
+                          {t('common.done')}
                         </button>
                     </div>
                 </div>

frontend/components/LoginScreen.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import { useLanguage } from '../LanguageContext';
+import { apiService } from '../services/api';
+import { Lock, User, Loader2, Languages, ArrowRight, ArrowLeftRight } from 'lucide-react';
+import type { LoginCredentials } from '../types';
+
+interface LoginScreenProps {
+  onLoginSuccess: (token: string, username: string) => void;
+  onLoginError: (msg: string) => void;
+}
+
+const LoginScreen: React.FC<LoginScreenProps> = ({ onLoginSuccess, onLoginError }) => {
+  const { t, language, setLanguage } = useLanguage();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setLocalError(null);
+
+    try {
+      const creds: LoginCredentials = { username, password };
+      const response = await apiService.login(creds);
+
+      if (response.status === 'success') {
+        onLoginSuccess(response.data.token, response.data.username);
+      } else {
+        const errorMsg = response.message || t('auth.invalidCredentials');
+        setLocalError(errorMsg);
+        onLoginError(errorMsg);
+      }
+    } catch {
+      setLocalError(t('auth.invalidCredentials'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const currentLangLabel =
+    language === 'en' ? 'English'
+    : language === 'es' ? 'Español'
+    : language === 'chs' ? '简体中文'
+    : '繁體中文';
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-800 via-gray-900 to-black p-4">
+      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-plex-orange/10 rounded-full blur-[100px] opacity-20"></div>
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[100px] opacity-20"></div>
+      </div>
+
+      {/* Language Switcher (Top Right) */}
+      <div className="absolute top-6 right-6 z-20">
+        <div className="relative">
+          <button
+            onClick={() => setIsLangMenuOpen(!isLangMenuOpen)}
+            className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 border border-gray-700 hover:border-gray-600 text-gray-300 transition-all backdrop-blur-sm"
+          >
+            <Languages size={16} />
+            <span className="text-sm font-medium">{currentLangLabel}</span>
+          </button>
+
+          {isLangMenuOpen && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setIsLangMenuOpen(false)}></div>
+              <div className="absolute right-0 top-full mt-2 w-32 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-20 overflow-hidden">
+                <button
+                  onClick={() => { setLanguage('en'); setIsLangMenuOpen(false); }}
+                  className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'en' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                >
+                  English
+                </button>
+                <button
+                  onClick={() => { setLanguage('es'); setIsLangMenuOpen(false); }}
+                  className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'es' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                >
+                  Español
+                </button>
+                <button
+                  onClick={() => { setLanguage('chs'); setIsLangMenuOpen(false); }}
+                  className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'chs' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                >
+                  简体中文
+                </button>
+                <button
+                  onClick={() => { setLanguage('cht'); setIsLangMenuOpen(false); }}
+                  className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'cht' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                >
+                  繁體中文
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Main Card */}
+      <div className="w-full max-w-md bg-gray-900/60 backdrop-blur-xl border border-gray-700/50 rounded-2xl shadow-2xl p-8 z-10">
+        <div className="text-center mb-8 flex flex-col items-center">
+          <div className="inline-flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-plex-orange to-yellow-600 shadow-lg shadow-plex-orange/20 mb-4">
+            <ArrowLeftRight size={32} strokeWidth={2.5} className="text-gray-900" />
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight text-white">
+            <span className="text-plex-orange">PMS</span> Playlist Sync
+          </h1>
+        </div>
+
+        <form onSubmit={handleLogin} className="space-y-4">
+          {localError && (
+            <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-xs flex items-center justify-center">
+              {localError}
+            </div>
+          )}
+
+          <div className="space-y-1">
+            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider ml-1">{t('auth.username')}</label>
+            <div className="relative group">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <User size={16} className="text-gray-500 group-focus-within:text-plex-orange transition-colors" />
+              </div>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full h-11 pl-10 pr-4 bg-gray-800/50 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all"
+                placeholder="username"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider ml-1">{t('auth.password')}</label>
+            <div className="relative group">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock size={16} className="text-gray-500 group-focus-within:text-plex-orange transition-colors" />
+              </div>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full h-11 pl-10 pr-4 bg-gray-800/50 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all"
+                placeholder="password"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading || !username || !password}
+            className={`w-full h-12 mt-6 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all shadow-lg
+              ${isLoading
+                ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+                : 'bg-plex-orange text-gray-900 hover:bg-yellow-500 active:scale-[0.98]'
+              }`}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 size={18} className="animate-spin" />
+                <span>{t('auth.loggingIn')}</span>
+              </>
+            ) : (
+              <>
+                <span>{t('auth.loginBtn')}</span>
+                <ArrowRight size={18} />
+              </>
+            )}
+          </button>
+        </form>
+
+        <div className="mt-8 pt-6 border-t border-gray-700/50 text-center">
+          <p className="text-[10px] text-gray-600">© PMS Playlist Sync</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginScreen;

frontend/components/OverflowMarquee.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+type OverflowMarqueeProps = {
+  children: React.ReactNode;
+  className?: string;
+  textClassName?: string;
+  title?: string;
+  speedPxPerSec?: number;
+  minDurationSec?: number;
+};
+
+type MarqueeMetrics = {
+  isOverflowing: boolean;
+  overflowPx: number;
+  durationSec: number;
+};
+
+const DEFAULT_SPEED_PX_PER_SEC = 24;
+const DEFAULT_MIN_DURATION_SEC = 4;
+
+const OverflowMarquee: React.FC<OverflowMarqueeProps> = ({
+  children,
+  className,
+  textClassName,
+  title,
+  speedPxPerSec = DEFAULT_SPEED_PX_PER_SEC,
+  minDurationSec = DEFAULT_MIN_DURATION_SEC,
+}) => {
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [metrics, setMetrics] = useState<MarqueeMetrics>({
+    isOverflowing: false,
+    overflowPx: 0,
+    durationSec: minDurationSec,
+  });
+
+  const fallbackTitle = useMemo(() => {
+    if (title) return title;
+    return typeof children === 'string' ? children : undefined;
+  }, [children, title]);
+
+  const recompute = () => {
+    const container = containerRef.current;
+    const text = textRef.current;
+    if (!container || !text) return;
+
+    // Ensure we measure with current layout.
+    const available = container.clientWidth;
+    const content = text.scrollWidth;
+    const overflowPx = Math.ceil(content - available);
+
+    if (overflowPx > 1) {
+      const durationSec = Math.max(minDurationSec, overflowPx / Math.max(1, speedPxPerSec));
+      setMetrics({ isOverflowing: true, overflowPx, durationSec });
+    } else {
+      // Avoid re-render loops if already not overflowing.
+      setMetrics((prev) => (prev.isOverflowing ? { isOverflowing: false, overflowPx: 0, durationSec: minDurationSec } : prev));
+    }
+  };
+
+  useLayoutEffect(() => {
+    recompute();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [children]);
+
+  useEffect(() => {
+    recompute();
+
+    const container = containerRef.current;
+    const text = textRef.current;
+    if (!container || !text) return;
+
+    const ro = new ResizeObserver(() => recompute());
+    ro.observe(container);
+    ro.observe(text);
+
+    const onResize = () => recompute();
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', onResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const textStyle: React.CSSProperties | undefined = metrics.isOverflowing
+    ? ({
+        ['--marquee-distance' as any]: `${metrics.overflowPx}px`,
+        ['--marquee-duration' as any]: `${metrics.durationSec}s`,
+      } satisfies React.CSSProperties)
+    : undefined;
+
+  return (
+    <span
+      ref={containerRef}
+      className={['overflow-marquee', className].filter(Boolean).join(' ')}
+      title={fallbackTitle}
+    >
+      <span
+        ref={textRef}
+        className={[
+          'overflow-marquee__text',
+          metrics.isOverflowing ? 'overflow-marquee__text--animate' : '',
+          textClassName,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        style={textStyle}
+      >
+        {children}
+      </span>
+    </span>
+  );
+};
+
+export default OverflowMarquee;

frontend/components/PlaylistCard.tsx

@@ -1,26 +1,31 @@
 import React from 'react';
 import { Playlist } from '../types';
 import { Disc3, Clock } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
+import OverflowMarquee from './OverflowMarquee';
 
 interface PlaylistCardProps {
   playlist: Playlist;
 }
 
 const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
+  const { t } = useLanguage();
   return (
     <div className="group flex flex-col w-full p-2.5 bg-gray-800/60 rounded-md border border-gray-700/50 hover:bg-gray-700 hover:border-plex-orange/50 transition-all duration-200 cursor-pointer shadow-sm">
       <div className="flex items-center justify-between">
-        <h4 className="text-sm font-medium text-gray-200 truncate flex-1 mr-2 group-hover:text-white transition-colors">
+        <h4 className="text-sm font-medium text-gray-200 flex-1 mr-2 group-hover:text-white transition-colors min-w-0">
-          {playlist.title}
+          <OverflowMarquee>
+            {playlist.title}
+          </OverflowMarquee>
         </h4>
       </div>
       
       <div className="flex items-center mt-1.5 space-x-4 text-xs text-gray-500 group-hover:text-gray-400">
-        <span className="flex items-center" title="Track Count">
+        <span className="flex items-center" title={t('playlist.trackCount')}>
           <Disc3 size={12} className="mr-1.5 opacity-70" />
           {playlist.trackCount}
         </span>
-        <span className="flex items-center" title="Last Updated">
+        <span className="flex items-center" title={t('playlist.lastUpdated')}>
           <Clock size={12} className="mr-1.5 opacity-70" />
           {new Date(playlist.lastUpdated).toLocaleDateString()}
         </span>

frontend/components/ServerPanel.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { Playlist, ServerType, PlexServerConnection } from '../types';
 import PlaylistCard from './PlaylistCard';
 import { RefreshCw, Server, Cloud, WifiOff, X } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
+import OverflowMarquee from './OverflowMarquee';
 
 interface ServerPanelProps {
   type: ServerType;
@@ -14,6 +16,7 @@ interface ServerPanelProps {
 }
 
 const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, onRefresh, onCancel, serverInfo }) => {
+  const { t } = useLanguage();
   const isLocal = type === ServerType.LOCAL;
   
   let Icon = isLocal ? Server : Cloud;
@@ -28,39 +31,44 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
   let displaySubtitle: React.ReactNode = null;
 
   if (isLocal) {
-    displayTitle = 'Local Server';
+    displayTitle = t('server.local');
     displaySubtitle = (
       <p className="text-xs text-gray-400 font-medium mt-0.5 md:mt-0 md:ml-0">
-        {playlists.length} Playlists
+        {t('server.playlists', { count: playlists.length })}
       </p>
     );
   } else {
     // Cloud Logic
     if (serverInfo) {
       if (serverInfo.isConnected) {
-        displayTitle = serverInfo.name || 'Cloud Server';
+        displayTitle = serverInfo.name || t('server.cloud');
         displaySubtitle = (
            <div className="flex items-center text-xs text-gray-300 font-medium space-x-1.5 truncate mt-0.5 md:mt-0">
-              <span className="text-plex-orange truncate font-semibold">{serverInfo.libraryName}</span>
+              <span className="text-plex-orange font-semibold min-w-0 max-w-full">
+                <span className="block md:hidden truncate">{serverInfo.libraryName}</span>
+                <OverflowMarquee className="hidden md:inline-block">
+                  {serverInfo.libraryName}
+                </OverflowMarquee>
+              </span>
               <span className="text-gray-600 hidden md:inline">•</span>
               <span className="text-gray-500 font-mono text-[10px] hidden md:inline">{serverInfo.ip}:{serverInfo.port}</span>
            </div>
         );
       } else {
-        displayTitle = 'Not Connected';
+        displayTitle = t('server.notConnected');
         Icon = WifiOff;
         headerColor = 'text-red-400';
         displaySubtitle = (
           <p className="text-xs text-gray-500 font-medium mt-0.5">
-             Connection failed
+             {t('server.connectionFailed')}
           </p>
         );
       }
     } else {
-      displayTitle = 'Cloud Server';
+      displayTitle = t('server.cloud');
       displaySubtitle = (
         <p className="text-xs text-gray-500 font-medium mt-0.5">
-           {isLoading ? 'Connecting...' : 'Waiting...'}
+           {isLoading ? t('server.connecting') : t('server.waiting')}
         </p>
       );
     }
@@ -121,7 +129,7 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
                : 'text-gray-400 hover:text-white hover:bg-white/10'
              }
           `}
-          title={isLoading ? "Cancel Refresh" : "Refresh Playlists"}
+          title={isLoading ? t('server.cancelRefresh') : t('server.refreshPlaylists')}
         >
           {isLoading ? (
             <div className="relative flex items-center justify-center">
@@ -141,11 +149,11 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
         {isLoading && playlists.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-gray-500 space-y-3">
             <RefreshCw size={24} className="animate-spin text-plex-orange/50" />
-            <p className="text-xs font-medium tracking-wide uppercase">Syncing...</p>
+            <p className="text-xs font-medium tracking-wide uppercase">{t('server.syncing')}</p>
           </div>
         ) : playlists.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-gray-500">
-            <p className="text-sm">No playlists found.</p>
+            <p className="text-sm">{t('server.noPlaylists')}</p>
           </div>
         ) : (
           <div className="space-y-2.5 md:space-y-3">

frontend/components/StrategySelector.tsx

@@ -23,6 +23,7 @@ import {
   History,
   Eye
 } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
 
 // Generate a UUID for mapping rules
 const generateUUID = (): string => {
@@ -40,8 +41,8 @@ const generateUUID = (): string => {
 
 interface StrategyOption {
   value: SyncStrategy;
-  label: string;
+  labelKey: string;
-  description: string;
+  descKey: string;
   icon: React.ElementType;
   color: string;
 }
@@ -49,35 +50,35 @@ interface StrategyOption {
 const STRATEGIES: StrategyOption[] = [
   {
     value: SyncStrategy.LOCAL_OVERWRITE,
-    label: 'Local Overwrite',
+    labelKey: 'strategies.localOverwrite.label',
-    description: 'Local playlist completely overwrites Cloud. (No Diff)',
+    descKey: 'strategies.localOverwrite.desc',
     icon: ArrowRightCircle,
     color: 'text-blue-400'
   },
   {
     value: SyncStrategy.CLOUD_OVERWRITE,
-    label: 'Cloud Overwrite',
+    labelKey: 'strategies.cloudOverwrite.label',
-    description: 'Cloud playlist completely overwrites Local. (No Diff)',
+    descKey: 'strategies.cloudOverwrite.desc',
     icon: ArrowLeftCircle,
     color: 'text-green-400'
   },
   {
     value: SyncStrategy.MERGE_LOCAL,
-    label: 'Two-way Merge (Local Priority)',
+    labelKey: 'strategies.mergeLocal.label',
-    description: 'Merge both. Conflicts resolve to Local version.',
+    descKey: 'strategies.mergeLocal.desc',
     icon: GitMerge,
     color: 'text-blue-300'
   },
   {
     value: SyncStrategy.MERGE_CLOUD,
-    label: 'Two-way Merge (Cloud Priority)',
+    labelKey: 'strategies.mergeCloud.label',
-    description: 'Merge both. Conflicts resolve to Cloud version.',
+    descKey: 'strategies.mergeCloud.desc',
     icon: GitMerge,
     color: 'text-green-300'
   }
 ];
 
-const WEEK_DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const WEEK_DAY_INDEXES = [0, 1, 2, 3, 4, 5, 6];
 
 // Color Theme Variables for Mapping Editors
 const MAPPING_THEME = {
@@ -145,6 +146,7 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
   leftInputClass,
   rightInputClass
 }) => {
+  const { t } = useLanguage();
   
   const handleAdd = () => {
     if (isLocked) return;
@@ -176,7 +178,7 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
            onClick={handleAdd}
            disabled={isLocked}
            className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
-           title="Add Rule"
+           title={t('common.add')}
          >
            <Plus size={12} />
          </button>
@@ -185,14 +187,14 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
        <div className="flex-1 space-y-2 overflow-y-auto max-h-32 custom-scrollbar pr-1">
          {rules.length === 0 ? (
            <div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
-             No rules defined.
+             {t('mapping.noRules')}
            </div>
          ) : (
            rules.map((rule) => (
              <div key={rule.id} className="flex items-center space-x-1 animate-in slide-in-from-left-1 duration-200">
                 <input 
                   type="text" 
-                  placeholder={leftPlaceholder}
+                  placeholder={leftPlaceholder || t('mapping.pattern')}
                   value={rule.search}
                   onChange={(e) => handleUpdate(rule.id, 'search', e.target.value)}
                   className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${leftInputClass || defaultInputStyle}`}
@@ -200,7 +202,7 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
                 <Link size={12} className="text-gray-600 flex-none opacity-50" />
                 <input 
                   type="text" 
-                  placeholder={rightPlaceholder}
+                  placeholder={rightPlaceholder || t('mapping.replace')}
                   value={rule.replace}
                   onChange={(e) => handleUpdate(rule.id, 'replace', e.target.value)}
                   className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${rightInputClass || defaultInputStyle}`}
@@ -244,6 +246,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   syncState,
   onSync
 }) => {
+  const { t } = useLanguage();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -321,7 +324,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
 
   const handleSelect = (strategy: StrategyOption) => {
     if (isLocked) return;
-    onSelect(strategy.value, strategy.label);
+    onSelect(strategy.value, t(strategy.labelKey));
   };
 
   // --- Path Mapping Handlers ---
@@ -453,7 +456,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800/90 border border-gray-600 hover:border-plex-orange text-gray-300 hover:text-white hover:bg-gray-700/80 transition-all shadow-2xl hover:shadow-plex-orange/30 ring-[6px] md:ring-8 ring-gray-900 backdrop-blur-sm active:scale-95"
-        title={`Current Strategy: ${selectedOption.label}`}
+        title={`${t('strategies.title')}: ${t(selectedOption.labelKey)}`}
       >
         <selectedOption.icon size={22} className={selectedOption.color} strokeWidth={2.5} />
         <div className="absolute -bottom-1 -right-1 bg-gray-900 rounded-full border border-gray-600 p-[2px] shadow-sm">
@@ -479,7 +482,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             
             {/* Section 1: Sync Strategy */}
             <div className="px-4 py-3 bg-black/20 border-b border-white/5 flex-none">
-            <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Sync Strategy</h3>
+            <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">{t('strategies.title')}</h3>
             <div className="space-y-1">
                 {STRATEGIES.map((strategy) => (
                 <div
@@ -494,7 +497,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     <div className="flex items-center space-x-3 overflow-hidden">
                     <strategy.icon size={18} className={strategy.color} />
                     <span className={`text-sm font-medium truncate ${currentStrategy === strategy.value ? 'text-white' : 'text-gray-300 group-hover:text-white'}`}>
-                        {strategy.label}
+                      {t(strategy.labelKey)}
                     </span>
                     </div>
                     
@@ -502,7 +505,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     <div className="relative group/tooltip">
                         <HelpCircle size={14} className="text-gray-600 hover:text-gray-400 transition-colors" />
                         <div className="absolute right-0 bottom-full mb-2 w-48 p-2.5 bg-gray-900 text-xs text-gray-300 rounded-lg shadow-xl border border-gray-700 pointer-events-none opacity-0 group-hover/tooltip:opacity-100 transition-opacity z-50">
-                            {strategy.description}
+                          {t(strategy.descKey)}
                         </div>
                     </div>
                     
@@ -518,7 +521,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             {/* Section 1.5: Backup Retention */}
             <div className="px-4 py-3 bg-gray-900/40 border-b border-white/5 flex-none">
               <div className="flex items-center justify-between mb-3">
-                 <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Backup Retention</h3>
+                <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('backup.title')}</h3>
               </div>
               
               <div className="flex flex-col space-y-3">
@@ -528,8 +531,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                           <Archive size={16} />
                        </div>
                        <div className="flex flex-col">
-                          <span className="text-sm font-medium text-gray-200">Enable Backups</span>
+                          <span className="text-sm font-medium text-gray-200">{t('backup.enable')}</span>
-                          <span className="text-[10px] text-gray-500">Create a copy before changes</span>
+                          <span className="text-[10px] text-gray-500">{t('backup.enableDesc')}</span>
                        </div>
                     </div>
 
@@ -546,7 +549,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     <div className="flex items-center justify-between p-2.5 rounded-lg bg-black/20 border border-white/5">
                         <div className="flex items-center space-x-2">
                            <History size={14} className="text-gray-500" />
-                           <span className="text-xs text-gray-400">Max versions to keep:</span>
+                          <span className="text-xs text-gray-400">{t('backup.maxVersions')}</span>
                         </div>
                         <div className="flex items-center space-x-2">
                             <input 
@@ -560,7 +563,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                }}
                                className="w-16 bg-gray-800 border border-gray-700 text-center text-sm rounded py-1 text-white focus:border-plex-orange focus:outline-none"
                             />
-                            <span className="text-[10px] text-gray-600 italic">{localBackup.retentionCount === 0 ? 'No auto-delete' : 'Oldest deleted automatically'}</span>
+                            <span className="text-[10px] text-gray-600 italic">{localBackup.retentionCount === 0 ? t('backup.noAutoDelete') : t('backup.autoDelete')}</span>
                         </div>
                     </div>
                  </div>
@@ -575,7 +578,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                     >
                         <RotateCcw size={12} />
-                        <span>Revert</span>
+                        <span>{t('common.revert')}</span>
                     </button>
                     <button
                         onClick={handleSaveBackupClick}
@@ -586,7 +589,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                     >
                         <Save size={12} />
-                        <span>Save</span>
+                        <span>{t('common.save')}</span>
                     </button>
                  </div>
               </div>
@@ -595,14 +598,14 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             {/* Section 2: Path Mapping (Tabs + Grid) */}
             <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                 <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Path Mapping</h3>
+                <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('mapping.title')}</h3>
                 </div>
 
                 {/* Tabs for Path Mapping Mode */}
                 <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
                   {[
-                    { id: PathMappingMode.SIMPLE, label: 'Simple Mapping', icon: Type },
+                    { id: PathMappingMode.SIMPLE, label: t('mapping.simple'), icon: Type },
-                    { id: PathMappingMode.REGEX, label: 'Regex Rules', icon: Code2 },
+                    { id: PathMappingMode.REGEX, label: t('mapping.regex'), icon: Code2 },
                   ].map((tab) => (
                     <button
                       key={tab.id}
@@ -613,8 +616,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                           : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
                         }`}
                     >
-                        <tab.icon size={12} />
+                      <tab.icon size={12} />
-                        <span>{tab.label}</span>
+                      <span>{tab.label}</span>
                     </button>
                   ))}
                 </div>
@@ -625,15 +628,15 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        // Simple Mode: Single Editor
                        <div className="animate-in fade-in duration-200">
                           <MappingGroupEditor 
-                             title="Path Mapping"
+                              title={t('mapping.simpleTitle')}
-                             subtitle="Map Local paths to Cloud paths using simple string matching"
+                              subtitle={t('mapping.simpleSubtitle')}
                              rules={simpleRules}
                              onChange={updateSimpleGroup}
                              isLocked={isLocked}
                              borderColor={MAPPING_THEME.simple.borderColor}
                              bgColor={MAPPING_THEME.simple.bgColor}
-                             leftPlaceholder="Local Path"
+                              leftPlaceholder={t('mapping.localPath')}
-                             rightPlaceholder="Cloud Path"
+                              rightPlaceholder={t('mapping.cloudPath')}
                              leftInputClass={MAPPING_THEME.inputs.local}
                              rightInputClass={MAPPING_THEME.inputs.cloud}
                           />
@@ -643,8 +646,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-in fade-in duration-200">
                           {/* Row 1: Pre-Processing */}
                           <MappingGroupEditor 
-                             title="Local Playlist"
+                              title={t('server.local')}
-                             subtitle="Pre-Processing (Before Sync)"
+                              subtitle={t('mapping.regexPre')}
                              rules={regexRules.localPre}
                              onChange={(rules) => updateRegexGroup('localPre', rules)}
                              isLocked={isLocked}
@@ -653,8 +656,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                           />
 
                           <MappingGroupEditor 
-                             title="Remote Playlist"
+                              title={t('server.cloud')}
-                             subtitle="Pre-Processing (Before Sync)"
+                              subtitle={t('mapping.regexPre')}
                              rules={regexRules.remotePre}
                              onChange={(rules) => updateRegexGroup('remotePre', rules)}
                              isLocked={isLocked}
@@ -664,8 +667,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
 
                           {/* Row 2: Post-Processing */}
                           <MappingGroupEditor 
-                             title="Local Playlist"
+                              title={t('server.local')}
-                             subtitle="Post-Processing (After Sync / Result)"
+                              subtitle={t('mapping.regexPost')}
                              rules={regexRules.localPost}
                              onChange={(rules) => updateRegexGroup('localPost', rules)}
                              isLocked={isLocked}
@@ -674,8 +677,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                           />
 
                           <MappingGroupEditor 
-                             title="Remote Playlist"
+                              title={t('server.cloud')}
-                             subtitle="Post-Processing (After Sync / Result)"
+                              subtitle={t('mapping.regexPost')}
                              rules={regexRules.remotePost}
                              onChange={(rules) => updateRegexGroup('remotePost', rules)}
                              isLocked={isLocked}
@@ -696,7 +699,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                     >
                         <RotateCcw size={12} />
-                        <span>Revert</span>
+                        <span>{t('common.revert')}</span>
                     </button>
                     <button
                         onClick={handleSaveMappingClick}
@@ -707,7 +710,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                     >
                         <Save size={12} />
-                        <span>Save Rules</span>
+                        <span>{t('mapping.saveRules')}</span>
                     </button>
                 </div>
             </div>
@@ -715,15 +718,14 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             {/* Section 3: Scheduled Tasks */}
             <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                  <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Scheduled Tasks</h3>
+                  <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('schedule.title')}</h3>
                  </div>
 
-                 {/* Tabs */}
                  <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
-                    {[
+                   {[
-                      { id: ScheduleMode.CRON, label: 'Cron', icon: Repeat },
+                      { id: ScheduleMode.CRON, label: t('schedule.cron'), icon: Repeat },
-                      { id: ScheduleMode.DAILY, label: 'Daily', icon: Clock },
+                      { id: ScheduleMode.DAILY, label: t('schedule.daily'), icon: Clock },
-                      { id: ScheduleMode.WEEKLY, label: 'Weekly', icon: Calendar },
+                      { id: ScheduleMode.WEEKLY, label: t('schedule.weekly'), icon: Calendar },
                     ].map((tab) => (
                       <button
                         key={tab.id}
@@ -746,7 +748,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                       <div className="flex flex-col animate-in fade-in duration-200">
                          {/* Top Row: Label + Switch */}
                          <div className="flex items-center justify-between mb-3 px-1">
-                           <span className="text-xs text-gray-400 font-medium">Enable Cron Schedule</span>
+                           <span className="text-xs text-gray-400 font-medium">{t('schedule.enableCron')}</span>
                            <button 
                                onClick={() => toggleScheduleEnable(ScheduleMode.CRON)}
                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.CRON ? 'bg-plex-orange' : 'bg-gray-700'}`}
@@ -779,7 +781,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        <div className="flex flex-col animate-in fade-in duration-200">
                           {/* Top Row: Label + Switch */}
                           <div className="flex items-center justify-between mb-3 px-1">
-                            <span className="text-xs text-gray-400 font-medium">Enable Daily Run</span>
+                            <span className="text-xs text-gray-400 font-medium">{t('schedule.enableDaily')}</span>
                             <button 
                                 onClick={() => toggleScheduleEnable(ScheduleMode.DAILY)}
                                 className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.DAILY ? 'bg-plex-orange' : 'bg-gray-700'}`}
@@ -805,7 +807,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        <div className="flex flex-col animate-in fade-in duration-200">
                           {/* Top Row: Label + Switch */}
                           <div className="flex items-center justify-between mb-3 px-1">
-                            <span className="text-xs text-gray-400 font-medium">Enable Weekly Run</span>
+                            <span className="text-xs text-gray-400 font-medium">{t('schedule.enableWeekly')}</span>
                             <button 
                                 onClick={() => toggleScheduleEnable(ScheduleMode.WEEKLY)}
                                 className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.WEEKLY ? 'bg-plex-orange' : 'bg-gray-700'}`}
@@ -816,12 +818,12 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
 
                           {/* Middle Row: Full Width Capsules */}
                           <div className={`grid grid-cols-7 w-full transition-opacity duration-200 mb-3 ${localSchedule.mode !== ScheduleMode.WEEKLY ? 'opacity-50 pointer-events-none' : ''}`}>
-                             {WEEK_DAYS.map((day, index) => {
+                             {WEEK_DAY_INDEXES.map((dayIndex) => {
-                               const isSelected = localSchedule.weeklyDays.includes(index);
+                               const isSelected = localSchedule.weeklyDays.includes(dayIndex);
                                return (
                                  <button
-                                   key={index}
+                                   key={dayIndex}
-                                   onClick={() => toggleWeekDay(index)}
+                                   onClick={() => toggleWeekDay(dayIndex)}
                                    className={`h-9 text-xs font-bold border-y border-l last:border-r border-gray-600/50 transition-colors
                                      first:rounded-l-lg last:rounded-r-lg
                                      ${isSelected 
@@ -830,7 +832,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                      }
                                    `}
                                  >
-                                   {day}
+                                   {t(`schedule.weekdaysNarrow.${dayIndex}`)}
                                  </button>
                                )
                              })}
@@ -857,8 +859,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                              <Eye size={16} />
                         </div>
                         <div className="flex flex-col">
-                             <span className="text-sm font-medium text-gray-200">Watch Local Changes</span>
+                             <span className="text-sm font-medium text-gray-200">{t('schedule.watchLocal')}</span>
-                             <span className="text-[10px] text-gray-500">Auto-sync when local playlist updates</span>
+                             <span className="text-[10px] text-gray-500">{t('schedule.watchDesc')}</span>
                         </div>
                     </div>
                     <button 
@@ -880,7 +882,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                 : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                         >
                             <RotateCcw size={12} />
-                            <span>Revert</span>
+                            <span>{t('common.revert')}</span>
                         </button>
                         <button
                             onClick={handleSaveScheduleClick}
@@ -891,7 +893,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                 : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                         >
                             <Save size={12} />
-                            <span>Save</span>
+                            <span>{t('common.save')}</span>
                         </button>
                     </div>
             </div>
@@ -913,18 +915,18 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                 {isSyncing ? (
                     <>
                         <Loader2 size={16} className="animate-spin" />
-                        <span>Sync in Progress...</span>
+                        <span>{t('strategies.syncing')}</span>
                     </>
                 ) : (
                     <>
                         <Zap size={16} fill="currentColor" />
-                        <span>Sync Now</span>
+                        <span>{t('strategies.syncNow')}</span>
                     </>
                 )}
             </button>
             {(isMappingDirty || isBackupDirty) && (
                 <p className="text-[10px] text-plex-orange text-center mt-2">
-                    Please save pending changes (Backups/Path Mapping) before syncing.
+                    {t('strategies.saveWarning')}
                 </p>
             )}
         </div>

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PlexSync Manager</title>
+    <title>PMS Playlist Sync</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
@@ -36,6 +36,41 @@
       ::-webkit-scrollbar-thumb:hover {
         background: #6b7280; 
       }
+
+      /* Overflow marquee (auto-scroll when truncated) */
+      .overflow-marquee {
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 100%;
+      }
+
+      .overflow-marquee__text {
+        display: inline-block;
+        will-change: transform;
+      }
+
+      .overflow-marquee__text--animate {
+        animation: overflow-marquee-scroll var(--marquee-duration, 6s) linear infinite;
+      }
+
+      @keyframes overflow-marquee-scroll {
+        0%, 12% {
+          transform: translateX(0);
+        }
+        70%, 86% {
+          transform: translateX(calc(var(--marquee-distance, 0px) * -1));
+        }
+        100% {
+          transform: translateX(0);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .overflow-marquee__text--animate {
+          animation: none;
+        }
+      }
     </style>
   <script type="importmap">
 {

frontend/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { LanguageProvider } from './LanguageContext';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
@@ -10,6 +11,8 @@ if (!rootElement) {
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
-    <App />
+    <LanguageProvider>
+      <App />
+    </LanguageProvider>
   </React.StrictMode>
 );

frontend/locales/cht.ts

@@ -0,0 +1,172 @@
+export const cht = {
+  app: {
+    title: 'PlexSync',
+    manager: '管理',
+    footer: '© {year} PMS Playlist Sync。已連線至 Docker 後端。',
+  },
+  auth: {
+    title: '登入',
+    subtitle: '登入後管理播放清單同步',
+    username: '使用者名稱',
+    password: '密碼',
+    loginBtn: '登入',
+    logout: '登出',
+    loggingIn: '驗證中…',
+    invalidCredentials: '使用者名稱或密碼錯誤',
+    welcome: '歡迎，{user}',
+  },
+  common: {
+    save: '儲存',
+    cancel: '取消',
+    revert: '還原',
+    delete: '刪除',
+    done: '完成',
+    loading: '載入中…',
+    refresh: '重新整理',
+    close: '關閉',
+    none: '無',
+    disabled: '已停用',
+    add: '新增',
+    switchLanguage: '切換語言',
+  },
+  server: {
+    local: '本機伺服器',
+    cloud: '雲端伺服器',
+    playlists: '{count} 個播放清單',
+    notConnected: '未連線',
+    connectionFailed: '連線失敗',
+    connecting: '連線中…',
+    waiting: '等待中…',
+    syncing: '同步中…',
+    noPlaylists: '找不到播放清單。',
+    cancelRefresh: '取消重新整理',
+    refreshPlaylists: '重新整理播放清單',
+  },
+  playlist: {
+    trackCount: '曲目數',
+    lastUpdated: '上次更新',
+  },
+  dashboard: {
+    mapping: '路徑對應',
+    backup: '備份',
+    autoSync: '自動同步',
+    watch: '監看',
+    watchModeActive: '監看模式：啟用',
+    watchModeDisabled: '監看模式：停用',
+    notSet: '未設定',
+    retain: '保留：{count}',
+    keep: '保留 {count}',
+    connected: '已連線至 Plex',
+    disconnected: '未連線',
+    synchronizing: 'SYNCHRONIZING',
+    syncComplete: 'SYNC COMPLETE',
+  },
+  strategies: {
+    title: '同步策略',
+    localOverwrite: {
+      label: '本機覆寫',
+      desc: '本機播放清單完全覆寫雲端。（無 Diff）',
+    },
+    cloudOverwrite: {
+      label: '雲端覆寫',
+      desc: '雲端播放清單完全覆寫本機。（無 Diff）',
+    },
+    mergeLocal: {
+      label: '雙向合併（本機優先）',
+      desc: '合併兩端。衝突以本機版本為準。',
+    },
+    mergeCloud: {
+      label: '雙向合併（雲端優先）',
+      desc: '合併兩端。衝突以雲端版本為準。',
+    },
+    syncNow: '立即同步',
+    syncing: '同步進行中…',
+    saveWarning: '同步前請先儲存待處理的變更（備份/路徑對應）。',
+  },
+  mapping: {
+    title: '路徑對應',
+    simple: '簡易對應',
+    regex: 'Regex 規則',
+    simpleTitle: '路徑對應',
+    simpleSubtitle: '使用簡單字串比對將本機路徑對應到雲端路徑',
+    regexPre: '前處理（同步前）',
+    regexPost: '後處理（同步後 / 結果）',
+    localPath: '本機路徑',
+    cloudPath: '雲端路徑',
+    pattern: '模式',
+    replace: '取代',
+    saveRules: '儲存規則',
+    noRules: '尚未定義規則。',
+  },
+  backup: {
+    title: '備份保留',
+    enable: '啟用備份',
+    enableDesc: '變更前建立副本',
+    maxVersions: '保留的最大版本數：',
+    noAutoDelete: '不自動刪除',
+    autoDelete: '自動刪除最舊版本',
+  },
+  schedule: {
+    title: '排程任務',
+    cron: 'Cron',
+    daily: '每日',
+    weekly: '每週',
+    weekdaysNarrow: {
+      0: '日',
+      1: '一',
+      2: '二',
+      3: '三',
+      4: '四',
+      5: '五',
+      6: '六',
+    },
+    enableCron: '啟用 Cron 排程',
+    enableDaily: '啟用每日執行',
+    enableWeekly: '啟用每週執行',
+    watchLocal: '監看本機變更',
+    watchDesc: '本機播放清單更新時自動同步',
+    schedule: '排程',
+    notConfigured: '尚未設定',
+    today: '今天',
+    tomorrow: '明天',
+  },
+  connection: {
+    titleConnected: '伺服器已連線',
+    titleConnect: '連線 Plex 伺服器',
+    serverDetails: '伺服器詳細資訊',
+    authentication: '驗證',
+    protocol: '通訊協定',
+    address: 'IP 位址或網域',
+    port: '連接埠',
+    token: 'X-Plex-Token（選填）',
+    username: '使用者名稱 / 電子郵件',
+    password: '密碼',
+    advanced: '進階選項',
+    timeout: '連線逾時（秒）',
+    connectBtn: '連線伺服器',
+    connecting: '連線中…',
+    connectedSuccess: '連線成功',
+    selectLibrary: '選擇要同步的媒體庫',
+  },
+  toasts: {
+    localRefreshCancelled: '已取消本機重新整理。',
+    cloudRefreshCancelled: '已取消雲端重新整理。',
+    strategySaved: '已儲存選擇的策略「{strategy}」。',
+    strategySaveFailed: '儲存同步策略失敗。',
+    mappingSaved: '已儲存路徑對應規則。',
+    mappingSaveFailed: '儲存路徑對應規則失敗。',
+    backupSaved: '已儲存備份設定。',
+    backupFailed: '儲存備份設定失敗。',
+    scheduleDisabled: '已停用排程任務。',
+    scheduleEmpty: '已停用排程任務（Cron 為空）。',
+    scheduleStarted: '排程任務更新成功。',
+    scheduleFailed: '更新排程失敗。',
+    syncFailed: '同步失敗。請檢查連線。',
+    backgroundSyncSuccess: '背景同步已成功完成。',
+    backgroundSyncFailed: '背景同步失敗：{error}',
+    librarySwitched: '媒體庫已切換為 {library}',
+    connectedTo: '已成功連線到 {name}',
+    connectionCancelled: '使用者已取消連線。',
+    librarySaveFailed: '儲存媒體庫選擇失敗。',
+  },
+};

frontend/locales/en.ts

@@ -0,0 +1,172 @@
+export const en = {
+  app: {
+    title: 'PlexSync',
+    manager: 'Manager',
+    footer: '© {year} PMS Playlist Sync. Connected to Docker backend.',
+  },
+  auth: {
+    title: 'Login',
+    subtitle: 'Sign in to manage your playlist syncs',
+    username: 'Username',
+    password: 'Password',
+    loginBtn: 'Sign In',
+    logout: 'Logout',
+    loggingIn: 'Verifying...',
+    invalidCredentials: 'Invalid username or password',
+    welcome: 'Welcome, {user}',
+  },
+  common: {
+    save: 'Save',
+    cancel: 'Cancel',
+    revert: 'Revert',
+    delete: 'Delete',
+    done: 'Done',
+    loading: 'Loading...',
+    refresh: 'Refresh',
+    close: 'Close',
+    none: 'None',
+    disabled: 'Disabled',
+    add: 'Add',
+    switchLanguage: 'Switch Language',
+  },
+  server: {
+    local: 'Local Server',
+    cloud: 'Cloud Server',
+    playlists: '{count} Playlists',
+    notConnected: 'Not Connected',
+    connectionFailed: 'Connection failed',
+    connecting: 'Connecting...',
+    waiting: 'Waiting...',
+    syncing: 'Syncing...',
+    noPlaylists: 'No playlists found.',
+    cancelRefresh: 'Cancel Refresh',
+    refreshPlaylists: 'Refresh Playlists',
+  },
+  playlist: {
+    trackCount: 'Track Count',
+    lastUpdated: 'Last Updated',
+  },
+  dashboard: {
+    mapping: 'Mapping',
+    backup: 'Backup',
+    autoSync: 'Auto-Sync',
+    watch: 'Watch',
+    watchModeActive: 'Watch Mode: Active',
+    watchModeDisabled: 'Watch Mode: Disabled',
+    notSet: 'Not Set',
+    retain: 'Retain: {count}',
+    keep: 'Keep {count}',
+    connected: 'Connected to Plex',
+    disconnected: 'Disconnected',
+    synchronizing: 'SYNCHRONIZING',
+    syncComplete: 'SYNC COMPLETE',
+  },
+  strategies: {
+    title: 'Sync Strategy',
+    localOverwrite: {
+      label: 'Local Overwrite',
+      desc: 'Local playlist completely overwrites Cloud. (No Diff)',
+    },
+    cloudOverwrite: {
+      label: 'Cloud Overwrite',
+      desc: 'Cloud playlist completely overwrites Local. (No Diff)',
+    },
+    mergeLocal: {
+      label: 'Two-way Merge (Local Priority)',
+      desc: 'Merge both. Conflicts resolve to Local version.',
+    },
+    mergeCloud: {
+      label: 'Two-way Merge (Cloud Priority)',
+      desc: 'Merge both. Conflicts resolve to Cloud version.',
+    },
+    syncNow: 'Sync Now',
+    syncing: 'Sync in Progress...',
+    saveWarning: 'Please save pending changes (Backups/Path Mapping) before syncing.',
+  },
+  mapping: {
+    title: 'Path Mapping',
+    simple: 'Simple Mapping',
+    regex: 'Regex Rules',
+    simpleTitle: 'Path Mapping',
+    simpleSubtitle: 'Map Local paths to Cloud paths using simple string matching',
+    regexPre: 'Pre-Processing (Before Sync)',
+    regexPost: 'Post-Processing (After Sync / Result)',
+    localPath: 'Local Path',
+    cloudPath: 'Cloud Path',
+    pattern: 'Pattern',
+    replace: 'Replace',
+    saveRules: 'Save Rules',
+    noRules: 'No rules defined.',
+  },
+  backup: {
+    title: 'Backup Retention',
+    enable: 'Enable Backups',
+    enableDesc: 'Create a copy before changes',
+    maxVersions: 'Max versions to keep:',
+    noAutoDelete: 'No auto-delete',
+    autoDelete: 'Oldest deleted automatically',
+  },
+  schedule: {
+    title: 'Scheduled Tasks',
+    cron: 'Cron',
+    daily: 'Daily',
+    weekly: 'Weekly',
+    weekdaysNarrow: {
+      0: 'S',
+      1: 'M',
+      2: 'T',
+      3: 'W',
+      4: 'T',
+      5: 'F',
+      6: 'S',
+    },
+    enableCron: 'Enable Cron Schedule',
+    enableDaily: 'Enable Daily Run',
+    enableWeekly: 'Enable Weekly Run',
+    watchLocal: 'Watch Local Changes',
+    watchDesc: 'Auto-sync when local playlist updates',
+    schedule: 'Schedule',
+    notConfigured: 'Not configured',
+    today: 'Today',
+    tomorrow: 'Tomorrow',
+  },
+  connection: {
+    titleConnected: 'Server Connected',
+    titleConnect: 'Connect Plex Server',
+    serverDetails: 'Server Details',
+    authentication: 'Authentication',
+    protocol: 'Protocol',
+    address: 'IP Address or Domain',
+    port: 'Port',
+    token: 'X-Plex-Token (Optional)',
+    username: 'Username / Email',
+    password: 'Password',
+    advanced: 'Advanced Options',
+    timeout: 'Connection Timeout (Seconds)',
+    connectBtn: 'Connect Server',
+    connecting: 'Connecting...',
+    connectedSuccess: 'Connected Successfully',
+    selectLibrary: 'Select Library to Sync',
+  },
+  toasts: {
+    localRefreshCancelled: 'Local refresh cancelled.',
+    cloudRefreshCancelled: 'Cloud refresh cancelled.',
+    strategySaved: 'Selected strategy "{strategy}" has been saved.',
+    strategySaveFailed: 'Failed to save sync strategy.',
+    mappingSaved: 'Path mapping rules have been saved.',
+    mappingSaveFailed: 'Failed to save path mapping rules.',
+    backupSaved: 'Backup settings have been saved.',
+    backupFailed: 'Failed to save backup settings.',
+    scheduleDisabled: 'Scheduled tasks disabled.',
+    scheduleEmpty: 'Scheduled tasks disabled (Empty Cron).',
+    scheduleStarted: 'Scheduled task updated successfully.',
+    scheduleFailed: 'Failed to update schedule.',
+    syncFailed: 'Sync failed. Please check connection.',
+    backgroundSyncSuccess: 'Background sync completed successfully.',
+    backgroundSyncFailed: 'Background sync failed: {error}',
+    librarySwitched: 'Library switched to {library}',
+    connectedTo: 'Successfully connected to {name}',
+    connectionCancelled: 'Connection cancelled by user.',
+    librarySaveFailed: 'Failed to save library selection.',
+  },
+};

frontend/locales/es.ts

@@ -0,0 +1,172 @@
+export const es = {
+  app: {
+    title: 'PlexSync',
+    manager: 'Gestor',
+    footer: '© {year} PMS Playlist Sync. Conectado al backend Docker.',
+  },
+  auth: {
+    title: 'Iniciar Sesión',
+    subtitle: 'Ingrese para gestionar sus sincronizaciones',
+    username: 'Usuario',
+    password: 'Password',
+    loginBtn: 'Entrar',
+    logout: 'Salir',
+    loggingIn: 'Verificando...',
+    invalidCredentials: 'Usuario o contraseña incorrectos',
+    welcome: 'Bienvenido, {user}',
+  },
+  common: {
+    save: 'Guardar',
+    cancel: 'Cancelar',
+    revert: 'Revertir',
+    delete: 'Eliminar',
+    done: 'Hecho',
+    loading: 'Cargando...',
+    refresh: 'Actualizar',
+    close: 'Cerrar',
+    none: 'Ninguno',
+    disabled: 'Deshabilitado',
+    add: 'Añadir',
+    switchLanguage: 'Cambiar idioma',
+  },
+  server: {
+    local: 'Servidor Local',
+    cloud: 'Servidor Nube',
+    playlists: '{count} Listas',
+    notConnected: 'No Conectado',
+    connectionFailed: 'Conexión fallida',
+    connecting: 'Conectando...',
+    waiting: 'Esperando...',
+    syncing: 'Sincronizando...',
+    noPlaylists: 'No se encontraron listas.',
+    cancelRefresh: 'Cancelar',
+    refreshPlaylists: 'Actualizar Listas',
+  },
+  playlist: {
+    trackCount: 'Pistas',
+    lastUpdated: 'Actualizado',
+  },
+  dashboard: {
+    mapping: 'Mapeo',
+    backup: 'Respaldo',
+    autoSync: 'Auto-Sync',
+    watch: 'Vigilar',
+    watchModeActive: 'Modo Vigía: Activo',
+    watchModeDisabled: 'Modo Vigía: Desactivado',
+    notSet: 'No Def.',
+    retain: 'Retener: {count}',
+    keep: 'Guardar {count}',
+    connected: 'Conectado a Plex',
+    disconnected: 'Desconectado',
+    synchronizing: 'SINCRONIZANDO',
+    syncComplete: 'SINCRONIZACIÓN COMPLETA',
+  },
+  strategies: {
+    title: 'Estrategia de Sync',
+    localOverwrite: {
+      label: 'Sobreescribir Local',
+      desc: 'La lista local sobreescribe la nube. (Sin Diff)',
+    },
+    cloudOverwrite: {
+      label: 'Sobreescribir Nube',
+      desc: 'La lista de la nube sobreescribe la local. (Sin Diff)',
+    },
+    mergeLocal: {
+      label: 'Fusión (Prioridad Local)',
+      desc: 'Fusionar ambas. Conflictos resueltos a versión Local.',
+    },
+    mergeCloud: {
+      label: 'Fusión (Prioridad Nube)',
+      desc: 'Fusionar ambas. Conflictos resueltos a versión Nube.',
+    },
+    syncNow: 'Sincronizar Ahora',
+    syncing: 'Sincronizando...',
+    saveWarning: 'Guarde los cambios pendientes (Respaldos/Mapeo) antes de sincronizar.',
+  },
+  mapping: {
+    title: 'Mapeo de Rutas',
+    simple: 'Mapeo Simple',
+    regex: 'Reglas Regex',
+    simpleTitle: 'Mapeo de Rutas',
+    simpleSubtitle: 'Mapear rutas locales a la nube usando coincidencia simple',
+    regexPre: 'Pre-Procesamiento (Antes de Sync)',
+    regexPost: 'Post-Procesamiento (Después de Sync)',
+    localPath: 'Ruta Local',
+    cloudPath: 'Ruta Nube',
+    pattern: 'Patrón',
+    replace: 'Reemplazo',
+    saveRules: 'Guardar Reglas',
+    noRules: 'No hay reglas definidas.',
+  },
+  backup: {
+    title: 'Retención de Respaldo',
+    enable: 'Habilitar Respaldos',
+    enableDesc: 'Crear copia antes de cambios',
+    maxVersions: 'Máx versiones a guardar:',
+    noAutoDelete: 'Sin auto-borrado',
+    autoDelete: 'El más antiguo se borra automáticamente',
+  },
+  schedule: {
+    title: 'Tareas Programadas',
+    cron: 'Cron',
+    daily: 'Diario',
+    weekly: 'Semanal',
+    weekdaysNarrow: {
+      0: 'D',
+      1: 'L',
+      2: 'M',
+      3: 'X',
+      4: 'J',
+      5: 'V',
+      6: 'S',
+    },
+    enableCron: 'Habilitar Cron',
+    enableDaily: 'Habilitar Ejecución Diaria',
+    enableWeekly: 'Habilitar Ejecución Semanal',
+    watchLocal: 'Vigilar Cambios Locales',
+    watchDesc: 'Auto-sync cuando la lista local se actualiza',
+    schedule: 'Horario',
+    notConfigured: 'No configurado',
+    today: 'Hoy',
+    tomorrow: 'Mañana',
+  },
+  connection: {
+    titleConnected: 'Servidor Conectado',
+    titleConnect: 'Conectar Servidor Plex',
+    serverDetails: 'Detalles del Servidor',
+    authentication: 'Autenticación',
+    protocol: 'Protocolo',
+    address: 'Dirección IP o Dominio',
+    port: 'Puerto',
+    token: 'X-Plex-Token (Opcional)',
+    username: 'Usuario / Email',
+    password: 'Password',
+    advanced: 'Opciones Avanzadas',
+    timeout: 'Tiempo de espera (Segundos)',
+    connectBtn: 'Conectar Servidor',
+    connecting: 'Conectando...',
+    connectedSuccess: 'Conectado Exitosamente',
+    selectLibrary: 'Seleccionar Librería',
+  },
+  toasts: {
+    localRefreshCancelled: 'Actualización local cancelada.',
+    cloudRefreshCancelled: 'Actualización nube cancelada.',
+    strategySaved: 'Estrategia seleccionada "{strategy}" guardada.',
+    strategySaveFailed: 'Error al guardar estrategia de sync.',
+    mappingSaved: 'Reglas de mapeo guardadas.',
+    mappingSaveFailed: 'Error al guardar reglas de mapeo.',
+    backupSaved: 'Configuración de respaldo guardada.',
+    backupFailed: 'Error al guardar configuración de respaldo.',
+    scheduleDisabled: 'Tareas programadas deshabilitadas.',
+    scheduleEmpty: 'Tareas programadas deshabilitadas (Cron Vacío).',
+    scheduleStarted: 'Tarea programada actualizada exitosamente.',
+    scheduleFailed: 'Error al actualizar horario.',
+    syncFailed: 'Fallo en sync. Revise conexión.',
+    backgroundSyncSuccess: 'Sync en segundo plano completado.',
+    backgroundSyncFailed: 'Sync en segundo plano falló: {error}',
+    librarySwitched: 'Librería cambiada a {library}',
+    connectedTo: 'Conectado exitosamente a {name}',
+    connectionCancelled: 'Conexión cancelada por usuario.',
+    librarySaveFailed: 'Error al guardar selección de librería.',
+  },
+};

frontend/locales/zh.ts

@@ -0,0 +1,172 @@
+export const zh = {
+  app: {
+    title: 'PlexSync',
+    manager: '管理',
+    footer: '© {year} PMS Playlist Sync。已连接到 Docker 后端。',
+  },
+  auth: {
+    title: '登录',
+    subtitle: '登录后管理播放列表同步',
+    username: '用户名',
+    password: '密码',
+    loginBtn: '登录',
+    logout: '登出',
+    loggingIn: '验证中...',
+    invalidCredentials: '用户名或密码错误',
+    welcome: '欢迎，{user}',
+  },
+  common: {
+    save: '保存',
+    cancel: '取消',
+    revert: '恢复',
+    delete: '删除',
+    done: '完成',
+    loading: '加载中...',
+    refresh: '刷新',
+    close: '关闭',
+    none: '无',
+    disabled: '已禁用',
+    add: '添加',
+    switchLanguage: '切换语言',
+  },
+  server: {
+    local: '本地服务器',
+    cloud: '云端服务器',
+    playlists: '{count} 个播放列表',
+    notConnected: '未连接',
+    connectionFailed: '连接失败',
+    connecting: '正在连接...',
+    waiting: '等待中...',
+    syncing: '同步中...',
+    noPlaylists: '未找到播放列表。',
+    cancelRefresh: '取消刷新',
+    refreshPlaylists: '刷新播放列表',
+  },
+  playlist: {
+    trackCount: '曲目数',
+    lastUpdated: '最近更新',
+  },
+  dashboard: {
+    mapping: '路径映射',
+    backup: '备份',
+    autoSync: '自动同步',
+    watch: '监听',
+    watchModeActive: '监听模式：启用',
+    watchModeDisabled: '监听模式：禁用',
+    notSet: '未设置',
+    retain: '保留：{count}',
+    keep: '保留 {count}',
+    connected: '已连接 Plex',
+    disconnected: '未连接',
+    synchronizing: 'SYNCHRONIZING',
+    syncComplete: 'SYNC COMPLETE',
+  },
+  strategies: {
+    title: '同步策略',
+    localOverwrite: {
+      label: '本地覆盖',
+      desc: '本地播放列表完全覆盖云端。（无 Diff）',
+    },
+    cloudOverwrite: {
+      label: '云端覆盖',
+      desc: '云端播放列表完全覆盖本地。（无 Diff）',
+    },
+    mergeLocal: {
+      label: '双向合并（本地优先）',
+      desc: '合并两端。冲突以本地版本为准。',
+    },
+    mergeCloud: {
+      label: '双向合并（云端优先）',
+      desc: '合并两端。冲突以云端版本为准。',
+    },
+    syncNow: '立即同步',
+    syncing: '同步进行中...',
+    saveWarning: '同步前请先保存待处理的更改（备份/路径映射）。',
+  },
+  mapping: {
+    title: '路径映射',
+    simple: '简单映射',
+    regex: '正则规则',
+    simpleTitle: '路径映射',
+    simpleSubtitle: '使用简单字符串匹配将本地路径映射到云端路径',
+    regexPre: '预处理（同步前）',
+    regexPost: '后处理（同步后 / 结果）',
+    localPath: '本地路径',
+    cloudPath: '云端路径',
+    pattern: '模式',
+    replace: '替换',
+    saveRules: '保存规则',
+    noRules: '尚未定义规则。',
+  },
+  backup: {
+    title: '备份保留',
+    enable: '启用备份',
+    enableDesc: '在更改前创建副本',
+    maxVersions: '保留的最大版本数：',
+    noAutoDelete: '不自动删除',
+    autoDelete: '自动删除最旧版本',
+  },
+  schedule: {
+    title: '定时任务',
+    cron: 'Cron',
+    daily: '每日',
+    weekly: '每周',
+    weekdaysNarrow: {
+      0: '日',
+      1: '一',
+      2: '二',
+      3: '三',
+      4: '四',
+      5: '五',
+      6: '六',
+    },
+    enableCron: '启用 Cron 计划',
+    enableDaily: '启用每日运行',
+    enableWeekly: '启用每周运行',
+    watchLocal: '监听本地更改',
+    watchDesc: '本地播放列表更新时自动同步',
+    schedule: '计划',
+    notConfigured: '未配置',
+    today: '今天',
+    tomorrow: '明天',
+  },
+  connection: {
+    titleConnected: '服务器已连接',
+    titleConnect: '连接 Plex 服务器',
+    serverDetails: '服务器详情',
+    authentication: '认证',
+    protocol: '协议',
+    address: 'IP 地址或域名',
+    port: '端口',
+    token: 'X-Plex-Token（可选）',
+    username: '用户名 / 邮箱',
+    password: '密码',
+    advanced: '高级选项',
+    timeout: '连接超时（秒）',
+    connectBtn: '连接服务器',
+    connecting: '连接中...',
+    connectedSuccess: '连接成功',
+    selectLibrary: '选择要同步的媒体库',
+  },
+  toasts: {
+    localRefreshCancelled: '本地刷新已取消。',
+    cloudRefreshCancelled: '云端刷新已取消。',
+    strategySaved: '已保存选择的策略“{strategy}”。',
+    strategySaveFailed: '保存同步策略失败。',
+    mappingSaved: '已保存路径映射规则。',
+    mappingSaveFailed: '保存路径映射规则失败。',
+    backupSaved: '已保存备份设置。',
+    backupFailed: '保存备份设置失败。',
+    scheduleDisabled: '已禁用定时任务。',
+    scheduleEmpty: '已禁用定时任务（Cron 为空）。',
+    scheduleStarted: '定时任务更新成功。',
+    scheduleFailed: '更新定时任务失败。',
+    syncFailed: '同步失败。请检查连接。',
+    backgroundSyncSuccess: '后台同步已成功完成。',
+    backgroundSyncFailed: '后台同步失败：{error}',
+    librarySwitched: '媒体库已切换为 {library}',
+    connectedTo: '已成功连接到 {name}',
+    connectionCancelled: '用户已取消连接。',
+    librarySaveFailed: '保存媒体库选择失败。',
+  },
+};

frontend/metadata.json

@@ -1,5 +1,5 @@
 {
-  "name": "PlexSync Manager",
+  "name": "PMS Playlist Sync",
   "description": "A modern dashboard to synchronize and manage playlists between Local and Cloud Plex servers.",
   "requestFramePermissions": []
 }

frontend/services/api.ts

@@ -1,7 +1,24 @@
-import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, ReplacementRule, PathMappingConfig, PathMappingMode, PathMappingRules, SyncStrategy, ScheduleSettings, BackupSettings } from '../types';
+import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, ReplacementRule, PathMappingConfig, PathMappingMode, PathMappingRules, SyncStrategy, ScheduleSettings, BackupSettings, LoginCredentials, AuthResponse } from '../types';
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL || '';
 
+const getAuthToken = (): string | null => {
+  try {
+    return localStorage.getItem('plexsync-token');
+  } catch {
+    return null;
+  }
+};
+
+const authFetch = (input: RequestInfo | URL, init: RequestInit = {}) => {
+  const token = getAuthToken();
+  const headers = new Headers(init.headers || {});
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`);
+  }
+  return fetch(input, { ...init, headers });
+};
+
 const MODE_TO_STRATEGY: Record<string, SyncStrategy> = {
   local_force: SyncStrategy.LOCAL_OVERWRITE,
   remote_force: SyncStrategy.CLOUD_OVERWRITE,
@@ -20,6 +37,9 @@ const handleResponse = async <T>(response: Response): Promise<ApiResponse<T>> =>
   try {
     const data = await response.json();
     if (!response.ok) {
+      if (response.status === 401) {
+        return { data: data as T, status: 'error', message: 'Unauthorized' };
+      }
       return { data: data as T, status: 'error', message: (data as any)?.detail || response.statusText };
     }
     return { data, status: 'success' };
@@ -97,8 +117,32 @@ const pathMappingToApi = (config: PathMappingConfig) => {
 };
 
 export const apiService = {
+  async getAuthConfig(): Promise<ApiResponse<{ enabled: boolean }>> {
+    const response = await fetch(`${API_BASE}/api/auth/config`);
+    return handleResponse(response);
+  },
+
+  async login(creds: LoginCredentials): Promise<ApiResponse<AuthResponse>> {
+    const response = await fetch(`${API_BASE}/api/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(creds),
+    });
+    return handleResponse(response);
+  },
+
+  async me(): Promise<ApiResponse<{ username: string }>> {
+    const response = await authFetch(`${API_BASE}/api/auth/me`);
+    return handleResponse(response);
+  },
+
+  async logout(): Promise<ApiResponse<{ status: string }>> {
+    const response = await authFetch(`${API_BASE}/api/auth/logout`, { method: 'POST' });
+    return handleResponse(response);
+  },
+
   async getSettings(): Promise<ApiResponse<{ strategy: SyncStrategy; pathMapping: PathMappingConfig; connection: PlexConnectionSettings; localPath: string }>> {
-    const response = await fetch(`${API_BASE}/api/settings`);
+    const response = await authFetch(`${API_BASE}/api/settings`);
     const result = await handleResponse<any>(response);
     if (result.status === 'success') {
       const mode = result.data.sync_mode as string;
@@ -118,7 +162,7 @@ export const apiService = {
 
   async updateSyncStrategy(strategy: SyncStrategy): Promise<ApiResponse<{ sync_mode: string }>> {
     const payload = { mode: STRATEGY_TO_MODE[strategy] };
-    const response = await fetch(`${API_BASE}/api/settings/sync-mode`, {
+    const response = await authFetch(`${API_BASE}/api/settings/sync-mode`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload),
@@ -128,7 +172,7 @@ export const apiService = {
 
   async savePathMapping(config: PathMappingConfig): Promise<ApiResponse<null>> {
     const payload = pathMappingToApi(config);
-    const response = await fetch(`${API_BASE}/api/settings/path-mapping`, {
+    const response = await authFetch(`${API_BASE}/api/settings/path-mapping`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload),
@@ -137,7 +181,7 @@ export const apiService = {
   },
 
   async updateLibrary(libraryName: string): Promise<ApiResponse<{ library_name: string }>> {
-    const response = await fetch(`${API_BASE}/api/settings/library`, {
+    const response = await authFetch(`${API_BASE}/api/settings/library`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ library_name: libraryName }),
@@ -146,12 +190,12 @@ export const apiService = {
   },
 
   async getScheduleSettings(): Promise<ApiResponse<ScheduleSettings & { nextRun?: string }>> {
-    const response = await fetch(`${API_BASE}/api/schedule`);
+    const response = await authFetch(`${API_BASE}/api/schedule`);
     return handleResponse(response);
   },
 
   async saveScheduleSettings(settings: ScheduleSettings): Promise<ApiResponse<null>> {
-    const response = await fetch(`${API_BASE}/api/schedule`, {
+    const response = await authFetch(`${API_BASE}/api/schedule`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(settings),
@@ -164,7 +208,7 @@ export const apiService = {
     if (serverType === ServerType.LOCAL && localPath) {
       params.append('local_path', localPath);
     }
-    const response = await fetch(`${API_BASE}/api/playlists?${params.toString()}`, { signal });
+    const response = await authFetch(`${API_BASE}/api/playlists?${params.toString()}`, { signal });
     const result = await handleResponse<any>(response);
     if (result.status === 'success' && (result.data as any)?.playlists) {
       return { data: (result.data.playlists as any[]).map(mapPlaylist), status: 'success' };
@@ -173,7 +217,7 @@ export const apiService = {
   },
 
   async getServerStatus(signal?: AbortSignal): Promise<ApiResponse<PlexServerConnection>> {
-    const response = await fetch(`${API_BASE}/api/server`, { signal });
+    const response = await authFetch(`${API_BASE}/api/server`, { signal });
     const result = await handleResponse<any>(response);
     if (result.status === 'success') {
       const info = result.data.serverInfo || {};
@@ -194,7 +238,7 @@ export const apiService = {
   },
 
   async connectToPlex(settings: PlexConnectionSettings, signal?: AbortSignal): Promise<ApiResponse<{ token: string; serverInfo: PlexServerConnection }>> {
-    const response = await fetch(`${API_BASE}/api/connect`, {
+    const response = await authFetch(`${API_BASE}/api/connect`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -219,7 +263,7 @@ export const apiService = {
   },
 
   async syncPlaylists(strategy: SyncStrategy, _pathMapping: PathMappingConfig, localPath?: string): Promise<ApiResponse<null>> {
-    const response = await fetch(`${API_BASE}/api/sync`, {
+    const response = await authFetch(`${API_BASE}/api/sync`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -231,12 +275,12 @@ export const apiService = {
   },
 
   async getSyncStatus(): Promise<ApiResponse<{ is_syncing: boolean; last_sync_time: string | null; status: string; error: string | null }>> {
-    const response = await fetch(`${API_BASE}/api/sync/status`);
+    const response = await authFetch(`${API_BASE}/api/sync/status`);
     return handleResponse(response);
   },
 
   async getBackupSettings(): Promise<ApiResponse<BackupSettings>> {
-    const response = await fetch(`${API_BASE}/api/backup/settings`);
+    const response = await authFetch(`${API_BASE}/api/backup/settings`);
     const result = await handleResponse<any>(response);
     if (result.status === 'success') {
       return {
@@ -251,7 +295,7 @@ export const apiService = {
   },
 
   async saveBackupSettings(settings: BackupSettings): Promise<ApiResponse<null>> {
-    const response = await fetch(`${API_BASE}/api/backup/settings`, {
+    const response = await authFetch(`${API_BASE}/api/backup/settings`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({

frontend/translations.ts

@@ -0,0 +1,14 @@
+import { en } from './locales/en';
+import { es } from './locales/es';
+import { zh as chs } from './locales/zh';
+import { cht } from './locales/cht';
+
+export const translations = {
+  en,
+  es,
+  chs,
+  cht,
+};
+
+export type Language = keyof typeof translations;
+export type TranslationStructure = typeof en;

frontend/tsconfig.json

@@ -11,7 +11,8 @@
     ],
     "skipLibCheck": true,
     "types": [
-      "node"
+      "node",
+      "vite/client"
     ],
     "moduleResolution": "bundler",
     "isolatedModules": true,

frontend/types.ts

@@ -116,3 +116,14 @@ export interface ApiResponse<T> {
   status: 'success' | 'error';
   message?: string;
 }
+
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
+export interface AuthResponse {
+  token: string;
+  username: string;
+  expires_in?: number;
+}

frontend/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

sample-front-end/App.tsx

@@ -1,5 +1,6 @@
 
 
+
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { Playlist, ServerType, SyncStrategy, PlexServerConnection, PathMappingConfig, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode, BackupSettings } from './types';
 import { apiService } from './services/api';
@@ -17,7 +18,9 @@ import { SYNC_BANNER_PADDING_X, SYNC_BANNER_PADDING_Y, SYNC_BANNER_MIN_WIDTH } f
 import ServerPanel from './components/ServerPanel';
 import StrategySelector from './components/StrategySelector';
 import ConnectionModal from './components/ConnectionModal';
-import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff, Type, Code2 } from 'lucide-react';
+import LoginScreen from './components/LoginScreen';
+import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff, Type, Code2, Archive, Languages, LogOut, User } from 'lucide-react';
+import { useLanguage } from './LanguageContext';
 
 interface Toast {
   id: number;
@@ -114,6 +117,13 @@ const useStripeAnimation = (syncState: SyncState) => {
 };
 
 const App: React.FC = () => {
+  const { t, language, setLanguage } = useLanguage();
+  
+  // Auth State
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [currentUser, setCurrentUser] = useState('');
+
+  // App Data State
   const [localPlaylists, setLocalPlaylists] = useState<Playlist[]>([]);
   const [cloudPlaylists, setCloudPlaylists] = useState<Playlist[]>([]);
   const [cloudServerInfo, setCloudServerInfo] = useState<PlexServerConnection | undefined>(undefined);
@@ -133,6 +143,7 @@ const App: React.FC = () => {
 
   // Connection Modal State
   const [isConnectionModalOpen, setIsConnectionModalOpen] = useState(false);
+  const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
 
   // Strategy State
   const [currentStrategy, setCurrentStrategy] = useState<SyncStrategy>(SyncStrategy.LOCAL_OVERWRITE);
@@ -196,6 +207,16 @@ const App: React.FC = () => {
     timeoutsRef.current[id] = dismissTimer;
   };
 
+  // Check auth on mount
+  useEffect(() => {
+    const savedToken = localStorage.getItem('plexsync-token');
+    const savedUser = localStorage.getItem('plexsync-username');
+    if (savedToken && savedUser) {
+      setIsAuthenticated(true);
+      setCurrentUser(savedUser);
+    }
+  }, []);
+
   // Effect to trigger the "slide down" animation
   useEffect(() => {
     const enteringIds = toasts.filter(t => t.entering).map(t => t.id);
@@ -234,6 +255,7 @@ const App: React.FC = () => {
 
   // Fetch Local Playlists
   const refreshLocal = useCallback(async () => {
+    if (!isAuthenticated) return;
     if (localAbortRef.current) localAbortRef.current.abort();
     const abortController = new AbortController();
     localAbortRef.current = abortController;
@@ -245,19 +267,20 @@ const App: React.FC = () => {
     }
     setLoadingLocal(false);
     localAbortRef.current = null;
-  }, []);
+  }, [isAuthenticated]);
 
   const cancelLocalRefresh = () => {
     if (localAbortRef.current) {
       localAbortRef.current.abort();
       localAbortRef.current = null;
       setLoadingLocal(false);
-      addToast("Local refresh cancelled.");
+      addToast(t('toasts.localRefreshCancelled'));
     }
   };
 
   // Fetch Cloud Playlists and Info
   const refreshCloud = useCallback(async () => {
+    if (!isAuthenticated) return;
     if (cloudAbortRef.current) cloudAbortRef.current.abort();
     const abortController = new AbortController();
     cloudAbortRef.current = abortController;
@@ -279,38 +302,40 @@ const App: React.FC = () => {
       setLoadingCloud(false);
       cloudAbortRef.current = null;
     }
-  }, []);
+  }, [isAuthenticated]);
 
   const cancelCloudRefresh = () => {
     if (cloudAbortRef.current) {
       cloudAbortRef.current.abort();
       cloudAbortRef.current = null;
       setLoadingCloud(false);
-      addToast("Cloud refresh cancelled.");
+      addToast(t('toasts.cloudRefreshCancelled'));
     }
   };
 
-  // Initial Load
+  // Initial Load (Only if Authenticated)
   useEffect(() => {
-    refreshLocal();
+    if (isAuthenticated) {
-    refreshCloud();
+      refreshLocal();
+      refreshCloud();
+    }
     return () => {
       // Cleanup on unmount
       if (localAbortRef.current) localAbortRef.current.abort();
       if (cloudAbortRef.current) cloudAbortRef.current.abort();
     }
-  }, [refreshLocal, refreshCloud]);
+  }, [isAuthenticated, refreshLocal, refreshCloud]);
 
   // Handle Strategy Change
   const handleStrategyChange = (strategy: SyncStrategy, label: string) => {
     setCurrentStrategy(strategy);
-    addToast(`Selected strategy "${label}" has been saved.`);
+    addToast(t('toasts.strategySaved', { strategy: label }));
   };
 
   // Handle Path Mapping Save
   const handleSavePathMapping = (config: PathMappingConfig) => {
     setPathMappingConfig(config);
-    addToast('Path mapping rules have been saved.');
+    addToast(t('toasts.mappingSaved'));
   };
 
   // Handle Backup Settings Save
@@ -318,9 +343,9 @@ const App: React.FC = () => {
     const result = await apiService.saveBackupSettings(settings);
     if (result.status === 'success') {
       setBackupSettings(settings);
-      addToast('Backup settings have been saved.');
+      addToast(t('toasts.backupSaved'));
     } else {
-      addToast('Failed to save backup settings.');
+      addToast(t('toasts.backupFailed'));
     }
   };
 
@@ -334,15 +359,15 @@ const App: React.FC = () => {
        setScheduleSettings(settings);
 
        if (settings.mode === ScheduleMode.DISABLED) {
-          addToast("Scheduled tasks disabled.");
+          addToast(t('toasts.scheduleDisabled'));
        } else if (settings.mode === ScheduleMode.CRON && settings.cronExpression.trim() === '') {
-          addToast("Scheduled tasks disabled (Empty Cron).");
+          addToast(t('toasts.scheduleEmpty'));
        } else {
-          addToast("Scheduled task started successfully.");
+          addToast(t('toasts.scheduleStarted'));
        }
        return true;
     } else {
-       addToast(result.message || "Failed to update schedule.");
+       addToast(result.message || t('toasts.scheduleFailed'));
        return false;
     }
   };
@@ -362,13 +387,6 @@ const App: React.FC = () => {
       
       // Timing Breakdown:
       // T+0.0s: State is SUCCESS. 
-      //         - JS Animation loop detects change and begins decelerating speed from 56 -> 0 over 0.5s.
-      //         - CSS opacity transitions Yellow -> Green over 0.3s.
-      
-      // T+0.5s: Deceleration complete. Speed is 0. Background is static.
-      //         We hold this static state for another 0.5s.
-      
-      // T+1.0s: Total success duration complete. Disappear.
         setTimeout(() => {
           setSyncState(SyncState.IDLE);
           refreshLocal();
@@ -377,7 +395,7 @@ const App: React.FC = () => {
 
     } else {
       setSyncState(SyncState.ERROR);
-      addToast("Sync failed. Please check connection.");
+      addToast(t('toasts.syncFailed'));
       setTimeout(() => setSyncState(SyncState.IDLE), SYNC_ERROR_RESET_MS);
     }
   };
@@ -388,6 +406,27 @@ const App: React.FC = () => {
     refreshCloud(); 
   };
 
+  const handleLoginSuccess = (token: string, username: string) => {
+    localStorage.setItem('plexsync-token', token);
+    localStorage.setItem('plexsync-username', username);
+    setIsAuthenticated(true);
+    setCurrentUser(username);
+    addToast(t('auth.welcome', { user: username }));
+  };
+
+  const handleLoginError = (msg: string) => {
+    // Toast handles error display, or LoginScreen internal state handles UI
+    addToast(msg);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('plexsync-token');
+    localStorage.removeItem('plexsync-username');
+    setIsAuthenticated(false);
+    setCurrentUser('');
+    addToast(t('toasts.loggedOut'));
+  };
+
   const getToastStyles = (toast: Toast): React.CSSProperties => {
     if (toast.exiting || toast.entering) {
       return {
@@ -410,21 +449,21 @@ const App: React.FC = () => {
   // Helper: Calculate Next Run Info
   const getScheduleDisplayInfo = (settings: ScheduleSettings) => {
     const result = { 
-        label: 'Schedule', 
+        label: t('schedule.schedule'), 
-        value: 'Not configured', 
+        value: t('schedule.notConfigured'), 
         active: false,
         autoWatch: settings.autoWatch 
     };
 
     if (settings.mode === ScheduleMode.DISABLED) {
-      result.label = 'Auto-Sync';
+      result.label = t('dashboard.autoSync');
-      result.value = 'Disabled';
+      result.value = t('common.disabled');
       return result;
     }
 
     if (settings.mode === ScheduleMode.CRON) {
-      result.label = 'Cron Schedule';
+      result.label = t('schedule.cron');
-      result.value = settings.cronExpression || 'Pending...';
+      result.value = settings.cronExpression || t('server.waiting');
       result.active = true;
       return result;
     }
@@ -454,8 +493,8 @@ const App: React.FC = () => {
        const activeDays = [...settings.weeklyDays].sort();
        
        if (activeDays.length === 0) {
-           result.label = 'Weekly Schedule';
+           result.label = t('schedule.weekly');
-           result.value = 'No days selected';
+           result.value = t('common.none');
            return result;
        }
 
@@ -489,12 +528,12 @@ const App: React.FC = () => {
        const isTomorrow = new Date(now.getTime() + 86400000).getDate() === nextRun.getDate();
        
        let dateStr = '';
-       if (isToday) dateStr = 'Today';
+       if (isToday) dateStr = t('schedule.today');
-       else if (isTomorrow) dateStr = 'Tomorrow';
+       else if (isTomorrow) dateStr = t('schedule.tomorrow');
        else dateStr = days[nextRun.getDay()];
 
-       result.label = `${settings.mode === ScheduleMode.DAILY ? 'Daily' : 'Weekly'} Schedule`;
+       result.label = settings.mode === ScheduleMode.DAILY ? t('schedule.daily') : t('schedule.weekly');
-       result.value = `${dateStr} at ${timeStr}`;
+       result.value = `${dateStr} @ ${timeStr}`;
        result.active = true;
        return result;
     }
@@ -511,6 +550,7 @@ const App: React.FC = () => {
     let Icon = Type;
 
     if (config.mode === PathMappingMode.SIMPLE) {
+        modeLabel = t('common.none').replace('None', 'Simple'); // Fallback hack if simple not in dict, but it is in mapping
         modeLabel = 'Simple';
         count = config.simple.length;
         Icon = Type;
@@ -525,15 +565,15 @@ const App: React.FC = () => {
 
     if (count === 0) {
         return {
-            label: 'Path Mapping',
+            label: t('dashboard.mapping'),
-            value: 'Not Set',
+            value: t('dashboard.notSet'),
             active: false,
             Icon: Icon
         };
     }
 
     return {
-        label: 'Path Mapping',
+        label: t('dashboard.mapping'),
         value: `${modeLabel} (${count})`,
         active: true,
         Icon: Icon
@@ -542,6 +582,52 @@ const App: React.FC = () => {
 
   const pathMappingInfo = getPathMappingDisplayInfo(pathMappingConfig);
 
+  // Helper: Calculate Backup Info
+  const getBackupDisplayInfo = (settings: BackupSettings) => {
+    if (!settings.enabled) {
+        return {
+            label: t('dashboard.backup'),
+            value: t('common.disabled'),
+            active: false
+        };
+    }
+    return {
+        label: t('dashboard.backup'),
+        value: t('dashboard.keep', { count: settings.retentionCount }),
+        active: true
+    };
+  };
+
+  const backupInfo = getBackupDisplayInfo(backupSettings);
+
+  // If not authenticated, show Login Screen
+  if (!isAuthenticated) {
+    return (
+      <>
+        {/* Render toasts over login screen if needed (e.g. login errors pushed to global toast) */}
+        <div className="fixed top-20 left-0 right-0 flex justify-center h-0 overflow-visible z-[100] pointer-events-none">
+          {toasts.map((toast) => (
+            <div 
+              key={toast.id}
+              className={getToastClasses()}
+              style={getToastStyles(toast)}
+            >
+                <ShieldCheck size={16} />
+                <span>{toast.message}</span>
+                <button 
+                  onClick={() => setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, exiting: true } : t))}
+                  className="ml-2 hover:text-white transition-colors"
+                >
+                  <X size={14} />
+                </button>
+            </div>
+          ))}
+        </div>
+        <LoginScreen onLoginSuccess={handleLoginSuccess} onLoginError={handleLoginError} />
+      </>
+    );
+  }
+
   return (
     <div className="min-h-screen flex flex-col bg-gray-900 text-gray-100 font-sans overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-800 via-gray-900 to-black">
       
@@ -613,45 +699,82 @@ const App: React.FC = () => {
                    <ArrowLeftRight size={24} strokeWidth={2.5} />
                 </div>
                 <h1 className="text-xl font-bold tracking-tight text-white">
-                  Plex<span className="text-plex-orange">Sync</span>
+                  <span className="text-plex-orange">PMS</span> Playlist Sync
                 </h1>
               </div>
               
               {/* Normal Toolbar Right */}
               <div className="flex items-center gap-4">
-                  {/* Path Mapping Info */}
+                  
-                  <div className="flex flex-col items-end hidden md:flex border-r border-gray-700/50 pr-4 mr-1">
+                  {/* Unified Status Dock */}
-                     <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
+                  <div className="hidden md:flex items-center bg-gray-900/40 border border-gray-700/50 rounded-lg p-1 mr-2 backdrop-blur-sm shadow-sm transition-all hover:bg-gray-900/60 hover:border-gray-600/50">
-                       {pathMappingInfo.label}
+                      
-                     </span>
+                      {/* Path Mapping Section */}
-                     <div className={`text-xs font-mono flex items-center gap-1.5 ${pathMappingInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
+                      <div className="flex flex-col px-3 py-0.5 border-r border-gray-700/30 min-w-[90px] group/item">
-                        {pathMappingInfo.active && <pathMappingInfo.Icon size={12} />}
+                         <span className="text-[9px] font-bold text-gray-500 uppercase tracking-widest group-hover/item:text-gray-400 transition-colors">{pathMappingInfo.label}</span>
-                        <span>{pathMappingInfo.value}</span>
+                         <div className={`flex items-center gap-1.5 text-xs font-medium ${pathMappingInfo.active ? 'text-blue-400' : 'text-gray-600'}`}>
-                     </div>
+                            <pathMappingInfo.Icon size={12} strokeWidth={2.5} />
+                            <span className="truncate">{pathMappingInfo.value}</span>
+                         </div>
+                      </div>
+
+                      {/* Backup Section */}
+                      <div className="flex flex-col px-3 py-0.5 border-r border-gray-700/30 min-w-[90px] group/item">
+                         <span className="text-[9px] font-bold text-gray-500 uppercase tracking-widest group-hover/item:text-gray-400 transition-colors">{backupInfo.label}</span>
+                         <div className={`flex items-center gap-1.5 text-xs font-medium ${backupInfo.active ? 'text-indigo-400' : 'text-gray-600'}`}>
+                            <Archive size={12} strokeWidth={2.5} />
+                            <span>{backupInfo.active ? t('dashboard.retain', { count: backupSettings.retentionCount }) : backupInfo.value}</span>
+                         </div>
+                      </div>
+
+                      {/* Schedule Section */}
+                      <div className="flex flex-col px-3 py-0.5 min-w-[140px] group/item">
+                         <div className="flex items-center justify-between">
+                            <span className="text-[9px] font-bold text-gray-500 uppercase tracking-widest group-hover/item:text-gray-400 transition-colors">{t('dashboard.autoSync')}</span>
+                            {/* Watch Indicator Badge */}
+                            <div 
+                                className={`flex items-center gap-1 px-1 rounded-[2px] transition-colors ${scheduleInfo.autoWatch ? 'text-plex-orange bg-plex-orange/10' : 'text-gray-700 bg-gray-800'}`}
+                                title={scheduleInfo.autoWatch ? t('dashboard.watchModeActive') : t('dashboard.watchModeDisabled')}
+                            >
+                                {scheduleInfo.autoWatch ? <Eye size={9} /> : <EyeOff size={9} />}
+                                <span className="text-[8px] font-bold uppercase">{t('dashboard.watch')}</span>
+                            </div>
+                         </div>
+                         <div className={`flex items-center gap-1.5 text-xs font-medium mt-0.5 ${scheduleInfo.active ? 'text-green-400' : 'text-gray-600'}`}>
+                            <Clock size={12} strokeWidth={2.5} />
+                            <span className="truncate max-w-[120px]">{scheduleInfo.active ? scheduleInfo.value : t('common.disabled')}</span>
+                         </div>
+                      </div>
                   </div>
 
-                  {/* Schedule Info */}
+                  {/* Language Switcher */}
-                  <div className="flex flex-col items-end mr-2 md:mr-0 hidden md:flex">
+                  <div className="relative">
-                     <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
+                    <button
-                       {scheduleInfo.label}
+                      onClick={() => setIsLangMenuOpen(!isLangMenuOpen)}
-                     </span>
+                      className="flex items-center justify-center w-9 h-9 rounded-full border border-gray-700 bg-gray-800/50 text-gray-400 hover:text-white hover:bg-gray-700 transition-all"
-                     <div className="text-xs font-mono flex items-center gap-1.5">
+                      title="Switch Language"
-                       {/* Schedule Part */}
+                    >
-                       <div className={`flex items-center gap-1.5 ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
+                      <Languages size={18} />
-                          {scheduleInfo.active && <Clock size={12} />}
+                    </button>
-                          <span>{scheduleInfo.value}</span>
+                    {isLangMenuOpen && (
-                       </div>
+                      <>
-
+                        <div className="fixed inset-0 z-40" onClick={() => setIsLangMenuOpen(false)}></div>
-                       {/* Watch Part */}
+                        <div className="absolute right-0 top-full mt-2 w-32 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-50 overflow-hidden">
-                       <span className="text-gray-700 mx-0.5">|</span>
+                          <button 
-                       <div 
+                            onClick={() => { setLanguage('en'); setIsLangMenuOpen(false); }}
-                         className={`flex items-center gap-1 ${scheduleInfo.autoWatch ? 'text-plex-orange' : 'text-gray-600'}`} 
+                            className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'en' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
-                         title={scheduleInfo.autoWatch ? "Local Playlist Monitoring Enabled" : "Local Playlist Monitoring Disabled"}
+                          >
-                       >
+                            English
-                           {scheduleInfo.autoWatch ? <Eye size={12} /> : <EyeOff size={12} />}
+                          </button>
-                           <span className="text-[10px] font-sans font-bold">WATCH</span>
+                          <button 
-                       </div>
+                            onClick={() => { setLanguage('es'); setIsLangMenuOpen(false); }}
-                     </div>
+                            className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'es' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                          >
+                            Español
+                          </button>
+                        </div>
+                      </>
+                    )}
                   </div>
 
                   {/* Connection Status Button */}
@@ -662,10 +785,19 @@ const App: React.FC = () => {
                         ? "bg-green-500/10 border-green-500/50 text-green-400 hover:bg-green-500/20 hover:shadow-green-500/20"
                         : "bg-red-500/10 border-red-500/50 text-red-400 hover:bg-red-500/20 hover:shadow-red-500/20"
                       }`}
-                    title={isConnected ? "Connected to Plex" : "Disconnected"}
+                    title={isConnected ? t('dashboard.connected') : t('dashboard.disconnected')}
                   >
                     {isConnected ? <Server size={18} /> : <ServerOff size={18} />}
                   </button>
+
+                  {/* Logout Button */}
+                  <button
+                    onClick={handleLogout}
+                    className="flex items-center justify-center w-9 h-9 rounded-full border border-gray-700 bg-gray-800/50 text-gray-400 hover:text-red-400 hover:border-red-500/30 hover:bg-red-500/10 transition-all"
+                    title={t('auth.logout') + ` (${currentUser})`}
+                  >
+                    <LogOut size={18} />
+                  </button>
               </div>
             </>
           ) : (
@@ -679,7 +811,7 @@ const App: React.FC = () => {
                  }}
                >
                   <h1 className={`text-xl md:text-2xl font-black tracking-[0.2em] uppercase whitespace-nowrap transition-colors duration-300 ${syncState === SyncState.SUCCESS ? 'text-[#22c55e]' : 'text-[#F59E0B]'}`}>
-                    {syncState === SyncState.SYNCING ? 'SYNCHRONIZING' : 'SYNC COMPLETE'}
+                    {syncState === SyncState.SYNCING ? t('dashboard.synchronizing') : t('dashboard.syncComplete')}
                   </h1>
                </div>
             </div>
@@ -764,7 +896,7 @@ const App: React.FC = () => {
       
       {/* Footer */}
       <footer className="flex-none py-4 text-center text-xs text-gray-600 border-t border-white/5 bg-gray-900/50 backdrop-blur">
-        <p>&copy; {new Date().getFullYear()} PlexSync Manager. Connected to Docker backend.</p>
+        <p>{t('app.footer', { year: new Date().getFullYear() })}</p>
       </footer>
 
       {/* Modals */}

sample-front-end/LanguageContext.tsx

@@ -0,0 +1,64 @@
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { translations, Language, TranslationStructure } from './translations';
+
+interface LanguageContextProps {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  t: (path: string, params?: Record<string, string | number>) => string;
+}
+
+const LanguageContext = createContext<LanguageContextProps | undefined>(undefined);
+
+export const LanguageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [language, setLanguageState] = useState<Language>('en');
+
+  useEffect(() => {
+    const savedLang = localStorage.getItem('plexsync-language') as Language;
+    if (savedLang && translations[savedLang]) {
+      setLanguageState(savedLang);
+    }
+  }, []);
+
+  const setLanguage = (lang: Language) => {
+    setLanguageState(lang);
+    localStorage.setItem('plexsync-language', lang);
+  };
+
+  const t = (path: string, params?: Record<string, string | number>): string => {
+    const keys = path.split('.');
+    let current: any = translations[language];
+
+    for (const key of keys) {
+      if (current[key] === undefined) {
+        console.warn(`Missing translation for key: ${path} in language: ${language}`);
+        return path;
+      }
+      current = current[key];
+    }
+
+    let text = current as string;
+
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        text = text.replace(`{${key}}`, String(value));
+      });
+    }
+
+    return text;
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage, t }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};

sample-front-end/components/ConnectionModal.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { PlexConnectionSettings, PlexServerConnection, PlexLibrary } from '../types';
 import { apiService } from '../services/api';
 import { X, Server, Lock, User, Key, Globe, Eye, EyeOff, CheckCircle, Library, ChevronDown, ChevronRight, Settings, Loader2 } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
 
 interface ConnectionModalProps {
   isOpen: boolean;
@@ -12,6 +13,7 @@ interface ConnectionModalProps {
 }
 
 const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onConnectSuccess, onShowMessage }) => {
+  const { t } = useLanguage();
   const [formData, setFormData] = useState<PlexConnectionSettings>({
     protocol: 'http',
     address: '',
@@ -71,7 +73,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
        const updatedInfo = { ...connectedServerInfo, libraryName: lib.title };
        setConnectedServerInfo(updatedInfo);
        onConnectSuccess(updatedInfo);
-       onShowMessage(`Library switched to ${lib.title}`);
+       onShowMessage(t('toasts.librarySwitched', { library: lib.title }));
     }
   };
 
@@ -90,7 +92,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
         abortControllerRef.current.abort();
         abortControllerRef.current = null;
         setIsConnecting(false);
-        setError("Connection cancelled by user.");
+        setError(t('toasts.connectionCancelled'));
       }
       return;
     }
@@ -119,7 +121,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
 
       const info = result.data.serverInfo;
       setConnectedServerInfo(info);
-      onShowMessage(`Successfully connected to ${info.name || 'Plex Server'}`);
+      onShowMessage(t('toasts.connectedTo', { name: info.name || 'Plex Server' }));
       
       const libs = info.libraries || [];
       setLibraries(libs);
@@ -134,7 +136,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
           onConnectSuccess(info);
       }
     } else {
-      setError(result.message || "Connection failed");
+      setError(result.message || t('server.connectionFailed'));
     }
   };
 
@@ -154,7 +156,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
         <div className="px-6 py-4 bg-gray-800 border-b border-gray-700 flex items-center justify-between flex-none">
           <h3 className="text-lg font-semibold text-white flex items-center gap-2">
             <Server size={18} className={isConnected ? "text-green-400" : "text-plex-orange"} />
-            {isConnected ? 'Server Connected' : 'Connect Plex Server'}
+            {isConnected ? t('connection.titleConnected') : t('connection.titleConnect')}
           </h3>
           <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
             <X size={20} />
@@ -173,7 +175,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
 
             {/* Server Connection */}
             <div className="space-y-3">
-                <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Server Details</label>
+                <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">{t('connection.serverDetails')}</label>
                 <div className="grid grid-cols-4 gap-3">
                 <div className="col-span-1">
                     <select
@@ -197,7 +199,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                         name="address"
                         required
                         disabled={isConnected || isConnecting}
-                        placeholder="IP Address or Domain"
+                        placeholder={t('connection.address')}
                         value={formData.address}
                         onChange={handleChange}
                         className={`w-full h-10 pl-9 pr-3 bg-gray-800 border border-gray-600 rounded-md text-sm text-white placeholder-gray-500 focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange transition-all ${isConnected ? 'opacity-60 cursor-not-allowed' : ''}`}
@@ -211,7 +213,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                     type="text" 
                     name="port"
                     disabled={isConnected || isConnecting}
-                    placeholder="Port (e.g. 32400)"
+                    placeholder={t('connection.port')}
                     value={formData.port}
                     onChange={handleChange}
                     className={`w-full h-10 px-3 bg-gray-800 border border-gray-600 rounded-md text-sm text-white placeholder-gray-500 focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange transition-all ${isConnected ? 'opacity-60 cursor-not-allowed' : ''}`}
@@ -223,7 +225,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
 
             {/* Authentication */}
             <div className="space-y-3">
-                <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Authentication</label>
+                <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">{t('connection.authentication')}</label>
                 
                 {/* Token */}
                 <div className="relative">
@@ -234,7 +236,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                     type="text" 
                     name="token"
                     disabled={isConnected || isConnecting}
-                    placeholder="X-Plex-Token (Optional)"
+                    placeholder={t('connection.token')}
                     value={formData.token}
                     onChange={handleChange}
                     className={`w-full h-10 pl-9 pr-3 bg-gray-800 border border-gray-600 rounded-md text-sm text-white placeholder-gray-500 focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange transition-all font-mono ${isConnected ? 'opacity-60 cursor-not-allowed' : ''}`}
@@ -256,7 +258,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                             type="text" 
                             name="username"
                             disabled={isTokenProvided || isConnecting}
-                            placeholder="Username / Email"
+                            placeholder={t('connection.username')}
                             value={formData.username}
                             onChange={handleChange}
                             className={`w-full h-10 pl-9 pr-3 rounded-md text-sm transition-all focus:outline-none ${disabledInputClass}`}
@@ -272,7 +274,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                             type={showPassword ? "text" : "password"} 
                             name="password"
                             disabled={isTokenProvided || isConnecting}
-                            placeholder="Password"
+                            placeholder={t('connection.password')}
                             value={formData.password}
                             onChange={handleChange}
                             className={`w-full h-10 pl-9 pr-10 rounded-md text-sm transition-all focus:outline-none ${disabledInputClass}`}
@@ -300,7 +302,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                 >
                   <div className="flex items-center gap-2">
                     <Settings size={14} />
-                    <span>Advanced Options</span>
+                    <span>{t('connection.advanced')}</span>
                   </div>
                   {showAdvanced ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
                 </button>
@@ -308,7 +310,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                 {showAdvanced && (
                   <div className="p-3 bg-gray-900/50 space-y-3 animate-in slide-in-from-top-2">
                     <div>
-                      <label className="text-xs text-gray-500 mb-1 block">Connection Timeout (Seconds)</label>
+                      <label className="text-xs text-gray-500 mb-1 block">{t('connection.timeout')}</label>
                       <input 
                         type="number"
                         min="1"
@@ -337,15 +339,15 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                     {isConnecting ? (
                       <>
                         <Loader2 size={16} className="animate-spin" />
-                        <span>Connecting... <span className="opacity-75 font-normal ml-1">(Cancel)</span></span>
+                        <span>{t('connection.connecting')} <span className="opacity-75 font-normal ml-1">({t('common.cancel')})</span></span>
                       </>
-                    ) : 'Connect Server'}
+                    ) : t('connection.connectBtn')}
                 </button>
             ) : (
                 <div className="mt-2 p-2 bg-green-500/10 border border-green-500/20 rounded-lg text-center">
                     <p className="text-green-400 text-sm font-semibold flex items-center justify-center gap-2">
                         <CheckCircle size={16} />
-                        Connected Successfully
+                        {t('connection.connectedSuccess')}
                     </p>
                 </div>
             )}
@@ -354,7 +356,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
             {/* Library Selection - Appears after connection */}
             {isConnected && libraries.length > 0 && (
                 <div className="mt-6 pt-5 border-t border-gray-700 animate-in slide-in-from-top-2 fade-in">
-                    <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider block mb-2">Select Library to Sync</label>
+                    <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider block mb-2">{t('connection.selectLibrary')}</label>
                     <div className="relative">
                         <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                             <Library size={14} className="text-plex-orange" />
@@ -378,7 +380,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
                             onClick={onClose}
                             className="px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors border border-gray-600 hover:border-gray-500"
                         >
-                            Done
+                            {t('common.done')}
                         </button>
                     </div>
                 </div>

sample-front-end/components/LoginScreen.tsx

@@ -0,0 +1,170 @@
+
+import React, { useState } from 'react';
+import { useLanguage } from '../LanguageContext';
+import { apiService } from '../services/api';
+import { Lock, User, Loader2, Languages, ArrowRight, ArrowLeftRight } from 'lucide-react';
+
+interface LoginScreenProps {
+  onLoginSuccess: (token: string, username: string) => void;
+  onLoginError: (msg: string) => void;
+}
+
+const LoginScreen: React.FC<LoginScreenProps> = ({ onLoginSuccess, onLoginError }) => {
+  const { t, language, setLanguage } = useLanguage();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setLocalError(null);
+
+    try {
+      // Mock credentials: admin / password
+      const response = await apiService.login({ username, password });
+      
+      if (response.status === 'success') {
+        onLoginSuccess(response.data.token, response.data.username);
+      } else {
+        const errorMsg = response.message || t('auth.invalidCredentials');
+        setLocalError(errorMsg);
+        onLoginError(errorMsg);
+      }
+    } catch (err) {
+      setLocalError(t('auth.invalidCredentials'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-800 via-gray-900 to-black p-4">
+      
+      {/* Background decoration */}
+      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-plex-orange/10 rounded-full blur-[100px] opacity-20"></div>
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[100px] opacity-20"></div>
+      </div>
+
+      {/* Language Switcher (Top Right) */}
+      <div className="absolute top-6 right-6 z-20">
+        <div className="relative">
+          <button
+            onClick={() => setIsLangMenuOpen(!isLangMenuOpen)}
+            className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 border border-gray-700 hover:border-gray-600 text-gray-300 transition-all backdrop-blur-sm"
+          >
+            <Languages size={16} />
+            <span className="text-sm font-medium">{language === 'en' ? 'English' : 'Español'}</span>
+          </button>
+          
+          {isLangMenuOpen && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setIsLangMenuOpen(false)}></div>
+              <div className="absolute right-0 top-full mt-2 w-32 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-20 overflow-hidden animate-in fade-in slide-in-from-top-2">
+                <button 
+                  onClick={() => { setLanguage('en'); setIsLangMenuOpen(false); }}
+                  className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'en' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                >
+                  English
+                </button>
+                <button 
+                  onClick={() => { setLanguage('es'); setIsLangMenuOpen(false); }}
+                  className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'es' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
+                >
+                  Español
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Main Card */}
+      <div className="w-full max-w-md bg-gray-900/60 backdrop-blur-xl border border-gray-700/50 rounded-2xl shadow-2xl p-8 z-10 animate-in zoom-in-95 duration-300">
+        
+        <div className="text-center mb-8 flex flex-col items-center">
+           <div className="inline-flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-plex-orange to-yellow-600 shadow-lg shadow-plex-orange/20 mb-4">
+              <ArrowLeftRight size={32} strokeWidth={2.5} className="text-gray-900" />
+           </div>
+           <h1 className="text-2xl font-bold tracking-tight text-white">
+              <span className="text-plex-orange">PMS</span> Playlist Sync
+           </h1>
+        </div>
+
+        <form onSubmit={handleLogin} className="space-y-4">
+          
+          {localError && (
+             <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-xs flex items-center justify-center">
+               {localError}
+             </div>
+          )}
+
+          <div className="space-y-1">
+            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider ml-1">{t('auth.username')}</label>
+            <div className="relative group">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <User size={16} className="text-gray-500 group-focus-within:text-plex-orange transition-colors" />
+              </div>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full h-11 pl-10 pr-4 bg-gray-800/50 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all"
+                placeholder="admin"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider ml-1">{t('auth.password')}</label>
+            <div className="relative group">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock size={16} className="text-gray-500 group-focus-within:text-plex-orange transition-colors" />
+              </div>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full h-11 pl-10 pr-4 bg-gray-800/50 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all"
+                placeholder="password"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading || !username || !password}
+            className={`w-full h-12 mt-6 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all shadow-lg
+              ${isLoading 
+                ? 'bg-gray-700 text-gray-400 cursor-not-allowed' 
+                : 'bg-plex-orange text-gray-900 hover:bg-yellow-500 hover:shadow-plex-orange/30 active:scale-[0.98]'
+              }`}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 size={18} className="animate-spin" />
+                <span>{t('auth.loggingIn')}</span>
+              </>
+            ) : (
+              <>
+                <span>{t('auth.loginBtn')}</span>
+                <ArrowRight size={18} />
+              </>
+            )}
+          </button>
+        </form>
+
+        <div className="mt-8 pt-6 border-t border-gray-700/50 text-center">
+           <p className="text-[10px] text-gray-600">
+             © PMS Playlist Sync
+           </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginScreen;

sample-front-end/components/PlaylistCard.tsx

@@ -1,12 +1,15 @@
+
 import React from 'react';
 import { Playlist } from '../types';
 import { Disc3, Clock } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
 
 interface PlaylistCardProps {
   playlist: Playlist;
 }
 
 const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
+  const { t } = useLanguage();
   return (
     <div className="group flex flex-col w-full p-2.5 bg-gray-800/60 rounded-md border border-gray-700/50 hover:bg-gray-700 hover:border-plex-orange/50 transition-all duration-200 cursor-pointer shadow-sm">
       <div className="flex items-center justify-between">
@@ -16,11 +19,11 @@ const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
       </div>
       
       <div className="flex items-center mt-1.5 space-x-4 text-xs text-gray-500 group-hover:text-gray-400">
-        <span className="flex items-center" title="Track Count">
+        <span className="flex items-center" title={t('playlist.trackCount')}>
           <Disc3 size={12} className="mr-1.5 opacity-70" />
           {playlist.trackCount}
         </span>
-        <span className="flex items-center" title="Last Updated">
+        <span className="flex items-center" title={t('playlist.lastUpdated')}>
           <Clock size={12} className="mr-1.5 opacity-70" />
           {new Date(playlist.lastUpdated).toLocaleDateString()}
         </span>

sample-front-end/components/ServerPanel.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Playlist, ServerType, PlexServerConnection } from '../types';
 import PlaylistCard from './PlaylistCard';
 import { RefreshCw, Server, Cloud, WifiOff, X } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
 
 interface ServerPanelProps {
   type: ServerType;
@@ -14,6 +15,7 @@ interface ServerPanelProps {
 }
 
 const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, onRefresh, onCancel, serverInfo }) => {
+  const { t } = useLanguage();
   const isLocal = type === ServerType.LOCAL;
   
   let Icon = isLocal ? Server : Cloud;
@@ -28,17 +30,17 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
   let displaySubtitle: React.ReactNode = null;
 
   if (isLocal) {
-    displayTitle = 'Local Server';
+    displayTitle = t('server.local');
     displaySubtitle = (
       <p className="text-xs text-gray-400 font-medium mt-0.5 md:mt-0 md:ml-0">
-        {playlists.length} Playlists
+        {t('server.playlists', { count: playlists.length })}
       </p>
     );
   } else {
     // Cloud Logic
     if (serverInfo) {
       if (serverInfo.isConnected) {
-        displayTitle = serverInfo.name || 'Cloud Server';
+        displayTitle = serverInfo.name || t('server.cloud');
         displaySubtitle = (
            <div className="flex items-center text-xs text-gray-300 font-medium space-x-1.5 truncate mt-0.5 md:mt-0">
               <span className="text-plex-orange truncate font-semibold">{serverInfo.libraryName}</span>
@@ -47,20 +49,20 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
            </div>
         );
       } else {
-        displayTitle = 'Not Connected';
+        displayTitle = t('server.notConnected');
         Icon = WifiOff;
         headerColor = 'text-red-400';
         displaySubtitle = (
           <p className="text-xs text-gray-500 font-medium mt-0.5">
-             Connection failed
+             {t('server.connectionFailed')}
           </p>
         );
       }
     } else {
-      displayTitle = 'Cloud Server';
+      displayTitle = t('server.cloud');
       displaySubtitle = (
         <p className="text-xs text-gray-500 font-medium mt-0.5">
-           {isLoading ? 'Connecting...' : 'Waiting...'}
+           {isLoading ? t('server.connecting') : t('server.waiting')}
         </p>
       );
     }
@@ -121,7 +123,7 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
                : 'text-gray-400 hover:text-white hover:bg-white/10'
              }
           `}
-          title={isLoading ? "Cancel Refresh" : "Refresh Playlists"}
+          title={isLoading ? t('server.cancelRefresh') : t('server.refreshPlaylists')}
         >
           {isLoading ? (
             <div className="relative flex items-center justify-center">
@@ -141,11 +143,11 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
         {isLoading && playlists.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-gray-500 space-y-3">
             <RefreshCw size={24} className="animate-spin text-plex-orange/50" />
-            <p className="text-xs font-medium tracking-wide uppercase">Syncing...</p>
+            <p className="text-xs font-medium tracking-wide uppercase">{t('server.syncing')}</p>
           </div>
         ) : playlists.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-gray-500">
-            <p className="text-sm">No playlists found.</p>
+            <p className="text-sm">{t('server.noPlaylists')}</p>
           </div>
         ) : (
           <div className="space-y-2.5 md:space-y-3">

sample-front-end/components/StrategySelector.tsx

@@ -1,3 +1,4 @@
+
 import React, { useState, useRef, useEffect } from 'react';
 import { SyncStrategy, ReplacementRule, PathMappingConfig, PathMappingRules, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode, BackupSettings } from '../types';
 import { 
@@ -23,11 +24,12 @@ import {
   History,
   Eye
 } from 'lucide-react';
+import { useLanguage } from '../LanguageContext';
 
 interface StrategyOption {
   value: SyncStrategy;
-  label: string;
+  labelKey: string;
-  description: string;
+  descKey: string;
   icon: React.ElementType;
   color: string;
 }
@@ -35,29 +37,29 @@ interface StrategyOption {
 const STRATEGIES: StrategyOption[] = [
   {
     value: SyncStrategy.LOCAL_OVERWRITE,
-    label: 'Local Overwrite',
+    labelKey: 'strategies.localOverwrite.label',
-    description: 'Local playlist completely overwrites Cloud. (No Diff)',
+    descKey: 'strategies.localOverwrite.desc',
     icon: ArrowRightCircle,
     color: 'text-blue-400'
   },
   {
     value: SyncStrategy.CLOUD_OVERWRITE,
-    label: 'Cloud Overwrite',
+    labelKey: 'strategies.cloudOverwrite.label',
-    description: 'Cloud playlist completely overwrites Local. (No Diff)',
+    descKey: 'strategies.cloudOverwrite.desc',
     icon: ArrowLeftCircle,
     color: 'text-green-400'
   },
   {
     value: SyncStrategy.MERGE_LOCAL,
-    label: 'Two-way Merge (Local Priority)',
+    labelKey: 'strategies.mergeLocal.label',
-    description: 'Merge both. Conflicts resolve to Local version.',
+    descKey: 'strategies.mergeLocal.desc',
     icon: GitMerge,
     color: 'text-blue-300'
   },
   {
     value: SyncStrategy.MERGE_CLOUD,
-    label: 'Two-way Merge (Cloud Priority)',
+    labelKey: 'strategies.mergeCloud.label',
-    description: 'Merge both. Conflicts resolve to Cloud version.',
+    descKey: 'strategies.mergeCloud.desc',
     icon: GitMerge,
     color: 'text-green-300'
   }
@@ -116,6 +118,7 @@ interface MappingGroupEditorProps {
   rightPlaceholder?: string;
   leftInputClass?: string;
   rightInputClass?: string;
+  t: (key: string) => string;
 }
 
 const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({ 
@@ -126,10 +129,11 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
   isLocked,
   borderColor = "border-gray-700",
   bgColor = "bg-gray-900/50",
-  leftPlaceholder = "Pattern",
+  leftPlaceholder,
-  rightPlaceholder = "Replace",
+  rightPlaceholder,
   leftInputClass,
-  rightInputClass
+  rightInputClass,
+  t
 }) => {
   
   const handleAdd = () => {
@@ -162,7 +166,7 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
            onClick={handleAdd}
            disabled={isLocked}
            className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
-           title="Add Rule"
+           title={t('common.add')}
          >
            <Plus size={12} />
          </button>
@@ -171,14 +175,14 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
        <div className="flex-1 space-y-2 overflow-y-auto max-h-32 custom-scrollbar pr-1">
          {rules.length === 0 ? (
            <div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
-             No rules defined.
+             {t('mapping.noRules')}
            </div>
          ) : (
            rules.map((rule) => (
              <div key={rule.id} className="flex items-center space-x-1 animate-in slide-in-from-left-1 duration-200">
                 <input 
                   type="text" 
-                  placeholder={leftPlaceholder}
+                  placeholder={leftPlaceholder || t('mapping.pattern')}
                   value={rule.search}
                   onChange={(e) => handleUpdate(rule.id, 'search', e.target.value)}
                   className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${leftInputClass || defaultInputStyle}`}
@@ -186,7 +190,7 @@ const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
                 <Link size={12} className="text-gray-600 flex-none opacity-50" />
                 <input 
                   type="text" 
-                  placeholder={rightPlaceholder}
+                  placeholder={rightPlaceholder || t('mapping.replace')}
                   value={rule.replace}
                   onChange={(e) => handleUpdate(rule.id, 'replace', e.target.value)}
                   className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${rightInputClass || defaultInputStyle}`}
@@ -230,6 +234,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   syncState,
   onSync
 }) => {
+  const { t } = useLanguage();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -307,7 +312,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
 
   const handleSelect = (strategy: StrategyOption) => {
     if (isLocked) return;
-    onSelect(strategy.value, strategy.label);
+    onSelect(strategy.value, t(strategy.labelKey));
   };
 
   // --- Path Mapping Handlers ---
@@ -439,7 +444,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800/90 border border-gray-600 hover:border-plex-orange text-gray-300 hover:text-white hover:bg-gray-700/80 transition-all shadow-2xl hover:shadow-plex-orange/30 ring-[6px] md:ring-8 ring-gray-900 backdrop-blur-sm active:scale-95"
-        title={`Current Strategy: ${selectedOption.label}`}
+        title={`Current Strategy: ${t(selectedOption.labelKey)}`}
       >
         <selectedOption.icon size={22} className={selectedOption.color} strokeWidth={2.5} />
         <div className="absolute -bottom-1 -right-1 bg-gray-900 rounded-full border border-gray-600 p-[2px] shadow-sm">
@@ -465,7 +470,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             
             {/* Section 1: Sync Strategy */}
             <div className="px-4 py-3 bg-black/20 border-b border-white/5 flex-none">
-            <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Sync Strategy</h3>
+            <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">{t('strategies.title')}</h3>
             <div className="space-y-1">
                 {STRATEGIES.map((strategy) => (
                 <div
@@ -480,7 +485,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     <div className="flex items-center space-x-3 overflow-hidden">
                     <strategy.icon size={18} className={strategy.color} />
                     <span className={`text-sm font-medium truncate ${currentStrategy === strategy.value ? 'text-white' : 'text-gray-300 group-hover:text-white'}`}>
-                        {strategy.label}
+                        {t(strategy.labelKey)}
                     </span>
                     </div>
                     
@@ -488,7 +493,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     <div className="relative group/tooltip">
                         <HelpCircle size={14} className="text-gray-600 hover:text-gray-400 transition-colors" />
                         <div className="absolute right-0 bottom-full mb-2 w-48 p-2.5 bg-gray-900 text-xs text-gray-300 rounded-lg shadow-xl border border-gray-700 pointer-events-none opacity-0 group-hover/tooltip:opacity-100 transition-opacity z-50">
-                            {strategy.description}
+                            {t(strategy.descKey)}
                         </div>
                     </div>
                     
@@ -504,7 +509,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             {/* Section 1.5: Backup Retention */}
             <div className="px-4 py-3 bg-gray-900/40 border-b border-white/5 flex-none">
               <div className="flex items-center justify-between mb-3">
-                 <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Backup Retention</h3>
+                 <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('backup.title')}</h3>
               </div>
               
               <div className="flex flex-col space-y-3">
@@ -514,8 +519,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                           <Archive size={16} />
                        </div>
                        <div className="flex flex-col">
-                          <span className="text-sm font-medium text-gray-200">Enable Backups</span>
+                          <span className="text-sm font-medium text-gray-200">{t('backup.enable')}</span>
-                          <span className="text-[10px] text-gray-500">Create a copy before changes</span>
+                          <span className="text-[10px] text-gray-500">{t('backup.enableDesc')}</span>
                        </div>
                     </div>
 
@@ -532,7 +537,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     <div className="flex items-center justify-between p-2.5 rounded-lg bg-black/20 border border-white/5">
                         <div className="flex items-center space-x-2">
                            <History size={14} className="text-gray-500" />
-                           <span className="text-xs text-gray-400">Max versions to keep:</span>
+                           <span className="text-xs text-gray-400">{t('backup.maxVersions')}</span>
                         </div>
                         <div className="flex items-center space-x-2">
                             <input 
@@ -543,7 +548,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                onChange={(e) => handleUpdateBackup('retentionCount', parseInt(e.target.value) || 1)}
                                className="w-16 bg-gray-800 border border-gray-700 text-center text-sm rounded py-1 text-white focus:border-plex-orange focus:outline-none"
                             />
-                            <span className="text-[10px] text-gray-600 italic">Oldest deleted automatically</span>
+                            <span className="text-[10px] text-gray-600 italic">{t('backup.autoDelete')}</span>
                         </div>
                     </div>
                  </div>
@@ -558,7 +563,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                     >
                         <RotateCcw size={12} />
-                        <span>Revert</span>
+                        <span>{t('common.revert')}</span>
                     </button>
                     <button
                         onClick={handleSaveBackupClick}
@@ -569,7 +574,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                     >
                         <Save size={12} />
-                        <span>Save</span>
+                        <span>{t('common.save')}</span>
                     </button>
                  </div>
               </div>
@@ -578,14 +583,14 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             {/* Section 2: Path Mapping (Tabs + Grid) */}
             <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                 <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Path Mapping</h3>
+                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('mapping.title')}</h3>
                 </div>
 
                 {/* Tabs for Path Mapping Mode */}
                 <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
                   {[
-                    { id: PathMappingMode.SIMPLE, label: 'Simple Mapping', icon: Type },
+                    { id: PathMappingMode.SIMPLE, label: t('mapping.simple'), icon: Type },
-                    { id: PathMappingMode.REGEX, label: 'Regex Rules', icon: Code2 },
+                    { id: PathMappingMode.REGEX, label: t('mapping.regex'), icon: Code2 },
                   ].map((tab) => (
                     <button
                       key={tab.id}
@@ -608,17 +613,18 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        // Simple Mode: Single Editor
                        <div className="animate-in fade-in duration-200">
                           <MappingGroupEditor 
-                             title="Path Mapping"
+                             title={t('mapping.simpleTitle')}
-                             subtitle="Map Local paths to Cloud paths using simple string matching"
+                             subtitle={t('mapping.simpleSubtitle')}
                              rules={simpleRules}
                              onChange={updateSimpleGroup}
                              isLocked={isLocked}
                              borderColor={MAPPING_THEME.simple.borderColor}
                              bgColor={MAPPING_THEME.simple.bgColor}
-                             leftPlaceholder="Local Path"
+                             leftPlaceholder={t('mapping.localPath')}
-                             rightPlaceholder="Cloud Path"
+                             rightPlaceholder={t('mapping.cloudPath')}
                              leftInputClass={MAPPING_THEME.inputs.local}
                              rightInputClass={MAPPING_THEME.inputs.cloud}
+                             t={t}
                           />
                        </div>
                     ) : (
@@ -626,44 +632,48 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-in fade-in duration-200">
                           {/* Row 1: Pre-Processing */}
                           <MappingGroupEditor 
-                             title="Local Playlist"
+                             title={t('server.local')}
-                             subtitle="Pre-Processing (Before Sync)"
+                             subtitle={t('mapping.regexPre')}
                              rules={regexRules.localPre}
                              onChange={(rules) => updateRegexGroup('localPre', rules)}
                              isLocked={isLocked}
                              borderColor={MAPPING_THEME.local.borderColor}
                              bgColor={MAPPING_THEME.local.bgColor}
+                             t={t}
                           />
 
                           <MappingGroupEditor 
-                             title="Remote Playlist"
+                             title={t('server.cloud')}
-                             subtitle="Pre-Processing (Before Sync)"
+                             subtitle={t('mapping.regexPre')}
                              rules={regexRules.remotePre}
                              onChange={(rules) => updateRegexGroup('remotePre', rules)}
                              isLocked={isLocked}
                              borderColor={MAPPING_THEME.remote.borderColor}
                              bgColor={MAPPING_THEME.remote.bgColor}
+                             t={t}
                           />
 
                           {/* Row 2: Post-Processing */}
                           <MappingGroupEditor 
-                             title="Local Playlist"
+                             title={t('server.local')}
-                             subtitle="Post-Processing (After Sync / Result)"
+                             subtitle={t('mapping.regexPost')}
                              rules={regexRules.localPost}
                              onChange={(rules) => updateRegexGroup('localPost', rules)}
                              isLocked={isLocked}
                              borderColor={MAPPING_THEME.local.borderColor}
                              bgColor={MAPPING_THEME.local.bgColor}
+                             t={t}
                           />
 
                           <MappingGroupEditor 
-                             title="Remote Playlist"
+                             title={t('server.cloud')}
-                             subtitle="Post-Processing (After Sync / Result)"
+                             subtitle={t('mapping.regexPost')}
                              rules={regexRules.remotePost}
                              onChange={(rules) => updateRegexGroup('remotePost', rules)}
                              isLocked={isLocked}
                              borderColor={MAPPING_THEME.remote.borderColor}
                              bgColor={MAPPING_THEME.remote.bgColor}
+                             t={t}
                           />
                        </div>
                     )}
@@ -679,7 +689,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                     >
                         <RotateCcw size={12} />
-                        <span>Revert</span>
+                        <span>{t('common.revert')}</span>
                     </button>
                     <button
                         onClick={handleSaveMappingClick}
@@ -690,7 +700,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                             : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                     >
                         <Save size={12} />
-                        <span>Save Rules</span>
+                        <span>{t('mapping.saveRules')}</span>
                     </button>
                 </div>
             </div>
@@ -698,15 +708,15 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             {/* Section 3: Scheduled Tasks */}
             <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                  <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Scheduled Tasks</h3>
+                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('schedule.title')}</h3>
                  </div>
 
                  {/* Tabs */}
                  <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
                     {[
-                      { id: ScheduleMode.CRON, label: 'Cron', icon: Repeat },
+                      { id: ScheduleMode.CRON, label: t('schedule.cron'), icon: Repeat },
-                      { id: ScheduleMode.DAILY, label: 'Daily', icon: Clock },
+                      { id: ScheduleMode.DAILY, label: t('schedule.daily'), icon: Clock },
-                      { id: ScheduleMode.WEEKLY, label: 'Weekly', icon: Calendar },
+                      { id: ScheduleMode.WEEKLY, label: t('schedule.weekly'), icon: Calendar },
                     ].map((tab) => (
                       <button
                         key={tab.id}
@@ -729,7 +739,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                       <div className="flex flex-col animate-in fade-in duration-200">
                          {/* Top Row: Label + Switch */}
                          <div className="flex items-center justify-between mb-3 px-1">
-                           <span className="text-xs text-gray-400 font-medium">Enable Cron Schedule</span>
+                           <span className="text-xs text-gray-400 font-medium">{t('schedule.enableCron')}</span>
                            <button 
                                onClick={() => toggleScheduleEnable(ScheduleMode.CRON)}
                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.CRON ? 'bg-plex-orange' : 'bg-gray-700'}`}
@@ -762,7 +772,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        <div className="flex flex-col animate-in fade-in duration-200">
                           {/* Top Row: Label + Switch */}
                           <div className="flex items-center justify-between mb-3 px-1">
-                            <span className="text-xs text-gray-400 font-medium">Enable Daily Run</span>
+                            <span className="text-xs text-gray-400 font-medium">{t('schedule.enableDaily')}</span>
                             <button 
                                 onClick={() => toggleScheduleEnable(ScheduleMode.DAILY)}
                                 className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.DAILY ? 'bg-plex-orange' : 'bg-gray-700'}`}
@@ -788,7 +798,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        <div className="flex flex-col animate-in fade-in duration-200">
                           {/* Top Row: Label + Switch */}
                           <div className="flex items-center justify-between mb-3 px-1">
-                            <span className="text-xs text-gray-400 font-medium">Enable Weekly Run</span>
+                            <span className="text-xs text-gray-400 font-medium">{t('schedule.enableWeekly')}</span>
                             <button 
                                 onClick={() => toggleScheduleEnable(ScheduleMode.WEEKLY)}
                                 className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.WEEKLY ? 'bg-plex-orange' : 'bg-gray-700'}`}
@@ -840,8 +850,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                              <Eye size={16} />
                         </div>
                         <div className="flex flex-col">
-                             <span className="text-sm font-medium text-gray-200">Watch Local Changes</span>
+                             <span className="text-sm font-medium text-gray-200">{t('schedule.watchLocal')}</span>
-                             <span className="text-[10px] text-gray-500">Auto-sync when local playlist updates</span>
+                             <span className="text-[10px] text-gray-500">{t('schedule.watchDesc')}</span>
                         </div>
                     </div>
                     <button 
@@ -863,7 +873,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                 : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                         >
                             <RotateCcw size={12} />
-                            <span>Revert</span>
+                            <span>{t('common.revert')}</span>
                         </button>
                         <button
                             onClick={handleSaveScheduleClick}
@@ -874,7 +884,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                 : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                         >
                             <Save size={12} />
-                            <span>Save</span>
+                            <span>{t('common.save')}</span>
                         </button>
                     </div>
             </div>
@@ -896,18 +906,18 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                 {isSyncing ? (
                     <>
                         <Loader2 size={16} className="animate-spin" />
-                        <span>Sync in Progress...</span>
+                        <span>{t('strategies.syncing')}</span>
                     </>
                 ) : (
                     <>
                         <Zap size={16} fill="currentColor" />
-                        <span>Sync Now</span>
+                        <span>{t('strategies.syncNow')}</span>
                     </>
                 )}
             </button>
             {(isMappingDirty || isBackupDirty) && (
                 <p className="text-[10px] text-plex-orange text-center mt-2">
-                    Please save pending changes (Backups/Path Mapping) before syncing.
+                    {t('strategies.saveWarning')}
                 </p>
             )}
         </div>

sample-front-end/index.html

@@ -1,9 +1,10 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PlexSync Manager</title>
+    <title>PMS Playlist Sync</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {

sample-front-end/index.tsx

@@ -1,6 +1,8 @@
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { LanguageProvider } from './LanguageContext';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
@@ -10,6 +12,8 @@ if (!rootElement) {
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
-    <App />
+    <LanguageProvider>
+      <App />
+    </LanguageProvider>
   </React.StrictMode>
 );

sample-front-end/locales/en.ts

@@ -0,0 +1,162 @@
+
+
+
+export const en = {
+  app: {
+    // title and manager are no longer used for branding
+    title: 'PlexSync', 
+    manager: 'Manager',
+    footer: '© {year} PMS Playlist Sync. Connected to Docker backend.',
+  },
+  auth: {
+    title: 'Login',
+    subtitle: 'Sign in to manage your playlist syncs',
+    username: 'Username',
+    password: 'Password',
+    loginBtn: 'Sign In',
+    logout: 'Logout',
+    loggingIn: 'Verifying...',
+    invalidCredentials: 'Invalid username or password',
+    welcome: 'Welcome, {user}',
+  },
+  common: {
+    save: 'Save',
+    cancel: 'Cancel',
+    revert: 'Revert',
+    delete: 'Delete',
+    done: 'Done',
+    loading: 'Loading...',
+    refresh: 'Refresh',
+    close: 'Close',
+    none: 'None',
+    disabled: 'Disabled',
+    add: 'Add',
+  },
+  server: {
+    local: 'Local Server',
+    cloud: 'Cloud Server',
+    playlists: '{count} Playlists',
+    notConnected: 'Not Connected',
+    connectionFailed: 'Connection failed',
+    connecting: 'Connecting...',
+    waiting: 'Waiting...',
+    syncing: 'Syncing...',
+    noPlaylists: 'No playlists found.',
+    cancelRefresh: 'Cancel Refresh',
+    refreshPlaylists: 'Refresh Playlists',
+  },
+  playlist: {
+    trackCount: 'Track Count',
+    lastUpdated: 'Last Updated',
+  },
+  dashboard: {
+    mapping: 'Mapping',
+    backup: 'Backup',
+    autoSync: 'Auto-Sync',
+    watch: 'Watch',
+    watchModeActive: 'Watch Mode: Active',
+    watchModeDisabled: 'Watch Mode: Disabled',
+    notSet: 'Not Set',
+    retain: 'Retain: {count}',
+    keep: 'Keep {count}',
+    connected: 'Connected to Plex',
+    disconnected: 'Disconnected',
+    synchronizing: 'SYNCHRONIZING',
+    syncComplete: 'SYNC COMPLETE',
+  },
+  strategies: {
+    title: 'Sync Strategy',
+    localOverwrite: {
+      label: 'Local Overwrite',
+      desc: 'Local playlist completely overwrites Cloud. (No Diff)',
+    },
+    cloudOverwrite: {
+      label: 'Cloud Overwrite',
+      desc: 'Cloud playlist completely overwrites Local. (No Diff)',
+    },
+    mergeLocal: {
+      label: 'Two-way Merge (Local Priority)',
+      desc: 'Merge both. Conflicts resolve to Local version.',
+    },
+    mergeCloud: {
+      label: 'Two-way Merge (Cloud Priority)',
+      desc: 'Merge both. Conflicts resolve to Cloud version.',
+    },
+    syncNow: 'Sync Now',
+    syncing: 'Sync in Progress...',
+    saveWarning: 'Please save pending changes (Backups/Path Mapping) before syncing.',
+  },
+  mapping: {
+    title: 'Path Mapping',
+    simple: 'Simple Mapping',
+    regex: 'Regex Rules',
+    simpleTitle: 'Path Mapping',
+    simpleSubtitle: 'Map Local paths to Cloud paths using simple string matching',
+    regexPre: 'Pre-Processing (Before Sync)',
+    regexPost: 'Post-Processing (After Sync / Result)',
+    localPath: 'Local Path',
+    cloudPath: 'Cloud Path',
+    pattern: 'Pattern',
+    replace: 'Replace',
+    saveRules: 'Save Rules',
+    noRules: 'No rules defined.',
+  },
+  backup: {
+    title: 'Backup Retention',
+    enable: 'Enable Backups',
+    enableDesc: 'Create a copy before changes',
+    maxVersions: 'Max versions to keep:',
+    autoDelete: 'Oldest deleted automatically',
+  },
+  schedule: {
+    title: 'Scheduled Tasks',
+    cron: 'Cron',
+    daily: 'Daily',
+    weekly: 'Weekly',
+    enableCron: 'Enable Cron Schedule',
+    enableDaily: 'Enable Daily Run',
+    enableWeekly: 'Enable Weekly Run',
+    watchLocal: 'Watch Local Changes',
+    watchDesc: 'Auto-sync when local playlist updates',
+    schedule: 'Schedule',
+    notConfigured: 'Not configured',
+    today: 'Today',
+    tomorrow: 'Tomorrow',
+  },
+  connection: {
+    titleConnected: 'Server Connected',
+    titleConnect: 'Connect Plex Server',
+    serverDetails: 'Server Details',
+    authentication: 'Authentication',
+    protocol: 'Protocol',
+    address: 'IP Address or Domain',
+    port: 'Port',
+    token: 'X-Plex-Token (Optional)',
+    username: 'Username / Email',
+    password: 'Password',
+    advanced: 'Advanced Options',
+    timeout: 'Connection Timeout (Seconds)',
+    connectBtn: 'Connect Server',
+    connecting: 'Connecting...',
+    connectedSuccess: 'Connected Successfully',
+    selectLibrary: 'Select Library to Sync',
+  },
+  toasts: {
+    localRefreshCancelled: 'Local refresh cancelled.',
+    cloudRefreshCancelled: 'Cloud refresh cancelled.',
+    strategySaved: 'Selected strategy "{strategy}" has been saved.',
+    mappingSaved: 'Path mapping rules have been saved.',
+    backupSaved: 'Backup settings have been saved.',
+    backupFailed: 'Failed to save backup settings.',
+    scheduleDisabled: 'Scheduled tasks disabled.',
+    scheduleEmpty: 'Scheduled tasks disabled (Empty Cron).',
+    scheduleStarted: 'Scheduled task started successfully.',
+    scheduleFailed: 'Failed to update schedule.',
+    syncFailed: 'Sync failed. Please check connection.',
+    librarySwitched: 'Library switched to {library}',
+    connectedTo: 'Successfully connected to {name}',
+    connectionCancelled: 'Connection cancelled by user.',
+    loginFailed: 'Login failed. Please check credentials.',
+    loggedOut: 'Successfully logged out.',
+  }
+};

sample-front-end/locales/es.ts

@@ -0,0 +1,162 @@
+
+
+
+export const es = {
+  app: {
+    // title and manager are no longer used for branding
+    title: 'PlexSync',
+    manager: 'Gestor',
+    footer: '© {year} PMS Playlist Sync. Conectado al backend Docker.',
+  },
+  auth: {
+    title: 'Iniciar Sesión',
+    subtitle: 'Ingrese para gestionar sus sincronizaciones',
+    username: 'Usuario',
+    password: 'Password',
+    loginBtn: 'Entrar',
+    logout: 'Salir',
+    loggingIn: 'Verificando...',
+    invalidCredentials: 'Usuario o contraseña incorrectos',
+    welcome: 'Bienvenido, {user}',
+  },
+  common: {
+    save: 'Guardar',
+    cancel: 'Cancelar',
+    revert: 'Revertir',
+    delete: 'Eliminar',
+    done: 'Hecho',
+    loading: 'Cargando...',
+    refresh: 'Actualizar',
+    close: 'Cerrar',
+    none: 'Ninguno',
+    disabled: 'Deshabilitado',
+    add: 'Añadir',
+  },
+  server: {
+    local: 'Servidor Local',
+    cloud: 'Servidor Nube',
+    playlists: '{count} Listas',
+    notConnected: 'No Conectado',
+    connectionFailed: 'Conexión fallida',
+    connecting: 'Conectando...',
+    waiting: 'Esperando...',
+    syncing: 'Sincronizando...',
+    noPlaylists: 'No se encontraron listas.',
+    cancelRefresh: 'Cancelar',
+    refreshPlaylists: 'Actualizar Listas',
+  },
+  playlist: {
+    trackCount: 'Pistas',
+    lastUpdated: 'Actualizado',
+  },
+  dashboard: {
+    mapping: 'Mapeo',
+    backup: 'Respaldo',
+    autoSync: 'Auto-Sync',
+    watch: 'Vigilar',
+    watchModeActive: 'Modo Vigía: Activo',
+    watchModeDisabled: 'Modo Vigía: Desactivado',
+    notSet: 'No Def.',
+    retain: 'Retener: {count}',
+    keep: 'Guardar {count}',
+    connected: 'Conectado a Plex',
+    disconnected: 'Desconectado',
+    synchronizing: 'SINCRONIZANDO',
+    syncComplete: 'SINCRONIZACIÓN COMPLETA',
+  },
+  strategies: {
+    title: 'Estrategia de Sync',
+    localOverwrite: {
+      label: 'Sobreescribir Local',
+      desc: 'La lista local sobreescribe la nube. (Sin Diff)',
+    },
+    cloudOverwrite: {
+      label: 'Sobreescribir Nube',
+      desc: 'La lista de la nube sobreescribe la local. (Sin Diff)',
+    },
+    mergeLocal: {
+      label: 'Fusión (Prioridad Local)',
+      desc: 'Fusionar ambas. Conflictos resueltos a versión Local.',
+    },
+    mergeCloud: {
+      label: 'Fusión (Prioridad Nube)',
+      desc: 'Fusionar ambas. Conflictos resueltos a versión Nube.',
+    },
+    syncNow: 'Sincronizar Ahora',
+    syncing: 'Sincronizando...',
+    saveWarning: 'Guarde los cambios pendientes (Respaldos/Mapeo) antes de sincronizar.',
+  },
+  mapping: {
+    title: 'Mapeo de Rutas',
+    simple: 'Mapeo Simple',
+    regex: 'Reglas Regex',
+    simpleTitle: 'Mapeo de Rutas',
+    simpleSubtitle: 'Mapear rutas locales a la nube usando coincidencia simple',
+    regexPre: 'Pre-Procesamiento (Antes de Sync)',
+    regexPost: 'Post-Procesamiento (Después de Sync)',
+    localPath: 'Ruta Local',
+    cloudPath: 'Ruta Nube',
+    pattern: 'Patrón',
+    replace: 'Reemplazo',
+    saveRules: 'Guardar Reglas',
+    noRules: 'No hay reglas definidas.',
+  },
+  backup: {
+    title: 'Retención de Respaldo',
+    enable: 'Habilitar Respaldos',
+    enableDesc: 'Crear copia antes de cambios',
+    maxVersions: 'Máx versiones a guardar:',
+    autoDelete: 'El más antiguo se borra automáticamente',
+  },
+  schedule: {
+    title: 'Tareas Programadas',
+    cron: 'Cron',
+    daily: 'Diario',
+    weekly: 'Semanal',
+    enableCron: 'Habilitar Cron',
+    enableDaily: 'Habilitar Ejecución Diaria',
+    enableWeekly: 'Habilitar Ejecución Semanal',
+    watchLocal: 'Vigilar Cambios Locales',
+    watchDesc: 'Auto-sync cuando la lista local se actualiza',
+    schedule: 'Horario',
+    notConfigured: 'No configurado',
+    today: 'Hoy',
+    tomorrow: 'Mañana',
+  },
+  connection: {
+    titleConnected: 'Servidor Conectado',
+    titleConnect: 'Conectar Servidor Plex',
+    serverDetails: 'Detalles del Servidor',
+    authentication: 'Autenticación',
+    protocol: 'Protocolo',
+    address: 'Dirección IP o Dominio',
+    port: 'Puerto',
+    token: 'X-Plex-Token (Opcional)',
+    username: 'Usuario / Email',
+    password: 'Password',
+    advanced: 'Opciones Avanzadas',
+    timeout: 'Tiempo de espera (Segundos)',
+    connectBtn: 'Conectar Servidor',
+    connecting: 'Conectando...',
+    connectedSuccess: 'Conectado Exitosamente',
+    selectLibrary: 'Seleccionar Librería',
+  },
+  toasts: {
+    localRefreshCancelled: 'Actualización local cancelada.',
+    cloudRefreshCancelled: 'Actualización nube cancelada.',
+    strategySaved: 'Estrategia seleccionada "{strategy}" guardada.',
+    mappingSaved: 'Reglas de mapeo guardadas.',
+    backupSaved: 'Configuración de respaldo guardada.',
+    backupFailed: 'Error al guardar configuración de respaldo.',
+    scheduleDisabled: 'Tareas programadas deshabilitadas.',
+    scheduleEmpty: 'Tareas programadas deshabilitadas (Cron Vacío).',
+    scheduleStarted: 'Tarea programada iniciada exitosamente.',
+    scheduleFailed: 'Error al actualizar horario.',
+    syncFailed: 'Fallo en sync. Revise conexión.',
+    librarySwitched: 'Librería cambiada a {library}',
+    connectedTo: 'Conectado exitosamente a {name}',
+    connectionCancelled: 'Conexión cancelada por usuario.',
+    loginFailed: 'Fallo de inicio de sesión. Verifique credenciales.',
+    loggedOut: 'Sesión cerrada exitosamente.',
+  }
+};

sample-front-end/metadata.json

@@ -1,5 +1,5 @@
 {
-  "name": "PlexSync Manager",
+  "name": "PMS Playlist Sync",
   "description": "A modern dashboard to synchronize and manage playlists between Local and Cloud Plex servers.",
   "requestFramePermissions": []
 }

sample-front-end/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "plexsync-manager",
+  "name": "pms-playlist-sync",
   "private": true,
   "version": "0.0.0",
   "type": "module",

sample-front-end/services/api.ts

@@ -3,7 +3,9 @@
 
 
 
-import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, SyncStrategy, PathMappingConfig, ScheduleSettings, ScheduleMode, BackupSettings } from '../types';
+
+
+import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, SyncStrategy, PathMappingConfig, ScheduleSettings, ScheduleMode, BackupSettings, LoginCredentials, AuthResponse } from '../types';
 import { MOCK_LOCAL_PLAYLISTS, MOCK_CLOUD_PLAYLISTS } from './mockData';
 
 const SIMULATE_DELAY_MS = 800;
@@ -229,5 +231,27 @@ export const apiService = {
         resolve({ data: null, status: 'success', message: 'Backup settings saved' });
       }, 500);
     });
+  },
+
+  // Mock Login - In a real app this would POST to a backend
+  login: async (creds: LoginCredentials): Promise<ApiResponse<AuthResponse>> => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        // Hardcoded mock credentials for demonstration
+        if (creds.username === 'admin' && creds.password === 'password') {
+          resolve({ 
+            data: { token: 'mock-jwt-token-123', username: 'admin' }, 
+            status: 'success', 
+            message: 'Login successful' 
+          });
+        } else {
+          resolve({ 
+            data: { token: '', username: '' }, 
+            status: 'error', 
+            message: 'Invalid credentials' 
+          });
+        }
+      }, 1000);
+    });
   }
 };

sample-front-end/translations.ts

@@ -0,0 +1,11 @@
+
+import { en } from './locales/en';
+import { es } from './locales/es';
+
+export const translations = {
+  en,
+  es
+};
+
+export type Language = keyof typeof translations;
+export type TranslationStructure = typeof en;

sample-front-end/types.ts

@@ -110,3 +110,13 @@ export interface ApiResponse<T> {
   status: 'success' | 'error';
   message?: string;
 }
+
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
+export interface AuthResponse {
+  token: string;
+  username: string;
+}