Deploy ParleDowntime Pro Space

.gitignore

@@ -0,0 +1,3 @@
+monitor_metrics.db
+*.db
+__pycache__/

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "python.testing.unittestArgs": [
+        "-v",
+        "-s",
+        "./__pycache__",
+        "-p",
+        "*test.py"
+    ],
+    "python.testing.pytestEnabled": false,
+    "python.testing.unittestEnabled": true
+}

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-slim
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy requirements and install
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Hugging Face Spaces uses port 7860 by default
+ENV PORT=7860
+EXPOSE 7860
+
+# Run the application
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:app

README.md

@@ -0,0 +1,36 @@
+---
+title: StatusPilot
+emoji: 🚀
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
+# StatusPilot Cloud Version
+
+This version is optimized for 24/7 cloud deployment on Hugging Face Spaces.
+
+## 🚀 Deployment Instructions (Hugging Face)
+
+1. **Go to your Space**: [huggingface.co/spaces/ChotuStatus/StatusPilot](https://huggingface.co/spaces/ChotuStatus/StatusPilot)
+2. **Click Files**: Go to the "Files and versions" tab.
+3. **Edit README.md**: Make sure the **top part** of your README.md looks exactly like the code above (between the `---` lines).
+4. **Upload All Files**: Ensure you have uploaded:
+   - `app.py`
+   - `requirements.txt`
+   - `Dockerfile`
+   - `security.py`
+   - `static/` (folder)
+   - `templates/` (folder)
+   - `config.json`
+   - `license.dat`
+5. **Restart**: Once the `README.md` has the `sdk: docker` line, Hugging Face will start building your dashboard!
+
+## 🔧 Features
+- **Neural AI Service Addition**: Add services using natural language.
+- **24/7 Monitoring**: Runs continuously in the cloud.
+- **Auto-Activation**: Uses your existing `license.dat`.
+
+## ⚠️ Important Note
+The **Outlook Alert** feature requires the Windows Outlook Desktop app and will not function in the cloud. Please use **SMTP (Email)** alerts for cloud operation.

app.py

@@ -0,0 +1,1064 @@
+import os
+import base64
+import sys
+import json
+import time
+import sqlite3
+import threading
+import requests
+import io
+import re
+import xlsxwriter
+import smtplib
+import imaplib
+from email.mime.text import MIMEText
+from email.mime.multipart import MIMEMultipart
+from email.header import Header
+from datetime import datetime, timedelta
+import ssl
+import socket
+from flask import Flask, request, jsonify, render_template, send_file, session, Response
+
+try:
+    import win32com.client
+    OUTL_AVAIL = True
+except ImportError:
+    OUTL_AVAIL = False
+
+try:
+    import security
+except ImportError:
+    print("Warning: security.py not found. License bypass may occur or app might fail.")
+
+def get_license_status():
+    lic_file = 'license.dat'
+    if not os.path.exists(lic_file):
+        return False, "Missing license.dat file."
+        
+    try:
+        with open(lic_file, 'r') as f:
+            lic_data = json.load(f)
+            email = lic_data.get('email', '')
+            key = lic_data.get('key', '')
+            if not security.verify_license_key(email, key):
+                return False, "Invalid License Key."
+            return True, f"Licensed to {email}"
+    except Exception as e:
+        return False, f"License read error: {e}"
+
+# --- SMART PATHING FOR CLOUD DEPLOYMENT ---
+import os
+
+# Detect if we are in a 'flat' environment (all files in root) or standard (templates/static)
+base_dir = os.path.dirname(os.path.abspath(__file__))
+template_dir = os.path.join(base_dir, 'templates')
+static_dir = os.path.join(base_dir, 'static')
+
+# Fallback to root if folders don't exist (helps users who can't create folders)
+if not os.path.exists(template_dir):
+    template_dir = base_dir
+if not os.path.exists(static_dir):
+    static_dir = base_dir
+
+app = Flask(__name__, 
+            template_folder=template_dir,
+            static_folder=static_dir,
+            static_url_path='/static')
+# CRITICAL: Use a custom secret key from environment or a strong default
+app.secret_key = os.environ.get('SESSION_SECRET', os.urandom(32).hex())
+
+# --- VERSIONING ---
+VERSION = "5.1.0-CRYSTAL-PRO"
+
+@app.route('/api/version')
+def get_version():
+    return jsonify({"version": VERSION})
+
+# --- CLOUD SESSION HARDENING (IFRAME COMPATIBLE) ---
+app.config.update(
+    SESSION_COOKIE_HTTPONLY=True,
+    SESSION_COOKIE_SECURE=True,     # Must be True for SameSite=None
+    SESSION_COOKIE_SAMESITE='None', # Allows cookie in iframes (HF Spaces)
+    PERMANENT_SESSION_LIFETIME=timedelta(days=30),
+    SESSION_REFRESH_EACH_REQUEST=True
+)
+
+def check_auth():
+    """Verify if the session is authenticated via Master Key."""
+    master_key = os.environ.get('MASTER_KEY')
+    # If no key is set at all (None), we allow access (local mode)
+    if master_key is None:
+        return True
+    # If a key is set but empty, it's a security risk - require auth anyway
+    if master_key.strip() == "":
+        return False
+    return session.get('authenticated') == True
+
+@app.before_request
+def protect_apis():
+    """Protect all /api routes except for version, auth and static routes."""
+    if request.path.startswith('/api/') and not request.path.startswith('/api/auth/') and not request.path == '/api/version':
+        if not check_auth():
+            return jsonify({"error": "Unauthorized Access", "code": 401}), 401
+
+@app.route('/api/auth/status')
+def auth_status():
+    master_key = os.environ.get('MASTER_KEY')
+    has_key = master_key is not None and master_key.strip() != ""
+    return jsonify({
+        "required": has_key,
+        "authenticated": check_auth()
+    })
+
+@app.route('/api/auth/login', methods=['POST'])
+def login():
+    data = request.json
+    key = data.get('key', '').strip()
+    master_key = os.environ.get('MASTER_KEY', '').strip()
+    
+    if master_key and key == master_key:
+        session['authenticated'] = True
+        session.permanent = True
+        return jsonify({"success": True})
+    return jsonify({"success": False, "message": "Invalid Master Access Key"})
+
+@app.route('/api/license/status')
+def is_licensed():
+    # check_auth is already handled by @app.before_request
+    valid, msg = get_license_status()
+    return jsonify({"licensed": valid, "message": msg})
+
+@app.route('/api/license/activate', methods=['POST'])
+def activate_license():
+    data = request.json
+    email = data.get('email', '')
+    key = data.get('key', '')
+    if security.verify_license_key(email, key):
+        with open('license.dat', 'w') as f:
+            json.dump({"email": email, "key": key}, f)
+        return jsonify({"success": True})
+    return jsonify({"success": False, "message": "Invalid Purchase Email or Key"})
+
+
+def check_ssl(hostname):
+    """Check SSL certificate expiration and status."""
+    try:
+        context = ssl.create_default_context()
+        with socket.create_connection((hostname, 443), timeout=10) as sock:
+            with context.wrap_socket(sock, server_hostname=hostname) as ssock:
+                cert = ssock.getpeercert()
+                expiry_str = cert.get('notAfter')
+                expiry_date = datetime.strptime(expiry_str, '%b %d %H:%M:%S %Y %Z')
+                days_left = (expiry_date - datetime.now()).days
+                if days_left < 7:
+                    return False, f"SSL Warning: Expiring in {days_left} days", days_left
+                return True, f"SSL Valid ({days_left} days left)", days_left
+    except Exception as e:
+        return False, f"SSL Error: {str(e)}", 0
+
+
+DEFAULT_BROWSER_HEADERS = {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
+    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8',
+    'Accept-Language': 'en-US,en;q=0.9',
+    'Cache-Control': 'no-cache',
+    'Pragma': 'no-cache'
+}
+
+CONFIG_FILE = 'config.json'
+DB_FILE = 'monitor_metrics.db'
+LAST_ALERT_METRICS = {}
+SERVICE_STATE_CACHE = {}
+FAIL_COUNT_CACHE = {}
+SUCCESS_COUNT_CACHE = {}
+DOWN_START_TIME = {}
+FLAP_COUNTER = {}
+
+def get_db_connection():
+    conn = sqlite3.connect(DB_FILE, check_same_thread=False)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+def init_db():
+    conn = get_db_connection()
+    c = conn.cursor()
+    c.execute('''CREATE TABLE IF NOT EXISTS status_history 
+                 (timestamp DATETIME, name TEXT, url TEXT, location TEXT, is_up INTEGER, response_time REAL, message TEXT)''')
+    conn.commit()
+    conn.close()
+
+PARLE_TECH_LOGO_B64 = "iVBORw0KGgoAAAANSUhEUgAAAJwAAABoCAYAAAAEu5lCAAAPh0lEQVR4nO2da2wc13XHf/Pa9y5NkaEokXqQlk05rqvYjJWktStZLoJEQOUPqYICTdJGDZAYRVIgsQ23Hww6BYpWzIe2aAO3TWigTYuksoE4CZQiqSzbilNUCtMaaVIwtmlRpkSK5UPa5+zOqx9m+RDJ3Z3ZXc5S5P0BC0jcnbt3Zv733HvOuXNWchzHQSAICLnVHRBsL4TgBIEiBCcIFCE4QaAIwQkCRQhOEChCcIJAEYITBIoQnCBQhOAEgSIEJwgUIThBoAjBCQJFCE4QKEJwgkARghMEihCcIFCE4ASBIgQnCBQhOEGgCMEJAkUIThAoQnCCQBGCEwSKEJwgUNSgv9CwbcYzesX3+5MRNLmxcWDYNi9Nm4RUONEVqruNawUb3SyteS+ihtgdlevu58pr0K7FaI/YDZ8zwEweFoy87+Miaoh98WCkEKjgFoVw8kq0sm2VYVAxONnu8MW9al03Yjxr8efXJY7FTE501dfX8azF6asOI5lo5Q/JDp9JFnhil8ZASvPc9vdnTb58VWPUUDmVLPHMXpl98cYF98cTJUZyUbD9HTeomZwdgK5Yw12oSWumVLX8zeu9gFFL5elZjQ+9YfHynOGracO2+VnWYdRQmbMVxtL+jl9DpX6W+/q1TJSDv1T5i8slJnKm77Y7ZKux/q1gqa1qfV7nNWoFZ3cCn1IBMHEtmWayUy3c8tbZYnLp/VFUnrpichqDYx3eLMi1gs3FjAWyxhu6xCtzli/rsx6Dytp+LvXVdvv69IwGGHwx6mN69KlPP1Tq82qum1Hujxm0RyIEYX9aIzgAGY7FTE4PpNa89cK1EievaWDDqK3yzzMGxzq8NatbDsOZyNKxh3SHj+TM+tcoJqDAl3ZH14h+Imfy5Ss2Ixn370/PatwTM+peNzYNG073wbGOtdd2fRobkH7YlF7qb+8Oca5vefi/oUueptaJnMm3550lC4nsHnvpps9FjUf2xVWe2SvzZFvZCbLhRwuW/6l1gzDsjTnvRtiUggO4MyJxKrkssrF8bcHplsOZBemWsxo1VC5mrA27+PviKg+1K0vfOZ610a0Wl9yzQTY2Z9m/TSu43VGZu6O4U6Olkq6xsF1yFooqg5rJZ5IFTsUNsF0RXFho3uJ8NQlF4mOSG464LIe42qCfspXZtIIDSCnep6bxrMXzc+7Udiji8MQujcMR16q96MS4lKlzxG/kFWpy23O2shQSsTWpuY03idYIrujU9NCuFWy+Pqu5n7Xhnhoxoqm8w9lcEoC7ozCQ0rgrpbhuUc7hlwV8r61iJQcKtYWatRxetGJQcPiQbNPjYQ2+05ah4LgiaSbl/vbgNCWY3Gxa56VWwbBtLt20GS1qEIbjis1ApPKInciZvHjdgaLD8YTDByLu33s0OBU3GMmpjGQ0Ds8U+Wxfc095Imfywyl3UBCW6NRsIop3EcVKTV5rhd3r9JVZkwfytQfYQEzj4XYlMHG2RnA1llNuNqJs3YDuNouBVOVQg245/I0RgjB0x0x+vcs9rf6EwolwgRFLhYLD/6QlDLs5aSSAsZt5Tl9TGbmhAQ5EJe7vVDyFYK7LNtBk67ZI0eFr05Han7PgY20FHm6vkk1pMq2zcEWH4ekw49nc0p8uyyFGiyrkVVBcsR1PODzVU9m6GbbNK3MWpBVISHy0jSVBabLMwc4QzEuQdhg3VS4sWBzr8Ce40aIbgN5/eVVf0ytuqgVDCZ2PdoZrtlcy3TbZCG+2uKJNC1fTiwN89b9bQMun1Bezq0eXs3xhEhJf2l89UzCetfiHG+7VOyUZPNh2q5j6EwrPdRT5XDrE2azE4eum56zFEkWH0aLCKJUtwZM9RX6/V9s066bjCYfdiWLVzyxkHT61J7igL7RScIsjzVp1g0I2xCWGYjp/cjCMJle+IEuhkAUVFOhIWeyOqmucg46wDDEJ8g4XCyHG0ob3dNdKK7Gyr8pyXO+ve2w+d1fYl9gGTYvRjfLZLHiyx+JodwDZeJ+01MKdSpo8dfet4nC3J0lQxZoscq1g8/2b5f9YMHw1zPBVWOt8y4A71ZzNSpzwk1+1ZIg5nNm7bD11s8Q3r0oMTbvT579lJe6bMTna7TOltXqwNYtyu81crzaLFjkNMig2e+MWA231j0LdchiZUddanko3UrGhJHNxVuYjXbXzq/mSu3YcNC06ZVZ8XuV3JIMrOZORjMrZeYXD0RJ9yQZytk2gI2tAgDs/6qGlvZs16h99EzmTb06aUNJAsRkM2RzqsCuGGaZMkxeNGGTgjaLMpZs2++J1fz0DKY0THTlGMu4lHJoO875IgX39rbukhdDmFhtsAqehXnTL4bvz7rR4Kmny3KCKJlc+nZl8mP6f5xgmzmhB5dX/K/JYd2NTzvH9UYb0IkNXo2DJ/P1ChIN+1ofbkM01wXvEsG1+PG0yuiBDyJ2aawmnKwbHFz0yxeY/MgqvzzS2q0OTZY7sUBiMuu2cnVf4wZTka6NAtGQSlTZm3G+29Ru0ysLpNkTqvxjXCjYvZNwF+iOyxNGkgRcnY1dM4tQdJUamVUYtlZ/dNDnaXbuvqYhCpX3bR7tD/GG6wKkJFXSbL0zL3Nfm0YHQbV4uholfLnCnVnuzJMCHe3ZU3wpuyaDbvDpvMZmZ99QmwIM7k/QnNj7j0NIptVOrb8vQOxmbs/MhiMCRjgJH9njbaNifUHiorcjItHva/522mWhkc2aZYz0aT97MMXwjDiV4dd6q6kBoukHKiUFEYrQgM/q2DNQOGBOROZ8s0RWrIeY4DL0d9tYmgCNzJl6iP+Ht443QGpvruKPwSs5/uHsiZ/JP7wJlg3DvHd7b0GSZvpQCKff4kWmV70zWPi4tVc/F7YurHN+j8UjEgYJ7s78zWXkDpBHROG+4n6WAez28vPTqAzRfktz2sh7bW3wFSOAW7r6ExNABVy1HdvgXXFRSOdypszdeoDsq8ZjP2FdfUubMXSY/v+GK6N5OtXq8ypFJORK1HoVyp9ASR+bddnclFRZ0dd3p78E2mef6Skx72ImykkhMoS9ZWSAnOgz2xuvb93dfor4n5PwiiV+EXp+xtMHpMYeRqRCPtDs8c5fhP7ArWMPmc2MEWxohOEGgCMFVwnDI5NzdFmZ2bbkHQX0IwVVCk0igQS7oR+381wa5nbhtU1urWaxb8tW3/aeV+iIGn9xDTadgbK7E6XF4R6/+HZ/cqfOJA962Kxm2zTfeKnLhmsTzmRAQYdEjPpnM8fG7wzzWXdmDfPXdNP84HeHNWYdH99k8vj/quUbI372j863JMOcNh3OHrEC2mm8ZwQFMZWTOvyOBz4Dy+XiIh9oKNbMOUwa8Oetw4UYVx96Q+aBpsdArV73xEzmTv/1FkeG3olQK0J7Jxjkz5f77yQM5nrg3vqbN8YLGyFQIbsCBqA77q5/DSi7OypyfdMCQmT8YzMPbW0ZwC7pMMZ0FR4X1llyhFdvBS6vKhSUi7FBri1QydCC89vh1KDgmlS7vy3MGQxdtLtxYlY5bWUFp1VQ+/FaU43uqZBnqyNp0YLh91GyKCyXo3ng5bBnBdcXg5HtjPNh96xrohqHw0hWF56/IcAcM70rzW/0RpvMrRZPlnkp1OFZsobqnI8Wf/kq6Zl/274hVTGu9Ml3iz163uJBbFtvD7ylysl/hV2NuP9ojNuNZix9MSXzhigpT8Om9Ou9NVXkwpoGtXg0d65MtIzhwU0z74rcKZyJn8vqc620+ahR4f2eYgY4QAx3+g7hdMeiKeS0Qs5axtMEz/+VwoRReskjDB7L80WCivHZabFtmICUzkILPD8BL4zkOtmmVp2ipXMLpNuD26GUDRCWV2XLO9pwW5abTukIzXx8rceGGtmRRRgaLPPFgquZC/bH+ePUBEnA+tBG2lIWrRLdjlpPkeaSSz/xtAUJ5GwqN3dRXpkv89IoM8661/cZRi48faNJDLrn6+nc5Z7vi97YzqincPkMjaAyHSKl5udOfvKtzrrxue7hf5v3doaaEIEKG5Toxpn/VJAKsC7eIEFwAGLbNfFaGjCuKz+4q0d++LSaXNWzPs/bDKstRa/v4elbrx1ezXJzXQI1Cyqane+MCrO0Rrw5Ens644w4CdTuUegiIQqNOghrl3HSBc69Z8Fr1tNN+Jcdf/lqMx/pvfRzMMcMsZg8eDRXZpW1AnQU1yvMTec7/y5znQy7b7wlcAVtecE1BjULtWC+mbZOtsKnyXMnjdu96kMrOhx7jMpvvafuVCMH5odrCvMq0lC4GuMfVj/MQ4FS69JWBf2MLCFkapIsQjZHRM7gJco+ki9Blcf43FI72Raus4Wwgtu7aLBWWyumwGOeyDlNphwGPVdm90JvLMpnVePyQxl/9prtpwMta86lLOYb/Nw7Xqxe9aSZb3kvVdZsZ23X/e3NZkpHGQgGaLFd9rUdfl8LjuyKuePVY0y3eZHz5casFfblUWa1+qlkn0BgcbAPBtUdb/xzC7qhMl1yuNJ0u8tNJiZlmbXszHHpz2SY1tvFsecGtZKUl8IKeac5Uo8kyD/Q6sNN1HJ4ds/lFgNPYZmL7CM5S67METapG9MG9ET4dL89feZlHXrMYm2vO1vVJW6m/n+kibKQHvYrtI7gyGb2OH1GQGg81dMXgUw/I9CbKJbWmwhz8nulJdBM5k7Gb+U35yzJ+2XaCqwtnecFl2Lan13oc7Qsz9IAC7Qoopiu6F0IM/XtxXeHN5OErl9Ls/6rFwW/D+MIG7XRRNu5HU1azLcIieqYIVpRJWyFZpfz+uigmzCg88i0VFA/rrlIYevPlMMraqeoPPhAlEs7wiR+WnZkFi2f/M8yzP7Hc9mM2vbLFZFYrT5PlrMVkmB+9VaC/fZ0qAWqUmqXhq1EIrsL0lhfcQmGF5VCj/uNwK9c3lrcb05uvXhL/d9+XpLcjzdGXLZiMLbdtKVCCNeVOSkBXgTu7KkxI6SIUltNnXrlhxDamknoVtrzg2qMhundkIVTk0U6bnjbvYZJIMgyd0Gv7czYGuhR2papb0iN7Uji/B6+8U+Rf39T47tt5JuUELFiuVQWI2TzaDZ+/3+b4/ui6cb5kRIMuCyji6tG7AzDYVqS3zWIyqdATC2ar0jaqLbK4DvPrANQTMKvPyZjImejlCkmRiOyjjFi959bosf7ZRoITbAaElyoIFCE4QaAIwQkCRQhOEChCcIJAEYITBIoQnCBQhOAEgSIEJwgUIThBoAjBCQJFCE4QKEJwgkARghMEihCcIFCE4ASBIgQnCBQhOEGgCMEJAkUIThAoQnCCQBGCEwSKEJwgUITgBIHy/xBrrmEbfk0tAAAAAElFTkSuQmCC"
+
+DEFAULT_SMTP_SENDER = os.environ.get("SMTP_SENDER", "smadapathi04@gmail.com")
+DEFAULT_SMTP_PASSWORD_RAW = os.environ.get("SMTP_PASSWORD", "")
+DEFAULT_SMTP_PASSWORD_ENC = security.encrypt_secret(DEFAULT_SMTP_PASSWORD_RAW) if DEFAULT_SMTP_PASSWORD_RAW else ""
+DEFAULT_EMAIL_RECIPIENTS = ["suresh@parletech.com", "smadapathi04@gmail.com"]
+
+@app.after_request
+def add_no_cache_headers(response):
+    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate, max-age=0'
+    response.headers['Pragma'] = 'no-cache'
+    response.headers['Expires'] = '0'
+    return response
+
+@app.route('/static/parle_tech_logo.png')
+def serve_parle_logo():
+    img_data = base64.b64decode(PARLE_TECH_LOGO_B64)
+    return Response(img_data, mimetype='image/png')
+
+def load_config():
+    config = {}
+    if os.path.exists(CONFIG_FILE):
+        try:
+            with open(CONFIG_FILE, 'r', encoding='utf-8') as f:
+                config = json.load(f)
+        except Exception:
+            config = {}
+
+    if config.get("services_to_monitor") is None:
+        config["services_to_monitor"] = [
+            {"name": "Microsoft 365", "url": "https://status.office365.com", "location": "Global", "type": "http_code", "expected_code": 200},
+            {"name": "RingCentral", "url": "https://status.ringcentral.com", "location": "Global", "type": "http_code", "expected_code": 200},
+            {"name": "Skybridge Healthcare", "url": "https://www.skybridgehealthcare.com/", "location": "Primary Web", "type": "http_code", "expected_code": 200},
+            {"name": "Skybridge Aviation", "url": "https://skybridgeaviation.com/", "location": "Primary Web", "type": "http_code", "expected_code": 200},
+            {"name": "Skybridge Resources", "url": "https://skybridgeresources.com/", "location": "Primary Web", "type": "http_code", "expected_code": 200},
+            {"name": "BetterLending Website", "url": "https://betterlending.com/", "location": "Primary Web", "type": "http_code", "expected_code": 200}
+        ]
+
+    config.setdefault("check_interval", 60)
+    config.setdefault("consecutive_failures_required", 3)
+    config.setdefault("retry_delay_seconds", 3)
+    config.setdefault("cooldown_minutes", 60)
+    config.setdefault("alert_mode", "SMTP")
+
+    # Senior DevOps Fallback to guarantee credentials even in stateless Docker
+    if not config.get("smtp_sender"):
+        config["smtp_sender"] = os.environ.get("SMTP_SENDER", DEFAULT_SMTP_SENDER)
+    if not config.get("smtp_password"):
+        config["smtp_password"] = os.environ.get("SMTP_PASSWORD", DEFAULT_SMTP_PASSWORD_ENC)
+        
+    if not config.get("email_recipients"):
+        env_recips = os.environ.get("EMAIL_RECIPIENTS", "").strip()
+        if env_recips:
+            config["email_recipients"] = [r.strip() for r in env_recips.split(',') if r.strip()]
+        else:
+            config["email_recipients"] = DEFAULT_EMAIL_RECIPIENTS
+
+    return config
+
+def save_config(config):
+    if "smtp_password" in config and config["smtp_password"]:
+        pwd = str(config["smtp_password"]).strip()
+        if pwd and not pwd.startswith("••••") and not pwd.startswith("ENC:"):
+            config["smtp_password"] = security.encrypt_secret(pwd)
+    with open(CONFIG_FILE, 'w', encoding='utf-8') as f:
+        json.dump(config, f, indent=4)
+
+def check_service_logic(service):
+    url = service.get("url", "")
+    check_type = service.get("type", "http_code")
+    start_time = time.time()
+    try:
+        if check_type == "http_code":
+            expected = service.get("expected_code", 200)
+            response = requests.get(url, headers=DEFAULT_BROWSER_HEADERS, timeout=12, allow_redirects=True)
+            latency = round((time.time() - start_time) * 1000, 2)
+            if response.status_code != expected:
+                if response.status_code in [403, 406, 429, 503]:
+                    sess = requests.Session()
+                    sess.headers.update(DEFAULT_BROWSER_HEADERS)
+                    r2 = sess.get(url, timeout=12, allow_redirects=True)
+                    if r2.status_code == expected:
+                        return True, "OK (WAF Bypass)", round((time.time() - start_time) * 1000, 2)
+                return False, f"HTTP {response.status_code}", latency
+            return True, "OK", latency
+        elif check_type == "json_status":
+            response = requests.get(url, headers=DEFAULT_BROWSER_HEADERS, timeout=12, allow_redirects=True)
+            latency = round((time.time() - start_time) * 1000, 2)
+            data = response.json()
+            key = service.get("key_to_check", "")
+            expected_val = service.get("expected_value", "")
+            val = data
+            for k in key.split('.'):
+                val = val.get(k)
+                if val is None: break
+            if str(val).lower() != str(expected_val).lower():
+                return False, f"JSON {val}", latency
+            return True, "OK", latency
+        elif check_type == "m365_mail":
+            sender = service.get('sender_email')
+            pwd = service.get('sender_password')
+            receiver = service.get('receiver_email', sender)
+            imap_server = service.get('imap_server', 'outlook.office365.com')
+            
+            pulse_id = f"StatusPilot-Pulse-{int(time.time())}"
+            msg = MIMEMultipart()
+            msg['From'] = sender
+            msg['To'] = receiver
+            msg['Subject'] = pulse_id
+            msg.attach(MIMEText(f"Mail Flow Heartbeat sent at {datetime.now()}", 'plain'))
+            
+            try:
+                with smtplib.SMTP('smtp.office365.com', 587, timeout=15) as server:
+                    server.starttls()
+                    server.login(sender, pwd)
+                    server.sendmail(sender, receiver, msg.as_string())
+                
+                with imaplib.IMAP4_SSL(imap_server) as mail:
+                    mail.login(receiver, service.get('receiver_password', pwd))
+                    mail.select('inbox')
+                    typ, data = mail.search(None, '(SUBJECT "StatusPilot-Pulse-")')
+                    if typ == 'OK' and data[0]:
+                        return True, "Mail Flow Active (Pulse Received)", 120
+                
+                return True, "Pulse Sent (Awaiting Receipt)", 50
+            except Exception as e:
+                return False, f"Mail Flow Error: {str(e)}", 0
+        elif check_type == "ssl":
+            hostname = url.replace('https://', '').replace('http://', '').split('/')[0].split(':')[0]
+            ok, msg, days = check_ssl(hostname)
+            latency = round((time.time() - start_time) * 1000, 2)
+            return ok, msg, latency
+    except requests.exceptions.Timeout:
+        latency = round((time.time() - start_time) * 1000, 2)
+        return False, "Connection Timeout (12s)", latency
+    except requests.exceptions.RequestException as re:
+        latency = round((time.time() - start_time) * 1000, 2)
+        return False, f"Connection Failed: {str(re)}", latency
+    except Exception as e:
+        latency = round((time.time() - start_time) * 1000, 2)
+        return False, f"Engine Error: {str(e)}", latency
+    return True, "OK", 0
+
+def check_service_with_retry(service, retry_delay=3):
+    """Immediate re-check logic to eliminate single-packet transient glitches."""
+    is_up, msg, latency = check_service_logic(service)
+    if not is_up:
+        time.sleep(retry_delay)
+        is_up, msg, latency = check_service_logic(service)
+        if not is_up:
+            msg = f"{msg} (Confirmed)"
+    return is_up, msg, latency
+
+def background_monitor_thread():
+    global LAST_ALERT_METRICS, SERVICE_STATE_CACHE, FAIL_COUNT_CACHE, SUCCESS_COUNT_CACHE, DOWN_START_TIME, FLAP_COUNTER
+    while True:
+        try:
+            config = load_config()
+            services = config.get("services_to_monitor", [])
+            interval = config.get("check_interval", 60)
+            failures_required = config.get("consecutive_failures_required", 3)
+            retry_delay = config.get("retry_delay_seconds", 3)
+            cooldown_secs = config.get("cooldown_minutes", 60) * 60
+
+            for svc in services:
+                name = svc.get('name', 'Unknown')
+                loc = svc.get('location', 'Global')
+                url = svc.get('url', '')
+
+                is_up, msg, latency = check_service_with_retry(svc, retry_delay=retry_delay)
+                previous_state = SERVICE_STATE_CACHE.get(name, True)
+
+                if is_up:
+                    FAIL_COUNT_CACHE[name] = 0
+                    succ_cnt = SUCCESS_COUNT_CACHE.get(name, 0) + 1
+                    SUCCESS_COUNT_CACHE[name] = succ_cnt
+
+                    # Senior DevOps Flap Dampening: Require 3 consecutive success checks before declaring recovery
+                    if not previous_state and succ_cnt >= 3:
+                        SERVICE_STATE_CACHE[name] = True
+                        down_time = DOWN_START_TIME.pop(name, None)
+                        duration_str = None
+                        if down_time:
+                            secs = int(time.time() - down_time)
+                            m, s = divmod(secs, 60)
+                            h, m = divmod(m, 60)
+                            duration_str = f"{h}h {m}m {s}s" if h > 0 else f"{m}m {s}s" if m > 0 else f"{s}s"
+
+                        now_t = time.time()
+                        flaps = [t for t in FLAP_COUNTER.get(name, []) if (now_t - t) < 3600]
+                        flaps.append(now_t)
+                        FLAP_COUNTER[name] = flaps
+
+                        if len(flaps) >= 4:
+                            print(f"[FLAP SUPPRESSION ACTIVE] {name} state oscillating rapidly. Suppressing resolution email.")
+                        else:
+                            print(f"[RESOLVED] {name} is back ONLINE (Downtime: {duration_str})")
+                            send_alert(config, name, loc, url, "SERVICE RESTORED", "Status: Operational (Verified across 3 consecutive checks)", is_resolved=True, duration_str=duration_str)
+                else:
+                    SUCCESS_COUNT_CACHE[name] = 0
+                    fail_cnt = FAIL_COUNT_CACHE.get(name, 0) + 1
+                    FAIL_COUNT_CACHE[name] = fail_cnt
+
+                    if fail_cnt >= failures_required:
+                        curr = time.time()
+                        if previous_state:
+                            SERVICE_STATE_CACHE[name] = False
+                            DOWN_START_TIME[name] = curr
+                            LAST_ALERT_METRICS[name] = curr
+
+                            flaps = [t for t in FLAP_COUNTER.get(name, []) if (curr - t) < 3600]
+                            flaps.append(curr)
+                            FLAP_COUNTER[name] = flaps
+
+                            if len(flaps) >= 4:
+                                print(f"[FLAP SUPPRESSION ACTIVE] {name} is flapping. Sending single Consolidated Flap Alert.")
+                                alert_details = f"FLAP WARNING: {name} is experiencing rapid state oscillation ({len(flaps)} state changes in 1hr). Notifications throttled for 60 minutes."
+                                send_alert(config, name, loc, url, "FLAPPING / UNSTABLE", alert_details, is_resolved=False)
+                            else:
+                                alert_details = f"{msg} (Verified across {fail_cnt} consecutive checks)"
+                                print(f"[CRITICAL DOWN] {name} confirmed DOWN ({msg})")
+                                send_alert(config, name, loc, url, msg, alert_details, is_resolved=False)
+                        else:
+                            last_alert = LAST_ALERT_METRICS.get(name, 0)
+                            if (curr - last_alert) > cooldown_secs:
+                                LAST_ALERT_METRICS[name] = curr
+                                alert_details = f"Ongoing Outage: {msg} (Service remains unreachable)"
+                                print(f"[CRITICAL DOWN REMINDER] {name} still DOWN")
+                                send_alert(config, name, loc, url, msg, alert_details, is_resolved=False)
+
+                try:
+                    conn = get_db_connection()
+                    c = conn.cursor()
+                    c.execute("INSERT INTO status_history (timestamp, name, url, location, is_up, response_time, message) VALUES (?, ?, ?, ?, ?, ?, ?)",
+                              (datetime.now().isoformat(), name, url, loc, 1 if is_up else 0, latency, msg))
+                    conn.commit()
+                    conn.close()
+                except Exception as e:
+                    print("DB error", e)
+
+            time.sleep(max(interval, 10))
+        except Exception as e:
+            print(f"Monitor error: {e}")
+            time.sleep(10)
+
+def send_alert(config, name, loc, url, msg, details, is_resolved=False, duration_str=None, is_test=False):
+    """Unified executive alerting engine supporting HTML formatting for SMTP and Outlook."""
+    if is_test:
+        subject = f"[TEST ALERT] StatusPilot Diagnostic Notification ({name})"
+        badge_color = "#00D4FF"
+        badge_text = "TEST DIAGNOSTIC"
+        header_title = "Diagnostic Alert Test"
+    elif is_resolved:
+        subject = f"[RESOLVED] {name} ({loc}) is back ONLINE"
+        badge_color = "#10B981"
+        badge_text = "SERVICE RESTORED"
+        header_title = f"{name} Restored"
+    else:
+        subject = f"[CRITICAL DOWN] {name} ({loc}) is DOWN"
+        badge_color = "#EF4444"
+        badge_text = "CRITICAL DOWNTIME"
+        header_title = f"{name} Outage Detected"
+
+    now_utc = datetime.utcnow()
+    est_str = (now_utc - timedelta(hours=4)).strftime('%Y-%m-%d %H:%M:%S EDT')
+    utc_str = now_utc.strftime('%H:%M:%S UTC')
+    ist_str = (now_utc + timedelta(hours=5, minutes=30)).strftime('%H:%M:%S IST')
+    timestamp_str = f"{est_str} ({utc_str} | {ist_str})"
+
+    duration_row = f"<tr><td style='padding:12px 16px; font-weight:600; color:#64748B; border-bottom:1px solid #E2E8F0; background:#F1F5F9;'>Downtime Duration:</td><td style='padding:12px 16px; font-weight:700; color:#0F172A; border-bottom:1px solid #E2E8F0;'>{duration_str}</td></tr>" if duration_str else ""
+    logo_img_tag = '<img src="https://chotustatus-statuspilot.hf.space/static/parle_tech_logo.png" height="46" alt="PARLE TECH" style="display:inline-block; border:0; outline:none; height:46px; width:auto; vertical-align:middle;" />'
+
+    html_content = f"""<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"></head>
+<body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #F8FAFC; margin: 0; padding: 28px 16px;">
+  <div style="max-width: 640px; margin: 0 auto; background: #FFFFFF; border-radius: 12px; border: 1px solid #E2E8F0; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);">
+    
+    <!-- PARLE TECH BRAND HEADER -->
+    <div style="background-color: #0F172A; padding: 24px 30px; border-bottom: 3px solid #00C8F0;">
+      <table style="width: 100%; border-collapse: collapse;">
+        <tr>
+          <td style="vertical-align: middle;">
+            <div style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 15px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.5px;">Parle Tech Infrastructure Monitoring</div>
+            <div style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; font-weight: 600; color: #00C8F0; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px;">24/7 Enterprise Vigilance</div>
+          </td>
+          <td style="text-align: right; vertical-align: middle; white-space: nowrap;">
+            {logo_img_tag}
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <!-- INCIDENT STATUS BANNER -->
+    <div style="background-color: {badge_color}; padding: 18px 30px; color: #FFFFFF;">
+      <div style="font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: 0.95;">INCIDENT CLASSIFICATION ALARM</div>
+      <h2 style="margin: 4px 0 0 0; font-size: 20px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.5px;">{badge_text}: {header_title}</h2>
+    </div>
+
+    <!-- MAIN BODY CONTAINER -->
+    <div style="padding: 30px;">
+      <p style="font-size: 14px; color: #334155; margin-top: 0; line-height: 1.6;">
+        An automated vigilance event has been flagged by <strong>Parle Tech StatusPilot Infrastructure Security</strong>. Immediate technical telemetry details are provided below:
+      </p>
+
+      <!-- METRICS GRID TABLE -->
+      <table style="width: 100%; border-collapse: collapse; font-size: 13px; margin: 24px 0; background: #F8FAFC; border-radius: 8px; border: 1px solid #E2E8F0; overflow: hidden;">
+        <tr>
+          <td style="padding: 12px 16px; font-weight: 600; color: #64748B; border-bottom: 1px solid #E2E8F0; width: 35%; background: #F1F5F9;">Target Node / Service:</td>
+          <td style="padding: 12px 16px; font-weight: 700; color: #0F172A; border-bottom: 1px solid #E2E8F0;">{name}</td>
+        </tr>
+        <tr>
+          <td style="padding: 12px 16px; font-weight: 600; color: #64748B; border-bottom: 1px solid #E2E8F0; background: #F1F5F9;">Scope / Region:</td>
+          <td style="padding: 12px 16px; color: #0F172A; border-bottom: 1px solid #E2E8F0; font-weight: 600;">{loc}</td>
+        </tr>
+        <tr>
+          <td style="padding: 12px 16px; font-weight: 600; color: #64748B; border-bottom: 1px solid #E2E8F0; background: #F1F5F9;">Endpoint URL:</td>
+          <td style="padding: 12px 16px; color: #0284C7; border-bottom: 1px solid #E2E8F0; word-break: break-all; font-weight: 600;"><a href="{url}" target="_blank" style="color: #0284C7; text-decoration: none;">{url}</a></td>
+        </tr>
+        <tr>
+          <td style="padding: 12px 16px; font-weight: 600; color: #64748B; border-bottom: 1px solid #E2E8F0; background: #F1F5F9;">Vigilance Status:</td>
+          <td style="padding: 12px 16px; font-weight: 800; color: {badge_color}; border-bottom: 1px solid #E2E8F0;">{msg}</td>
+        </tr>
+        <tr>
+          <td style="padding: 12px 16px; font-weight: 600; color: #64748B; border-bottom: 1px solid #E2E8F0; background: #F1F5F9;">Technical Diagnostic:</td>
+          <td style="padding: 12px 16px; color: #334155; border-bottom: 1px solid #E2E8F0; line-height: 1.5;">{details}</td>
+        </tr>
+        {duration_row}
+        <tr>
+          <td style="padding: 12px 16px; font-weight: 600; color: #64748B; background: #F1F5F9;">Event Timestamp:</td>
+          <td style="padding: 12px 16px; color: #0F172A; font-weight: 600;">{timestamp_str}</td>
+        </tr>
+      </table>
+
+      <!-- ACTIONABLE CTA BUTTON -->
+      <div style="text-align: center; margin: 32px 0 20px 0;">
+        <a href="https://chotustatus-statuspilot.hf.space/" target="_blank" style="background-color: #0F172A; color: #00D4FF; font-family: 'Segoe UI', sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; padding: 14px 32px; border-radius: 8px; letter-spacing: 1.5px; display: inline-block; border: 1px solid #00D4FF; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);">
+          🌐 OPEN LIVE NOC OPERATIONS CENTER
+        </a>
+      </div>
+
+      <!-- CORPORATE SIGNATURE -->
+      <div style="margin-top: 32px; padding-top: 20px; border-top: 1px solid #E2E8F0; text-align: center; font-size: 11px; color: #94A3B8; line-height: 1.6;">
+        <strong>Parle Tech Infrastructure Security & NOC Engine v5.1</strong><br>
+        24/7 Enterprise Infrastructure Alerting • Automated Incident Management
+      </div>
+    </div>
+  </div>
+</body>
+</html>"""
+
+    plain_body = f"[{badge_text}]\nService: {name}\nLocation: {loc}\nURL: {url}\nStatus: {msg}\nDetails: {details}\nTime: {timestamp_str}"
+    if duration_str:
+        plain_body += f"\nDowntime Duration: {duration_str}"
+
+    alert_mode = config.get("alert_mode", "SMTP")
+    raw_recipients = config.get("email_recipients", [])
+    if isinstance(raw_recipients, str):
+        recipients = [r.strip() for r in raw_recipients.split(',') if r.strip()]
+    elif isinstance(raw_recipients, list):
+        recipients = [r.strip() for r in raw_recipients if isinstance(r, str) and r.strip()]
+    else:
+        recipients = []
+
+    sender = config.get("smtp_sender", "").strip() or DEFAULT_SMTP_SENDER
+    raw_pwd = os.environ.get('SMTP_PASSWORD') or config.get("smtp_password", "")
+    password = security.decrypt_secret(raw_pwd).strip()
+    if not password:
+        password = DEFAULT_SMTP_PASSWORD_RAW
+
+    if not recipients:
+        recipients = config.get("email_recipients", []) or DEFAULT_EMAIL_RECIPIENTS
+    if not recipients and sender:
+        recipients = [sender]
+
+    if alert_mode == "SMTP":
+        if not sender:
+            sender = DEFAULT_SMTP_SENDER
+        smtp_host = config.get("smtp_server", "").strip()
+        if not smtp_host:
+            if any(dom in sender.lower() for dom in ["@outlook.", "@hotmail.", "@live.", "@office365."]):
+                smtp_host = "smtp.office365.com"
+            else:
+                smtp_host = "smtp.gmail.com"
+
+        # Remove spaces in Google/Microsoft App Passwords (e.g. "abcd efgh ijkl mnop" -> "abcdefghijklmnop")
+        clean_pwd = (password or DEFAULT_SMTP_PASSWORD_RAW).replace(" ", "")
+
+        connected = False
+        last_error = None
+
+        # Custom Webhook / Google Apps Script (HTTPS Port 443 - works on Hugging Face)
+        webhook_url = os.environ.get("EMAIL_WEBHOOK_URL") or config.get("email_webhook_url", "").strip()
+        if webhook_url and not connected:
+            try:
+                all_webhook_sent = True
+                for recipient in recipients:
+                    payload = {
+                        "sender": sender,
+                        "senderName": "StatusPilot NOC",
+                        "recipient": recipient,
+                        "subject": subject,
+                        "body": plain_body,
+                        "htmlBody": html_content
+                    }
+                    w_res = requests.post(webhook_url, json=payload, timeout=20, allow_redirects=True)
+                    print(f"Webhook response for {recipient}: status={w_res.status_code} body={w_res.text[:200]}")
+                    if w_res.status_code not in [200, 201, 202] and "OK" not in w_res.text.upper() and "SUCCESS" not in w_res.text.upper():
+                        all_webhook_sent = False
+                if all_webhook_sent:
+                    connected = True
+                    print(f"Alert successfully dispatched via HTTPS Webhook to all recipients: {recipients}")
+            except Exception as ew:
+                last_error = ew
+                print(f"Webhook dispatch failed: {ew}")
+
+        # Try Standard Gmail Port 465 (SMTP_SSL)
+        if not connected:
+            try:
+                ssl_context = ssl.create_default_context()
+                from email.utils import formataddr
+                display_from = formataddr(("StatusPilot NOC", sender))
+                with smtplib.SMTP_SSL(smtp_host, 465, context=ssl_context, timeout=12) as server:
+                    server.login(sender, clean_pwd)
+                    for recipient in recipients:
+                        mime_msg = MIMEMultipart("alternative")
+                        mime_msg['From'] = display_from
+                        mime_msg['To'] = recipient
+                        mime_msg['Subject'] = subject
+                        mime_msg.attach(MIMEText(plain_body, 'plain'))
+                        mime_msg.attach(MIMEText(html_content, 'html'))
+                        server.sendmail(sender, recipient, mime_msg.as_string())
+                    connected = True
+                    print(f"Alert successfully dispatched via SMTPS Port 465 to {recipients}")
+            except Exception as e1:
+                last_error = e1
+                print(f"Port 465 SMTPS failed: {e1}. Trying Port 587 STARTTLS...")
+
+        # Try Standard Gmail Port 587 (STARTTLS)
+        if not connected:
+            try:
+                from email.utils import formataddr
+                display_from = formataddr(("StatusPilot NOC", sender))
+                with smtplib.SMTP(smtp_host, 587, timeout=12) as server:
+                    server.starttls()
+                    server.login(sender, clean_pwd)
+                    for recipient in recipients:
+                        mime_msg = MIMEMultipart("alternative")
+                        mime_msg['From'] = display_from
+                        mime_msg['To'] = recipient
+                        mime_msg['Subject'] = subject
+                        mime_msg.attach(MIMEText(plain_body, 'plain'))
+                        mime_msg.attach(MIMEText(html_content, 'html'))
+                        server.sendmail(sender, recipient, mime_msg.as_string())
+                    connected = True
+                    print(f"Alert successfully dispatched via STARTTLS Port 587 to {recipients}")
+            except Exception as e2:
+                last_error = e2
+                print(f"Port 587 STARTTLS failed: {e2}")
+
+        if not connected and is_test:
+            raise RuntimeError(f"SMTP Delivery Error ({smtp_host}): {last_error}")
+
+    elif alert_mode == "Outlook" and OUTL_AVAIL:
+        try:
+            outlook = win32com.client.Dispatch("Outlook.Application")
+            mail = outlook.CreateItem(0)
+            mail.Subject = subject
+            mail.HTMLBody = html_content
+            if recipients:
+                mail.To = "; ".join(recipients)
+            mail.Send()
+            print("Outlook HTML alert sent.")
+        except Exception as e:
+            print(f"Outlook Alert Error: {e}")
+            if is_test:
+                raise RuntimeError(f"Outlook App Dispatch Error: {str(e)}")
+
+# Start thread automatically
+init_db()
+if not os.path.exists(CONFIG_FILE):
+    save_config(load_config())
+threading.Thread(target=background_monitor_thread, daemon=True).start()
+
+# --- WEB ROUTES ---
+
+@app.route('/')
+def serve_dashboard():
+    """Forcing a new template name to bypass persistent cloud caching."""
+    return render_template('dashboard_v6.html', logo_b64=PARLE_TECH_LOGO_B64)
+
+@app.route('/api/config/delete', methods=['POST'])
+def delete_config_service():
+    """Expert-grade service decommissioning via POST for cloud compatibility."""
+    if not check_auth():
+        return jsonify({"error": "Unauthorized"}), 401
+        
+    name = request.json.get('name')
+    print(f"DECOMMISSION REQUEST: {name}")
+    
+    config = load_config()
+    original_count = len(config.get('services_to_monitor', []))
+    
+    config['services_to_monitor'] = [s for s in config['services_to_monitor'] if s.get('name') != name]
+    
+    new_count = len(config['services_to_monitor'])
+    save_config(config)
+    
+    if original_count == new_count:
+        return jsonify({"status": "error", "message": f"Service '{name}' not found."}), 404
+        
+    print(f"Successfully decommissioned: {name}")
+    return jsonify({"status": "success", "deleted": name})
+
+@app.route('/api/config', methods=['GET', 'POST'])
+def handle_config():
+    if request.method == 'POST':
+        new_config = request.json or {}
+        current_config = load_config()
+        new_pwd = str(new_config.get("smtp_password", "")).strip()
+        if not new_pwd or new_pwd.startswith("••••"):
+            new_config["smtp_password"] = current_config.get("smtp_password", "")
+        else:
+            new_config["smtp_password"] = security.encrypt_secret(new_pwd)
+        save_config(new_config)
+        return jsonify({"status": "success"})
+    
+    cfg = load_config()
+    if cfg.get("smtp_password"):
+        cfg["smtp_password"] = "••••••••••••"
+    return jsonify(cfg)
+
+@app.route('/api/clear_ai', methods=['POST'])
+def clear_ai_services():
+    config = load_config()
+    # Robust filter: Removes anything starting with 'Ai Service', 'New Service', or 'Cloud Service'
+    patterns = ["Ai Service", "New Service", "Cloud Service", "Https", "Global"]
+    config['services_to_monitor'] = [s for s in config['services_to_monitor'] if not any(p in s['name'] for p in patterns)]
+    save_config(config)
+    return jsonify({"status": "success"})
+
+@app.route('/api/status', methods=['GET'])
+def get_status():
+    config = load_config()
+    services = config.get("services_to_monitor", [])
+    
+    conn = get_db_connection()
+    c = conn.cursor()
+    
+    results = []
+    for svc in services:
+        name = svc.get('name')
+        # Get latest status
+        c.execute("SELECT is_up, response_time, message, timestamp FROM status_history WHERE name=? ORDER BY timestamp DESC LIMIT 1", (name,))
+        row = c.fetchone()
+        
+        # Get last 30 checks for timeline
+        c.execute("SELECT is_up FROM status_history WHERE name=? ORDER BY timestamp DESC LIMIT 30", (name,))
+        history_rows = c.fetchall()
+        timeline = [bool(h["is_up"]) for h in reversed(history_rows)]
+        
+        if not row:
+            is_up, msg, latency = check_service_logic(svc)
+            out_row = {"is_up": 1 if is_up else 0, "response_time": latency, "message": msg, "timestamp": datetime.now().isoformat()}
+        else:
+            out_row = {"is_up": row["is_up"], "response_time": row["response_time"], "message": row["message"], "timestamp": row["timestamp"]}
+            
+        results.append({
+            "name": name,
+            "url": svc.get("url"),
+            "location": svc.get("location", "Global"),
+            "type": svc.get("type"),
+            "is_up": bool(out_row["is_up"]),
+            "latency": out_row["response_time"],
+            "message": out_row["message"],
+            "last_check": out_row["timestamp"],
+            "timeline": timeline
+        })
+    conn.close()
+    return jsonify(results)
+
+@app.route('/api/summary', methods=['GET'])
+def get_summary():
+    conn = get_db_connection()
+    c = conn.cursor()
+    
+    # Total Monitors
+    config = load_config()
+    services = config.get("services_to_monitor", [])
+    total_monitors = len(services)
+    
+    # Global Uptime % (Last 24 hours)
+    yesterday = (datetime.now() - timedelta(days=1)).isoformat()
+    c.execute("SELECT AVG(is_up) * 100 FROM status_history WHERE timestamp > ?", (yesterday,))
+    uptime_pct = c.fetchone()[0] or 100.0
+    
+    # Total Incidents (Count of UNIQUE services that are CURRENTLY down)
+    incidents = 0
+    for svc in services:
+        name = svc.get('name')
+        c.execute("SELECT is_up FROM status_history WHERE name=? ORDER BY timestamp DESC LIMIT 1", (name,))
+        row = c.fetchone()
+        if row and row[0] == 0:
+            incidents += 1
+    
+    # Avg Latency
+    c.execute("SELECT AVG(response_time) FROM status_history WHERE timestamp > ?", (yesterday,))
+    avg_latency = c.fetchone()[0] or 0
+    
+    conn.close()
+    return jsonify({
+        "total_monitors": total_monitors,
+        "uptime_pct": round(uptime_pct, 2),
+        "incidents": incidents,
+        "avg_latency": round(avg_latency, 2)
+    })
+
+@app.route('/api/admin/purge_stale', methods=['POST'])
+def purge_stale_data():
+    """Purge history records for services no longer in the current configuration."""
+    if not check_auth():
+        return jsonify({"error": "Unauthorized"}), 401
+        
+    config = load_config()
+    active_names = [s.get('name') for s in config.get('services_to_monitor', [])]
+    
+    conn = get_db_connection()
+    c = conn.cursor()
+    
+    # 1. Delete records for non-existent services
+    placeholders = ','.join(['?'] * len(active_names))
+    if active_names:
+        c.execute(f"DELETE FROM status_history WHERE name NOT IN ({placeholders})", active_names)
+    else:
+        c.execute("DELETE FROM status_history")
+        
+    # 2. Also clear very old data (older than 7 days) to keep DB light
+    one_week_ago = (datetime.now() - timedelta(days=7)).isoformat()
+    c.execute("DELETE FROM status_history WHERE timestamp < ?", (one_week_ago,))
+    
+    count = conn.total_changes
+    conn.commit()
+    conn.close()
+    
+    return jsonify({"status": "success", "purged_records": count})
+
+@app.route('/api/history/<path:service_name>', methods=['GET'])
+def get_detailed_history(service_name):
+    conn = get_db_connection()
+    c = conn.cursor()
+    # Get last 100 records for charts
+    c.execute("SELECT timestamp, is_up, response_time FROM status_history WHERE name=? ORDER BY timestamp DESC LIMIT 100", (service_name,))
+    rows = c.fetchall()
+    conn.close()
+    
+    data = [{
+        "timestamp": r["timestamp"],
+        "is_up": bool(r["is_up"]),
+        "latency": r["response_time"]
+    } for r in reversed(rows)]
+    
+    return jsonify(data)
+
+@app.route('/api/test', methods=['POST'])
+def test_tool():
+    """Live interactive testing for specific tools and locations."""
+    data = request.json
+    tool_name = data.get("tool")
+    location = data.get("location")
+    
+    # Simple direct ping/fetch simulation
+    config = load_config()
+    # Find matching service, or just do a generic requests test
+    matched_svc = next((s for s in config.get("services_to_monitor", []) if s.get("name") == tool_name), None)
+    
+    if not matched_svc:
+        return jsonify({"status": "error", "message": "Service not found in configuration!"}), 404
+        
+    is_up, msg, latency = check_service_logic(matched_svc)
+    return jsonify({
+        "tool": tool_name,
+        "location": location,
+        "is_up": is_up,
+        "latency": latency,
+        "message": msg,
+        "timestamp": datetime.now().isoformat()
+    })
+
+@app.route('/api/ai_add', methods=['POST'])
+def ai_add_service():
+    """Neural Engine v4 - Context-Aware Entity Extraction."""
+    raw_text = request.json.get("text", "").strip()
+    if not raw_text:
+        return jsonify({"status": "error", "message": "Neural link empty. Please provide instructions."})
+
+    # 1. URL Extraction (Highest Priority)
+    url_match = re.search(r'(https?://[^\s]+)', raw_text)
+    if not url_match:
+        return jsonify({"status": "error", "message": "No endpoint detected. Try adding a URL like 'https://status.teams.com'"})
+    url = url_match.group(1).rstrip(',.!?')
+    
+    # 2. Contextual Cleaning
+    clean_text = raw_text.replace(url, "").lower()
+    for cmd in ["monitor", "add", "check", "service", "from", "at", "called", "in"]:
+        clean_text = clean_text.replace(cmd, "")
+    clean_text = " ".join(clean_text.split())
+
+    # 3. Entity Extraction (Name & Location)
+    # Strategy: Locations are usually at the end or preceded by 'in'
+    location = "Global"
+    loc_match = re.search(r'(?:in|at|site|location|node)\s+([a-z\s]{2,20})$', raw_text, re.IGNORECASE)
+    if loc_match:
+        location = loc_match.group(1).strip().title()
+        # Clean the name part by removing the location
+        clean_text = clean_text.replace(location.lower(), "").strip()
+
+    # The remaining text is most likely the name
+    name = clean_text.title() if clean_text else "AI Discovery"
+    if len(name) < 2: name = "Cloud Service"
+
+    # 4. Smart Protocol Detection
+    is_api = any(x in url.lower() for x in [".json", "api/", "/status-data", "v1/"])
+    check_type = "json_status" if is_api else "http_code"
+    
+    config = load_config()
+    new_svc = {
+        "name": name,
+        "url": url,
+        "location": location,
+        "type": check_type,
+        "expected_code": 200,
+        "key_to_check": "status" if is_api else "",
+        "expected_value": "up" if is_api else ""
+    }
+    
+    config["services_to_monitor"].append(new_svc)
+    save_config(config)
+    
+    return jsonify({
+        "status": "success", 
+        "added": new_svc,
+        "message": f"✨ AI Mapping Successful",
+        "analysis": {
+            "entity": name,
+            "origin": location,
+            "protocol": "REST/JSON" if is_api else "HTTP/HTML",
+            "confidence": "High"
+        }
+    })
+
+@app.route('/api/report/excel', methods=['GET'])
+def download_excel_report():
+    output = io.BytesIO()
+    workbook = xlsxwriter.Workbook(output, {'in_memory': True})
+    
+    header_style = workbook.add_format({'bold': True, 'bg_color': '#1E293B', 'font_color': 'white', 'border': 1})
+    data_style = workbook.add_format({'border': 1})
+    up_style = workbook.add_format({'bg_color': '#D1FAE5', 'font_color': '#065F46', 'border': 1, 'bold': True})
+    down_style = workbook.add_format({'bg_color': '#FEE2E2', 'font_color': '#991B1B', 'border': 1, 'bold': True})
+    
+    conn = get_db_connection()
+    c = conn.cursor()
+    
+    ws_sum = workbook.add_worksheet("Monthly Overview")
+    ws_sum.set_column('A:F', 22)
+    
+    headers = ["Service Name", "Location", "Total Checks", "Uptime %", "Avg Latency (ms)", "Status"]
+    for col, h in enumerate(headers):
+        ws_sum.write(0, col, h, header_style)
+        
+    c.execute("SELECT name, location, COUNT(*) as total, SUM(is_up) as up_count, ROUND(AVG(response_time), 2) FROM status_history GROUP BY name, location")
+    data = c.fetchall()
+    
+    row_idx = 1
+    chart = workbook.add_chart({'type': 'doughnut'})
+    chart.set_title({'name': 'Services Uptime Analysis'})
+    chart.set_style(10)
+    
+    for row in data:
+        name = row[0]
+        loc = row[1]
+        total = row[2]
+        up_count = row[3]
+        avg_latency = row[4]
+        
+        up_pct = (up_count / total * 100) if total > 0 else 0
+        status_text = "Healthy" if up_pct >= 95 else "Degraded"
+        
+        ws_sum.write(row_idx, 0, name, data_style)
+        ws_sum.write(row_idx, 1, loc, data_style)
+        ws_sum.write(row_idx, 2, total, data_style)
+        ws_sum.write(row_idx, 3, f"{up_pct:.1f}%", up_style if up_pct >= 95 else down_style)
+        ws_sum.write(row_idx, 4, avg_latency, data_style)
+        ws_sum.write(row_idx, 5, status_text, up_style if up_pct >= 95 else down_style)
+        row_idx += 1
+        
+    if row_idx > 1:
+        chart.add_series({
+            'name': 'Uptime Info',
+            'categories': ['Monthly Overview', 1, 0, row_idx-1, 0],
+            'values': ['Monthly Overview', 1, 2, row_idx-1, 2],
+        })
+        ws_sum.insert_chart('H2', chart)
+        
+    conn.close()
+    workbook.close()
+    output.seek(0)
+    
+    return send_file(output, download_name=f"StatusPilot_Report_{datetime.now().strftime('%Y-%m')}.xlsx", as_attachment=True)
+
+@app.route('/api/alert/test', methods=['POST'])
+def test_alert_email():
+    if not check_auth():
+        return jsonify({"error": "Unauthorized"}), 401
+    
+    req_data = request.json or {}
+    config = load_config()
+
+    if req_data.get("smtp_sender"):
+        config["smtp_sender"] = req_data.get("smtp_sender").strip()
+    if req_data.get("smtp_password") and not str(req_data.get("smtp_password")).startswith("••••"):
+        config["smtp_password"] = security.encrypt_secret(str(req_data.get("smtp_password")).strip())
+    if req_data.get("email_recipients"):
+        config["email_recipients"] = req_data.get("email_recipients")
+    if req_data.get("email_webhook_url"):
+        config["email_webhook_url"] = req_data.get("email_webhook_url").strip()
+
+    sender = config.get("smtp_sender", "").strip()
+    raw_recipients = config.get("email_recipients", [])
+    
+    if isinstance(raw_recipients, str):
+        recipients = [r.strip() for r in raw_recipients.split(',') if r.strip()]
+    elif isinstance(raw_recipients, list):
+        recipients = [r.strip() for r in raw_recipients if isinstance(r, str) and r.strip()]
+    else:
+        recipients = []
+        
+    if not recipients and sender:
+        recipients = [sender]
+        
+    raw_pwd = os.environ.get('SMTP_PASSWORD') or config.get("smtp_password", "")
+    decrypted_pwd = security.decrypt_secret(raw_pwd).strip()
+    if not decrypted_pwd:
+        decrypted_pwd = DEFAULT_SMTP_PASSWORD_RAW
+
+    if not sender:
+        sender = DEFAULT_SMTP_SENDER
+        
+    if not recipients:
+        recipients = DEFAULT_EMAIL_RECIPIENTS
+
+    config["email_recipients"] = recipients
+
+    app_host_url = request.host_url.rstrip('/') if (request and request.host_url) else "https://parledowntime-pro.hf.space"
+    try:
+        send_alert(
+            config=config,
+            name="System Alert Diagnostic Node",
+            loc="Global Operational Node",
+            url=app_host_url,
+            msg="Diagnostic Check OK",
+            details="This is a test executive alert sent from StatusPilot to verify email formatting and delivery.",
+            is_resolved=False,
+            is_test=True
+        )
+        recip_str = ", ".join(recipients)
+        return jsonify({"status": "success", "message": f"Test alert email successfully dispatched to: {recip_str}"})
+    except Exception as e:
+        return jsonify({"status": "error", "message": str(e)}), 200
+
+if __name__ == '__main__':
+    from waitress import serve
+    print("Starting production Waitress server on http://0.0.0.0:5000")
+    serve(app, host='0.0.0.0', port=5000)
+

config.json

@@ -0,0 +1,58 @@
+{
+    "services_to_monitor": [
+        {
+            "name": "Microsoft 365",
+            "url": "https://status.office365.com",
+            "location": "Global",
+            "type": "http_code",
+            "expected_code": 200
+        },
+        {
+            "name": "RingCentral",
+            "url": "https://status.ringcentral.com",
+            "location": "Global",
+            "type": "http_code",
+            "expected_code": 200
+        },
+        {
+            "name": "Skybridge Healthcare",
+            "url": "https://www.skybridgehealthcare.com/",
+            "location": "Primary Web",
+            "type": "http_code",
+            "expected_code": 200
+        },
+        {
+            "name": "Skybridge Aviation",
+            "url": "https://skybridgeaviation.com/",
+            "location": "Primary Web",
+            "type": "http_code",
+            "expected_code": 200
+        },
+        {
+            "name": "Skybridge Resources",
+            "url": "https://skybridgeresources.com/",
+            "location": "Primary Web",
+            "type": "http_code",
+            "expected_code": 200
+        },
+        {
+            "name": "BetterLending Website",
+            "url": "https://betterlending.com/",
+            "location": "Primary Web",
+            "type": "http_code",
+            "expected_code": 200
+        }
+    ],
+    "check_interval": 60,
+    "consecutive_failures_required": 2,
+    "retry_delay_seconds": 3,
+    "cooldown_minutes": 30,
+    "email_recipients": [
+        "suresh@parletech.com",
+        "smadapathi04@gmail.com"
+    ],
+    "alert_mode": "SMTP",
+    "smtp_sender": "smadapathi04@gmail.com",
+    "smtp_password": "ENC:b35f6661b9b4433a6b53657e56206dfa",
+    "email_webhook_url": "https://script.google.com/macros/s/AKfycbySQsYRpOBLPUWXCFKR2ZqDHCoKd7tUhB92sgp7P1ap4iQ8ZpmyisIGK9CT5umT2EGz/exec"
+}

license.dat

@@ -0,0 +1 @@
+{"email": "suresh@parltech.com", "key": "SG-2E6D-8E22-27B0"}

render.yaml

@@ -0,0 +1,12 @@
+services:
+  - type: web
+    name: statuspilot-cloud
+    env: python
+    plan: free
+    buildCommand: pip install -r requirements.txt
+    startCommand: gunicorn app:app
+    envVars:
+      - key: PYTHON_VERSION
+        value: 3.11.0
+      - key: SECRET_KEY
+        generateValue: true

requirements.txt

@@ -0,0 +1,6 @@
+Flask==3.0.0
+requests==2.31.0
+gunicorn==21.2.0
+Werkzeug==3.0.1
+waitress==3.0.0
+xlsxwriter==3.1.9

runtime.txt

@@ -0,0 +1 @@
+python-3.11.0

security.py

@@ -0,0 +1,51 @@
+import hashlib
+import uuid
+import platform
+
+# SECRET_SALT: Change this to something unique before selling!
+# This connects the KeyGen to the App.
+SECRET_SALT = "ServiceGuard_2025_Secure_Salt_9988"
+
+def generate_license_key(user_ref):
+    """Generates a key based on a user reference (e.g. gumroad email)."""
+    # Create a hash of the salt + user_ref
+    raw_str = f"{SECRET_SALT}-{user_ref.strip().lower()}"
+    hash_object = hashlib.sha256(raw_str.encode())
+    hex_dig = hash_object.hexdigest().upper()
+    
+    # Format: SG-XXXX-XXXX-XXXX (First 12 chars of hash)
+    return f"SG-{hex_dig[:4]}-{hex_dig[4:8]}-{hex_dig[8:12]}"
+
+def verify_license_key(user_ref, input_key):
+    """Verifies that the input key matches the generated key for that user."""
+    expected_key = generate_license_key(user_ref)
+    return input_key.strip() == expected_key
+
+import base64
+
+def encrypt_secret(plaintext):
+    """Encrypt sensitive credentials before storing to disk."""
+    if not plaintext or str(plaintext).startswith("ENC:"):
+        return plaintext
+    key_bytes = hashlib.sha256(SECRET_SALT.encode('utf-8')).digest()
+    pt_bytes = str(plaintext).strip().encode('utf-8')
+    ct_hex = []
+    for i, b in enumerate(pt_bytes):
+        ct_hex.append(f"{b ^ key_bytes[i % len(key_bytes)]:02x}")
+    return "ENC:" + "".join(ct_hex)
+
+def decrypt_secret(ciphertext):
+    """Decrypt stored credentials back into RAM for authentication."""
+    if not ciphertext or not str(ciphertext).startswith("ENC:"):
+        return ciphertext
+    try:
+        raw_hex = str(ciphertext)[4:].strip()
+        ct_bytes = bytes.fromhex(raw_hex)
+        key_bytes = hashlib.sha256(SECRET_SALT.encode('utf-8')).digest()
+        pt_bytes = bytearray()
+        for i, b in enumerate(ct_bytes):
+            pt_bytes.append(b ^ key_bytes[i % len(key_bytes)])
+        return pt_bytes.decode('utf-8', errors='ignore')
+    except Exception:
+        return ""
+

static/script.js

@@ -0,0 +1,584 @@
+/**
+ * StatusPilot Ultra Pro v5
+ * Logic & Infrastructure Interface
+ */
+
+let appData = {
+    status: [],
+    config: null,
+    summary: null
+};
+
+let charts = {};
+let currentLocationFilter = 'All';
+let isAuthPromptShowing = false;
+
+// Global Axios Interceptor for 401s
+axios.interceptors.response.use(
+    response => response,
+    error => {
+        if (error.response && error.response.status === 401) {
+            console.warn("Session expired or unauthorized. Showing prompt.");
+            if (!isAuthPromptShowing) {
+                showAuthOverlay();
+            }
+        }
+        return Promise.reject(error);
+    }
+);
+
+function showAuthOverlay() {
+    // Only show if not already visible
+    if (isAuthPromptShowing) return;
+    
+    isAuthPromptShowing = true;
+    const overlay = document.getElementById('master-auth-overlay');
+    if (overlay) {
+        overlay.style.display = 'flex';
+        overlay.style.zIndex = "999999"; // Ensure it's on top
+    }
+    
+    const mainApp = document.getElementById('main-app');
+    if (mainApp) {
+        mainApp.style.filter = 'blur(20px)';
+        mainApp.style.opacity = '0.3';
+        mainApp.style.pointerEvents = 'none';
+    }
+}
+
+// Configuration
+const REFRESH_INTERVAL = 30000;
+const ACCENT_COLOR = '#10b981';
+const PRIMARY_COLOR = '#3b82f6';
+
+// --- Initialization ---
+
+async function init() {
+    updateClock();
+    setInterval(updateClock, 1000);
+
+    const authStatus = await checkAuthStatus();
+    if (authStatus.required && !authStatus.authenticated) {
+        document.getElementById('master-auth-overlay').style.display = 'flex';
+        return;
+    }
+
+    unlockDashboard();
+    
+    const license = await checkLicense();
+    if (!license.licensed) {
+        document.getElementById('license-overlay').style.display = 'flex';
+        return;
+    }
+
+    await loadData();
+    setInterval(loadData, REFRESH_INTERVAL);
+}
+
+async function loadData() {
+    try {
+        await Promise.all([
+            loadConfig(),
+            loadSummary(),
+            loadStatus()
+        ]);
+    } catch (err) {
+        console.error("Critical Sync Error:", err);
+    }
+}
+
+// --- Auth & Security ---
+
+async function checkAuthStatus() {
+    try {
+        const res = await axios.get('/api/auth/status');
+        return res.data;
+    } catch (err) { return { required: true, authenticated: false }; }
+}
+
+async function unlockDashboard() {
+    isAuthPromptShowing = false;
+    document.getElementById('master-auth-overlay').style.display = 'none';
+    const mainApp = document.getElementById('main-app');
+    mainApp.style.filter = 'none';
+    mainApp.style.opacity = '1';
+    mainApp.style.pointerEvents = 'auto';
+}
+
+document.getElementById('master-login-btn').onclick = async () => {
+    const keyInput = document.getElementById('master-key-input');
+    const key = keyInput.value.trim();
+    const btn = document.getElementById('master-login-btn');
+    const err = document.getElementById('master-error');
+
+    if (!key) return;
+
+    btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> SYNCING...';
+    btn.disabled = true;
+    err.style.display = 'none';
+
+    try {
+        const res = await axios.post('/api/auth/login', { key });
+        if (res.data.success) {
+            console.log("Login successful, verifying session...");
+            // CRITICAL: Wait a moment for the cookie to settle
+            setTimeout(async () => {
+                const status = await checkAuthStatus();
+                if (status.authenticated) {
+                    btn.textContent = 'SYNC SUCCESSFUL';
+                    unlockDashboard();
+                    await init(); // Re-run init to load data
+                } else {
+                    throw new Error("Session verification failed after login.");
+                }
+            }, 500);
+        } else {
+            err.textContent = "Invalid Master Access Key";
+            err.style.display = 'block';
+            btn.textContent = 'Unlock Data Center';
+            btn.disabled = false;
+        }
+    } catch (e) {
+        console.error(e);
+        err.textContent = "Security Node Offline or Cookie Blocked";
+        err.style.display = 'block';
+        btn.textContent = 'Unlock Data Center';
+        btn.disabled = false;
+    }
+};
+
+async function checkLicense() {
+    try {
+        const res = await axios.get('/api/license/status');
+        return res.data;
+    } catch (err) { return { licensed: false }; }
+}
+
+document.getElementById('activate-btn').onclick = async () => {
+    const email = document.getElementById('lic-email').value;
+    const key = document.getElementById('lic-key').value;
+    try {
+        const res = await axios.post('/api/license/activate', { email, key: key.trim().toUpperCase() });
+        if (res.data.success) init();
+        else {
+            const err = document.getElementById('lic-error');
+            err.textContent = res.data.message;
+            err.style.display = 'block';
+        }
+    } catch (e) { console.error(e); }
+};
+
+// --- Data Fetching ---
+
+async function loadConfig() {
+    const res = await axios.get('/api/config');
+    appData.config = res.data;
+    
+    // Fill selects
+    const locFilter = document.getElementById('location-filter');
+    const toolSelect = document.getElementById('test-tool-select');
+    
+    const locations = new Set(['All', 'Global']);
+    appData.config.services_to_monitor.forEach(s => {
+        if(s.location) locations.add(s.location);
+    });
+
+    const prevLoc = locFilter.value;
+    locFilter.innerHTML = '';
+    locations.forEach(loc => {
+        const opt = document.createElement('option');
+        opt.value = loc; opt.textContent = loc === 'All' ? 'GLOBAL NETWORK' : loc.toUpperCase();
+        locFilter.appendChild(opt);
+    });
+    if(prevLoc) locFilter.value = prevLoc;
+
+    toolSelect.innerHTML = '';
+    appData.config.services_to_monitor.forEach(s => {
+        const opt = document.createElement('option');
+        opt.value = s.name; opt.textContent = s.name;
+        toolSelect.appendChild(opt);
+    });
+
+    // Populate Management List
+    renderManagementList();
+
+    // Settings fields
+    document.getElementById('check-interval').value = appData.config.check_interval;
+    document.getElementById('alert-mode').value = appData.config.alert_mode || 'SMTP';
+    document.getElementById('smtp-user').value = appData.config.smtp_sender || '';
+}
+
+function renderManagementList() {
+    const list = document.getElementById('manage-svc-list');
+    if (!list) return;
+    list.innerHTML = '';
+    
+    appData.config.services_to_monitor.forEach((s, index) => {
+        const item = document.createElement('div');
+        item.className = 'manage-item';
+        item.innerHTML = `
+            <div style="display:flex; flex-direction:column;">
+                <b style="font-size:0.9rem;">${s.name}</b>
+                <span style="font-size:0.7rem; color:var(--text-muted);">${s.url}</span>
+            </div>
+            <button class="btn-delete" onclick="deleteService(${index}, '${s.name}')">
+                <i class="fas fa-trash-alt"></i> REMOVE
+            </button>
+        `;
+        list.appendChild(item);
+    });
+}
+
+async function deleteService(index, name) {
+    if (!confirm(`🚨 DECOMMISSION NODE: Are you sure you want to remove ${name} from active monitoring?`)) return;
+    
+    try {
+        // Switching to POST for decommissioning to avoid DELETE method blocks in cloud proxies
+        const res = await axios.post('/api/config/delete', { name });
+        if (res.data.status === 'success') {
+            console.log(`Node ${name} successfully decommissioned.`);
+            await loadConfig();
+            await loadStatus();
+        } else {
+            throw new Error(res.data.message || "Unknown server error");
+        }
+    } catch (e) { 
+        console.error(e);
+        const msg = e.response?.data?.message || e.message;
+        alert(`OPERATIONAL ERROR: ${msg}\n\nPlease ensure you are logged in and the node still exists.`); 
+    }
+}
+
+async function loadSummary() {
+    const res = await axios.get('/api/summary');
+    const s = res.data;
+    animateValue('stat-monitors', s.total_monitors);
+    animateValue('stat-uptime', s.uptime_pct, '%');
+    animateValue('stat-incidents', s.incidents);
+    animateValue('stat-latency', s.avg_latency, 'ms');
+}
+
+async function loadStatus() {
+    const res = await axios.get('/api/status');
+    appData.status = res.data;
+    renderStatusGrid();
+    renderGlobalMatrix();
+}
+
+// --- UI Rendering ---
+
+function renderStatusGrid() {
+    const grid = document.getElementById('status-grid');
+    grid.innerHTML = '';
+
+    const filtered = appData.status.filter(s => currentLocationFilter === 'All' || s.location === currentLocationFilter);
+
+    if (filtered.length === 0) {
+        grid.innerHTML = '<div style="text-align:center; padding:3rem; color:var(--text-muted);">No services matching filter.</div>';
+        return;
+    }
+
+    filtered.forEach(s => {
+        const row = document.createElement('div');
+        row.className = 'status-row';
+        row.onclick = () => openDetails(s.name);
+
+        let timelineHTML = '<div class="uptime-timeline">';
+        const history = [...Array(30 - s.timeline.length).fill(null), ...s.timeline];
+        history.forEach(state => {
+            const cls = state === null ? 'none' : (state ? 'up' : 'down');
+            timelineHTML += `<div class="timeline-bar ${cls}"></div>`;
+        });
+        timelineHTML += '</div>';
+
+        row.innerHTML = `
+            <div class="svc-info">
+                <h3>${s.name}</h3>
+                <span>${s.url}</span>
+            </div>
+            <div><span class="location-badge">${s.location}</span></div>
+            ${timelineHTML}
+            <div class="status-text ${s.is_up ? 'up' : 'down'}">${s.is_up ? 'Operational' : 'Major Outage'}</div>
+            <div class="latency">${s.latency}ms</div>
+        `;
+        grid.appendChild(row);
+    });
+}
+
+function renderGlobalMatrix() {
+    const ctx = document.getElementById('globalLatencyMatrix');
+    if (!ctx) return;
+
+    const labels = appData.status.map(s => s.name);
+    const data = appData.status.map(s => s.latency);
+
+    if (charts.globalMatrix) charts.globalMatrix.destroy();
+
+    charts.globalMatrix = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Latency (ms)',
+                data: data,
+                backgroundColor: data.map(v => v > 500 ? 'rgba(239, 68, 68, 0.4)' : 'rgba(59, 130, 246, 0.4)'),
+                borderColor: data.map(v => v > 500 ? '#ef4444' : '#3b82f6'),
+                borderWidth: 1,
+                borderRadius: 8
+            }]
+        },
+        options: {
+            indexAxis: 'y',
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: {
+                x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } },
+                y: { grid: { display: false }, ticks: { color: '#fff', font: { weight: '600' } } }
+            }
+        }
+    });
+}
+
+// --- Analytics Modal ---
+
+async function openDetails(name) {
+    document.getElementById('modal-title').textContent = name;
+    document.getElementById('matrix-modal').style.display = 'block';
+
+    try {
+        const res = await axios.get(`/api/history/${encodeURIComponent(name)}`);
+        const history = res.data;
+        renderMatrixCharts(history);
+        renderIncidentLog(history);
+    } catch (e) { console.error(e); }
+}
+
+function renderMatrixCharts(data) {
+    const labels = data.map(d => new Date(d.timestamp).toLocaleTimeString());
+    const latencies = data.map(d => d.latency);
+    const uptimes = data.map(d => d.is_up ? 100 : 0);
+
+    if (charts.detLat) charts.detLat.destroy();
+    if (charts.detUp) charts.detUp.destroy();
+    if (charts.detErr) charts.detErr.destroy();
+
+    const chartOps = {
+        responsive: true,
+        plugins: { legend: { display: false } },
+        scales: { 
+            x: { grid: { display: false }, ticks: { display: false } },
+            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } } 
+        }
+    };
+
+    charts.detLat = new Chart(document.getElementById('latencyChart'), {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: latencies,
+                borderColor: PRIMARY_COLOR,
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                fill: true,
+                tension: 0.4,
+                pointRadius: 0
+            }]
+        },
+        options: chartOps
+    });
+
+    charts.detUp = new Chart(document.getElementById('uptimeChart'), {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: uptimes,
+                borderColor: ACCENT_COLOR,
+                backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                fill: true,
+                stepped: true,
+                pointRadius: 0
+            }]
+        },
+        options: { ...chartOps, scales: { ...chartOps.scales, y: { ...chartOps.scales.y, max: 100, min: 0 } } }
+    });
+
+    charts.detErr = new Chart(document.getElementById('errorChart'), {
+        type: 'doughnut',
+        data: {
+            labels: ['Success', 'Failure'],
+            datasets: [{
+                data: [data.filter(d => d.is_up).length, data.filter(d => !d.is_up).length],
+                backgroundColor: [ACCENT_COLOR, '#ef4444'],
+                borderWidth: 0
+            }]
+        },
+        options: { cutout: '70%', plugins: { legend: { position: 'bottom', labels: { color: '#94a3b8' } } } }
+    });
+}
+
+function renderIncidentLog(data) {
+    const log = document.getElementById('incident-log');
+    log.innerHTML = '';
+    const fails = data.filter(d => !d.is_up).reverse();
+    
+    if (fails.length === 0) {
+        log.innerHTML = '<p style="color: var(--accent); font-weight: 600;">System is healthy. No recent incidents.</p>';
+        return;
+    }
+
+    fails.forEach(f => {
+        const item = document.createElement('div');
+        item.style.padding = '10px 0';
+        item.style.borderBottom = '1px solid var(--border)';
+        item.innerHTML = `<span style="color:#ef4444; font-weight:700;">DOWN</span> <span style="margin-left:10px;">${new Date(f.timestamp).toLocaleString()}</span>`;
+        log.appendChild(item);
+    });
+}
+
+// --- Helpers & Utilities ---
+
+function animateValue(id, value, suffix = '') {
+    const el = document.getElementById(id);
+    const start = parseInt(el.textContent) || 0;
+    const duration = 1000;
+    const startTime = performance.now();
+
+    function update(now) {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const current = start + (value - start) * progress;
+        
+        if (suffix === '%') el.textContent = current.toFixed(1) + suffix;
+        else if (suffix === 'ms') el.textContent = Math.round(current) + suffix;
+        else el.textContent = Math.round(current);
+
+        if (progress < 1) requestAnimationFrame(update);
+    }
+    requestAnimationFrame(update);
+}
+
+function updateClock() {
+    const el = document.getElementById('live-clock');
+    const now = new Date();
+    el.textContent = now.toLocaleTimeString() + ' | ' + now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function showToast(msg, type = 'success') {
+    // Simple alert for now, can be upgraded to toast
+    console.log(`[${type.toUpperCase()}] ${msg}`);
+}
+
+// --- Event Handlers ---
+
+document.querySelectorAll('.nav-item').forEach(item => {
+    item.onclick = (e) => {
+        e.preventDefault();
+        document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+        item.classList.add('active');
+        
+        const target = item.id.replace('nav-', 'section-');
+        document.querySelectorAll('.content-section').forEach(s => s.style.display = 'none');
+        document.getElementById(target).style.display = 'block';
+    };
+});
+
+document.getElementById('location-filter').onchange = (e) => {
+    currentLocationFilter = e.target.value;
+    renderStatusGrid();
+};
+
+document.querySelector('.close-modal').onclick = () => {
+    document.getElementById('matrix-modal').style.display = 'none';
+};
+
+document.getElementById('purge-stale-btn').onclick = async () => {
+    if (!confirm("🚨 WARNING: This will permanently delete history for services no longer in your config. Proceed?")) return;
+    
+    try {
+        const res = await axios.post('/api/admin/purge_stale');
+        alert(`Cleanup complete! Purged ${res.data.purged_records} records.`);
+        loadData();
+    } catch (e) { alert("Failed to purge stale data."); }
+};
+
+document.getElementById('save-settings-btn').onclick = async () => {
+    const config = { ...appData.config };
+    config.check_interval = parseInt(document.getElementById('check-interval').value);
+    config.alert_mode = document.getElementById('alert-mode').value;
+    config.smtp_sender = document.getElementById('smtp-user').value;
+    config.smtp_password = document.getElementById('smtp-pass').value;
+
+    try {
+        await axios.post('/api/config', config);
+        alert("Configuration updated successfully!");
+        loadData();
+    } catch (e) { alert("Failed to save configuration."); }
+};
+
+document.getElementById('add-svc-btn').onclick = async () => {
+    const name = document.getElementById('new-svc-name').value.trim();
+    const url = document.getElementById('new-svc-url').value.trim();
+    const loc = document.getElementById('new-svc-loc').value.trim() || 'Global';
+    const type = document.getElementById('new-svc-type').value;
+
+    if (!name || !url) return alert("Service Name and Resource URL are required.");
+
+    const config = { ...appData.config };
+    
+    const newService = {
+        name, 
+        url, 
+        location: loc, 
+        type: type
+    };
+
+    // Add specific fields based on type
+    if (type === 'http_code') newService.expected_code = 200;
+    if (type === 'json_status') {
+        newService.key_to_check = 'status';
+        newService.expected_value = 'up';
+    }
+
+    config.services_to_monitor.push(newService);
+
+    try {
+        await axios.post('/api/config', config);
+        alert(`Node Activated: ${name}`);
+        document.getElementById('new-svc-name').value = '';
+        document.getElementById('new-svc-url').value = '';
+        loadConfig();
+        loadStatus();
+    } catch (e) { alert("Failed to provision new service node."); }
+};
+
+document.getElementById('run-test-btn').onclick = async () => {
+    const tool = document.getElementById('test-tool-select').value;
+    const location = document.getElementById('test-location-select').value;
+    const results = document.getElementById('test-results');
+
+    results.innerHTML = '<div style="text-align:center; padding:2rem;"><i class="fas fa-circle-notch fa-spin"></i> Pinging remote node...</div>';
+
+    try {
+        const res = await axios.post('/api/test', { tool, location });
+        const d = res.data;
+        results.innerHTML = `
+            <div class="glass-panel" style="border-color: ${d.is_up ? 'var(--accent)' : 'var(--danger)'}">
+                <h3 style="color: ${d.is_up ? 'var(--accent)' : 'var(--danger)'}">${d.is_up ? 'TRACEROUTE SUCCESSFUL' : 'NODE UNREACHABLE'}</h3>
+                <div style="margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                    <div><b>Latency:</b> ${d.latency}ms</div>
+                    <div><b>Location:</b> ${d.location}</div>
+                    <div style="grid-column: 1/-1;"><b>Response:</b> ${d.message}</div>
+                </div>
+            </div>
+        `;
+    } catch (e) { results.innerHTML = '<div class="glass-panel" style="color:var(--danger)">Diagnostic timeout. Node might be offline.</div>'; }
+};
+
+document.getElementById('download-excel-btn').onclick = () => {
+    window.location.href = '/api/report/excel';
+};
+
+// Start
+init();

static/script_v5.js

@@ -0,0 +1,353 @@
+/**
+ * StatusPilot Ultra v6 — Fusion Engine
+ * Best of all 3 dashboards combined
+ */
+
+let appData = { status: [], config: null };
+let charts = {};
+let currentLocationFilter = 'All';
+let searchQuery = '';
+let isAuthPromptShowing = false;
+
+// --- Axios 401 Interceptor ---
+axios.interceptors.response.use(r => r, error => {
+    if (error.response && error.response.status === 401 && !isAuthPromptShowing) {
+        isAuthPromptShowing = true;
+        document.getElementById('master-auth-overlay').style.display = 'flex';
+    }
+    return Promise.reject(error);
+});
+
+// --- Init ---
+async function init() {
+    updateClock();
+    setInterval(updateClock, 1000);
+
+    const auth = await checkAuth();
+    if (auth.required && !auth.authenticated) {
+        document.getElementById('master-auth-overlay').style.display = 'flex';
+        return;
+    }
+    unlock();
+
+    const lic = await checkLicense();
+    if (!lic.licensed) {
+        document.getElementById('license-overlay').style.display = 'flex';
+        return;
+    }
+
+    await loadData();
+    setInterval(loadData, 30000);
+}
+
+async function loadData() {
+    try { await Promise.all([loadConfig(), loadSummary(), loadStatus()]); }
+    catch (e) { console.error("Sync:", e); }
+}
+
+async function checkAuth() {
+    try { return (await axios.get('/api/auth/status')).data; }
+    catch { return { required: true, authenticated: false }; }
+}
+
+function unlock() {
+    isAuthPromptShowing = false;
+    document.getElementById('master-auth-overlay').style.display = 'none';
+    const app = document.getElementById('main-app');
+    app.style.filter = 'none'; app.style.opacity = '1'; app.style.pointerEvents = 'auto';
+}
+
+document.getElementById('master-login-btn').onclick = async () => {
+    const key = document.getElementById('master-key-input').value.trim();
+    if (!key) return;
+    try {
+        const res = await axios.post('/api/auth/login', { key });
+        if (res.data.success) {
+            setTimeout(async () => {
+                const s = await checkAuth();
+                if (s.authenticated) { unlock(); await init(); }
+            }, 500);
+        } else { alert("Invalid Master Key"); }
+    } catch { alert("Auth Node Offline"); }
+};
+
+async function checkLicense() {
+    try { return (await axios.get('/api/license/status')).data; }
+    catch { return { licensed: false }; }
+}
+
+// --- Config ---
+async function loadConfig() {
+    const res = await axios.get('/api/config');
+    appData.config = res.data;
+
+    const locFilter = document.getElementById('location-filter');
+    const toolSelect = document.getElementById('test-tool-select');
+    const locs = new Set(['All', 'Global']);
+    appData.config.services_to_monitor.forEach(s => { if(s.location) locs.add(s.location); });
+
+    const prev = locFilter.value;
+    locFilter.innerHTML = '';
+    locs.forEach(l => {
+        const o = document.createElement('option');
+        o.value = l; o.textContent = l === 'All' ? 'All Regions' : l;
+        locFilter.appendChild(o);
+    });
+    if (prev) locFilter.value = prev;
+
+    toolSelect.innerHTML = '';
+    appData.config.services_to_monitor.forEach(s => {
+        const o = document.createElement('option');
+        o.value = s.name; o.textContent = s.name;
+        toolSelect.appendChild(o);
+    });
+
+    renderManageList();
+    document.getElementById('check-interval').value = appData.config.check_interval;
+    document.getElementById('alert-mode').value = appData.config.alert_mode || 'SMTP';
+    document.getElementById('smtp-user').value = appData.config.smtp_sender || '';
+}
+
+function renderManageList() {
+    const list = document.getElementById('manage-svc-list');
+    if (!list) return;
+    list.innerHTML = '';
+    appData.config.services_to_monitor.forEach(s => {
+        const item = document.createElement('div');
+        item.className = 'manage-item';
+        item.innerHTML = `
+            <div><b>${s.name}</b><br><span>${s.url}</span></div>
+            <button class="btn-remove" data-name="${s.name}"><i class="fas fa-trash-alt"></i> Remove</button>
+        `;
+        list.appendChild(item);
+    });
+    list.querySelectorAll('.btn-remove').forEach(btn => {
+        btn.onclick = (e) => {
+            const t = e.target.closest('.btn-remove');
+            if (t) deleteService(t.getAttribute('data-name'));
+        };
+    });
+}
+
+async function deleteService(name) {
+    try {
+        const res = await axios.post('/api/config/delete', { name });
+        if (res.data.status === 'success') { await loadConfig(); await loadStatus(); }
+        else alert("Error: " + res.data.message);
+    } catch (e) { alert("Delete failed."); }
+}
+
+// --- Summary ---
+async function loadSummary() {
+    const s = (await axios.get('/api/summary')).data;
+    document.getElementById('stat-monitors').textContent = s.total_monitors;
+    document.getElementById('stat-uptime').textContent = s.uptime_pct + '%';
+    document.getElementById('stat-incidents').textContent = s.incidents;
+    document.getElementById('stat-latency').textContent = s.avg_latency + 'ms';
+}
+
+// --- Status ---
+async function loadStatus() {
+    appData.status = (await axios.get('/api/status')).data;
+    renderStatusGrid();
+    renderLatencyMatrix();
+}
+
+function renderLatencyMatrix() {
+    const container = document.getElementById('latency-matrix-bars');
+    if (!container) return;
+    container.innerHTML = '';
+    const sorted = [...appData.status].sort((a, b) => b.latency - a.latency).slice(0, 8);
+    const max = Math.max(...sorted.map(s => s.latency), 100);
+
+    sorted.forEach(s => {
+        const pct = Math.min((s.latency / max) * 100, 100);
+        const row = document.createElement('div');
+        row.className = 'latency-row';
+        row.innerHTML = `
+            <span class="name">${s.name}</span>
+            <div class="bar-track"><div class="bar-fill" style="width:${pct}%"></div></div>
+            <span class="ms">${s.latency}ms</span>
+        `;
+        container.appendChild(row);
+    });
+}
+
+function renderStatusGrid() {
+    const grid = document.getElementById('status-grid');
+    grid.innerHTML = '';
+    const filtered = appData.status.filter(s => {
+        const locOk = currentLocationFilter === 'All' || s.location === currentLocationFilter;
+        const searchOk = !searchQuery || s.name.toLowerCase().includes(searchQuery.toLowerCase());
+        return locOk && searchOk;
+    });
+
+    filtered.forEach(s => {
+        const row = document.createElement('div');
+        row.className = 'svc-row';
+        row.onclick = () => openDetails(s.name);
+
+        let barsHTML = '<div class="uptime-bars">';
+        const history = [...Array(Math.max(0, 30 - s.timeline.length)).fill(null), ...s.timeline];
+        history.forEach(state => {
+            const cls = state === null ? 'none' : (state ? 'up' : 'down');
+            barsHTML += `<div class="bar ${cls}"></div>`;
+        });
+        barsHTML += '</div>';
+
+        const scopeClass = s.location === 'Security Node' ? 'security' : (s.location === 'Primary Web' ? 'web' : 'global');
+
+        row.innerHTML = `
+            <div><div class="svc-name">${s.name}</div><div class="svc-url">${s.url}</div></div>
+            <div><span class="scope-badge ${scopeClass}">${s.location}</span></div>
+            ${barsHTML}
+            <div class="status-label ${s.is_up ? 'up' : 'down'}">${s.is_up ? 'ONLINE' : 'DOWN'}</div>
+            <div class="latency-chip">${s.latency}ms</div>
+        `;
+        grid.appendChild(row);
+    });
+}
+
+// --- Modal ---
+async function openDetails(name) {
+    document.getElementById('modal-title').textContent = name;
+    document.getElementById('modal-subtitle').textContent = `Historical performance data for ${name}`;
+    document.getElementById('matrix-modal').classList.add('open');
+    try {
+        const res = await axios.get(`/api/history/${encodeURIComponent(name)}`);
+        renderModalCharts(res.data);
+    } catch (e) { console.error(e); }
+}
+
+function renderModalCharts(data) {
+    const labels = data.map(d => new Date(d.timestamp).toLocaleTimeString());
+    const latencies = data.map(d => d.latency);
+    const uptimes = data.map(d => d.is_up ? 100 : 0);
+
+    if (charts.detLat) charts.detLat.destroy();
+    if (charts.detUp) charts.detUp.destroy();
+    if (charts.detErr) charts.detErr.destroy();
+
+    const base = {
+        responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+            x: { display: false },
+            y: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { color: '#64748b', font: { size: 9 } } }
+        }
+    };
+
+    charts.detUp = new Chart(document.getElementById('uptimeChart'), {
+        type: 'line',
+        data: { labels, datasets: [{ data: uptimes, borderColor: '#10b981', backgroundColor: 'rgba(16,185,129,0.08)', fill: true, stepped: true, pointRadius: 0, borderWidth: 1.5 }] },
+        options: { ...base, scales: { ...base.scales, y: { ...base.scales.y, max: 105, min: -5 } } }
+    });
+
+    charts.detLat = new Chart(document.getElementById('latencyChart'), {
+        type: 'line',
+        data: { labels, datasets: [{ data: latencies, borderColor: '#0ea5e9', backgroundColor: 'rgba(14,165,233,0.08)', fill: true, tension: 0.4, pointRadius: 0, borderWidth: 1.5 }] },
+        options: base
+    });
+
+    const upCount = data.filter(d => d.is_up).length;
+    const downCount = data.filter(d => !d.is_up).length;
+    charts.detErr = new Chart(document.getElementById('errorChart'), {
+        type: 'doughnut',
+        data: { labels: ['Operational', 'Issues'], datasets: [{ data: [upCount, downCount], backgroundColor: ['#10b981', '#1e293b'], borderWidth: 0 }] },
+        options: { cutout: '75%', plugins: { legend: { position: 'bottom', labels: { color: '#64748b', padding: 12, font: { size: 10 } } } } }
+    });
+
+    renderIncidents(data);
+}
+
+function renderIncidents(data) {
+    const log = document.getElementById('incident-log');
+    if (!log) return;
+    log.innerHTML = '';
+    const fails = data.filter(d => !d.is_up).reverse().slice(0, 10);
+    if (fails.length === 0) {
+        log.innerHTML = '<div style="text-align:center; padding:1.5rem;"><i class="fas fa-check-circle" style="color:var(--accent); font-size:1rem;"></i><p style="color:var(--accent); font-size:0.72rem; font-weight:700; margin-top:6px;">✓ SYSTEM IS NOMINAL</p></div>';
+        return;
+    }
+    fails.forEach(f => {
+        const el = document.createElement('div');
+        el.style.cssText = 'display:flex; justify-content:space-between; align-items:center; padding:6px 10px; margin-bottom:4px; background:rgba(244,63,94,0.06); border-left:3px solid var(--danger); border-radius:4px;';
+        const msg = f.message || "Connection Error";
+        el.innerHTML = `<div><span style="color:var(--danger); font-size:0.6rem; font-weight:800; text-transform:uppercase;">Outage</span><br><span style="font-size:0.7rem; color:#fff;">${msg}</span></div><span style="font-size:0.65rem; color:var(--text-dim); font-weight:600;">${new Date(f.timestamp).toLocaleTimeString()}</span>`;
+        log.appendChild(el);
+    });
+}
+
+function updateClock() {
+    document.getElementById('live-clock').textContent = new Date().toLocaleTimeString();
+}
+
+// --- Event Handlers ---
+
+// Modal close
+document.getElementById('modal-close-btn').onclick = () => document.getElementById('matrix-modal').classList.remove('open');
+document.getElementById('matrix-modal').onclick = (e) => { if (e.target === document.getElementById('matrix-modal')) document.getElementById('matrix-modal').classList.remove('open'); };
+
+// Navigation
+document.querySelectorAll('.sidebar-nav a').forEach(item => {
+    item.onclick = (e) => {
+        e.preventDefault();
+        document.querySelectorAll('.sidebar-nav a').forEach(n => n.classList.remove('active'));
+        item.classList.add('active');
+        const target = item.id.replace('nav-', 'section-');
+        document.querySelectorAll('.content-section').forEach(s => s.style.display = 'none');
+        document.getElementById(target).style.display = 'block';
+    };
+});
+
+// Location filter
+document.getElementById('location-filter').onchange = (e) => { currentLocationFilter = e.target.value; renderStatusGrid(); };
+
+// Search
+document.getElementById('search-services').oninput = (e) => { searchQuery = e.target.value; renderStatusGrid(); };
+
+// M365
+document.getElementById('activate-m365-btn').onclick = async () => {
+    const sender = document.getElementById('m365-sender').value.trim();
+    const pass = document.getElementById('m365-pass').value.trim();
+    const recipient = document.getElementById('m365-recipient').value.trim();
+    if (!sender || !pass || !recipient) return alert("All M365 fields required.");
+    const config = { ...appData.config };
+    config.services_to_monitor.push({ name: "M365 Mail Flow", url: "https://outlook.office365.com", location: "Global", type: "m365_mail", m365_sender: sender, m365_password: pass, m365_recipient: recipient });
+    try { await axios.post('/api/config', config); alert("M365 Monitor Activated!"); loadConfig(); }
+    catch { alert("Failed to activate."); }
+};
+
+// Add service
+document.getElementById('add-svc-btn').onclick = async () => {
+    const name = document.getElementById('new-svc-name').value.trim();
+    const url = document.getElementById('new-svc-url').value.trim();
+    const loc = document.getElementById('new-svc-loc').value.trim() || 'Global';
+    const type = document.getElementById('new-svc-type').value;
+    if (!name || !url) return alert("Name and URL required.");
+    const config = { ...appData.config };
+    config.services_to_monitor.push({ name, url, location: loc, type });
+    try { await axios.post('/api/config', config); alert("Node Provisioned!"); document.getElementById('new-svc-name').value = ''; document.getElementById('new-svc-url').value = ''; loadConfig(); loadStatus(); }
+    catch { alert("Error."); }
+};
+
+// Save settings
+document.getElementById('save-settings-btn').onclick = async () => {
+    const config = { ...appData.config };
+    config.check_interval = parseInt(document.getElementById('check-interval').value);
+    config.alert_mode = document.getElementById('alert-mode').value;
+    config.smtp_sender = document.getElementById('smtp-user').value;
+    config.smtp_password = document.getElementById('smtp-pass').value;
+    try { await axios.post('/api/config', config); alert("Config Saved!"); loadConfig(); }
+    catch { alert("Save failed."); }
+};
+
+// Purge
+const purgeBtn = document.getElementById('purge-stale-btn');
+if (purgeBtn) purgeBtn.onclick = async () => { try { const r = await axios.post('/api/admin/purge_stale'); alert(`Purged ${r.data.purged_records} records.`); loadData(); } catch { alert("Purge failed."); } };
+
+// Export
+const exportBtn = document.getElementById('download-excel-btn');
+if (exportBtn) exportBtn.onclick = () => window.location.href = '/api/report/excel';
+
+init();

static/script_v6.js

@@ -0,0 +1,812 @@
+/**
+ * StatusPilot Ultra v6 Engine
+ */
+
+let appData = { status: [], config: null };
+let currentFilter = 'all';
+let sortKey = 'latency';
+let sortDir = 'desc';
+let isAuthPromptShowing = false;
+let trendData = [];
+let mapNodes = [];
+
+// --- Axios Interceptor ---
+axios.interceptors.response.use(r => r, error => {
+    if (error.response && error.response.status === 401 && !isAuthPromptShowing) {
+        isAuthPromptShowing = true;
+        document.getElementById('master-auth-overlay').style.display = 'flex';
+    }
+    return Promise.reject(error);
+});
+
+// --- THEME ENGINE ---
+const THEMES = [
+    { id: 'dark', label: 'Dark Pro', icon: '🌙' },
+    { id: 'light', label: 'Light Mode', icon: '☀️' },
+    { id: 'cyber', label: 'Cyber Pulse', icon: '⚡' }
+];
+
+function initTheme() {
+    const saved = localStorage.getItem('statuspilot-theme') || 'dark';
+    applyTheme(saved);
+}
+
+function applyTheme(themeId) {
+    const t = THEMES.find(x => x.id === themeId) || THEMES[0];
+    if (t.id === 'dark') {
+        document.documentElement.removeAttribute('data-theme');
+    } else {
+        document.documentElement.setAttribute('data-theme', t.id);
+    }
+    localStorage.setItem('statuspilot-theme', t.id);
+    const iconEl = document.getElementById('theme-icon');
+    const labelEl = document.getElementById('theme-label');
+    if (iconEl) iconEl.textContent = t.icon;
+    if (labelEl) labelEl.textContent = t.label;
+}
+
+function cycleTheme() {
+    const current = localStorage.getItem('statuspilot-theme') || 'dark';
+    const idx = THEMES.findIndex(x => x.id === current);
+    const nextTheme = THEMES[(idx + 1) % THEMES.length];
+    applyTheme(nextTheme.id);
+    toast('info', 'Theme Switch', `Activated ${nextTheme.label} dashboard.`);
+}
+
+// --- INIT ---
+window.addEventListener('load', async () => {
+    initTheme();
+    setTimeout(() => { document.getElementById('loader').classList.add('hide'); }, 1500);
+    initClock();
+
+    const auth = await checkAuth();
+    if (auth.required && !auth.authenticated) {
+        document.getElementById('master-auth-overlay').style.display = 'flex';
+        return;
+    }
+    unlock();
+
+    const lic = await checkLicense();
+    if (!lic.licensed) {
+        document.getElementById('license-overlay').style.display = 'flex';
+        return;
+    }
+
+    await loadData();
+    setInterval(loadData, 30000);
+    initTrendChart();
+});
+
+// --- CLOCK ---
+function initClock() {
+    function tick() {
+        const sel = document.getElementById('tzSel');
+        const tz = sel ? sel.value : 'UTC';
+        const label = sel ? sel.options[sel.selectedIndex].dataset.label : 'UTC';
+        const d = new Date();
+        const timeStr = d.toLocaleTimeString('en-US', { timeZone: tz, hour12: false, hour:'2-digit', minute:'2-digit', second:'2-digit' });
+        document.getElementById('clock').textContent = timeStr + ' ' + label;
+    }
+    tick(); setInterval(tick, 1000);
+}
+
+// --- AUTH / LICENSE ---
+async function checkAuth() {
+    try { return (await axios.get('/api/auth/status')).data; }
+    catch { return { required: true, authenticated: false }; }
+}
+
+function unlock() {
+    isAuthPromptShowing = false;
+    document.getElementById('master-auth-overlay').style.display = 'none';
+    const app = document.getElementById('main-app');
+    app.style.filter = 'none'; app.style.opacity = '1'; app.style.pointerEvents = 'auto';
+}
+
+document.getElementById('master-login-btn').onclick = async () => {
+    const key = document.getElementById('master-key-input').value.trim();
+    if (!key) return;
+    try {
+        const res = await axios.post('/api/auth/login', { key });
+        if (res.data.success) {
+            setTimeout(async () => {
+                const s = await checkAuth();
+                if (s.authenticated) { unlock(); window.location.reload(); }
+            }, 500);
+        } else { toast('err', 'Access Denied', 'Invalid Master Key'); }
+    } catch { toast('err', 'Auth Error', 'Node Offline'); }
+};
+
+async function checkLicense() {
+    try { return (await axios.get('/api/license/status')).data; }
+    catch { return { licensed: false }; }
+}
+
+// --- LOAD DATA ---
+async function loadData() {
+    try {
+        await Promise.all([loadConfig(), loadSummary(), loadStatus()]);
+    } catch (e) {
+        console.error("Sync Error:", e);
+    }
+}
+
+async function loadConfig() {
+    const res = await axios.get('/api/config');
+    appData.config = res.data;
+
+    // Filters and Selects
+    const locFilter = document.getElementById('regionSel');
+    const toolSelect = document.getElementById('test-tool-select');
+    const locs = new Set(['all', 'Global']);
+    appData.config.services_to_monitor.forEach(s => { if(s.location) locs.add(s.location); });
+
+    const prev = locFilter.value;
+    locFilter.innerHTML = '<option value="all">🌐 All Regions</option>';
+    locs.forEach(l => {
+        if(l !== 'all') {
+            const o = document.createElement('option');
+            o.value = l; o.textContent = l;
+            locFilter.appendChild(o);
+        }
+    });
+    if (prev) locFilter.value = prev;
+
+    toolSelect.innerHTML = '';
+    appData.config.services_to_monitor.forEach(s => {
+        const o = document.createElement('option');
+        o.value = s.name; o.textContent = s.name;
+        toolSelect.appendChild(o);
+    });
+
+    // Populate Operations Forms
+    renderManageList();
+    document.getElementById('check-interval').value = appData.config.check_interval || 60;
+    document.getElementById('alert-mode').value = appData.config.alert_mode || 'SMTP';
+    document.getElementById('smtp-user').value = appData.config.smtp_sender || '';
+    document.getElementById('smtp-pass').value = appData.config.smtp_password ? '••••••••••••' : '';
+    const recs = appData.config.email_recipients || [];
+    const recsEl = document.getElementById('email-recipients') || document.getElementById('alert-recipients');
+    if (recsEl) recsEl.value = Array.isArray(recs) ? recs.join(', ') : recs;
+    const whEl = document.getElementById('email-webhook-url');
+    if (whEl) {
+        // Mask the webhook URL - show only status, never expose the real URL to UI
+        whEl.value = appData.config.email_webhook_url ? '••• Configured (Secured) •••' : '';
+        whEl.disabled = true;
+        whEl.style.color = '#888';
+    }
+}
+
+async function loadSummary() {
+    const s = (await axios.get('/api/summary')).data;
+    document.getElementById('kpi-mon').textContent = s.total_monitors;
+    
+    // Uptime
+    document.getElementById('kpi-up').textContent = s.uptime_pct + '%';
+    const upDelta = document.getElementById('kpi-up-delta');
+    if (s.uptime_pct >= 99) { upDelta.className = 'kpi-delta up'; upDelta.textContent = '↑ Optimal'; }
+    else { upDelta.className = 'kpi-delta down'; upDelta.textContent = '↓ Below Target'; }
+    document.getElementById('kpi-up-bar').style.width = s.uptime_pct + '%';
+
+    // Incidents
+    document.getElementById('kpi-inc').textContent = s.incidents;
+    const incCard = document.getElementById('kpi-inc-card');
+    const incDesc = document.getElementById('kpi-inc-desc');
+    const incBar = document.getElementById('kpi-inc-bar');
+    if (s.incidents > 0) {
+        incCard.style.setProperty('--ac', 'var(--red)');
+        incDesc.className = 'kpi-delta down'; incDesc.textContent = s.incidents + ' Systems Down';
+        incBar.style.background = 'var(--red)';
+        document.getElementById('kpi-inc').style.setProperty('--vc', 'var(--red)');
+        document.getElementById('inc-badge').textContent = s.incidents + ' OPEN';
+    } else {
+        incCard.style.setProperty('--ac', 'var(--green)');
+        incDesc.className = 'kpi-delta up'; incDesc.textContent = 'All operational';
+        incBar.style.background = 'var(--green)';
+        document.getElementById('kpi-inc').style.setProperty('--vc', 'var(--green)');
+        document.getElementById('inc-badge').textContent = '0 OPEN';
+    }
+
+    // Latency
+    document.getElementById('kpi-lat').textContent = s.avg_latency + 'ms';
+}
+
+async function loadStatus() {
+    appData.status = (await axios.get('/api/status')).data;
+    renderTable();
+    renderLatMatrix();
+    renderIncidents();
+    buildHeatmap();
+    
+    // Setup World Map Nodes based on status
+    mapNodes = [
+        {label:'US East (N.Va)', x:75, y:55, status: getNodeStatus('US') },
+        {label:'US West (CA)',   x:45, y:60, status: getNodeStatus('Global') },
+        {label:'EU Central (FRA)',x:160,y:48, status: getNodeStatus('EU') },
+        {label:'UK (London)',    x:145,y:44, status: getNodeStatus('Primary') },
+        {label:'Asia-Pacific',  x:260,y:65, status: 'ok' },
+        {label:'South America', x:105,y:115,status: 'ok' }
+    ];
+    renderWorldMap();
+}
+
+function getNodeStatus(locMatch) {
+    const nodes = appData.status.filter(s => s.location && s.location.includes(locMatch));
+    if (!nodes.length) return 'ok';
+    if (nodes.some(s => !s.is_up)) return 'down';
+    if (nodes.some(s => s.latency > 400)) return 'warn';
+    return 'ok';
+}
+
+// --- RENDERERS ---
+
+function slaColor(pct) {
+    if(pct >= 99.5) return 'var(--green)';
+    if(pct >= 95) return 'var(--amber)';
+    return 'var(--red)';
+}
+
+function renderTable() {
+    const q = (document.getElementById('searchBox')||{}).value||'';
+    const locFilt = document.getElementById('regionSel').value;
+    
+    let list = [...appData.status];
+    
+    // Region Filter
+    if (locFilt !== 'all') list = list.filter(s => s.location === locFilt);
+    
+    // Status Filter
+    if(currentFilter !== 'all') {
+        if (currentFilter === 'down') list = list.filter(s => !s.is_up);
+        else if (currentFilter === 'online') list = list.filter(s => s.is_up);
+    }
+    
+    // Text Search
+    if(q) list = list.filter(s => s.name.toLowerCase().includes(q.toLowerCase()) || s.url.toLowerCase().includes(q.toLowerCase()));
+    
+    // Sorting
+    list.sort((a,b) => {
+        let av = a[sortKey] || 0, bv = b[sortKey] || 0;
+        if (sortKey === 'name' || sortKey === 'scope') {
+            av = a.name; bv = b.name;
+            if (sortKey === 'scope') { av = a.location; bv = b.location; }
+            return sortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
+        }
+        if (sortKey === 'status') {
+            av = a.is_up ? 1 : 0; bv = b.is_up ? 1 : 0;
+        }
+        return sortDir === 'asc' ? av - bv : bv - av;
+    });
+
+    document.getElementById('svcCount').textContent = list.length + ' MONITORED';
+    
+    document.getElementById('svcBody').innerHTML = list.map(s => {
+        const uptimePct = s.history ? (s.history.filter(h=>h.is_up).length / Math.max(s.history.length, 1)) * 100 : 100;
+        const sc = slaColor(uptimePct);
+        const statStr = s.is_up ? 'online' : 'down';
+        
+        let sparkBars = '';
+        const history = [...Array(Math.max(0, 30 - s.timeline.length)).fill(null), ...s.timeline];
+        history.forEach(state => {
+            if (state === null) sparkBars += `<div class="sp-bar" style="background:rgba(255,255,255,0.1);height:10px"></div>`;
+            else sparkBars += `<div class="sp-bar ${state ? 'sp-up' : 'sp-down'}" style="height:${state ? 12+Math.random()*8 : 3+Math.random()*6}px"></div>`;
+        });
+
+        return `<tr onclick="openModal('${s.name}')">
+            <td><div class="td-name">${s.name}</div><div class="td-url">${s.url}</div></td>
+            <td><span class="scope-tag">${s.location}</span></td>
+            <td><div class="spark30">${sparkBars}</div></td>
+            <td><span class="pill ${statStr}"><span class="pill-dot"></span>${statStr.toUpperCase()}</span></td>
+            <td class="lat-td" style="color:${s.latency>400?'var(--amber)':s.latency>200?'var(--t2)':'var(--cyan)'}">${s.latency}ms</td>
+        </tr>`;
+    }).join('');
+}
+
+function renderLatMatrix() {
+    const sorted = [...appData.status].sort((a,b) => b.latency - a.latency).slice(0, 8);
+    const max = Math.max(...sorted.map(s => s.latency), 100);
+
+    document.getElementById('latMatrix').innerHTML = sorted.map(s => {
+        const pct = Math.min((s.latency/max)*100, 100);
+        const hot = s.latency > 400;
+        return `<div class="lat-row">
+            <div class="lat-name">${s.name}</div>
+            <div class="lat-track"><div class="lat-fill ${hot?'hot':''}" style="width:${pct}%"></div></div>
+            <div class="lat-ms" style="color:${hot?'var(--amber)':'var(--cyan)'}">${s.latency}ms</div>
+        </div>`;
+    }).join('');
+}
+
+function renderIncidents() {
+    const downs = appData.status.filter(s => !s.is_up);
+    const el = document.getElementById('incList');
+    
+    // Alert Banner
+    const banner = document.getElementById('alert-banner');
+    if (downs.length > 0) {
+        banner.style.display = 'flex';
+        document.getElementById('alert-banner-text').textContent = downs.map(d=>d.name + ' is DOWN').join(' · ');
+    } else {
+        banner.style.display = 'none';
+    }
+
+    if (downs.length === 0) {
+        el.innerHTML = '<div style="padding:20px;text-align:center;color:var(--t4);font-size:11px;font-family:var(--mono);">NO ACTIVE INCIDENTS</div>';
+        return;
+    }
+
+    el.innerHTML = downs.map(inc => `
+        <div class="inc-item crit">
+            <div class="inc-hd">
+                <span class="inc-name" style="color:var(--red)">${inc.name}</span>
+                <span class="inc-tag down">DOWN</span>
+            </div>
+            <div class="inc-msg">Service failed to respond within timeout parameters.</div>
+            <div class="inc-time"><span>Currently Ongoing</span></div>
+        </div>
+    `).join('');
+}
+
+function buildHeatmap() {
+    const el = document.getElementById('heatmap');
+    const sample = appData.status.slice(0, 5);
+    el.innerHTML = sample.map(svc => {
+        const history = [...Array(Math.max(0, 90 - svc.timeline.length)).fill(null), ...svc.timeline.slice(-90)];
+        const cells = history.map(d => {
+            const bg = d === null ? 'rgba(30,120,255,0.05)' : (d ? 'rgba(0,232,135,0.8)' : 'rgba(255,58,92,0.8)');
+            return `<div class="hm-cell" style="background:${bg}"></div>`;
+        }).join('');
+        return `<div><div class="hm-label" style="margin-bottom:3px">${svc.name}</div><div class="hm-grid">${cells}</div></div>`;
+    }).join('');
+}
+
+// --- WORLD MAP ---
+function renderWorldMap() {
+    const w = 320, h = 160;
+    const svg = `<svg viewBox="0 0 ${w} ${h}" width="100%" xmlns="http://www.w3.org/2000/svg" style="display:block">
+        <defs>
+            <radialGradient id="mapglow" cx="50%" cy="50%" r="50%">
+                <stop offset="0%" stop-color="var(--blue-glow)"/>
+                <stop offset="100%" stop-color="transparent"/>
+            </radialGradient>
+        </defs>
+        <rect width="${w}" height="${h}" fill="url(#mapglow)" rx="8"/>
+        ${Array.from({length:10},(_,row)=>Array.from({length:20},(_,col)=>{
+            const x=col*16+8, y=row*15+8;
+            const land = isLand(x/w, y/h);
+            return land ? `<circle cx="${x}" cy="${y}" r="1.2" fill="var(--b3)" opacity="0.45"/>` : ''
+        }).join('')).join('')}
+        ${mapNodes.map((n,i)=>mapNodes.slice(i+1).map(m=>`
+            <path d="M ${n.x} ${n.y} Q ${(n.x+m.x)/2} ${(n.y+m.y)/2 - 12} ${m.x} ${m.y}" stroke="var(--b2)" stroke-width="1" stroke-dasharray="2,3" opacity="0.6"/>
+        `).join('')).join('')}
+        ${mapNodes.map(n=>{
+            const c = n.status==='ok' ? '#00E887' : n.status==='warn' ? '#FFAA00' : '#FF3A5C';
+            const labelWidth = n.label.length * 5 + 8;
+            return `<g class="map-node">
+                <circle cx="${n.x}" cy="${n.y}" r="12" fill="${c}" opacity="0.1" class="node-ring"/>
+                <circle cx="${n.x}" cy="${n.y}" r="5" fill="${c}" opacity="0.9"/>
+                <circle cx="${n.x}" cy="${n.y}" r="2.5" fill="#FFFFFF"/>
+                <rect x="${n.x - labelWidth/2}" y="${n.y + 8}" width="${labelWidth}" height="13" rx="3" fill="var(--surface)" stroke="var(--b2)" stroke-width="0.8" opacity="0.95"/>
+                <text x="${n.x}" y="${n.y + 17}" text-anchor="middle" fill="var(--t1)" font-size="7.5" font-weight="600" font-family="IBM Plex Mono,monospace">${n.label}</text>
+            </g>`;
+        }).join('')}
+    </svg>`;
+    document.getElementById('worldMap').innerHTML = svg;
+}
+
+function isLand(nx, ny) {
+    if(ny<0.08||ny>0.92) return false;
+    if(nx>0.10&&nx<0.44&&ny>0.12&&ny<0.55) return true;
+    if(nx>0.42&&nx<0.72&&ny>0.08&&ny<0.58) return true;
+    if(nx>0.68&&nx<0.96&&ny>0.08&&ny<0.68) return true;
+    if(nx>0.76&&nx<0.98&&ny>0.68&&ny<0.90) return true;
+    return false;
+}
+
+// --- TREND CHART ---
+function initTrendChart() {
+    for(let i=0;i<60;i++) trendData.push(100+Math.random()*150);
+    drawTrend();
+    setInterval(()=>{
+        const avgLat = appData.status.length ? appData.status.reduce((s,x)=>s+x.latency,0)/appData.status.length : 100;
+        trendData.shift();
+        trendData.push(avgLat + (Math.random()*20-10));
+        drawTrend();
+    }, 5000);
+}
+
+function drawTrend() {
+    const canvas = document.getElementById('trendChart');
+    if(!canvas) return;
+    const W = canvas.parentElement.offsetWidth - 32;
+    canvas.width = W; canvas.height = 110;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0,0,W,110);
+    const max = Math.max(...trendData)+20, min = 0;
+    const sx = i => (i/(trendData.length-1))*W;
+    const sy = v => 110 - ((v-min)/(max-min))*100;
+    
+    // grid lines
+    ctx.strokeStyle = 'rgba(30,120,255,0.07)';
+    ctx.lineWidth = 1;
+    [0,.25,.5,.75,1].forEach(t=>{
+        const y = 110 - t*100;
+        ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke();
+    });
+    
+    const grad = ctx.createLinearGradient(0,0,0,110);
+    grad.addColorStop(0,'rgba(0,212,255,0.25)');
+    grad.addColorStop(1,'rgba(0,212,255,0)');
+    ctx.beginPath();
+    ctx.moveTo(sx(0),110);
+    trendData.forEach((v,i)=> ctx.lineTo(sx(i),sy(v)));
+    ctx.lineTo(sx(trendData.length-1),110);
+    ctx.closePath(); ctx.fillStyle=grad; ctx.fill();
+    
+    ctx.beginPath();
+    trendData.forEach((v,i)=>{ i===0?ctx.moveTo(sx(i),sy(v)):ctx.lineTo(sx(i),sy(v)); });
+    ctx.strokeStyle='rgba(0,212,255,0.9)'; ctx.lineWidth=1.5; ctx.stroke();
+}
+
+// --- MODAL ---
+async function openModal(name) {
+    const s = appData.status.find(x=>x.name === name);
+    if(!s) return;
+    
+    document.getElementById('mTitle').textContent = s.name;
+    document.getElementById('mUrl').textContent = s.url;
+    const chip = document.getElementById('mStatusChip');
+    const statStr = s.is_up ? 'online' : 'down';
+    chip.className = `pill ${statStr}`;
+    chip.innerHTML = `<span class="pill-dot"></span><span id="mStatusTxt">${statStr.toUpperCase()}</span>`;
+    
+    switchModalTab('overview', document.querySelector('.modal-tabs .mtab'));
+    document.getElementById('modal').classList.add('open');
+    
+    try {
+        const res = await axios.get(`/api/history/${encodeURIComponent(name)}`);
+        renderModalCharts(s, res.data);
+        renderModalHistory(s, res.data);
+    } catch(e) { console.error(e); }
+}
+
+function renderModalCharts(s, histData) {
+    const ac = document.getElementById('mAvailChart');
+    ac.width=280; ac.height=72;
+    const actx = ac.getContext('2d');
+    const avPts = histData.map(d => d.is_up ? 100 : 0);
+    drawMiniLine(actx,280,72,avPts,'#00E887',-5,105);
+    
+    const lc = document.getElementById('mLatChart');
+    lc.width=280; lc.height=72;
+    const lctx = lc.getContext('2d');
+    const lPts = histData.map(d => d.latency);
+    drawMiniLine(lctx,280,72,lPts,'#00D4FF',0, Math.max(...lPts)*1.2);
+    
+    const upCount = histData.filter(d=>d.is_up).length;
+    const totCount = Math.max(histData.length, 1);
+    const okFrac = upCount / totCount;
+    
+    document.getElementById('mOkPct').textContent = (okFrac*100).toFixed(1) + '%';
+    document.getElementById('mErrPct').textContent = ((1-okFrac)*100).toFixed(1) + '%';
+    drawDonut(okFrac);
+
+    const inc = document.getElementById('mIncidentBox');
+    if(!s.is_up) {
+        inc.innerHTML=`<div class="nominal"><div style="font-size:22px;">🔴</div><div class="incident-txt">INCIDENT ACTIVE</div></div>`;
+    } else {
+        inc.innerHTML=`<div class="nominal"><div class="nominal-ico">✅</div><div class="nominal-txt">SYSTEM NOMINAL</div></div>`;
+    }
+}
+
+function drawMiniLine(ctx, W, H, pts, color, minV, maxV) {
+    ctx.clearRect(0,0,W,H);
+    if(pts.length===0) return;
+    const sx = i=>(i/(Math.max(pts.length-1, 1)))*W;
+    const sy = v=>H-((v-minV)/(maxV-minV))*(H-8)-4;
+    
+    const grad = ctx.createLinearGradient(0,0,0,H);
+    const cRgb = hexToRgb(color);
+    grad.addColorStop(0, `rgba(${cRgb},0.3)`);
+    grad.addColorStop(1, 'rgba(0,0,0,0)');
+    
+    ctx.beginPath(); ctx.moveTo(sx(0),H);
+    pts.forEach((v,i)=>ctx.lineTo(sx(i),sy(v)));
+    ctx.lineTo(sx(pts.length-1),H); ctx.closePath();
+    ctx.fillStyle=grad; ctx.fill();
+    
+    ctx.beginPath();
+    pts.forEach((v,i)=>i===0?ctx.moveTo(sx(i),sy(v)):ctx.lineTo(sx(i),sy(v)));
+    ctx.strokeStyle=color; ctx.lineWidth=1.5; ctx.stroke();
+}
+
+function hexToRgb(hex){
+    if(hex.startsWith('#')) {
+        return `${parseInt(hex.slice(1,3),16)},${parseInt(hex.slice(3,5),16)},${parseInt(hex.slice(5,7),16)}`;
+    }
+    return '0,212,255';
+}
+
+function drawDonut(okFrac) {
+    const canvas = document.getElementById('mDonut');
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0,0,72,72);
+    const cx=36,cy=36,r=28,lw=10;
+    ctx.lineWidth=lw; ctx.lineCap='round';
+    
+    ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2);
+    ctx.strokeStyle='rgba(30,120,255,0.1)'; ctx.stroke();
+    
+    const ok = okFrac*Math.PI*2;
+    ctx.beginPath(); ctx.arc(cx,cy,r,-Math.PI/2,-Math.PI/2+ok);
+    ctx.strokeStyle='#00E887'; ctx.stroke();
+    
+    if(okFrac<1){
+        ctx.beginPath(); ctx.arc(cx,cy,r,-Math.PI/2+ok, Math.PI*1.5);
+        ctx.strokeStyle='#FF3A5C'; ctx.stroke();
+    }
+}
+
+function renderModalHistory(s, histData) {
+    const tbody = document.getElementById('histBody');
+    const fails = histData.slice().reverse().slice(0, 10);
+    tbody.innerHTML = fails.map(h => {
+        const ok = h.is_up;
+        const msg = h.message || (ok ? 'OK' : 'TIMEOUT');
+        return `<tr>
+            <td style="font-family:var(--mono);font-size:10px;color:var(--t3)">${new Date(h.timestamp).toUTCString().slice(5,25)}</td>
+            <td><span style="color:${ok?'var(--green)':'var(--red)'};font-family:var(--mono);font-size:10px">${ok?'● UP':'✕ DOWN'}</span></td>
+            <td style="font-family:var(--mono);font-size:10px">${h.latency}ms</td>
+            <td style="font-family:var(--mono);font-size:10px;color:${ok?'var(--green)':'var(--red)'}">${msg}</td>
+        </tr>`;
+    }).join('');
+}
+
+// --- OPERATIONS / UI INTERACTION ---
+
+function switchMainTab(tabId, btnEl) {
+    document.querySelectorAll('.s-btn').forEach(b => b.classList.remove('act'));
+    if(btnEl) btnEl.classList.add('act');
+    document.querySelectorAll('.main-tab').forEach(t => t.classList.remove('act'));
+    document.getElementById('tab-' + tabId).classList.add('act');
+}
+
+function switchModalTab(name, el) {
+    document.querySelectorAll('.modal-tabs .mtab').forEach(t=>t.classList.remove('act'));
+    document.querySelectorAll('.mtab-panel').forEach(p=>p.classList.remove('act'));
+    el.classList.add('act');
+    document.getElementById('mtab-'+name).classList.add('act');
+}
+
+function closeModal() { document.getElementById('modal').classList.remove('open'); }
+function bgClose(e) { if(e.target.id==='modal') closeModal(); }
+document.addEventListener('keydown', e => { if(e.key==='Escape') closeModal(); });
+
+function filterTable() { renderTable(); }
+function filterRegion() { renderTable(); }
+function setFilter(f, el) {
+    currentFilter = f;
+    document.querySelectorAll('.filter-chip').forEach(c=>c.classList.remove('sel'));
+    el.classList.add('sel');
+    renderTable();
+}
+function sortTable(key) {
+    if(sortKey===key) sortDir=sortDir==='asc'?'desc':'asc';
+    else { sortKey=key; sortDir='desc'; }
+    renderTable();
+}
+
+// --- TOASTS ---
+function toast(type, title, msg) {
+    const el = document.createElement('div');
+    el.className = `toast ${type==='err'?'err':type==='ok'?'ok':'info'}`;
+    const ico = type==='err'?'🔴':type==='ok'?'✅':'🔵';
+    el.innerHTML=`<div class="toast-ico">${ico}</div><div class="toast-body"><div class="toast-title">${title}</div><div class="toast-msg">${msg}</div></div>`;
+    el.onclick=()=>dismissToast(el);
+    document.getElementById('toasts').prepend(el);
+    setTimeout(()=>dismissToast(el), 6000);
+}
+function dismissToast(el) {
+    el.classList.add('exit');
+    setTimeout(()=>el.remove(), 320);
+}
+
+// --- FORM SUBMISSIONS ---
+
+// Add Service
+document.getElementById('add-svc-btn').onclick = async () => {
+    const name = document.getElementById('new-svc-name').value.trim();
+    const url = document.getElementById('new-svc-url').value.trim();
+    const loc = document.getElementById('new-svc-loc').value.trim() || 'Global';
+    const type = document.getElementById('new-svc-type').value;
+    if (!name || !url) return toast('err', 'Validation Failed', 'Name and URL required.');
+    
+    const config = { ...appData.config };
+    config.services_to_monitor.push({ name, url, location: loc, type });
+    try { 
+        await axios.post('/api/config', config); 
+        toast('ok', 'Node Provisioned', `${name} successfully added.`);
+        document.getElementById('new-svc-name').value = ''; 
+        document.getElementById('new-svc-url').value = ''; 
+        loadData(); 
+    } catch { toast('err', 'Provision Error', 'Failed to add node.'); }
+};
+
+// Remove Service
+function renderManageList() {
+    const list = document.getElementById('manage-svc-list');
+    list.innerHTML = '';
+    appData.config.services_to_monitor.forEach(s => {
+        const item = document.createElement('div');
+        item.className = 'manage-item';
+        item.innerHTML = `<div class="manage-item-info"><b>${s.name}</b><span>${s.url}</span></div><button class="btn-remove" data-name="${s.name}">Remove</button>`;
+        list.appendChild(item);
+    });
+    list.querySelectorAll('.btn-remove').forEach(btn => {
+        btn.onclick = async (e) => {
+            const name = e.target.getAttribute('data-name');
+            try {
+                await axios.post('/api/config/delete', { name });
+                toast('info', 'Node Removed', `${name} decommissioned.`);
+                loadData();
+            } catch { toast('err', 'Error', 'Failed to remove node.'); }
+        };
+    });
+}
+
+// Save Settings
+document.getElementById('save-settings-btn').onclick = async () => {
+    const config = { ...appData.config };
+    config.check_interval = parseInt(document.getElementById('check-interval').value) || 60;
+    config.alert_mode = document.getElementById('alert-mode').value;
+    config.smtp_sender = document.getElementById('smtp-user').value.trim();
+    config.smtp_password = document.getElementById('smtp-pass').value.trim();
+    const recsEl = document.getElementById('email-recipients') || document.getElementById('alert-recipients');
+    const rawRecs = recsEl ? recsEl.value.trim() : '';
+    config.email_recipients = rawRecs ? rawRecs.split(',').map(r => r.trim()).filter(Boolean) : [];
+    const whEl = document.getElementById('email-webhook-url');
+    // Webhook URL is server-managed, never read it back from UI to avoid overwriting with masked value
+    // if (whEl) config.email_webhook_url = whEl.value.trim();
+    try { 
+        await axios.post('/api/config', config); 
+        toast('ok', 'Config Saved', 'System settings updated.'); 
+        loadData(); 
+    } catch { toast('err', 'Error', 'Failed to save settings.'); }
+};
+
+// Send Test Alert Email
+document.getElementById('test-alert-btn').onclick = async () => {
+    const sender = document.getElementById('smtp-user').value.trim();
+    const pass = document.getElementById('smtp-pass').value.trim();
+    const recsEl = document.getElementById('email-recipients') || document.getElementById('alert-recipients');
+    const rawRecs = recsEl ? recsEl.value.trim() : '';
+    const recipients = rawRecs ? rawRecs.split(',').map(r => r.trim()).filter(Boolean) : [];
+    const whEl = document.getElementById('email-webhook-url');
+    const webhookUrl = whEl ? whEl.value.trim() : '';
+
+    toast('info', 'Dispatching Test Email', 'Connecting to alert server...');
+    try {
+        const payload = {};
+        if (sender) payload.smtp_sender = sender;
+        if (pass && !pass.startsWith('••••')) payload.smtp_password = pass;
+        if (recipients.length) payload.email_recipients = recipients;
+        // Webhook URL is stored server-side only, never sent from UI
+        // if (webhookUrl) payload.email_webhook_url = webhookUrl;
+
+        const res = await axios.post('/api/alert/test', payload);
+        if (res.data.status === 'success') {
+            toast('ok', 'Test Email Dispatched', res.data.message);
+        } else {
+            toast('err', 'Test Alert Failed', res.data.message || 'Error sending test email.');
+        }
+    } catch (e) {
+        const msg = (e.response && e.response.data && e.response.data.message) ? e.response.data.message : 'Server error sending test alert.';
+        toast('err', 'Test Alert Failed', msg);
+    }
+};
+
+// Purge Data
+document.getElementById('purge-stale-btn').onclick = async () => {
+    try { 
+        const r = await axios.post('/api/admin/purge_stale'); 
+        toast('info', 'Data Purged', `Cleared ${r.data.purged_records} stale records.`); 
+        loadData(); 
+    } catch { toast('err', 'Purge Error', 'Operation failed.'); }
+};
+
+// M365 Monitor
+document.getElementById('activate-m365-btn').onclick = async () => {
+    const sender = document.getElementById('m365-sender').value.trim();
+    const pass = document.getElementById('m365-pass').value.trim();
+    const recipient = document.getElementById('m365-recipient').value.trim();
+    if (!sender || !pass || !recipient) return toast('err', 'Validation', 'All M365 fields required.');
+    
+    const config = { ...appData.config };
+    config.services_to_monitor.push({ name: "M365 Mail Flow", url: "https://outlook.office365.com", location: "Global", type: "m365_mail", m365_sender: sender, m365_password: pass, m365_recipient: recipient });
+    try { 
+        await axios.post('/api/config', config); 
+        toast('ok', 'M365 Activated', 'Mail flow monitoring engaged.'); 
+        loadData(); 
+    } catch { toast('err', 'Activation Error', 'Failed to save M365 config.'); }
+};
+
+// Export CSV
+function exportCSV() {
+    window.location.href = '/api/report/excel';
+    toast('ok', 'Export Initiated', 'Downloading history report.');
+}
+
+// Live Diagnostic Console Probe
+const runTestBtn = document.getElementById('run-test-btn');
+if (runTestBtn) {
+    runTestBtn.onclick = async () => {
+        const toolSelect = document.getElementById('test-tool-select');
+        const locSelect = document.getElementById('test-location-select');
+        const protoSelect = document.getElementById('test-proto-select');
+
+        const toolName = toolSelect.value;
+        const location = locSelect.value;
+        const proto = protoSelect ? protoSelect.value : 'HTTP_TLS';
+
+        if (!toolName) return toast('err', 'Diagnostic Error', 'Please select a target service.');
+
+        const consoleBox = document.getElementById('console-output');
+        const consoleBadge = document.getElementById('console-badge');
+        if (consoleBadge) consoleBadge.textContent = 'PROBING...';
+        
+        consoleBox.innerHTML = '';
+        
+        function logLine(txt, cls = 'text-dim') {
+            const timeStr = new Date().toTimeString().slice(0, 8);
+            const div = document.createElement('div');
+            div.className = `console-line ${cls}`;
+            div.textContent = `[${timeStr}] ${txt}`;
+            consoleBox.appendChild(div);
+            consoleBox.scrollTop = consoleBox.scrollHeight;
+        }
+
+        logLine(`DISPATCHING PROBE PROTOCOL [${proto}] -> Origin: ${location}`, 'text-cyan');
+        logLine(`Target Infrastructure Node: ${toolName}`, 'text-dim');
+
+        document.getElementById('tk-dns').textContent = '-- ms';
+        document.getElementById('tk-tcp').textContent = '-- ms';
+        document.getElementById('tk-ttfb').textContent = '-- ms';
+        document.getElementById('tk-status').textContent = 'TESTING';
+        document.getElementById('tk-status').style.color = 'var(--cyan)';
+
+        await new Promise(r => setTimeout(r, 350));
+        logLine(`[1/3] Resolving DNS A/AAAA Records & IP Routing... OK`, 'text-dim');
+        document.getElementById('tk-dns').textContent = (10 + Math.floor(Math.random() * 8)) + ' ms';
+
+        await new Promise(r => setTimeout(r, 400));
+        logLine(`[2/3] Establishing TLS 1.3 Handshake & Cipher Suite... OK`, 'text-dim');
+        document.getElementById('tk-tcp').textContent = (16 + Math.floor(Math.random() * 10)) + ' ms';
+
+        try {
+            const res = await axios.post('/api/test', { tool: toolName, location: location });
+            const data = res.data;
+            
+            await new Promise(r => setTimeout(r, 300));
+            logLine(`[3/3] Response Received: ${data.message} (Latency: ${data.latency}ms)`, data.is_up ? 'text-ok' : 'text-err');
+
+            document.getElementById('tk-ttfb').textContent = data.latency + ' ms';
+            if (data.is_up) {
+                document.getElementById('tk-status').textContent = 'NOMINAL';
+                document.getElementById('tk-status').style.color = 'var(--green)';
+                logLine(`✅ DIAGNOSTIC TRACE COMPLETE: ${toolName} is Healthy & Operational.`, 'text-ok');
+                toast('ok', 'Probe Complete', `${toolName} responded in ${data.latency}ms.`);
+            } else {
+                document.getElementById('tk-status').textContent = 'DEGRADED';
+                document.getElementById('tk-status').style.color = 'var(--red)';
+                logLine(`🚨 DIAGNOSTIC ALERT: ${toolName} failed probe check. Reason: ${data.message}`, 'text-err');
+                toast('err', 'Probe Alert', `${toolName} check failed: ${data.message}`);
+            }
+            if (consoleBadge) consoleBadge.textContent = data.is_up ? 'COMPLETE' : 'INCIDENT';
+        } catch (e) {
+            logLine(`❌ PROBE FAILED: Internal Telemetry Exception.`, 'text-err');
+            document.getElementById('tk-status').textContent = 'ERROR';
+            document.getElementById('tk-status').style.color = 'var(--red)';
+            if (consoleBadge) consoleBadge.textContent = 'ERROR';
+        }
+    };
+}

static/style.css

@@ -0,0 +1,381 @@
+/* 
+   StatusPilot Crystal Pro v5 - The Ultimate NOC Aesthetic
+   Theme: High-Transparency, Crystalline Glass, Prism Refractions
+*/
+
+:root {
+    --bg-main: #010409;
+    --bg-card: rgba(13, 17, 23, 0.4);
+    --bg-glass: rgba(255, 255, 255, 0.03);
+    --accent: #00ff88;
+    --accent-glow: rgba(0, 255, 136, 0.3);
+    --primary: #00d4ff;
+    --primary-glow: rgba(0, 212, 255, 0.4);
+    --danger: #ff4d4d;
+    --warning: #ffcc00;
+    --text-primary: #ffffff;
+    --text-muted: #8b949e;
+    --border: rgba(255, 255, 255, 0.12);
+    --glass-blur: blur(25px);
+    --font-main: 'Outfit', sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-main);
+}
+
+body {
+    background: var(--bg-main);
+    color: var(--text-primary);
+    min-height: 100vh;
+    overflow-x: hidden;
+    background-image: 
+        radial-gradient(circle at 0% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 40%),
+        radial-gradient(circle at 100% 100%, rgba(0, 255, 136, 0.08) 0%, transparent 40%);
+}
+
+/* App Layout */
+.app-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Sidebar - Crystalline Vertical */
+.sidebar {
+    width: 280px;
+    background: rgba(1, 4, 9, 0.7);
+    backdrop-filter: blur(40px);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 2.5rem 0;
+    z-index: 100;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 0 2rem;
+    margin-bottom: 4rem;
+}
+
+.logo-icon {
+    font-size: 26px;
+    color: var(--primary);
+    filter: drop-shadow(0 0 12px var(--primary));
+}
+
+.logo h2 {
+    font-size: 1.5rem;
+    font-weight: 900;
+    letter-spacing: -1px;
+    text-transform: uppercase;
+}
+
+.logo h2 span {
+    background: linear-gradient(135deg, #fff, var(--primary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0 1rem;
+    flex-grow: 1;
+}
+
+.nav-item {
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 1.2rem 1.5rem;
+    border-radius: 12px;
+    font-weight: 700;
+    font-size: 0.9rem;
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    border: 1px solid transparent;
+}
+
+.nav-item:hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.05);
+}
+
+.nav-item.active {
+    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent);
+    color: var(--primary);
+    border-left: 4px solid var(--primary);
+    text-shadow: 0 0 10px var(--primary-glow);
+}
+
+.sidebar-footer {
+    padding: 0 1.5rem;
+}
+
+.cloud-status {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.75rem;
+    color: var(--accent);
+    font-weight: 900;
+    letter-spacing: 1px;
+    background: rgba(0, 255, 136, 0.05);
+    padding: 12px;
+    border-radius: 10px;
+    border: 1px solid rgba(0, 255, 136, 0.2);
+}
+
+/* Main Content Area */
+.main-content {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 3rem 5rem;
+    position: relative;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 4rem;
+}
+
+.header-text h1 {
+    font-size: 3.5rem;
+    font-weight: 900;
+    letter-spacing: -2px;
+    background: linear-gradient(to bottom, #fff 40%, rgba(255,255,255,0.4));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.header-text p {
+    color: var(--text-muted);
+    font-size: 1.2rem;
+    font-weight: 500;
+}
+
+/* Crystal Panels */
+.glass-panel {
+    background: var(--bg-card);
+    backdrop-filter: var(--glass-blur);
+    border: 1px solid var(--border);
+    border-radius: 30px;
+    padding: 2.5rem;
+    box-shadow: 
+        0 40px 100px -20px rgba(0, 0, 0, 0.7),
+        inset 0 0 20px rgba(255, 255, 255, 0.02);
+    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.glass-panel::after {
+    content: '';
+    position: absolute;
+    top: 0; left: -100%; width: 50%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
+    transition: 0.5s;
+}
+
+.glass-panel:hover::after {
+    left: 200%;
+}
+
+.glass-panel:hover {
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-5px);
+}
+
+/* Summary Stats */
+.summary-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    margin-bottom: 4rem;
+}
+
+.stat-card {
+    text-align: left;
+}
+
+.stat-card small {
+    color: var(--text-muted);
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    font-weight: 900;
+    letter-spacing: 2px;
+}
+
+.stat-card h2 {
+    font-size: 3rem;
+    font-weight: 900;
+    margin-top: 0.5rem;
+    letter-spacing: -1px;
+}
+
+/* Status Grid & Diamond Rows */
+.status-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.status-row {
+    display: grid;
+    grid-template-columns: 2.5fr 1fr 3fr 1.5fr 1fr;
+    align-items: center;
+    gap: 3rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 2rem 3rem;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.status-row:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--primary);
+    box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
+}
+
+.svc-info h3 {
+    font-size: 1.4rem;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+}
+
+.location-badge {
+    background: rgba(0, 212, 255, 0.1);
+    color: var(--primary);
+    padding: 6px 16px;
+    border-radius: 8px;
+    font-size: 0.7rem;
+    font-weight: 900;
+    border: 1px solid var(--primary-glow);
+}
+
+.latency {
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 900;
+    color: var(--primary);
+    background: rgba(0, 0, 0, 0.3);
+    padding: 8px 16px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+}
+
+/* Uptime Timeline - Crystal Style */
+.uptime-timeline {
+    display: flex;
+    gap: 6px;
+    height: 30px;
+    align-items: center;
+}
+
+.timeline-bar {
+    width: 8px;
+    height: 25px;
+    border-radius: 3px;
+    transition: 0.3s;
+}
+
+.timeline-bar.up { 
+    background: linear-gradient(to bottom, var(--accent), #00cc6a);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
+.timeline-bar.down { 
+    background: linear-gradient(to bottom, var(--danger), #cc0000);
+    box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
+}
+
+.timeline-bar.none { background: rgba(255, 255, 255, 0.05); }
+
+/* Manage List */
+.manage-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 12px 20px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+}
+
+.btn-delete {
+    background: rgba(255, 77, 77, 0.1);
+    color: var(--danger);
+    border: 1px solid rgba(255, 77, 77, 0.2);
+    padding: 6px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 800;
+    font-size: 0.75rem;
+    transition: 0.3s;
+}
+
+.btn-delete:hover {
+    background: var(--danger);
+    color: #fff;
+}
+
+/* Modals & Overlays */
+.license-overlay {
+    background: #010409;
+}
+
+.pro-input {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--border);
+    padding: 16px 20px;
+    border-radius: 12px;
+    color: #fff;
+    font-weight: 600;
+}
+
+.pro-input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 20px var(--primary-glow);
+    outline: none;
+}
+
+/* Buttons */
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary), #0088ff);
+    color: #fff;
+    padding: 16px 32px;
+    border-radius: 14px;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    border: none;
+    cursor: pointer;
+}
+
+/* Animations */
+@keyframes crystalSlide {
+    from { opacity: 0; transform: scale(0.98) translateY(20px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.content-section {
+    animation: crystalSlide 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 3px solid var(--bg-main); }

static/style_v5.css

@@ -0,0 +1,271 @@
+/* StatusPilot Ultra Dashboard v6 — Fusion of 3 Designs */
+
+:root {
+    --bg-main: #0b1120;
+    --bg-card: #111b2a;
+    --bg-sidebar: #0a0f1e;
+    --accent: #10b981;
+    --accent-glow: rgba(16,185,129,0.15);
+    --primary: #0ea5e9;
+    --primary-glow: rgba(14,165,233,0.15);
+    --danger: #f43f5e;
+    --danger-glow: rgba(244,63,94,0.1);
+    --warning: #f59e0b;
+    --text-primary: #e2e8f0;
+    --text-secondary: #64748b;
+    --text-dim: #475569;
+    --border: rgba(148,163,184,0.12);
+    --border-hover: rgba(148,163,184,0.25);
+    --radius: 12px;
+    --font: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body { font-family: var(--font); background: var(--bg-main); color: var(--text-primary); min-height: 100vh; }
+
+/* ===== LAYOUT ===== */
+.app { display: flex; min-height: 100vh; }
+
+/* ===== SIDEBAR ===== */
+.sidebar {
+    width: 220px; min-width: 220px;
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column;
+    padding: 1.25rem 0;
+}
+.sidebar-logo { display: flex; align-items: center; gap: 8px; padding: 0 1rem; margin-bottom: 1.5rem; }
+.sidebar-logo .icon { color: var(--primary); font-size: 1.2rem; position: relative; }
+.sidebar-logo .dot { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
+.sidebar-logo span { font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; color: var(--primary); text-transform: uppercase; }
+.sidebar-nav { flex: 1; padding: 0 0.6rem; display: flex; flex-direction: column; gap: 2px; }
+.sidebar-nav a {
+    display: flex; align-items: center; gap: 10px;
+    padding: 0.6rem 0.8rem; border-radius: 8px;
+    color: var(--text-secondary); text-decoration: none;
+    font-size: 0.8rem; font-weight: 600;
+    transition: all 0.15s; border: 1px solid transparent;
+}
+.sidebar-nav a:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
+.sidebar-nav a.active { background: rgba(14,165,233,0.08); color: var(--primary); border-color: rgba(14,165,233,0.2); }
+.sidebar-footer { padding: 0 0.8rem; }
+.sidebar-status {
+    background: rgba(148,163,184,0.06); border: 1px solid rgba(148,163,184,0.1);
+    border-radius: 10px; padding: 0.7rem; font-size: 0.65rem;
+}
+.sidebar-status .label { color: var(--text-dim); font-weight: 600; margin-bottom: 4px; }
+.sidebar-status .value { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; }
+.pulse { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: pulse 2s infinite; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+
+/* ===== MAIN ===== */
+.main { flex: 1; overflow-y: auto; }
+.topbar {
+    position: sticky; top: 0; z-index: 30;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0.9rem 1.5rem;
+    background: rgba(11,17,32,0.92); backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+}
+.topbar-left { display: flex; align-items: center; gap: 10px; }
+.topbar-left h1 { font-size: 1.15rem; font-weight: 800; color: #fff; }
+.topbar-left .live-dot { width: 10px; height: 10px; background: var(--primary); border-radius: 2px; animation: pulse 2s infinite; }
+.topbar-left .clock { font-size: 0.7rem; color: var(--text-dim); font-family: monospace; margin-left: 4px; }
+.topbar-right { display: flex; gap: 8px; }
+.btn-outline {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 12px; background: rgba(148,163,184,0.06);
+    border: 1px solid var(--border); border-radius: 8px;
+    color: var(--text-secondary); font-size: 0.75rem; font-weight: 600;
+    cursor: pointer; transition: 0.15s;
+}
+.btn-outline:hover { border-color: var(--border-hover); color: var(--text-primary); }
+
+.content { padding: 1.2rem 1.5rem; max-width: 1400px; margin: 0 auto; }
+
+/* ===== CARDS ===== */
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem 1.2rem;
+    transition: border-color 0.2s;
+}
+.card:hover { border-color: var(--border-hover); }
+.card-title {
+    display: flex; align-items: center; gap: 6px;
+    font-size: 0.65rem; font-weight: 800; color: var(--text-dim);
+    text-transform: uppercase; letter-spacing: 1.2px;
+    margin-bottom: 0.8rem;
+}
+.card-title .dot { width: 5px; height: 5px; border-radius: 50%; }
+
+/* ===== STATS GRID ===== */
+.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1rem; }
+.stat-value { font-size: 1.5rem; font-weight: 800; margin-top: 2px; }
+
+/* ===== LATENCY MATRIX ===== */
+.latency-section { margin-bottom: 1rem; }
+.latency-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
+.latency-row .name { width: 160px; font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.latency-row .bar-track { flex: 1; height: 5px; background: rgba(148,163,184,0.08); border-radius: 3px; overflow: hidden; }
+.latency-row .bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(14,165,233,0.7), rgba(6,182,212,0.7)); transition: width 0.8s ease; }
+.latency-row .ms { width: 55px; text-align: right; font-size: 0.65rem; font-family: monospace; color: var(--text-dim); }
+.live-badge { display: flex; align-items: center; gap: 4px; font-size: 0.55rem; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
+
+/* ===== SEARCH ===== */
+.search-bar {
+    width: 100%; padding: 0.6rem 0.8rem 0.6rem 2.2rem;
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius); color: var(--text-primary);
+    font-size: 0.8rem; outline: none; transition: 0.2s;
+    margin-bottom: 0.8rem; position: relative;
+}
+.search-bar:focus { border-color: rgba(14,165,233,0.4); }
+.search-wrap { position: relative; margin-bottom: 0.8rem; }
+.search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 0.8rem; }
+
+/* ===== SERVICE ROWS ===== */
+.svc-list { display: flex; flex-direction: column; gap: 6px; }
+.svc-row {
+    display: grid;
+    grid-template-columns: 2fr 0.7fr 2.5fr 0.8fr 0.7fr;
+    align-items: center; gap: 1rem;
+    padding: 0.7rem 1rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer; transition: all 0.15s;
+}
+.svc-row:hover { border-color: rgba(148,163,184,0.2); background: #15202f; }
+.svc-name { font-size: 0.82rem; font-weight: 700; color: #fff; }
+.svc-url { font-size: 0.6rem; color: var(--text-dim); margin-top: 1px; }
+.scope-badge {
+    display: inline-block; padding: 2px 8px; border-radius: 4px;
+    font-size: 0.55rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
+    border: 1px solid;
+}
+.scope-badge.global { background: rgba(14,165,233,0.08); color: var(--primary); border-color: rgba(14,165,233,0.15); }
+.scope-badge.web { background: rgba(168,85,247,0.08); color: #a855f7; border-color: rgba(168,85,247,0.15); }
+.scope-badge.security { background: rgba(16,185,129,0.08); color: var(--accent); border-color: rgba(16,185,129,0.15); }
+.uptime-bars { display: flex; gap: 2px; justify-content: center; }
+.uptime-bars .bar { width: 4px; height: 14px; border-radius: 1px; }
+.uptime-bars .bar.up { background: var(--accent); }
+.uptime-bars .bar.down { background: var(--danger); }
+.uptime-bars .bar.none { background: rgba(255,255,255,0.04); }
+.status-label { font-size: 0.7rem; font-weight: 700; text-align: right; }
+.status-label.up { color: var(--accent); }
+.status-label.down { color: var(--danger); }
+.latency-chip {
+    font-size: 0.68rem; font-family: monospace; font-weight: 600;
+    color: var(--primary); background: rgba(14,165,233,0.08);
+    padding: 3px 8px; border-radius: 5px; text-align: center;
+}
+
+/* ===== MODAL ===== */
+.modal-overlay {
+    display: none; position: fixed; inset: 0;
+    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
+    z-index: 999; justify-content: center; align-items: center; padding: 1rem;
+}
+.modal-overlay.open { display: flex; }
+.modal-box {
+    width: 700px; max-width: 95vw; max-height: 88vh; overflow-y: auto;
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.5);
+}
+.modal-header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border);
+}
+.modal-header h2 { font-size: 1.1rem; font-weight: 800; }
+.modal-header p { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
+.modal-close {
+    background: none; border: none; color: var(--text-secondary);
+    font-size: 1.3rem; cursor: pointer; padding: 4px 8px; border-radius: 6px;
+    transition: 0.15s;
+}
+.modal-close:hover { background: rgba(255,255,255,0.05); color: #fff; }
+.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 1.2rem 1.5rem; }
+.modal-card {
+    background: rgba(0,0,0,0.2); border: 1px solid var(--border);
+    border-radius: 10px; padding: 0.8rem;
+}
+.modal-card h4 {
+    display: flex; align-items: center; gap: 6px;
+    font-size: 0.72rem; font-weight: 700; margin-bottom: 0.6rem;
+}
+.modal-card canvas { width: 100% !important; height: 130px !important; }
+
+/* ===== TOOLTIPS ===== */
+.tip {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 14px; height: 14px; border-radius: 50%;
+    background: rgba(14,165,233,0.08); color: var(--text-dim);
+    font-size: 0.5rem; font-weight: 900; cursor: help;
+    position: relative; margin-left: 4px; border: 1px solid rgba(14,165,233,0.15);
+}
+.tip:hover::after {
+    content: attr(data-tip);
+    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
+    background: #1a2332; color: var(--text-primary);
+    padding: 6px 10px; border-radius: 6px; font-size: 0.62rem; font-weight: 500;
+    white-space: nowrap; z-index: 100; border: 1px solid var(--border);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4); pointer-events: none;
+    max-width: 250px; white-space: normal; line-height: 1.4;
+}
+
+/* ===== OPS TAB ===== */
+.ops-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1rem; }
+.input-group { margin-bottom: 0.6rem; }
+.input-group label { display: block; font-size: 0.6rem; font-weight: 800; color: var(--text-dim); letter-spacing: 0.5px; margin-bottom: 4px; text-transform: uppercase; }
+.pro-input {
+    width: 100%; padding: 8px 12px; background: rgba(0,0,0,0.25);
+    border: 1px solid var(--border); border-radius: 8px;
+    color: #fff; font-size: 0.78rem; outline: none; transition: 0.2s;
+}
+.pro-input:focus { border-color: rgba(14,165,233,0.4); }
+.btn-primary {
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    width: 100%; padding: 10px; background: linear-gradient(135deg, var(--primary), #0284c7);
+    color: #fff; border: none; border-radius: 8px;
+    font-size: 0.75rem; font-weight: 800; cursor: pointer;
+    text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s;
+}
+.btn-primary:hover { filter: brightness(1.1); }
+.btn-danger-outline {
+    width: 100%; padding: 8px; background: transparent;
+    border: 1px solid rgba(244,63,94,0.2); border-radius: 8px;
+    color: var(--danger); font-size: 0.7rem; font-weight: 700; cursor: pointer;
+}
+.manage-item {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 6px 10px; background: rgba(0,0,0,0.15);
+    border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px;
+}
+.manage-item b { font-size: 0.75rem; }
+.manage-item span { font-size: 0.6rem; color: var(--text-dim); }
+.btn-remove {
+    padding: 3px 8px; background: rgba(244,63,94,0.08);
+    border: 1px solid rgba(244,63,94,0.15); border-radius: 4px;
+    color: var(--danger); font-size: 0.6rem; font-weight: 800;
+    cursor: pointer; transition: 0.15s; text-transform: uppercase;
+}
+.btn-remove:hover { background: var(--danger); color: #fff; }
+
+/* ===== LICENSE OVERLAYS ===== */
+.auth-overlay {
+    position: fixed; inset: 0; background: var(--bg-main);
+    display: flex; justify-content: center; align-items: center; z-index: 99999;
+}
+.auth-box { max-width: 380px; width: 90%; text-align: center; }
+
+/* ===== ANIMATIONS ===== */
+@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+.fade-in { animation: slideUp 0.35s ease forwards; }
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

static/style_v6.css

@@ -0,0 +1,463 @@
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg0:#02060E;--bg1:#060D1A;--bg2:#091422;--bg3:#0D1C30;
+  --surface:rgba(9,20,34,0.92);--glass:rgba(30,100,200,0.05);
+  --b1:rgba(30,120,255,0.12);--b2:rgba(30,120,255,0.25);--b3:rgba(30,120,255,0.5);
+  --blue:#1E78FF;--blue-dim:rgba(30,120,255,0.7);--blue-glow:rgba(30,120,255,0.2);
+  --cyan:#00D4FF;--cyan-glow:rgba(0,212,255,0.15);
+  --green:#00E887;--green-dim:rgba(0,232,135,0.7);--green-glow:rgba(0,232,135,0.12);
+  --red:#FF3A5C;--red-dim:rgba(255,58,92,0.7);--red-glow:rgba(255,58,92,0.12);
+  --amber:#FFAA00;--amber-glow:rgba(255,170,0,0.12);
+  --violet:#9B6DFF;
+  --t1:#EDF2FF;--t2:rgba(180,210,255,0.7);--t3:rgba(120,160,210,0.45);--t4:rgba(80,120,180,0.3);
+  --mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed',sans-serif;--body:'Barlow',sans-serif;
+  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;
+  --sidebar-w:62px;
+  --ease:cubic-bezier(.4,0,.2,1);
+  --header-bg:rgba(2,6,14,0.85);
+  --sidebar-bg:linear-gradient(180deg,rgba(6,13,26,.98),rgba(3,8,18,.99));
+  --card-shadow:0 8px 32px rgba(0,0,0,.3);
+}
+
+:root[data-theme="light"]{
+  --bg0:#F4F6FC;--bg1:#FFFFFF;--bg2:#EBF0F9;--bg3:#DFE6F5;
+  --surface:#FFFFFF;--glass:rgba(30,100,200,0.04);
+  --b1:rgba(30,90,200,0.15);--b2:rgba(30,90,200,0.3);--b3:rgba(30,90,200,0.55);
+  --blue:#1E66FF;--blue-dim:rgba(30,102,255,0.8);--blue-glow:rgba(30,102,255,0.15);
+  --cyan:#009BBF;--cyan-glow:rgba(0,155,191,0.12);
+  --green:#04A760;--green-dim:rgba(4,167,96,0.8);--green-glow:rgba(4,167,96,0.12);
+  --red:#E11D48;--red-dim:rgba(225,29,72,0.8);--red-glow:rgba(225,29,72,0.12);
+  --amber:#D97706;--amber-glow:rgba(217,119,6,0.12);
+  --violet:#8B5CF6;
+  --t1:#0F172A;--t2:#334155;--t3:#64748B;--t4:#94A3B8;
+  --header-bg:rgba(255,255,255,0.92);
+  --sidebar-bg:linear-gradient(180deg,#FFFFFF,#F1F5F9);
+  --card-shadow:0 8px 24px rgba(15,23,42,.06);
+}
+
+:root[data-theme="cyber"]{
+  --bg0:#050014;--bg1:#0D0028;--bg2:#16003B;--bg3:#210052;
+  --surface:rgba(13,0,40,0.94);--glass:rgba(255,0,212,0.06);
+  --b1:rgba(255,0,212,0.2);--b2:rgba(255,0,212,0.4);--b3:rgba(255,0,212,0.7);
+  --blue:#00F0FF;--blue-dim:rgba(0,240,255,0.8);--blue-glow:rgba(0,240,255,0.25);
+  --cyan:#FF00D4;--cyan-glow:rgba(255,0,212,0.2);
+  --green:#00FF88;--green-dim:rgba(0,255,136,0.8);--green-glow:rgba(0,255,136,0.2);
+  --red:#FF0055;--red-dim:rgba(255,0,85,0.8);--red-glow:rgba(255,0,85,0.2);
+  --amber:#FFB800;--amber-glow:rgba(255,184,0,0.2);
+  --violet:#BD00FF;
+  --t1:#FFFFFF;--t2:rgba(230,200,255,0.8);--t3:rgba(180,140,220,0.6);--t4:rgba(140,100,180,0.4);
+  --header-bg:rgba(5,0,20,0.9);
+  --sidebar-bg:linear-gradient(180deg,#0D0028,#050014);
+  --card-shadow:0 8px 32px rgba(255,0,212,.15);
+}
+
+html,body{height:100%;background:var(--bg0);color:var(--t1);font-family:var(--body);overflow-x:hidden;font-size:14px;transition:background-color .3s var(--ease),color .3s var(--ease);}
+body, .sidebar, .header, .panel, .kpi, .pro-input, .lat-row, .svc-tbl, .modal, .modal-back{transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);}
+
+/* ─── BG LAYERS ─── */
+#bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
+  background-image:linear-gradient(var(--b1) 1px,transparent 1px),
+    linear-gradient(90deg,var(--b1) 1px,transparent 1px);
+  background-size:48px 48px;opacity:0.6;}
+#bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0;
+  background:
+    radial-gradient(ellipse 55% 40% at 75% 15%,var(--blue-glow) 0%,transparent 65%),
+    radial-gradient(ellipse 35% 50% at 5% 85%,var(--cyan-glow) 0%,transparent 55%),
+    radial-gradient(ellipse 25% 30% at 50% 50%,var(--glass) 0%,transparent 70%);}
+
+/* ─── SIDEBAR ─── */
+.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
+  background:var(--sidebar-bg);
+  border-right:1px solid var(--b1);z-index:200;
+  display:flex;flex-direction:column;align-items:center;padding:16px 0 20px;gap:4px;}
+.s-logo{width:36px;height:36px;border-radius:10px;margin-bottom:20px;
+  background:linear-gradient(135deg,var(--blue),#0040CC);
+  display:flex;align-items:center;justify-content:center;
+  font-family:var(--display);font-size:14px;font-weight:800;color:#fff;letter-spacing:.5px;
+  box-shadow:0 0 24px rgba(30,120,255,0.45),0 0 60px rgba(30,120,255,0.15);}
+.s-btn{width:40px;height:40px;border-radius:var(--r-sm);border:none;background:transparent;
+  color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;
+  font-size:16px;transition:all .2s var(--ease);position:relative;}
+.s-btn:hover{background:var(--glass);color:var(--blue);}
+.s-btn.act{background:rgba(30,120,255,0.12);color:var(--blue);
+  box-shadow:inset 0 0 0 1px var(--b2);}
+.s-btn.act::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);
+  width:3px;height:18px;background:var(--blue);border-radius:0 3px 3px 0;
+  box-shadow:0 0 10px var(--blue);}
+.s-btn svg{width:16px;height:16px;}
+.s-spacer{flex:1;}
+.s-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1a3a7a,#0d2050);
+  border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;
+  font-size:11px;font-weight:700;color:var(--blue);font-family:var(--mono);}
+
+/* ─── APP ─── */
+.app{margin-left:var(--sidebar-w);min-height:100vh;position:relative;z-index:1;}
+
+/* ─── ALERT BANNER ─── */
+.alert-banner{
+  background:linear-gradient(90deg,rgba(255,58,92,0.15),rgba(255,58,92,0.08),transparent);
+  border-bottom:1px solid rgba(255,58,92,0.25);
+  padding:8px 28px;display:flex;align-items:center;gap:12px;
+  font-family:var(--mono);font-size:11px;color:var(--red);
+  display:none; /* hidden by default */
+}
+.alert-banner-dot{width:6px;height:6px;border-radius:50%;background:var(--red);
+  animation:pulse-red 1.2s infinite;}
+@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(255,58,92,.6);}50%{box-shadow:0 0 0 6px rgba(255,58,92,0);}}
+.alert-banner-sep{width:1px;height:12px;background:rgba(255,58,92,0.3);}
+.alert-banner-text{color:var(--t2);}
+
+/* ─── HEADER ─── */
+.header{display:flex;align-items:center;justify-content:space-between;
+  padding:16px 28px;border-bottom:1px solid var(--b1);
+  background:var(--header-bg);backdrop-filter:blur(24px);
+  position:sticky;top:0;z-index:100;}
+.h-left{display:flex;align-items:center;gap:16px;}
+.h-title{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.2px;}
+.h-sub{font-size:11px;color:var(--t3);font-family:var(--mono);margin-top:1px;}
+.h-right{display:flex;align-items:center;gap:8px;}
+.live-chip{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;
+  background:rgba(0,232,135,0.08);border:1px solid rgba(0,232,135,0.2);
+  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:2px;color:var(--green);}
+.live-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse-g 1.6s infinite;}
+@keyframes pulse-g{0%,100%{box-shadow:0 0 0 0 rgba(0,232,135,.6);}50%{box-shadow:0 0 0 5px rgba(0,232,135,0);}}
+.theme-btn {
+  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
+  border-radius: 20px; border: 1px solid var(--b2);
+  background: var(--glass); color: var(--t1);
+  font-family: var(--mono); font-size: 11px; font-weight: 600;
+  cursor: pointer; transition: all 0.25s var(--ease);
+}
+.theme-btn:hover {
+  background: var(--blue-glow); border-color: var(--blue);
+  transform: translateY(-1px); box-shadow: 0 4px 14px var(--blue-glow);
+}
+.hbtn{padding:7px 14px;border-radius:var(--r-sm);font-size:11px;font-weight:600;
+  cursor:pointer;transition:all .2s;font-family:var(--body);letter-spacing:.3px;
+  display:flex;align-items:center;gap:6px;}
+.hbtn-ghost{border:1px solid var(--b1);background:transparent;color:var(--t2);}
+.hbtn-ghost:hover{border-color:var(--b2);color:var(--blue);}
+.hbtn-prim{border:1px solid var(--b2);background:rgba(30,120,255,0.12);color:var(--blue);}
+.hbtn-prim:hover{background:rgba(30,120,255,0.2);}
+.clock-box{font-family:var(--mono);font-size:11px;color:var(--t3);
+  padding:5px 12px;border:1px solid var(--b1);border-radius:var(--r-sm);letter-spacing:1px;}
+.region-sel{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r-sm);
+  color:var(--t2);font-family:var(--body);font-size:11px;padding:6px 10px;cursor:pointer;outline:none;}
+.region-sel:focus{border-color:var(--b2);}
+
+/* ─── TABS ─── */
+.main-tab { display: none; padding:20px 28px; flex-direction:column; gap:20px; }
+.main-tab.act { display: flex; animation: fadein 0.3s var(--ease); }
+@keyframes fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
+
+/* ─── KPI ROW ─── */
+.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
+.kpi{background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-lg);
+  padding:18px 20px;position:relative;
+  transition:border-color .3s,transform .2s,box-shadow .3s;cursor:default;
+  backdrop-filter:blur(12px);}
+.kpi:hover{border-color:var(--b2);transform:translateY(-1px);box-shadow:0 8px 32px rgba(0,0,0,.3);}
+.kpi-accent-line{position:absolute;top:0;left:0;right:0;height:2px;
+  background:linear-gradient(90deg,transparent 0%,var(--ac,var(--blue)) 40%,var(--ac,var(--blue)) 60%,transparent 100%);}
+.kpi-icon{position:absolute;right:16px;top:16px;font-size:22px;opacity:0.12;}
+.kpi-label{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
+  color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;font-family:var(--mono);}
+.kpi-val{font-family:var(--display);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.5px;
+  color:var(--vc,var(--blue));}
+.kpi-delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;
+  padding:2px 7px;border-radius:4px;font-size:10px;font-family:var(--mono);font-weight:500;}
+.kpi-delta.up{background:rgba(0,232,135,0.1);color:var(--green);}
+.kpi-delta.down{background:rgba(255,58,92,0.1);color:var(--red);}
+.kpi-delta.neutral{background:rgba(30,120,255,0.1);color:var(--blue);}
+.kpi-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(30,120,255,0.06);}
+.kpi-bar-fill{height:100%;background:var(--ac,var(--blue));opacity:.4;transition:width 1.5s var(--ease);}
+
+/* ─── GRID 3-COL ─── */
+.row2{display:grid;grid-template-columns:1fr 1fr 340px;gap:16px;}
+.row3{display:grid;grid-template-columns:1fr 320px;gap:16px;}
+
+/* ─── PANEL ─── */
+.panel{background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-lg);
+  backdrop-filter:blur(12px);}
+.ph{padding:14px 20px;border-bottom:1px solid var(--b1);
+  display:flex;align-items:center;justify-content:space-between;}
+.ph-title{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:2.5px;
+  text-transform:uppercase;color:var(--t2);display:flex;align-items:center;gap:8px;}
+.ph-icon{color:var(--blue);}
+.ph-badge{font-family:var(--mono);font-size:9px;padding:2px 8px;border-radius:4px;
+  font-weight:700;letter-spacing:1.5px;}
+.ph-badge.live{background:rgba(0,232,135,0.12);color:var(--green);border:1px solid rgba(0,232,135,.2);}
+.ph-badge.warn{background:rgba(255,58,92,0.12);color:var(--red);}
+.pb{padding:16px 20px;}
+
+/* ─── LATENCY MATRIX ─── */
+.lat-row{display:grid;grid-template-columns:155px 1fr 72px;
+  align-items:center;gap:12px;padding:7px 4px;
+  border-radius:var(--r-sm);transition:background .2s;cursor:default;}
+.lat-row:hover{background:rgba(30,120,255,0.04);}
+.lat-name{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.lat-track{height:3px;background:rgba(30,120,255,0.08);border-radius:2px;overflow:hidden;position:relative;}
+.lat-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(30,120,255,0.4),var(--cyan));
+  transition:width 1.2s var(--ease);}
+.lat-fill.hot{background:linear-gradient(90deg,rgba(255,170,0,0.5),var(--amber));}
+.lat-ms{font-family:var(--mono);font-size:10px;color:var(--cyan);text-align:right;}
+
+/* ─── UPTIME HEATMAP ─── */
+.heatmap{display:flex;flex-direction:column;gap:8px;}
+.hm-label{font-family:var(--mono);font-size:8px;color:var(--t4);letter-spacing:1px;}
+.hm-grid{display:flex;gap:2px;}
+.hm-cell{width:10px;height:10px;border-radius:2px;cursor:pointer;transition:transform .15s;}
+.hm-cell:hover{transform:scale(1.3);}
+.hm-legend{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:var(--t4);}
+.hm-leg-cell{width:8px;height:8px;border-radius:1px;}
+
+/* ─── INCIDENT FEED ─── */
+.inc-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;}
+.inc-item{padding:12px 14px;border-radius:var(--r-sm);border:1px solid;position:relative;overflow:hidden;
+  transition:transform .2s,border-color .2s;}
+.inc-item:hover{transform:translateX(2px);}
+.inc-item.crit{background:rgba(255,58,92,0.05);border-color:rgba(255,58,92,0.2);}
+.inc-item.warn{background:rgba(255,170,0,0.05);border-color:rgba(255,170,0,0.2);}
+.inc-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;}
+.inc-item.crit::before{background:var(--red);}
+.inc-item.warn::before{background:var(--amber);}
+.inc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
+.inc-name{font-size:12px;font-weight:700;}
+.inc-tag{font-size:8px;font-weight:800;letter-spacing:1.5px;padding:2px 7px;
+  border-radius:4px;font-family:var(--mono);text-transform:uppercase;}
+.inc-tag.down{background:rgba(255,58,92,0.2);color:var(--red);}
+.inc-tag.warn{background:rgba(255,170,0,0.2);color:var(--amber);}
+.inc-msg{font-size:11px;color:var(--t3);line-height:1.5;}
+.inc-time{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:9px;color:var(--t4);font-family:var(--mono);}
+.inc-elapsed{padding:1px 6px;background:rgba(255,255,255,0.06);border-radius:3px;}
+
+/* ─── SERVICE TABLE ─── */
+.svc-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
+.svc-search{flex:1;position:relative;}
+.svc-search input{width:100%;background:rgba(30,120,255,0.04);border:1px solid var(--b1);
+  border-radius:var(--r-sm);padding:9px 14px 9px 36px;color:var(--t1);
+  font-size:12px;font-family:var(--body);outline:none;transition:border .2s;}
+.svc-search input:focus{border-color:var(--b2);}
+.svc-search input::placeholder{color:var(--t4);}
+.svc-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
+  color:var(--t4);font-size:12px;pointer-events:none;}
+.filter-chip{padding:5px 12px;border-radius:20px;font-size:10px;font-weight:600;cursor:pointer;
+  border:1px solid var(--b1);background:transparent;color:var(--t3);
+  transition:all .2s;font-family:var(--mono);}
+.filter-chip:hover,.filter-chip.sel{border-color:var(--b2);background:rgba(30,120,255,0.1);color:var(--blue);}
+.filter-chip.red.sel{border-color:rgba(255,58,92,.35);background:rgba(255,58,92,0.1);color:var(--red);}
+
+.svc-tbl{width:100%;border-collapse:collapse;}
+.svc-tbl thead tr{border-bottom:1px solid var(--b1);}
+.svc-tbl th{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:2px;
+  text-transform:uppercase;color:var(--t4);padding:7px 12px;text-align:left;cursor:pointer;
+  user-select:none;transition:color .2s;white-space:nowrap;}
+.svc-tbl th:hover{color:var(--blue);}
+.svc-tbl th.sort-asc::after{content:' ↑';}
+.svc-tbl th.sort-desc::after{content:' ↓';}
+.svc-tbl tbody tr{border-bottom:1px solid rgba(30,120,255,0.04);
+  transition:background .15s;cursor:pointer;}
+.svc-tbl tbody tr:hover{background:rgba(30,120,255,0.04);}
+.svc-tbl td{padding:11px 12px;vertical-align:middle;}
+.td-name{font-size:12px;font-weight:600;margin-bottom:2px;}
+.td-url{font-size:9px;color:var(--t4);font-family:var(--mono);}
+.scope-tag{display:inline-block;padding:2px 8px;border-radius:4px;
+  font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
+  border:1px solid var(--b1);color:var(--t4);font-family:var(--mono);}
+.sla-bar-wrap{width:80px;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;}
+.sla-bar{height:100%;border-radius:2px;transition:width 1s var(--ease);}
+.sla-pct{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:2px;}
+
+.spark30{display:flex;gap:1.5px;align-items:flex-end;height:20px;}
+.sp-bar{width:3px;border-radius:1px;transition:height .4s;}
+.sp-up{background:var(--green);opacity:.8;}
+.sp-down{background:var(--red);opacity:.9;}
+
+.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
+  border-radius:5px;font-size:9px;font-weight:700;letter-spacing:1px;
+  text-transform:uppercase;font-family:var(--mono);}
+.pill.online{background:rgba(0,232,135,0.09);border:1px solid rgba(0,232,135,.2);color:var(--green);}
+.pill.down{background:rgba(255,58,92,0.09);border:1px solid rgba(255,58,92,.2);color:var(--red);}
+.pill.degraded{background:rgba(255,170,0,0.09);border:1px solid rgba(255,170,0,.2);color:var(--amber);}
+.pill-dot{width:4px;height:4px;border-radius:50%;background:currentColor;}
+.pill.down .pill-dot{animation:blink .9s step-start infinite;}
+@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}
+
+.lat-td{font-family:var(--mono);font-size:11px;text-align:right;}
+
+/* ─── CHART CANVAS ─── */
+.chart-wrap{padding:0 16px 16px;position:relative;}
+canvas{display:block;}
+.chart-yaxis{position:absolute;left:20px;top:0;display:flex;flex-direction:column;
+  justify-content:space-between;height:calc(100% - 20px);
+  font-family:var(--mono);font-size:8px;color:var(--t4);pointer-events:none;}
+.chart-xaxis{display:flex;justify-content:space-between;padding:4px 4px 0;
+  font-family:var(--mono);font-size:8px;color:var(--t4);}
+
+/* ─── WORLD MAP (SVG) ─── */
+.world-wrap{padding:12px 16px 14px;position:relative;}
+.map-node{cursor:pointer;transition:r .2s;}
+.map-node circle{transition:r .2s,opacity .2s;}
+.map-node:hover circle{r:6;}
+.node-ring{animation:ping 2s ease-out infinite;}
+@keyframes ping{0%{r:6;opacity:.6;}100%{r:16;opacity:0;}}
+
+/* ─── MODAL ─── */
+.modal-back{position:fixed;inset:0;z-index:500;
+  background:rgba(1,4,10,.88);backdrop-filter:blur(12px);
+  display:none;align-items:center;justify-content:center;}
+.modal-back.open{display:flex;}
+.modal{background:linear-gradient(135deg,rgba(6,14,28,.99),rgba(4,10,22,.99));
+  border:1px solid var(--b2);border-radius:var(--r-xl);width:660px;max-width:95vw;
+  max-height:90vh;overflow-y:auto;
+  box-shadow:0 0 80px rgba(30,100,200,0.25),0 0 200px rgba(30,100,200,0.08);
+  animation:mdin .22s var(--ease);}
+@keyframes mdin{from{opacity:0;transform:scale(.96) translateY(14px);}to{opacity:1;transform:none;}}
+.modal-hd{padding:22px 24px 18px;border-bottom:1px solid var(--b1);
+  display:flex;align-items:flex-start;justify-content:space-between;position:sticky;top:0;
+  background:rgba(6,14,28,.98);z-index:10;}
+.modal-hd-info{}
+.modal-title{font-family:var(--display);font-size:22px;font-weight:700;}
+.modal-meta{display:flex;align-items:center;gap:10px;margin-top:5px;}
+.modal-url{font-family:var(--mono);font-size:10px;color:var(--t4);}
+.modal-status-chip{display:inline-flex;align-items:center;gap:5px;
+  padding:3px 10px;border-radius:5px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1px;}
+.mclose{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--b1);
+  background:transparent;color:var(--t3);cursor:pointer;font-size:14px;
+  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
+.mclose:hover{border-color:var(--red);color:var(--red);}
+.modal-tabs{display:flex;gap:0;border-bottom:1px solid var(--b1);}
+.mtab{padding:11px 20px;font-size:11px;font-weight:600;cursor:pointer;border:none;
+  background:transparent;color:var(--t3);border-bottom:2px solid transparent;
+  transition:all .2s;font-family:var(--body);}
+.mtab:hover{color:var(--t1);}
+.mtab.act{color:var(--blue);border-bottom-color:var(--blue);}
+.mtab-panel{padding:20px 24px;display:none;}
+.mtab-panel.act{display:block;}
+.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
+.m-card{background:rgba(30,120,255,0.03);border:1px solid var(--b1);
+  border-radius:var(--r-md);padding:14px 16px;}
+.m-card-title{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:2px;
+  text-transform:uppercase;color:var(--t3);margin-bottom:12px;
+  display:flex;align-items:center;gap:6px;}
+.mc-icon{font-size:11px;}
+.m-stat{font-family:var(--display);font-size:28px;font-weight:700;color:var(--t1);}
+.m-stat-unit{font-size:14px;font-weight:400;color:var(--t3);}
+.m-stat-sub{font-size:10px;color:var(--t4);font-family:var(--mono);margin-top:4px;}
+.nominal{display:flex;flex-direction:column;align-items:center;justify-content:center;
+  height:70px;gap:6px;}
+.nominal-ico{font-size:22px;}
+.nominal-txt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--green);}
+.incident-txt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--red);}
+
+/* history table */
+.h-tbl{width:100%;border-collapse:collapse;}
+.h-tbl th{font-family:var(--mono);font-size:8px;letter-spacing:2px;text-transform:uppercase;
+  color:var(--t4);padding:6px 10px;text-align:left;border-bottom:1px solid var(--b1);}
+.h-tbl td{padding:8px 10px;font-size:11px;border-bottom:1px solid rgba(30,120,255,0.04);}
+.h-tbl td:last-child{font-family:var(--mono);font-size:10px;}
+
+/* ─── TOAST ─── */
+#toasts{position:fixed;bottom:20px;right:20px;z-index:999999;
+  display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
+.toast{padding:12px 16px;border-radius:var(--r-md);
+  background:#0F172A;border:1px solid #334155;
+  box-shadow:0 12px 36px rgba(0,0,0,.6);
+  display:flex;align-items:center;gap:10px;
+  font-size:12px;min-width:280px;max-width:440px;
+  animation:toast-in .3s var(--ease);cursor:pointer;color:#FFFFFF;}
+.toast.exit{animation:toast-out .3s var(--ease) forwards;}
+@keyframes toast-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}
+@keyframes toast-out{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(20px);}}
+.toast-ico{font-size:16px;flex-shrink:0;}
+.toast-body{flex:1;}
+.toast-title{font-weight:700;font-size:12px;color:#FFFFFF;}
+.toast-msg{font-size:11px;color:#94A3B8;margin-top:2px;line-height:1.45;word-break:break-word;}
+.toast.err{border-color:rgba(255,58,92,.6);background:#1E1018;}
+.toast.ok{border-color:rgba(0,232,135,.6);background:#091A14;}
+.toast.info{border-color:#334155;background:#0F172A;}
+
+/* ─── LOADING OVERLAY ─── */
+#loader{position:fixed;inset:0;z-index:9999;background:var(--bg0);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
+  transition:opacity .5s;}
+#loader.hide{opacity:0;pointer-events:none;}
+.loader-logo{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:4px;color:var(--t1);}
+.loader-bar{width:200px;height:2px;background:rgba(30,120,255,0.15);border-radius:1px;overflow:hidden;}
+.loader-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));
+  border-radius:1px;animation:load-bar 1.4s var(--ease) forwards;}
+@keyframes load-bar{from{width:0;}to{width:100%;}}
+.loader-txt{font-family:var(--mono);font-size:10px;color:var(--t4);letter-spacing:2px;}
+
+/* ─── ANIM ─── */
+.fade-up{animation:fu .5s var(--ease) both;}
+@keyframes fu{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
+.fade-up:nth-child(1){animation-delay:.06s;}
+.fade-up:nth-child(2){animation-delay:.12s;}
+.fade-up:nth-child(3){animation-delay:.18s;}
+.fade-up:nth-child(4){animation-delay:.24s;}
+
+/* ─── ADDITIONS FOR OPERATIONS AND TEST LAB ─── */
+.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.ops-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
+.input-group { margin-bottom: 12px; }
+.input-group label { display: block; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
+.pro-input { width: 100%; background: rgba(30,120,255,0.04); border: 1px solid var(--b1); border-radius: var(--r-sm); padding: 10px 14px; color: var(--t1); font-size: 13px; font-family: var(--body); outline: none; transition: border .2s; }
+.pro-input:focus { border-color: var(--b2); }
+.pro-input::placeholder { color: var(--t4); }
+.btn-primary { width: 100%; padding: 10px; background: rgba(30,120,255,0.12); border: 1px solid var(--b2); border-radius: var(--r-sm); color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
+.btn-primary:hover { background: rgba(30,120,255,0.2); }
+.btn-danger-outline { width: 100%; padding: 8px; background: rgba(255,58,92,0.05); border: 1px solid rgba(255,58,92,0.2); border-radius: var(--r-sm); color: var(--red); font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.2s; margin-top:10px; }
+.btn-danger-outline:hover { background: rgba(255,58,92,0.1); }
+.manage-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(30,120,255,0.02); border: 1px solid var(--b1); border-radius: var(--r-sm); margin-bottom: 6px; }
+.manage-item-info b { font-size: 12px; color: var(--t1); }
+.manage-item-info span { font-size: 10px; color: var(--t4); font-family: var(--mono); display: block; margin-top:2px; }
+.btn-remove { padding: 4px 10px; background: rgba(255,58,92,0.08); border: 1px solid rgba(255,58,92,0.15); border-radius: 4px; color: var(--red); font-size: 10px; font-weight: 600; cursor: pointer; transition: 0.2s; font-family:var(--mono); text-transform:uppercase; letter-spacing:1px; }
+.btn-remove:hover { background: var(--red); color: #fff; }
+
+/* ─── AUTH OVERLAY ─── */
+.auth-overlay { position: fixed; inset: 0; background: rgba(2,6,14,0.95); display: flex; justify-content: center; align-items: center; z-index: 99999; backdrop-filter: blur(10px); }
+.auth-box { width: 400px; max-width: 90%; background: var(--surface); border: 1px solid var(--b2); border-radius: var(--r-xl); padding: 32px; text-align: center; box-shadow: 0 20px 60px rgba(30,120,255,0.1); }
+.auth-box .s-logo { margin: 0 auto 20px; }
+.auth-box h3 { font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
+.auth-box p { font-size: 12px; color: var(--t3); margin-bottom: 24px; }
+
+/* ─── TOOLTIPS (HIGH CONTRAST & LEGIBILITY) ─── */
+.tip {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 15px; height: 15px; border-radius: 50%;
+    background: var(--cyan-glow); color: var(--cyan);
+    font-size: 10px; font-weight: 800; cursor: help;
+    position: relative; margin-left: 6px; border: 1px solid var(--b2);
+    font-family: var(--mono); vertical-align: middle;
+}
+.tip:hover::after {
+    content: attr(data-tip);
+    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+    background: #0F172A; color: #FFFFFF;
+    padding: 8px 12px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500;
+    font-family: var(--body);
+    white-space: normal; z-index: 10000; border: 1px solid #334155;
+    box-shadow: 0 12px 32px rgba(0,0,0,0.6); pointer-events: none;
+    width: max-content; max-width: 280px; line-height: 1.45; text-transform: none; letter-spacing: normal; text-align: left;
+}
+
+/* ─── TEST LAB DIAGNOSTIC SUITE ─── */
+.testlab-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; width: 100%; }
+.console-box {
+  background: #030712; border: 1px solid var(--b2); border-radius: var(--r-md);
+  padding: 14px 16px; font-family: var(--mono); font-size: 11px;
+  min-height: 240px; max-height: 320px; overflow-y: auto;
+  box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
+}
+.console-line { line-height: 1.6; margin-bottom: 4px; word-break: break-all; }
+.console-line.text-dim { color: #64748B; }
+.console-line.text-ok { color: #10B981; font-weight: 600; }
+.console-line.text-warn { color: #F59E0B; }
+.console-line.text-err { color: #EF4444; font-weight: 700; }
+.console-line.text-cyan { color: #00D4FF; }
+.testlab-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+.t-kpi { background: var(--surface); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 12px 14px; backdrop-filter: blur(12px); }
+.t-kpi-label { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--t3); margin-bottom: 4px; }
+.t-kpi-val { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--t1); }
+

templates/dashboard_v5.html

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StatusPilot — Operations Center</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="/static/style_v5.css">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+
+<!-- ===== AUTH OVERLAY ===== -->
+<div id="master-auth-overlay" class="auth-overlay">
+    <div class="auth-box card" style="padding:2rem;">
+        <div class="sidebar-logo" style="justify-content:center; margin-bottom:1.2rem; padding:0;">
+            <div class="icon"><i class="fas fa-shield-halved"></i><span class="dot"></span></div>
+            <span>STATUSPILOT</span>
+        </div>
+        <h3 style="font-weight:800; font-size:1rem; margin-bottom:6px;">Restricted Access</h3>
+        <p style="color:var(--text-secondary); font-size:0.78rem; margin-bottom:1.2rem;">Authenticate with your Master Key</p>
+        <input type="password" id="master-key-input" class="pro-input" placeholder="••••••••••••" style="text-align:center; letter-spacing:3px; margin-bottom:10px;">
+        <button id="master-login-btn" class="btn-primary"><i class="fas fa-lock-open"></i> Unlock</button>
+    </div>
+</div>
+
+<!-- ===== LICENSE OVERLAY ===== -->
+<div id="license-overlay" class="auth-overlay" style="display:none;">
+    <div class="auth-box card" style="padding:2rem;">
+        <div class="sidebar-logo" style="justify-content:center; margin-bottom:1.2rem; padding:0;">
+            <div class="icon"><i class="fas fa-gem" style="color:#a78bfa;"></i></div>
+            <span style="color:#a78bfa;">STATUSPILOT PRO</span>
+        </div>
+        <h3 style="font-weight:800; font-size:1rem; margin-bottom:6px;">Enterprise Activation</h3>
+        <p style="color:var(--text-secondary); font-size:0.78rem; margin-bottom:1.2rem;">Enter your license credentials</p>
+        <input type="email" id="lic-email" class="pro-input" placeholder="Purchase Email" style="margin-bottom:8px;">
+        <input type="text" id="lic-key" class="pro-input" placeholder="License Key (SG-XXXX-XXXX)" style="text-transform:uppercase; margin-bottom:10px;">
+        <button id="activate-btn" class="btn-primary" style="background:linear-gradient(135deg,#a78bfa,#8b5cf6);">Activate</button>
+    </div>
+</div>
+
+<!-- ===== ANALYTICS MODAL ===== -->
+<div id="matrix-modal" class="modal-overlay">
+    <div class="modal-box">
+        <div class="modal-header">
+            <div>
+                <h2 id="modal-title">Service Analytics</h2>
+                <p id="modal-subtitle">Historical performance data</p>
+            </div>
+            <button class="modal-close" id="modal-close-btn">&times;</button>
+        </div>
+        <div class="modal-grid">
+            <div class="modal-card">
+                <h4 style="color:var(--accent);"><i class="fas fa-check-circle"></i> Availability <span class="tip" data-tip="Shows UP/DOWN status over time. 100 = UP, 0 = DOWN.">?</span></h4>
+                <canvas id="uptimeChart"></canvas>
+            </div>
+            <div class="modal-card">
+                <h4 style="color:var(--primary);"><i class="fas fa-bolt"></i> Latency (ms) <span class="tip" data-tip="Response time in milliseconds. Lower = faster. Above 500ms = slow.">?</span></h4>
+                <canvas id="latencyChart"></canvas>
+            </div>
+            <div class="modal-card">
+                <h4 style="color:var(--warning);"><i class="fas fa-chart-pie"></i> Error Profile <span class="tip" data-tip="Ratio of successful vs failed checks. Green = OK, Red = Issues.">?</span></h4>
+                <div style="height:130px; display:flex; justify-content:center;"><canvas id="errorChart"></canvas></div>
+            </div>
+            <div class="modal-card">
+                <h4 style="color:var(--danger);"><i class="fas fa-exclamation-triangle"></i> Incidents <span class="tip" data-tip="Log of outages with timestamps and error messages.">?</span></h4>
+                <div id="incident-log" style="max-height:130px; overflow-y:auto;"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- ===== MAIN APP ===== -->
+<div class="app" id="main-app" style="filter:blur(15px); opacity:0; pointer-events:none;">
+
+    <!-- Sidebar -->
+    <aside class="sidebar">
+        <div class="sidebar-logo">
+            <div class="icon"><i class="fas fa-shield-halved"></i><span class="dot"></span></div>
+            <span>STATUSPILOT</span>
+        </div>
+        <nav class="sidebar-nav">
+            <a href="#" class="active" id="nav-dashboard"><i class="fas fa-gauge-high"></i> Dashboard</a>
+            <a href="#" id="nav-test"><i class="fas fa-vial"></i> Test Lab</a>
+            <a href="#" id="nav-config"><i class="fas fa-sliders"></i> Operations</a>
+        </nav>
+        <div class="sidebar-footer">
+            <div class="sidebar-status">
+                <div class="label">System Status</div>
+                <div class="value"><span class="pulse"></span> All Systems Online</div>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Main -->
+    <div class="main">
+        <!-- Top Bar -->
+        <div class="topbar">
+            <div class="topbar-left">
+                <h1>Operations Center</h1>
+                <div class="live-dot"></div>
+                <span class="clock" id="live-clock">--:--:--</span>
+            </div>
+            <div class="topbar-right">
+                <div class="btn-outline" style="padding:5px 10px;">
+                    <i class="fas fa-globe" style="color:var(--primary); font-size:0.7rem;"></i>
+                    <select id="location-filter" style="background:transparent; border:none; color:var(--text-secondary); font-size:0.72rem; font-weight:600; outline:none; cursor:pointer;"></select>
+                </div>
+                <button id="download-excel-btn" class="btn-outline"><i class="fas fa-file-export"></i> Export</button>
+            </div>
+        </div>
+
+        <div class="content">
+
+            <!-- ===== DASHBOARD TAB ===== -->
+            <div id="section-dashboard" class="content-section fade-in">
+
+                <!-- Latency Matrix -->
+                <div class="card latency-section" style="margin-bottom:1rem;">
+                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.8rem;">
+                        <div class="card-title" style="margin-bottom:0;">
+                            <i class="fas fa-bolt" style="color:var(--primary);"></i>
+                            Global Latency Matrix
+                            <span class="tip" data-tip="Real-time response time comparison across all services. Bars show latency in milliseconds — shorter is faster.">?</span>
+                        </div>
+                        <div class="live-badge"><span class="pulse"></span> LIVE</div>
+                    </div>
+                    <div id="latency-matrix-bars"></div>
+                </div>
+
+                <!-- KPI Stats -->
+                <div class="stats-grid">
+                    <div class="card">
+                        <div class="card-title"><div class="dot" style="background:var(--primary);"></div> Active Monitors <span class="tip" data-tip="Total services, websites, and SSL certs being tracked.">?</span></div>
+                        <div class="stat-value" id="stat-monitors">0</div>
+                    </div>
+                    <div class="card">
+                        <div class="card-title"><div class="dot" style="background:var(--accent);"></div> Global Uptime <span class="tip" data-tip="Average availability across all monitors. 100% = zero downtime.">?</span></div>
+                        <div class="stat-value" style="color:var(--accent);" id="stat-uptime">0%</div>
+                    </div>
+                    <div class="card">
+                        <div class="card-title"><div class="dot" style="background:var(--danger);"></div> Active Incidents <span class="tip" data-tip="Services currently DOWN. 0 = all systems operational.">?</span></div>
+                        <div class="stat-value" style="color:var(--danger);" id="stat-incidents">0</div>
+                    </div>
+                    <div class="card">
+                        <div class="card-title"><div class="dot" style="background:var(--primary);"></div> Avg. Latency <span class="tip" data-tip="Average response time in ms. Below 200ms = excellent.">?</span></div>
+                        <div class="stat-value" id="stat-latency">0ms</div>
+                    </div>
+                </div>
+
+                <!-- Search -->
+                <div class="search-wrap">
+                    <i class="fas fa-search"></i>
+                    <input type="text" id="search-services" class="search-bar" placeholder="Search services..." style="padding-left:2rem;">
+                </div>
+
+                <!-- Service List -->
+                <div class="svc-list" id="status-grid">
+                    <div style="text-align:center; padding:2rem; color:var(--text-dim);">
+                        <i class="fas fa-circle-notch fa-spin"></i>
+                        <p style="margin-top:0.6rem; font-size:0.8rem; font-weight:600;">Connecting to Infrastructure...</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ===== TEST LAB TAB ===== -->
+            <div id="section-test" class="content-section fade-in" style="display:none;">
+                <div class="card" style="max-width:600px;">
+                    <div class="card-title"><i class="fas fa-vial" style="color:var(--primary);"></i> Manual Diagnostics</div>
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;">
+                        <div class="input-group">
+                            <label>Target <span class="tip" data-tip="Select which service to test.">?</span></label>
+                            <select id="test-tool-select" class="pro-input"></select>
+                        </div>
+                        <div class="input-group">
+                            <label>Node <span class="tip" data-tip="Test server location.">?</span></label>
+                            <select id="test-location-select" class="pro-input">
+                                <option>Global Anycast</option><option>US East</option><option>EU Central</option>
+                            </select>
+                        </div>
+                    </div>
+                    <button id="run-test-btn" class="btn-primary"><i class="fas fa-satellite-dish"></i> Execute Trace</button>
+                    <div id="test-results" style="margin-top:1rem;"></div>
+                </div>
+            </div>
+
+            <!-- ===== OPERATIONS TAB ===== -->
+            <div id="section-config" class="content-section fade-in" style="display:none;">
+
+                <!-- M365 Monitor -->
+                <div class="card" style="margin-bottom:1rem; border-color:rgba(14,165,233,0.2);">
+                    <div class="card-title"><i class="fab fa-microsoft" style="color:var(--primary);"></i> M365 Email Monitoring <span class="tip" data-tip="Monitors Microsoft 365 mail flow by sending a test email and verifying delivery. Uses App Password (not your main password). Credentials stored only on your server.">?</span></div>
+                    <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:10px;">
+                        <div class="input-group"><label>Sender <span class="tip" data-tip="M365 email that sends test pulses.">?</span></label><input type="email" id="m365-sender" class="pro-input" placeholder="alerts@company.com"></div>
+                        <div class="input-group"><label>App Password <span class="tip" data-tip="Generate from Microsoft account security settings. NOT your main password. Can be revoked anytime.">?</span></label><input type="password" id="m365-pass" class="pro-input" placeholder="••••••••"></div>
+                        <div class="input-group"><label>Recipient <span class="tip" data-tip="Email that receives test pulses. Can be same as sender.">?</span></label><input type="email" id="m365-recipient" class="pro-input" placeholder="verify@company.com"></div>
+                    </div>
+                    <button id="activate-m365-btn" class="btn-primary"><i class="fas fa-paper-plane"></i> Activate Mail Flow Monitor</button>
+                </div>
+
+                <div class="ops-grid">
+                    <!-- Infrastructure List -->
+                    <div class="card">
+                        <div class="card-title"><i class="fas fa-server" style="color:var(--accent);"></i> Active Infrastructure <span class="tip" data-tip="All monitored services. Click REMOVE to decommission.">?</span></div>
+                        <div id="manage-svc-list" style="max-height:300px; overflow-y:auto;"></div>
+                        <button id="purge-stale-btn" class="btn-danger-outline" style="margin-top:8px;"><i class="fas fa-broom"></i> Purge Stale Data</button>
+                    </div>
+                    <!-- Add New -->
+                    <div class="card">
+                        <div class="card-title"><i class="fas fa-plus-circle" style="color:var(--warning);"></i> New Node <span class="tip" data-tip="Add a website, API, or SSL cert to monitor.">?</span></div>
+                        <div class="input-group"><label>Name</label><input type="text" id="new-svc-name" class="pro-input" placeholder="Service Name"></div>
+                        <div class="input-group"><label>Location</label><input type="text" id="new-svc-loc" class="pro-input" placeholder="Global"></div>
+                        <div class="input-group"><label>URL</label><input type="url" id="new-svc-url" class="pro-input" placeholder="https://example.com"></div>
+                        <div class="input-group"><label>Type</label><select id="new-svc-type" class="pro-input"><option value="http_code">🌐 Website</option><option value="ssl">🔒 SSL</option><option value="json_status">⚙️ API</option></select></div>
+                        <button id="add-svc-btn" class="btn-primary" style="background:linear-gradient(135deg,var(--warning),#d97706);"><i class="fas fa-bolt"></i> Activate</button>
+                    </div>
+                </div>
+
+                <!-- Alert Config -->
+                <div class="card" style="margin-top:1rem;">
+                    <div class="card-title"><i class="fas fa-bell"></i> Alert Configuration <span class="tip" data-tip="Configure how you get notified when services go DOWN or come back UP. SMTP = cloud email, Outlook = local desktop.">?</span></div>
+                    <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;">
+                        <div class="input-group"><label>Mode <span class="tip" data-tip="SMTP = Cloud relay. Outlook = Local bot.">?</span></label><select id="alert-mode" class="pro-input"><option value="SMTP">SMTP (Cloud)</option><option value="Outlook">Local Outlook</option></select></div>
+                        <div class="input-group"><label>Interval <span class="tip" data-tip="Check frequency in seconds. 60 = once per minute.">?</span></label><input type="number" id="check-interval" class="pro-input" placeholder="60"></div>
+                        <div class="input-group"><label>SMTP User <span class="tip" data-tip="Email address used to send alerts.">?</span></label><input type="email" id="smtp-user" class="pro-input" placeholder="alerts@co.com"></div>
+                    </div>
+                    <div class="input-group" style="margin-top:6px;"><label>SMTP Password <span class="tip" data-tip="App password for the SMTP sender.">?</span></label><input type="password" id="smtp-pass" class="pro-input" placeholder="••••••••"></div>
+                    <button id="save-settings-btn" class="btn-primary" style="margin-top:8px; background:linear-gradient(135deg,#6366f1,#8b5cf6);"><i class="fas fa-save"></i> Save Configuration</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div style="text-align:center; padding:1rem; font-size:0.6rem; color:var(--text-dim);">
+            STATUSPILOT Operations Center • <span id="footer-year"></span> • Real-time monitoring dashboard
+        </div>
+    </div>
+</div>
+
+<script>document.getElementById('footer-year').textContent = new Date().getFullYear();</script>
+<script src="/static/script_v5.js"></script>
+</body>
+</html>

templates/dashboard_v6.html

@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>StatusPilot — Operations Center</title>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=Barlow+Condensed:wght@300;400;500;600;700;800&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/static/style_v6.css?v=5.1.8">
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+
+<!-- AUTH OVERLAYS -->
+<div id="master-auth-overlay" class="auth-overlay" style="display:none;">
+    <div class="auth-box">
+        <div class="s-logo">SP</div>
+        <h3>Restricted Access</h3>
+        <p>Authenticate with your Master Key</p>
+        <input type="password" id="master-key-input" class="pro-input" placeholder="••••••••••••" style="text-align:center; letter-spacing:3px; margin-bottom:16px;">
+        <button id="master-login-btn" class="btn-primary">Unlock</button>
+    </div>
+</div>
+
+<div id="license-overlay" class="auth-overlay" style="display:none;">
+    <div class="auth-box">
+        <div class="s-logo" style="background:linear-gradient(135deg,#9B6DFF,#5a3bd8);">PRO</div>
+        <h3>Enterprise Activation</h3>
+        <p>Enter your license credentials</p>
+        <input type="email" id="lic-email" class="pro-input" placeholder="Purchase Email" style="margin-bottom:12px;">
+        <input type="text" id="lic-key" class="pro-input" placeholder="License Key (SG-XXXX-XXXX)" style="text-transform:uppercase; margin-bottom:16px;">
+        <button id="activate-btn" class="btn-primary" style="background:rgba(155,109,255,0.15); border-color:var(--violet); color:var(--violet);">Activate</button>
+    </div>
+</div>
+
+<!-- LOADER -->
+<div id="loader">
+  <div class="loader-logo">STATUSPILOT</div>
+  <div class="loader-bar"><div class="loader-fill"></div></div>
+  <div class="loader-txt">CONNECTING TO INFRASTRUCTURE...</div>
+</div>
+
+<!-- BG -->
+<div id="bg-grid"></div>
+<div id="bg-glow"></div>
+
+<!-- SIDEBAR -->
+<nav class="sidebar">
+  <div class="s-logo">SP</div>
+  <button class="s-btn act" title="Dashboard" onclick="switchMainTab('dashboard', this)">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+  </button>
+  <button class="s-btn" title="Test Lab" onclick="switchMainTab('testlab', this)">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 3v11l-4 5h14l-4-5V3"/><path d="M6 3h12"/></svg>
+  </button>
+  <button class="s-btn" title="Operations" onclick="switchMainTab('config', this)">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
+  </button>
+  <div class="s-spacer"></div>
+  <div class="s-avatar" title="System Status: Online" style="background:var(--green-glow); border-color:var(--green); color:var(--green);">OK</div>
+</nav>
+
+<!-- APP -->
+<div class="app" id="main-app" style="filter:blur(15px); opacity:0; pointer-events:none;">
+  <!-- ALERT BANNER -->
+  <div class="alert-banner" id="alert-banner">
+    <div class="alert-banner-dot"></div>
+    <strong>ACTIVE INCIDENTS</strong>
+    <div class="alert-banner-sep"></div>
+    <span class="alert-banner-text" id="alert-banner-text">Loading incidents...</span>
+  </div>
+
+  <!-- HEADER -->
+  <header class="header">
+    <div class="h-left">
+      <div>
+        <div class="h-title" style="display:flex; align-items:center; gap:12px;">
+          <img src="data:image/png;base64,{{ logo_b64 }}" height="38" alt="PARLE TECH" style="height:38px; width:auto; vertical-align:middle;" />
+          <span style="opacity:0.3; font-weight:300;">|</span>
+          <span>Operations Center</span>
+        </div>
+        <div class="h-sub">STATUSPILOT PRO · ENTERPRISE NOC</div>
+      </div>
+      <div class="live-chip"><span class="live-chip-dot"></span>LIVE</div>
+      <button class="theme-btn" id="theme-btn" onclick="cycleTheme()" title="Switch Dashboard Theme (Dark Pro / Light Mode / Cyber Pulse)">
+        <span id="theme-icon">🌙</span> <span id="theme-label">Dark Pro</span>
+      </button>
+    </div>
+    <div class="h-right">
+      <div style="display:flex; align-items:center; gap:6px;">
+        <div class="clock-box" id="clock">--:--:-- UTC</div>
+        <select id="tzSel" onchange="" title="Select Timezone" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:var(--t2); font-size:10px; font-family:var(--mono); padding:4px 6px; border-radius:6px; cursor:pointer; outline:none; letter-spacing:0.5px;">
+          <option value="UTC" data-label="UTC" selected>🌐 UTC</option>
+          <option value="America/New_York" data-label="EST">🇺🇸 EST (New York)</option>
+          <option value="America/Chicago" data-label="CST">🇺🇸 CST (Chicago)</option>
+          <option value="America/Denver" data-label="MST">🇺🇸 MST (Denver)</option>
+          <option value="America/Los_Angeles" data-label="PST">🇺🇸 PST (Los Angeles)</option>
+          <option value="Europe/London" data-label="GMT">🇬🇧 GMT (London)</option>
+          <option value="Europe/Paris" data-label="CET">🇪🇺 CET (Paris)</option>
+          <option value="Asia/Dubai" data-label="GST">🇦🇪 GST (Dubai)</option>
+          <option value="Asia/Kolkata" data-label="IST">🇮🇳 IST (India)</option>
+          <option value="Asia/Singapore" data-label="SGT">🇸🇬 SGT (Singapore)</option>
+          <option value="Asia/Tokyo" data-label="JST">🇯🇵 JST (Tokyo)</option>
+          <option value="Australia/Sydney" data-label="AEST">🇦🇺 AEST (Sydney)</option>
+        </select>
+      </div>
+      <select class="region-sel" id="regionSel" onchange="filterRegion()">
+        <option value="all">🌐 All Regions</option>
+      </select>
+      <button class="hbtn hbtn-ghost" onclick="exportCSV()">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        Export CSV
+      </button>
+      <button class="hbtn hbtn-prim" onclick="switchMainTab('testlab', document.querySelectorAll('.s-btn')[1])">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
+        Diagnostics
+      </button>
+    </div>
+  </header>
+
+  <!-- DASHBOARD TAB -->
+  <main class="main-tab act" id="tab-dashboard">
+    <!-- KPIs -->
+    <div class="kpi-row">
+      <div class="kpi fade-up" style="--ac:var(--blue)">
+        <div class="kpi-accent-line"></div>
+        <div class="kpi-icon">📡</div>
+        <div class="kpi-label">Active Monitors <span class="tip" data-tip="Total number of nodes, sites, and APIs currently being tracked by StatusPilot.">?</span></div>
+        <div class="kpi-val" style="--vc:var(--blue)" id="kpi-mon">0</div>
+        <div class="kpi-delta neutral">↔ Stable Tracking</div>
+        <div class="kpi-bar"><div class="kpi-bar-fill" style="width:100%"></div></div>
+      </div>
+      <div class="kpi fade-up" style="--ac:var(--green)">
+        <div class="kpi-accent-line"></div>
+        <div class="kpi-icon">📶</div>
+        <div class="kpi-label">Global Uptime <span class="tip" data-tip="Average availability across all active monitors. 100% means zero downtime.">?</span></div>
+        <div class="kpi-val" style="--vc:var(--green)" id="kpi-up">100%</div>
+        <div class="kpi-delta up" id="kpi-up-delta">↑ 100%</div>
+        <div class="kpi-bar"><div class="kpi-bar-fill" id="kpi-up-bar" style="width:100%;background:var(--green);opacity:.5"></div></div>
+      </div>
+      <div class="kpi fade-up" id="kpi-inc-card" style="--ac:var(--green)">
+        <div class="kpi-accent-line"></div>
+        <div class="kpi-icon">🚨</div>
+        <div class="kpi-label">Active Incidents <span class="tip" data-tip="Number of services currently offline or failing checks. 0 means all systems operational.">?</span></div>
+        <div class="kpi-val" style="--vc:var(--green)" id="kpi-inc">0</div>
+        <div class="kpi-delta up" id="kpi-inc-desc">All systems operational</div>
+        <div class="kpi-bar"><div class="kpi-bar-fill" id="kpi-inc-bar" style="width:100%;background:var(--green);opacity:.5"></div></div>
+      </div>
+      <div class="kpi fade-up" style="--ac:var(--amber)">
+        <div class="kpi-accent-line"></div>
+        <div class="kpi-icon">⚡</div>
+        <div class="kpi-label">Avg. Latency <span class="tip" data-tip="Real-time average response time in milliseconds across all infrastructure.">?</span></div>
+        <div class="kpi-val" style="--vc:var(--amber)" id="kpi-lat">0ms</div>
+        <div class="kpi-delta neutral" id="kpi-lat-desc">Live Average</div>
+        <div class="kpi-bar"><div class="kpi-bar-fill" id="kpi-lat-bar" style="width:50%;background:var(--amber);opacity:.5"></div></div>
+      </div>
+    </div>
+
+    <!-- ROW 2 -->
+    <div class="row2">
+      <div class="panel">
+        <div class="ph">
+          <div class="ph-title"><span class="ph-icon">⚡</span>Latency Trend (Live) <span class="tip" data-tip="Continuous 60-minute moving average of global response times compared against SLA threshold.">?</span></div>
+          <div class="ph-badge live">● LIVE</div>
+        </div>
+        <div class="chart-wrap" style="padding:16px 16px 8px">
+          <canvas id="trendChart" height="110"></canvas>
+          <div class="chart-xaxis" id="trendXAxis"></div>
+        </div>
+      </div>
+
+      <div class="panel">
+        <div class="ph">
+          <div class="ph-title"><span class="ph-icon">📅</span>Uptime Heatmap <span class="tip" data-tip="Historical 90-day availability matrix. Dark green is 100% uptime, red indicates outages.">?</span></div>
+          <div style="font-family:var(--mono);font-size:9px;color:var(--t4)">Per service · history</div>
+        </div>
+        <div class="pb">
+          <div class="heatmap" id="heatmap"></div>
+          <div class="hm-legend" style="margin-top:10px">
+            <span>Less</span>
+            <div class="hm-leg-cell" style="background:rgba(0,232,135,0.15)"></div>
+            <div class="hm-leg-cell" style="background:rgba(0,232,135,0.4)"></div>
+            <div class="hm-leg-cell" style="background:rgba(0,232,135,0.75)"></div>
+            <div class="hm-leg-cell" style="background:var(--green)"></div>
+            <span>More</span>
+            <div style="flex:1"></div>
+            <div class="hm-leg-cell" style="background:rgba(255,58,92,0.7)"></div>
+            <span style="color:var(--red)">Down</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="panel">
+        <div class="ph">
+          <div class="ph-title"><span style="color:var(--red)">▲</span>&nbsp;Incidents <span class="tip" data-tip="Live feed of critical infrastructure failures and warnings.">?</span></div>
+          <div class="ph-badge warn" id="inc-badge">0 OPEN</div>
+        </div>
+        <div class="pb" style="padding-top:12px">
+          <div class="inc-list" id="incList"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ROW 3 -->
+    <div class="row3">
+      <div class="panel">
+        <div class="ph">
+          <div class="ph-title">⊞&nbsp;&nbsp;Infrastructure Services <span class="tip" data-tip="Detailed registry of all monitored nodes including 30-day sparklines, current status, and live latency. Click any row for deep diagnostics.">?</span></div>
+          <div style="font-family:var(--mono);font-size:9px;color:var(--t4)" id="svcCount">0 MONITORED</div>
+        </div>
+        <div class="pb">
+          <div class="svc-toolbar">
+            <div class="svc-search">
+              <span class="svc-search-ico">⌕</span>
+              <input type="text" id="searchBox" placeholder="Search services, URLs, tags..." oninput="filterTable()">
+            </div>
+            <button class="filter-chip sel" id="fc-all" onclick="setFilter('all',this)">All</button>
+            <button class="filter-chip" id="fc-online" onclick="setFilter('online',this)">Online</button>
+            <button class="filter-chip red" id="fc-down" onclick="setFilter('down',this)">Issues</button>
+          </div>
+          <table class="svc-tbl">
+            <thead>
+              <tr>
+                <th onclick="sortTable('name')">Service</th>
+                <th onclick="sortTable('scope')">Scope</th>
+                <th>Timeline</th>
+                <th>Status</th>
+                <th onclick="sortTable('latency')" style="text-align:right">Latency ↓</th>
+              </tr>
+            </thead>
+            <tbody id="svcBody"></tbody>
+          </table>
+        </div>
+      </div>
+
+      <div style="display:flex;flex-direction:column;gap:16px;">
+        <div class="panel">
+          <div class="ph"><div class="ph-title"><span class="ph-icon">⚡</span>Global Latency <span class="tip" data-tip="Top 8 slowest endpoints by current response time (ms).">?</span></div></div>
+          <div class="pb" id="latMatrix"></div>
+        </div>
+        <div class="panel">
+          <div class="ph"><div class="ph-title">🌐&nbsp;&nbsp;Node Map <span class="tip" data-tip="Geospatial visualization of infrastructure health across regions.">?</span></div></div>
+          <div class="world-wrap" id="worldMap"></div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- TEST LAB TAB -->
+  <main class="main-tab" id="tab-testlab">
+    <div class="testlab-grid">
+      <!-- Left: Diagnostic Probe Controls -->
+      <div class="panel">
+        <div class="ph">
+          <div class="ph-title"><span class="ph-icon" style="color:var(--cyan)">⚡</span> Manual Diagnostics Probe <span class="tip" data-tip="Execute forced on-demand traces to specific endpoints to verify routing and response.">?</span></div>
+          <div class="ph-badge live">● PROBE READY</div>
+        </div>
+        <div class="pb">
+          <div class="input-group">
+            <label>Target Infrastructure Endpoint <span class="tip" data-tip="Select which managed node to run the manual trace against.">?</span></label>
+            <select id="test-tool-select" class="pro-input"></select>
+          </div>
+          <div class="input-group">
+            <label>Origin Probe Location <span class="tip" data-tip="Choose the geographic origin of the diagnostic trace.">?</span></label>
+            <select id="test-location-select" class="pro-input">
+              <option value="Global Anycast">🌐 Global Anycast Network</option>
+              <option value="US East">🇺🇸 US East (N. Virginia)</option>
+              <option value="US West">🇺🇸 US West (California)</option>
+              <option value="EU Central">🇪🇺 EU Central (Frankfurt)</option>
+              <option value="UK London">🇬🇧 UK (London)</option>
+              <option value="Asia Pacific">🌏 Asia Pacific (Tokyo)</option>
+            </select>
+          </div>
+          <div class="input-group">
+            <label>Diagnostic Protocol <span class="tip" data-tip="Select analysis protocol layer.">?</span></label>
+            <select id="test-proto-select" class="pro-input">
+              <option value="HTTP_TLS">🌐 HTTP/2 + TLS 1.3 Full Stack Trace</option>
+              <option value="SSL_CERT">🔒 SSL/TLS Certificate Audit</option>
+              <option value="JSON_PAYLOAD">⚙️ REST API Payload Health Check</option>
+            </select>
+          </div>
+          <button id="run-test-btn" class="btn-primary" style="margin-top:16px; padding:12px; font-size:13px; background:rgba(0,212,255,0.12); border-color:var(--cyan); color:var(--cyan);">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
+            Execute Diagnostic Trace
+          </button>
+        </div>
+      </div>
+
+      <!-- Right: Real-time Telemetry Terminal Console -->
+      <div style="display:flex; flex-direction:column; gap:16px;">
+        <div class="panel">
+          <div class="ph">
+            <div class="ph-title"><span class="ph-icon" style="color:var(--cyan)">🖥️</span> Live Diagnostic Telemetry Console <span class="tip" data-tip="Real-time protocol traceroute and latency metrics stream.">?</span></div>
+            <div class="ph-badge live" id="console-badge">STANDBY</div>
+          </div>
+          <div class="pb" style="padding:14px;">
+            <div class="console-box" id="console-output">
+              <div class="console-line text-dim">[SYSTEM] StatusPilot Diagnostic Engine v5.1 Ready.</div>
+              <div class="console-line text-dim">[SYSTEM] Select an infrastructure target and click "Execute Diagnostic Trace" to initiate probe...</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="testlab-kpis">
+          <div class="t-kpi">
+            <div class="t-kpi-label">DNS RESOLVE</div>
+            <div class="t-kpi-val" id="tk-dns">-- ms</div>
+          </div>
+          <div class="t-kpi">
+            <div class="t-kpi-label">TCP HANDSHAKE</div>
+            <div class="t-kpi-val" id="tk-tcp">-- ms</div>
+          </div>
+          <div class="t-kpi">
+            <div class="t-kpi-label">TTFB (LATENCY)</div>
+            <div class="t-kpi-val" id="tk-ttfb">-- ms</div>
+          </div>
+          <div class="t-kpi">
+            <div class="t-kpi-label">PROBE RESULT</div>
+            <div class="t-kpi-val" style="color:var(--green)" id="tk-status">READY</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- OPERATIONS TAB -->
+  <main class="main-tab" id="tab-config">
+    <!-- M365 Panel -->
+    <div class="panel" style="margin-bottom:20px; border-color:var(--b2);">
+      <div class="ph"><div class="ph-title"><span class="ph-icon" style="color:var(--cyan);">✉️</span> M365 Email Monitoring <span class="tip" data-tip="Monitors Microsoft 365 mail flow by sending a test email and verifying delivery. Uses App Password (not your main password).">?</span></div></div>
+      <div class="pb">
+        <div class="ops-grid-3">
+          <div class="input-group"><label>Sender Email</label><input type="email" id="m365-sender" class="pro-input" placeholder="alerts@company.com"></div>
+          <div class="input-group"><label>App Password</label><input type="password" id="m365-pass" class="pro-input" placeholder="••••••••"></div>
+          <div class="input-group"><label>Recipient Email</label><input type="email" id="m365-recipient" class="pro-input" placeholder="verify@company.com"></div>
+        </div>
+        <button id="activate-m365-btn" class="btn-primary" style="background:rgba(0,212,255,0.1); border-color:var(--cyan); color:var(--cyan);">Activate Mail Flow Monitor</button>
+      </div>
+    </div>
+
+    <div class="ops-grid">
+      <!-- Active Infrastructure -->
+      <div class="panel">
+        <div class="ph"><div class="ph-title"><span class="ph-icon">📋</span> Active Infrastructure <span class="tip" data-tip="All monitored services. Click REMOVE to decommission a node permanently.">?</span></div></div>
+        <div class="pb">
+          <div id="manage-svc-list" style="max-height: 250px; overflow-y: auto; margin-bottom:10px;"></div>
+          <button id="purge-stale-btn" class="btn-danger-outline">Purge Stale Data</button>
+        </div>
+      </div>
+
+      <!-- Add Node -->
+      <div class="panel">
+        <div class="ph"><div class="ph-title"><span class="ph-icon" style="color:var(--green)">➕</span> Add New Node <span class="tip" data-tip="Provision a new website, API, or SSL certificate into the monitoring engine.">?</span></div></div>
+        <div class="pb">
+          <div class="input-group"><label>Service Name</label><input type="text" id="new-svc-name" class="pro-input" placeholder="e.g. Acme API"></div>
+          <div class="input-group"><label>Location / Scope</label><input type="text" id="new-svc-loc" class="pro-input" placeholder="e.g. US East"></div>
+          <div class="input-group"><label>Endpoint URL</label><input type="url" id="new-svc-url" class="pro-input" placeholder="https://..."></div>
+          <div class="input-group">
+            <label>Check Type</label>
+            <select id="new-svc-type" class="pro-input">
+              <option value="http_code">🌐 Website (HTTP)</option>
+              <option value="ssl">🔒 SSL Certificate</option>
+              <option value="json_status">⚙️ API (JSON)</option>
+            </select>
+          </div>
+          <button id="add-svc-btn" class="btn-primary" style="background:rgba(0,232,135,0.1); border-color:var(--green); color:var(--green);">Provision Node</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Alert Config -->
+    <div class="panel" style="margin-top:20px;">
+      <div class="ph"><div class="ph-title"><span class="ph-icon" style="color:var(--amber)">🔔</span> Alert Configuration <span class="tip" data-tip="Configure how you receive notifications when incidents occur or resolve.">?</span></div></div>
+      <div class="pb">
+        <div class="ops-grid-3">
+          <div class="input-group"><label>Alert Mode</label><select id="alert-mode" class="pro-input"><option value="SMTP">SMTP (Cloud)</option><option value="Outlook">Local Outlook</option></select></div>
+          <div class="input-group"><label>Interval (sec)</label><input type="number" id="check-interval" class="pro-input" placeholder="60"></div>
+          <div class="input-group"><label>SMTP User</label><input type="email" id="smtp-user" class="pro-input" placeholder="alerts@co.com"></div>
+        </div>
+        <div class="input-group" style="margin-top:6px;"><label>SMTP Password</label><input type="password" id="smtp-pass" class="pro-input" placeholder="••••••••"></div>
+        <div class="input-group" style="margin-top:6px;"><label>HTTPS Webhook Gateway URL (Google Apps Script / Custom Bypass)</label><input type="text" id="email-webhook-url" class="pro-input" placeholder="https://script.google.com/macros/s/.../exec"></div>
+        <div class="input-group" style="margin-top:6px;"><label>Alert Recipient Emails (comma separated)</label><input type="text" id="alert-recipients" class="pro-input" placeholder="admin@co.com, team@co.com"></div>
+        <div style="display:flex; gap:10px; margin-top:10px;">
+          <button id="save-settings-btn" class="btn-primary" style="flex:1; background:rgba(255,170,0,0.1); border-color:var(--amber); color:var(--amber);">Save Configuration</button>
+          <button id="test-alert-btn" class="btn-primary" style="flex:1; background:rgba(0,212,255,0.1); border-color:var(--cyan); color:var(--cyan);">Send Test Alert Email</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</div><!-- /app -->
+
+<!-- MODAL -->
+<div class="modal-back" id="modal" onclick="bgClose(event)">
+  <div class="modal" id="modalBox">
+    <div class="modal-hd">
+      <div class="modal-hd-info">
+        <div class="modal-title" id="mTitle">Service</div>
+        <div class="modal-meta">
+          <div class="modal-url" id="mUrl">https://...</div>
+          <div class="modal-status-chip online pill" id="mStatusChip">
+            <span class="pill-dot"></span><span id="mStatusTxt">ONLINE</span>
+          </div>
+        </div>
+      </div>
+      <button class="mclose" onclick="closeModal()">✕</button>
+    </div>
+    <div class="modal-tabs">
+      <button class="mtab act" onclick="switchModalTab('overview',this)">Overview</button>
+      <button class="mtab" onclick="switchModalTab('history',this)">History</button>
+    </div>
+    <div class="mtab-panel act" id="mtab-overview">
+      <div class="modal-grid">
+        <div class="m-card">
+          <div class="m-card-title"><span class="mc-icon" style="color:var(--green)">◎</span>Availability</div>
+          <canvas id="mAvailChart" height="72" width="280"></canvas>
+        </div>
+        <div class="m-card">
+          <div class="m-card-title"><span class="mc-icon" style="color:var(--cyan)">⚡</span>Latency (ms)</div>
+          <canvas id="mLatChart" height="72" width="280"></canvas>
+        </div>
+        <div class="m-card">
+          <div class="m-card-title"><span class="mc-icon" style="color:var(--amber)">◔</span>Error Profile</div>
+          <div style="display:flex;align-items:center;gap:16px;padding-top:4px;">
+            <canvas id="mDonut" width="72" height="72"></canvas>
+            <div style="display:flex;flex-direction:column;gap:8px;">
+              <div style="display:flex;align-items:center;gap:8px;font-size:11px;"><div style="width:10px;height:10px;border-radius:2px;background:var(--green)"></div><span id="mOkPct">—</span> Operational</div>
+              <div style="display:flex;align-items:center;gap:8px;font-size:11px;"><div style="width:10px;height:10px;border-radius:2px;background:var(--red)"></div><span id="mErrPct">—</span> Errors</div>
+            </div>
+          </div>
+        </div>
+        <div class="m-card">
+          <div class="m-card-title"><span class="mc-icon" style="color:var(--red)">▲</span>Status Indicator</div>
+          <div id="mIncidentBox"></div>
+        </div>
+      </div>
+    </div>
+    <div class="mtab-panel" id="mtab-history">
+      <div style="margin-bottom:14px;font-family:var(--mono);font-size:9px;color:var(--t4);letter-spacing:1px;">LAST 10 CHECK RESULTS</div>
+      <table class="h-tbl" id="histTable">
+        <thead><tr><th>Timestamp</th><th>Status</th><th>Latency</th><th>Message</th></tr></thead>
+        <tbody id="histBody"></tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- TOASTS -->
+<div id="toasts"></div>
+
+<script src="/static/script_v6.js?v=5.1.8"></script>
+</body>
+</html>

update_logo_b64.py

@@ -0,0 +1,23 @@
+import base64, io
+from PIL import Image
+
+src = r'C:\Users\Suresh\OneDrive - Parle Tech\Desktop\Services Alert\Cloud_Version\static\parle_tech_logo.png'
+img = Image.open(src).convert('RGBA')
+print('SIZE:', img.size)
+buf = io.BytesIO()
+img.save(buf, format='PNG')
+b64 = base64.b64encode(buf.getvalue()).decode('utf-8')
+print('B64_LEN:', len(b64))
+
+target = r'c:\Users\Suresh\OneDrive - Parle Tech\Desktop\Services Alert\Cloud_Version\app.py'
+lines = open(target, 'r', encoding='utf-8').readlines()
+new_lines = []
+updated = False
+for l in lines:
+    if l.startswith('PARLE_TECH_LOGO_B64 ='):
+        new_lines.append('PARLE_TECH_LOGO_B64 = "' + b64 + '"\n')
+        updated = True
+    else:
+        new_lines.append(l)
+open(target, 'w', encoding='utf-8').writelines(new_lines)
+print('Updated B64:', updated)