commit 6617c33f2358259580e32dde69db8373bdcc9664
Author: lakshay <lakshay@resensys.net>
Date:   Mon Jun 29 13:32:41 2026 -0400

    Initial commit: Resensys site status app

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..125877e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# Python
+.venv/
+__pycache__/
+*.pyc
+*.pyo
+.pytest_cache/
+
+# Secrets & local config
+.env
+.env.*
+
+# OS / editor
+.DS_Store
+Thumbs.db
+.vscode/
+
+# Logs & caches
+*.log
+.cache/
+
+# Backups / old credentials
+*OLD_PASSWORD*
+api_bkup.py
+api_copy_*.py
+
+# Lambda Dependencies
+lambda_dependencies/
\ No newline at end of file
diff --git a/api.py b/api.py
new file mode 100644
index 0000000..93f32c6
--- /dev/null
+++ b/api.py
@@ -0,0 +1,658 @@
+#!/usr/bin/env python3
+import os
+import time
+import json
+import re
+import requests
+import redis
+
+from flask import Flask, jsonify, request, send_from_directory, Blueprint
+from dotenv import load_dotenv
+
+bp = Blueprint("api_extra", __name__)
+
+API_KEY = "f1bd537847b87739d5f27b54c2b38cd3fb8aa6e1d19592e6363878805e47f6cd"
+API_URL = "https://rai.resensys.cloud:8443/api/v3"
+
+SITE_ID_RE = re.compile(r"^[A-Za-z0-9\-_.:]+$")  # simple safety gate for keys
+
+cr123_types = ["MRT", "STRED", "STRAIN", "4CHSTR", "DISP", "2DHRT", "HUT", "HPA", "WETNESS"]
+rechargables = ["SNMX", "WLS_S"]
+
+load_dotenv()
+
+# REDIS_HOST = os.getenv("REDIS_HOST", "127.0.0.1")
+REDIS_HOST = os.getenv("REDIS_HOST", "172.31.25.139")
+REDIS_PORT = int(os.getenv("REDIS_PORT", "6380"))
+REDIS_DB = int(os.getenv("REDIS_DB", "0"))
+
+ONLINE_SECS = 90 * 60
+RECENT_SECS = 24 * 3600
+
+app = Flask(__name__, static_folder="static")
+r = redis.Redis(host=REDIS_HOST, port=REDIS_PORT, db=REDIS_DB, decode_responses=True)
+
+# Parse DF_BY_TYPE from the same env var the Lambda uses (optional but convenient)
+try:
+    DF_BY_TYPE = json.loads(os.getenv("DF_BY_TYPE_JSON", '{"STRED":[10002]}'))
+    DF_BY_TYPE = {k: [int(x) for x in v] for k, v in DF_BY_TYPE.items()}
+except Exception:
+    DF_BY_TYPE = {"STRED": [10002]}
+
+
+def _hget_int(h, key, default=0):
+    try:
+        return int(h.get(key) or default)
+    except Exception:
+        return default
+
+
+def _ok_site_id(sid: str) -> bool:
+    return bool(sid and SITE_ID_RE.match(sid))
+
+
+def _meta_key(sid: str) -> str:
+    return f"site:{sid}:meta"
+
+
+def _site_tags_key(sid: str) -> str:
+    return f"site:{sid}:tags"
+
+
+def _tag_sites_key(tag: str) -> str:
+    return f"tag:{tag}:sites"
+
+
+def _derive_site_state(last_ts: int, now_ts: int | None = None) -> str:
+    """
+    Derive state from last contact time.
+
+    Online             : within last 90 minutes
+    recently offline   : older than 90 minutes but within last 24 hours
+    Offline            : older than 24 hours, or no timestamp
+    """
+    now_ts = now_ts or int(time.time())
+
+    if not last_ts or last_ts <= 0:
+        return "offline"
+
+    age = now_ts - last_ts
+    if age < 0:
+        # clock skew / future timestamp
+        age = 0
+
+    if age <= ONLINE_SECS:
+        return "online"
+    elif age <= RECENT_SECS:
+        return "recent"
+    else:
+        return "offline"
+
+
+def _safe_json_post(endpoint: str, payload: dict, timeout: int = 10):
+    try:
+        resp = requests.post(
+            f"{API_URL}/{endpoint}",
+            headers={
+                "X-API-Key": API_KEY,
+                "Content-Type": "application/json"
+            },
+            json=payload,
+            timeout=timeout,
+        )
+    except requests.RequestException as e:
+        return None, (jsonify({"ok": False, "error": f"upstream error: {e}"}), 502)
+
+    if resp.status_code != 200:
+        return None, (jsonify({
+            "ok": False,
+            "status_code": resp.status_code,
+            "body": resp.text
+        }), 502)
+
+    try:
+        upstream = resp.json()
+    except ValueError:
+        upstream = {}
+
+    return upstream, None
+
+
+def _infer_passed(upstream: dict, default: bool = True) -> bool:
+    if isinstance(upstream.get("ok"), bool):
+        return upstream["ok"]
+
+    status = str(upstream.get("status", "")).lower()
+    if status:
+        return ("ok" in status) or ("pass" in status) or ("good" in status) or ("within" in status)
+
+    return default
+
+
+@app.get("/")
+def root():
+    return send_from_directory("templates", "index.html")
+
+
+@app.get("/api/site-grid")
+def site_grid():
+    q = (request.args.get("q") or "").strip().lower()
+    requested_state = (request.args.get("state") or "").strip().lower()
+    port = (request.args.get("port") or "").strip().lower()
+    tag = (request.args.get("tag") or "").strip()
+    limit = min(int(request.args.get("limit", 2000)), 5000)
+
+    now_ts = int(time.time())
+    items = []
+
+    # Use scan_iter instead of keys for better Redis behavior at scale
+    for k in r.scan_iter("site:*:summary"):
+        parts = k.split(":")
+        if len(parts) < 3:
+            continue
+
+        sid = parts[1]
+        data = r.hgetall(k) or {}
+
+        meta = r.hgetall(_meta_key(sid)) or {}
+        site_name = meta.get("name", "")
+        tags = sorted(list(r.smembers(_site_tags_key(sid))))
+
+        # Search site_id and site_name
+        if q and q not in sid.lower() and q not in site_name.lower():
+            continue
+
+        if port and (data.get("port") or "").lower() != port:
+            continue
+
+        if tag and tag not in tags:
+            continue
+
+        last_ts = _hget_int(data, "last_contact_ts", 0)
+        derived_state = _derive_site_state(last_ts, now_ts)
+
+        # Filter using derived state, not stored redis state
+        if requested_state and derived_state != requested_state:
+            continue
+
+        age_seconds = None if last_ts <= 0 else max(0, now_ts - last_ts)
+
+        items.append({
+            "site_id": sid,
+            "site_name": site_name,
+            "site_tags": tags,
+            "state": derived_state,
+            "port": data.get("port"),
+            "last_contact_ts": last_ts if last_ts > 0 else None,
+            "last_contact_age_sec": age_seconds,
+            "last_contact_age_min": (age_seconds // 60) if age_seconds is not None else None,
+            "num_gateways": _hget_int(data, "num_gateways", 0),
+            "num_devices": _hget_int(data, "num_devices", 0),
+            "num_inactive_24h": _hget_int(data, "num_inactive_24h", 0),
+        })
+
+        if len(items) >= limit:
+            break
+
+    items.sort(key=lambda x: x["last_contact_ts"] or 0, reverse=True)
+    return jsonify(items)
+
+
+@app.get("/api/devices")
+def devices():
+    """Optional: list devices for a given site_id."""
+    sid = request.args.get("site_id")
+    if not sid:
+        return jsonify({"error": "site_id required"}), 400
+
+    # Sets are unordered; make a stable order for the UI
+    dids = sorted(r.smembers(f"site:{sid}:devices"))
+
+    # Fetch all device hashes in one round-trip
+    pipe = r.pipeline()
+    for d in dids:
+        pipe.hgetall(f"device:{d}")
+    devrows = pipe.execute()
+
+    out = []
+    for d, row in zip(dids, devrows):
+        lat_h = r.hgetall(f"device:{d}:latest")
+        latest_rssi = lat_h.get("rssi") or ""
+        latest_voltage = lat_h.get("voltage") or ""
+        row = row or {}
+
+        device_class = ""
+        if row.get("device_type_code") in cr123_types:
+            device_class = "non_recharge"
+        elif row.get("device_type_code") in rechargables:
+            device_class = "recharge"
+
+        out.append({
+            "device_id": d,
+            "site_id": row.get("site_id"),
+            "local_address": row.get("local_address"),
+            "last_voltage_ts": int(row.get("last_voltage_ts") or 0),
+            "last_gateway_id": row.get("last_gateway_id"),
+            "device_type": row.get("device_type") or "",
+            "device_class": device_class,
+            "device_type_code": row.get("device_type_code") or "",
+            "rssi": latest_rssi,
+            "voltage": latest_voltage
+        })
+
+    return jsonify(out)
+
+
+@app.route("/api/device-cache", methods=["POST"])
+def device_cache():
+    """
+    Body: {"device_ids": ["AA-BB-CC-DD", ...]}
+    Returns core device info + cached DF values based on device type code.
+    """
+    data = request.get_json(silent=True) or {}
+    dids = data.get("device_ids") or []
+    if not isinstance(dids, list) or not dids:
+        return jsonify({"ok": False, "error": "device_ids required"}), 400
+
+    devices_out = []
+    df_map = {}
+
+    for did in dids:
+        key_dev = f"device:{did}"
+        key_latest = f"device:{did}:latest"
+
+        dev_h = r.hgetall(key_dev)
+        lat_h = r.hgetall(key_latest)
+
+        print("lat_h: ", lat_h)
+
+        dev_type = dev_h.get("device_type") or ""
+        dev_type_code = dev_h.get("device_type_code") or ""
+        site_id = dev_h.get("site_id") or lat_h.get("siteID") or ""
+        local_addr = dev_h.get("local_address") or lat_h.get("localAddress") or ""
+        latest_ts = _hget_int(dev_h, "last_voltage_ts", _hget_int(lat_h, "timestamp", 0))
+
+        latest_rssi = lat_h.get("rssi") or ""
+        latest_voltage = lat_h.get("voltage") or ""
+
+        devices_out.append({
+            "device_id": did,
+            "site_id": site_id,
+            "device_type": dev_type,
+            "device_type_code": dev_type_code,
+            "local_address": local_addr,
+            "latest_ts": latest_ts,
+            "rssi": latest_rssi,
+            "voltage": latest_voltage
+        })
+
+        dfs_cfg = [int(x) for x in DF_BY_TYPE.get(dev_type_code, [])]
+        per_df = {}
+
+        # 1) Try configured DFs first
+        for df in dfs_cfg:
+            h = r.hgetall(f"device:{did}:df:{df}")
+            if h:
+                per_df[str(df)] = {
+                    "value": h.get("value", ""),
+                    "optional": h.get("optional", ""),
+                    "ts": h.get("ts", ""),
+                    "type_code": h.get("type_code", dev_type_code),
+                    "cached": True,
+                }
+
+        # 2) Fall back to any seen DFs
+        if not per_df:
+            seen = sorted(
+                r.smembers(f"device:{did}:dataformats"),
+                key=lambda x: int(x) if str(x).isdigit() else 0
+            )
+            for df in seen:
+                key = f"device:{did}:df:{df}"
+                h = r.hgetall(key)
+                per_df[str(df)] = {
+                    "value": h.get("value", "") if h else "10",
+                    "optional": h.get("optional", "") if h else "10",
+                    "ts": h.get("ts", "") if h else "10",
+                    "type_code": h.get("type_code", dev_type_code),
+                    "cached": bool(h),
+                }
+
+        df_map[did] = per_df
+
+    return jsonify({"ok": True, "devices": devices_out, "df_map": df_map})
+
+
+@app.get("/api/site-meta")
+def get_site_meta():
+    sid = (request.args.get("site_id") or "").strip()
+    if not _ok_site_id(sid):
+        return jsonify({"error": "invalid or missing site_id"}), 400
+
+    meta = r.hgetall(_meta_key(sid)) or {}
+    tags = sorted(list(r.smembers(_site_tags_key(sid))))
+    return jsonify({
+        "site_id": sid,
+        "name": meta.get("name", ""),
+        "tags": tags,
+    })
+
+
+@app.post("/api/site-meta")
+def post_site_meta():
+    try:
+        payload = request.get_json(force=True, silent=False) or {}
+    except Exception:
+        return jsonify({"error": "invalid JSON"}), 400
+
+    sid = (payload.get("site_id") or "").strip()
+    name = (payload.get("name") or "").strip()
+    tags = payload.get("tags") or []
+
+    print(f"Trying to add tags {tags} for site {sid}.")
+
+    if not _ok_site_id(sid):
+        return jsonify({"error": "invalid or missing site_id"}), 400
+    if not isinstance(tags, list) or not all(isinstance(t, str) and t.strip() for t in tags):
+        return jsonify({"error": "tags must be a non-empty list of strings (or empty list)"}), 400
+
+    norm_tags = []
+    seen = set()
+    for t in tags:
+        tt = t.strip()
+        if tt and tt not in seen:
+            seen.add(tt)
+            norm_tags.append(tt)
+
+    site_meta_key = _meta_key(sid)
+    site_tags_key = _site_tags_key(sid)
+
+    old_tags = set(r.smembers(site_tags_key))
+    new_tags = set(norm_tags)
+
+    to_add = list(new_tags - old_tags)
+    to_remove = list(old_tags - new_tags)
+
+    pipe = r.pipeline()
+    pipe.hset(site_meta_key, mapping={"name": name})
+
+    for t in to_add:
+        pipe.sadd(site_tags_key, t)
+        pipe.sadd(_tag_sites_key(t), sid)
+
+    for t in to_remove:
+        pipe.srem(site_tags_key, t)
+        pipe.srem(_tag_sites_key(t), sid)
+
+    pipe.execute()
+
+    return jsonify({"site_id": sid, "name": name, "tags": norm_tags})
+
+
+@app.get("/api/site-bundle")
+def site_bundle():
+    sid = (request.args.get("site_id") or "").strip()
+    if not sid:
+        return jsonify({"error": "site_id required"}), 400
+
+    data = r.hgetall(f"site:{sid}:bundle") or {}
+    out = {
+        "site_id": sid,
+        "firmware_version": data.get("firmware_version", ""),
+        "error_code": data.get("error_code", ""),
+        "iccid": data.get("iccid", ""),
+        "imei": data.get("imei", ""),
+        "iccid_str": data.get("iccid_str", ""),
+        "imei_str": data.get("imei_str", ""),
+        "bundle_updated_at": int(data.get("bundle_updated_at", 0) or 0),
+    }
+    return jsonify(out)
+
+
+@app.route("/internal/check-signal", methods=["POST"])
+def check_signal():
+    data = request.get_json(silent=True) or {}
+    did = data.get("did")
+    if not did:
+        return jsonify({"ok": False, "error": "did required"}), 400
+
+    upstream, err = _safe_json_post("rssi_status", {"did": did})
+    if err:
+        return err
+
+    print("RSSI backend response: ", upstream)
+
+    latest = upstream.get("latest", "unknown")
+    status = str(upstream.get("status", "")).lower()
+
+    if status == "good":
+        explain = f"RSSI and device signal are GOOD with latest reading being {latest}."
+    else:
+        explain = f"RSSI and device signal are WEAK with latest reading being {latest}."
+
+    passed = _infer_passed(upstream, default=True)
+
+    return jsonify({
+        "ok": passed,
+        "raw": upstream,
+        "explain": explain,
+        "metrics": {"RSSI": latest}
+    })
+
+
+@app.route("/internal/check-strain", methods=["POST"])
+def check_strain():
+    data = request.get_json(silent=True) or {}
+    did = data.get("did")
+    if not did:
+        return jsonify({"ok": False, "error": "did required"}), 400
+
+    upstream, err = _safe_json_post("strain_status", {"did": did})
+    if err:
+        return err
+
+    print("Strain backend response: ", upstream)
+
+    latest = upstream.get("latest", "unknown")
+    i2_median = upstream.get("i2_median", "unknown")
+    status = str(upstream.get("status", "")).lower()
+
+    if status == "good":
+        explain = (
+            f"Strain reading quality is GOOD with latest raw strain reading being {latest} "
+            f"and infofield2 within range -90 +/- 20 counts at {i2_median}."
+        )
+    else:
+        explain = (
+            f"Strain quality is not good and the median infofield2 value is out of range "
+            f"of -90 +/- 20 counts at {i2_median}."
+        )
+
+    passed = _infer_passed(upstream, default=True)
+
+    return jsonify({
+        "ok": passed,
+        "raw": upstream,
+        "explain": explain,
+        "metrics": {"Strain": latest, "Infofield2": i2_median}
+    })
+
+
+@app.route("/internal/check-hpa", methods=["POST"])
+def check_hpa():
+    data = request.get_json(silent=True) or {}
+    did = data.get("did")
+    if not did:
+        return jsonify({"ok": False, "error": "did required"}), 400
+
+    upstream, err = _safe_json_post("hpa_status", {"did": did})
+    if err:
+        return err
+
+    print("HPA backend response: ", upstream)
+
+    latest = upstream.get("latest", "unknown")
+    status = str(upstream.get("status", "")).lower()
+
+    if status == "good":
+        explain = f"Accelerometer readings are GOOD with latest reading for HPA-Z being {latest}."
+    else:
+        explain = f"Accelerometer readings are POOR with latest reading for HPA-Z being {latest}."
+
+    try:
+        firmware_version = float(upstream.get("firmware_version", 0) or 0)
+    except Exception:
+        firmware_version = 0.0
+
+    try:
+        if firmware_version >= 13:
+            accel_threshold = float(upstream.get("i2", 0) or 0)
+        else:
+            accel_threshold = float(upstream.get("i1", 0) or 0)
+    except Exception:
+        accel_threshold = 0.0
+
+    if accel_threshold < 50:
+        explain = "Trigger threshold is too low. Consider raising to at least 180 mg."
+
+    passed = _infer_passed(upstream, default=True)
+
+    return jsonify({
+        "ok": passed,
+        "raw": upstream,
+        "explain": explain,
+        "metrics": {
+            "HPA-Z (latest)": latest,
+            "Threshold": f"{accel_threshold} mg"
+        }
+    })
+
+
+@app.route("/internal/check-wls", methods=["POST"])
+def check_wls():
+    data = request.get_json(silent=True) or {}
+    did = data.get("did")
+    if not did:
+        return jsonify({"ok": False, "error": "did required"}), 400
+
+    upstream, err = _safe_json_post("wls_status", {"did": did})
+    if err:
+        return err
+
+    print("WLS backend response: ", upstream)
+
+    latest = upstream.get("latest", "unknown")
+    status = str(upstream.get("status", "")).lower()
+
+    if status == "good":
+        explain = f"Water level readings are GOOD with latest reading for level being {latest}."
+    else:
+        explain = f"Water level readings are POOR with latest reading for level being {latest}."
+
+    passed = _infer_passed(upstream, default=True)
+
+    return jsonify({
+        "ok": passed,
+        "raw": upstream,
+        "explain": explain,
+        "metrics": {"Level": latest}
+    })
+
+
+@app.route("/internal/check-battery", methods=["POST"])
+def check_battery():
+    data = request.get_json(silent=True) or {}
+    did = data.get("did")
+    if not did:
+        return jsonify({"ok": False, "error": "did required"}), 400
+
+    upstream, err = _safe_json_post("battery_status", {"did": did})
+    if err:
+        return err
+
+    print("Battery backend response: ", upstream)
+
+    latest = upstream.get("latest", "unknown")
+    status = str(upstream.get("status", "")).lower()
+
+    if status == "good":
+        explain = f"Battery is GOOD with latest reading being {latest}."
+    else:
+        explain = f"Battery is LOW with latest reading being {latest}."
+
+    passed = _infer_passed(upstream, default=False)
+
+    return jsonify({
+        "ok": passed,
+        "raw": upstream,
+        "explain": explain,
+        "metrics": {"Battery Voltage": latest}
+    })
+
+
+@app.route("/internal/check-charge", methods=["POST"])
+def check_charge():
+    data = request.get_json(silent=True) or {}
+    did = data.get("did")
+    if not did:
+        return jsonify({"ok": False, "error": "did required"}), 400
+
+    upstream, err = _safe_json_post("charge_status", {"did": did})
+    if err:
+        return err
+
+    print("Charge backend response: ", upstream)
+
+    max_current = upstream.get("max", "unknown")
+    status = str(upstream.get("status", "")).lower()
+
+    if status == "good":
+        explain = f"Charging is GOOD with maximum reading being {max_current} mA."
+    else:
+        explain = (
+            f"Charging is LOW with maximum reading being {max_current} mA. "
+            f"Please try adjusting the solar panel toward south sky."
+        )
+
+    passed = _infer_passed(upstream, default=False)
+
+    return jsonify({
+        "ok": passed,
+        "raw": upstream,
+        "explain": explain,
+        "metrics": {"Charging Current": f"{max_current} mA"}
+    })
+
+
+@app.route("/api/device-info", methods=["GET"])
+def api_device_info():
+    """
+    Internal proxy for retrieving a device's type information.
+    Frontend calls /api/device-info?did=15-03-77-44
+    This server then POSTs to the upstream Resensys API with the API key.
+    """
+    did = request.args.get("did")
+    if not did:
+        return jsonify({"ok": False, "error": "Query parameter 'did' is required"}), 400
+
+    upstream, err = _safe_json_post("device_type", {"did": did})
+    if err:
+        return err
+
+    device_type = upstream.get("device_type") or upstream.get("type")
+    code_name = upstream.get("code_name")
+
+    print(f"Device {did} is {code_name}.")
+
+    return jsonify({
+        "ok": True,
+        "device_id": did,
+        "device_type": device_type,
+        "code_name": code_name,
+        "raw": upstream
+    })
+
+
+if __name__ == "__main__":
+    # run: python api.py
+    app.run(host="0.0.0.0", port=5556, debug=True)
diff --git a/checkAllSites.py b/checkAllSites.py
new file mode 100644
index 0000000..23a4a31
--- /dev/null
+++ b/checkAllSites.py
@@ -0,0 +1,39 @@
+import mysql.connector.python
+import requests
+
+# The Lambda endpoint
+URL = "https://7ft6zzxgc3fr34nmrd5t63cel40vzvhp.lambda-url.us-east-1.on.aws/"
+
+# List of site IDs to check
+site_ids = [
+    "48-01",
+    "48-02",
+    "48-03",
+    # add more here...
+]
+
+# Common headers
+HEADERS = {
+    "Content-Type": "application/json"
+}
+
+MYSQL_USER = "MKK"
+MYSQL_PW = "BoxPaxMint12"
+MYSQL_HOST = "resensys-cloudbase.coxrusc9yue4.us-east-1.rds.amazonaws.com"
+MYSQL_PORT = 3306
+
+def get_sites():
+    
+    print("This is where we get the site IDs...")
+
+if __name__ == "__main__":
+    for site_id in site_ids:
+        payload = {"site_id": site_id}
+        try:
+            response = requests.post(URL, headers=HEADERS, json=payload, timeout=10)
+            response.raise_for_status()  # raises for 4xx/5xx
+            print(f"[{site_id}] OK: {response.json()}")
+        except requests.exceptions.RequestException as e:
+            print(f"[{site_id}] ERROR: {e}")
+
+    
\ No newline at end of file
diff --git a/check_ingest.py b/check_ingest.py
new file mode 100644
index 0000000..3157125
--- /dev/null
+++ b/check_ingest.py
@@ -0,0 +1,11 @@
+import redis
+
+r = redis.Redis(host="172.31.25.139", port=6380, db=0, decode_responses=True)
+
+site_id = "49-59"  # replace with the SID inferred from filename
+
+print("Devices:", r.smembers(f"site:{site_id}:devices"))
+print("LocalAddressMap:", r.hgetall(f"site:{site_id}:localAddressMap"))
+
+for did in r.smembers(f"site:{site_id}:devices"):
+    print(f"Device {did} latest:", r.hgetall(f"device:{did}:latest"))
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..2683697
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,4 @@
+Flask==3.0.3
+redis==5.0.6
+python-dotenv==1.0.1
+pytest==8.3.2
\ No newline at end of file
diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 0000000..deab22e
Binary files /dev/null and b/static/logo.png differ
diff --git a/templates/index copy.html b/templates/index copy.html
new file mode 100644
index 0000000..4626c9b
--- /dev/null
+++ b/templates/index copy.html	
@@ -0,0 +1,1067 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Gateway Status Grid</title>
+  <link rel="icon" href="/static/logo.png" type="image/png">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    :root{color-scheme: light dark;}
+    body { font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 16px; }
+    .toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
+    input, select, button { padding:6px 10px; border-radius:10px; border:1px solid #ccc; }
+    button { cursor:pointer; }
+    .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
+    /* .card { border-radius:16px; padding:12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); background:#fff; border:1px solid #eee; } */
+    .card {
+      border-radius:16px; padding:12px;
+      box-shadow: 0 2px 12px rgba(0,0,0,.08);
+      background:#fff; border:1px solid #eee;
+      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
+    }
+    .card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 18px rgba(0,0,0,.12);
+      border-color:#ddd;
+    }
+
+    .site { font-weight:700; font-size:16px; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
+    .meta { font-size:12px; color:#979797; }
+    .pill { display:inline-block; padding:2px 8px; border-radius:999px; color:#fff; font-size:12px; text-transform:capitalize;}
+    .online { background:#00a86b; }
+    .recent { background:#e4a11b; }
+    .offline { background:#dc3545; }
+
+    .meta-form { padding:10px 14px; border-bottom:1px solid #eee; display:flex; flex-direction:column; gap:8px; }
+    .meta-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
+    .meta-row label { font-size:12px; opacity:.7; min-width:56px; }
+    .meta-row input[type="text"] { flex:1; padding:6px 10px; border-radius:10px; border:1px solid #ccc; }
+    .chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:#eef2ff; border:1px solid #dbe2ff; font-size:12px; }
+    .chip button { background:none; border:none; cursor:pointer; font-size:12px; opacity:.7; }
+    .chip button:hover { opacity:1; }
+    .tag-entry { min-width:160px; }
+    .save-hint { font-size:12px; opacity:.6; }
+    .pill-tag { background:#6b7280; color:#fff; padding:2px 6px; border-radius:999px; font-size:11px; }
+    @media (prefers-color-scheme: dark) {
+      .meta-form { border-bottom-color:#2a2a2a; }
+      .meta-row input[type="text"] { border-color:#161616; background:#f6f6f6; color:#222222; }
+      .chip { background:#2a2f45; border-color:#3a415c; color:#e5e7eb; }
+    }
+
+    .pill-sm{display:inline-block;padding:2px 6px;border-radius:999px;color:#fff;font-size:11px}
+    .ok{background:#00a86b}.bad{background:#dc3545}
+    /* .linklike{background:none;border:none;padding:0;margin:0;color:inherit;text-decoration:underline;cursor:pointer;font-weight:700} */
+    .linklike { background:none; border:none; padding:0; margin:0;
+      color:inherit; text-decoration:underline; cursor:pointer; font-weight:700 }
+    .linklike:focus { outline: 2px solid #7aa7ff; outline-offset: 2px; border-radius:6px; }
+
+    #drawer { position:fixed; top:0; right:-1020px; width:1020px; max-width:92vw; height:100vh;
+      background:#fff; border-left:1px solid #ddd; box-shadow:-8px 0 24px rgba(0,0,0,.1);
+      transition:right .25s ease; z-index:1000; display:flex; flex-direction:column; }
+    #drawer .hdr { position:sticky; top:0; background:#fff; z-index:1; }
+
+    .row {
+      display:grid;
+      grid-template-columns: minmax(16ch, 1fr) 10ch 10ch 10ch 10ch 10ch 10ch; /* + 'Type' column (10ch) */
+      gap:12px; align-items:center; padding:8px 0;
+      border-bottom:1px solid #f0f0f0;
+    }
+    .row.hdr {
+      font-weight:700; border-bottom:2px solid #ddd; padding-top:10px; padding-bottom:10px;
+    }
+
+    /* Cells */
+    .cell--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .cell--right { text-align:right; }
+    .pill-sm { display:inline-block; padding:2px 8px; border-radius:999px; color:#fff; font-size:11px }
+    .ok { background:#00a86b } .bad { background:#dc3545 }
+
+    /* Hover rows */
+    .row.data:hover {
+      background: rgba(0,0,0,.035);
+      border-radius:8px;
+    }
+
+    /* Dark mode contrast */
+    @media (prefers-color-scheme: dark) {
+      .card { background:#1b1b1b; border-color:#2a2a2a; }
+      .card:hover { border-color:#3a3a3a; }
+      #drawer { background:#1b1b1b; border-left-color:#2a2a2a; }
+      .row { border-bottom-color:#2a2a2a; }
+      .row.hdr { border-bottom-color:#3a3a3a; background:#1b1b1b; }
+      .row.data:hover { background:rgba(255,255,255,.06); }
+    }
+
+    .stats {
+      display:flex; gap:8px; margin-left:auto; flex-wrap:wrap;
+    }
+    .stat-card {
+      min-width: 120px;
+      padding:8px 10px;
+      border:1px solid #eee;
+      border-radius:12px;
+      background:#fff;
+      box-shadow: 0 2px 8px rgba(0,0,0,.06);
+    }
+    .stat-title { font-size:11px; opacity:.7; margin-bottom:2px; }
+    .stat-value { font-size:18px; font-weight:700; }
+
+    /* color cues */
+    .stat-online  .stat-value { color:#00a86b; }
+    .stat-recent  .stat-value { color:#e4a11b; }
+    .stat-offline .stat-value { color:#dc3545; }
+
+    @media (prefers-color-scheme: dark) {
+      .stat-card { background:#1b1b1b; border-color:#2a2a2a; }
+    }
+
+    .kv { display:grid; grid-template-columns: 120px 1fr; gap:6px 12px; }
+    .k { opacity:.7; font-size:12px; align-self:center; }
+    .v { font-size:14px; }
+    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    @media (prefers-color-scheme: dark) {
+      #bundle-card { border-bottom-color:#2a2a2a; }
+    }
+
+
+
+    /* ===== THEME: GLASS ===== */
+body.theme-glass {
+  --accent: #5b8cff;
+  --bg-grad-a: #f7f9ff;
+  --bg-grad-b: #eef2ff;
+  background: linear-gradient(160deg, var(--bg-grad-a), var(--bg-grad-b));
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-glass {
+    --accent: #7aa7ff;
+    --bg-grad-a: #0f1220;
+    --bg-grad-b: #14182a;
+    background: radial-gradient(1200px 600px at 20% 0%, #1a1f36 0%, #0f1220 55%);
+  }
+}
+body.theme-glass .toolbar,
+body.theme-glass .stat-card,
+body.theme-glass .card {
+  background: rgba(255,255,255,.55);
+  border: 1px solid rgba(255,255,255,.35);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 10px 30px rgba(0,0,0,.08);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-glass .toolbar,
+  body.theme-glass .stat-card,
+  body.theme-glass .card {
+    background: rgba(22,26,44,.55);
+    border: 1px solid rgba(122,167,255,.15);
+    box-shadow: 0 12px 28px rgba(0,0,0,.35);
+  }
+}
+body.theme-glass input, 
+body.theme-glass select, 
+body.theme-glass button {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,.1);
+  background: rgba(255,255,255,.7);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-glass input, 
+  body.theme-glass select, 
+  body.theme-glass button {
+    border: 1px solid rgba(255,255,255,.12);
+    background: rgba(255,255,255,.06);
+    color: #e5e7eb;
+  }
+}
+body.theme-glass .pill,
+body.theme-glass .pill-sm {
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
+}
+body.theme-glass .online { background: #22c55e; }
+body.theme-glass .recent { background: #f59e0b; }
+body.theme-glass .offline{ background: #ef4444; }
+body.theme-glass .linklike:focus { outline-color: var(--accent); }
+body.theme-glass .row.data:hover { background: rgba(255,255,255,.35); }
+@media (prefers-color-scheme: dark) {
+  body.theme-glass .row.data:hover { background: rgba(255,255,255,.08); }
+}
+
+
+/* ===== THEME: NEON ===== */
+body.theme-neon {
+  background: #0b0f16;
+  color: #e5e7eb;
+  --neon: #4fd1c5;        /* teal */
+  --neon2: #a78bfa;       /* violet */
+}
+body.theme-neon .toolbar { 
+  background: #0f1522; border: 1px solid #1f2a3a; border-radius: 14px; 
+  box-shadow: inset 0 0 0 1px rgba(79,209,197,.08), 0 8px 24px rgba(0,0,0,.4);
+  padding: 10px;
+}
+body.theme-neon .card {
+  background: #101725;
+  border: 1px solid #1f2a3a;
+  box-shadow: 0 8px 24px rgba(0,0,0,.5);
+}
+body.theme-neon .card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(79,209,197,.35);
+  box-shadow: 0 14px 36px rgba(0,0,0,.65), 0 0 0 1px rgba(167,139,250,.15) inset;
+}
+body.theme-neon .site { letter-spacing:.2px; }
+body.theme-neon .meta { color:#94a3b8; }
+
+body.theme-neon input, 
+body.theme-neon select, 
+body.theme-neon button {
+  background:#0f1522; border:1px solid #243044; color:#e5e7eb;
+  box-shadow: 0 0 0 2px transparent inset;
+}
+body.theme-neon input:focus, 
+body.theme-neon select:focus,
+body.theme-neon button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(79,209,197,.35) inset;
+  border-color: rgba(79,209,197,.55);
+}
+body.theme-neon .linklike { text-decoration: none; border-bottom:1px dashed rgba(167,139,250,.6); }
+body.theme-neon .linklike:hover { color: var(--neon2); border-bottom-color: var(--neon2); }
+
+body.theme-neon .pill, .theme-neon .pill-sm { 
+  background: linear-gradient(90deg, var(--neon), var(--neon)); color:#0b0f16; font-weight:700;
+}
+body.theme-neon .online  { background: #06d6a0; color:#0b0f16; }
+body.theme-neon .recent  { background: #ffd166; color:#0b0f16; }
+body.theme-neon .offline { background: #ef476f; color:#0b0f16; }
+
+body.theme-neon .row { border-bottom-color:#1b2638; }
+body.theme-neon .row.hdr { border-bottom-color:#29374f; background:#0f1522; }
+body.theme-neon .row.data:hover { background: rgba(79,209,197,.06); }
+
+body.theme-neon .stat-card {
+  background:#0f1522; border:1px solid #1f2a3a;
+  box-shadow: 0 6px 18px rgba(0,0,0,.5);
+}
+body.theme-neon .stat-title { color:#9fb3c8; }
+body.theme-neon .stat-online  .stat-value { color:#06d6a0; }
+body.theme-neon .stat-recent  .stat-value { color:#ffd166; }
+body.theme-neon .stat-offline .stat-value { color:#ef476f; }
+
+
+/* ===== THEME: MINIMAL ===== */
+body.theme-minimal {
+  --ink: #1f2937;
+  --subink: #6b7280;
+  --bg: #fafafa;
+  --line: #eaeaea;
+  background: var(--bg);
+  color: var(--ink);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-minimal {
+    --ink: #e5e7eb; --subink:#9ca3af; --bg:#0f1115; --line:#22242a;
+    background: var(--bg);
+  }
+}
+body.theme-minimal .toolbar { 
+  background: transparent; border: none; padding: 0; gap: 10px;
+}
+body.theme-minimal input, 
+body.theme-minimal select, 
+body.theme-minimal button {
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid var(--line);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-minimal input, 
+  body.theme-minimal select, 
+  body.theme-minimal button { background:#14161b; border-color:#22242a; color:#e5e7eb; }
+}
+
+body.theme-minimal .card {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+}
+body.theme-minimal .card + .card { margin-top: 8px; }
+
+body.theme-minimal .site {
+  font-weight: 700; font-size: 18px; margin-bottom: 4px;
+}
+body.theme-minimal .meta { color: var(--subink); }
+
+body.theme-minimal .row {
+  border-bottom: 1px solid var(--line);
+  padding: 10px 0;
+}
+body.theme-minimal .row.hdr {
+  border-bottom: 2px solid var(--ink);
+  background: transparent;
+}
+body.theme-minimal .row.data:hover { background: transparent; }
+
+body.theme-minimal .pill, 
+body.theme-minimal .pill-sm {
+  background: #111827; color:#fff; border-radius: 999px;
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-minimal .pill, 
+  body.theme-minimal .pill-sm { background:#374151; }
+}
+body.theme-minimal .online  { background:#059669; }
+body.theme-minimal .recent  { background:#d97706; }
+body.theme-minimal .offline { background:#b91c1c; }
+
+body.theme-minimal .stat-card {
+  background: transparent;
+  border: 1px dashed var(--line);
+  box-shadow: none;
+}
+body.theme-minimal .stat-title { color: var(--subink); text-transform: uppercase; letter-spacing: .04em; }
+
+
+/* ===== THEME: AURORA (LIGHT-FIRST) ===== */
+body.theme-aurora {
+  --bg: #f9fafb;
+  --card: #ffffff;
+  --ink: #0f172a;        /* slate-900 */
+  --subink: #64748b;     /* slate-500 */
+  --line: #e5e7eb;       /* gray-200 */
+  --accent: #2563eb;     /* blue-600 */
+  --accent-2: #22c55e;   /* green-500 */
+  --shadow: 0 8px 24px rgba(15, 23, 42, .06);
+
+  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
+  color: var(--ink);
+}
+
+body.theme-aurora .toolbar {
+  background: #ffffff;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 10px;
+  box-shadow: var(--shadow);
+}
+
+body.theme-aurora input,
+body.theme-aurora select,
+body.theme-aurora button {
+  background: #fff;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+}
+
+body.theme-aurora input:focus,
+body.theme-aurora select:focus,
+body.theme-aurora button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
+  border-color: rgba(37,99,235,.5);
+}
+
+body.theme-aurora .card {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  box-shadow: var(--shadow);
+  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
+}
+body.theme-aurora .card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 36px rgba(15,23,42,.10);
+  border-color: #d1d5db; /* gray-300 */
+}
+
+body.theme-aurora .site { font-size: 17px; font-weight: 750; }
+body.theme-aurora .meta { color: var(--subink); }
+
+body.theme-aurora .row { border-bottom: 1px solid var(--line); }
+body.theme-aurora .row.hdr { border-bottom: 2px solid #cbd5e1; background: #fff; }
+body.theme-aurora .row.data:hover { background: #f3f4f6; }
+
+body.theme-aurora .pill, .theme-aurora .pill-sm {
+  background: linear-gradient(180deg, #ffffff, #eef2ff);
+  border: 1px solid #dbeafe;  /* blue-100 */
+  color: #1e293b;
+}
+
+body.theme-aurora .online  { background: #16a34a; } /* green-600 */
+body.theme-aurora .recent  { background: #d97706; } /* amber-600 */
+body.theme-aurora .offline { background: #d83030; } /* red-700 */
+
+body.theme-aurora .stat-card {
+  background: #fff; border: 1px solid var(--line); border-radius: 14px;
+  box-shadow: var(--shadow);
+}
+body.theme-aurora .stat-title { color: var(--subink); }
+body.theme-aurora .stat-online  .stat-value { color: #16a34a; }
+body.theme-aurora .stat-recent  .stat-value { color: #d97706; }
+body.theme-aurora .stat-offline .stat-value { color: #d83030; }
+
+body.theme-aurora .linklike { text-decoration: none; color: var(--accent); font-weight: 700; }
+body.theme-aurora .linklike:hover { text-decoration: underline; }
+
+
+
+  </style>
+</head>
+<body class="theme-neon">
+  <span>
+    <img src="/static/logo.png" alt="App Icon" width="32" height="32" style="vertical-align: middle;">
+    <h1 style="display: inline-block; margin: 10px; vertical-align: middle;">Resensys Site Status</h1>
+  </span>
+  <div class="toolbar">
+    <input id="q" style="margin:5px;" placeholder='Filter by site (e.g., "48-")' />
+    <select id="state">
+      <option value="">All states</option>
+      <option value="online">Online</option>
+      <option value="recent">Recently offline</option>
+      <option value="offline">Offline</option>
+    </select>
+    <button id="refresh">Refresh</button>
+    <button id="tab-sites">Sites</button>
+    <button id="tab-cache">Device Cache</button>
+    <div id="stats" class="stats"></div>
+    <span id="count" style="margin-left:auto;opacity:.7;margin:5px;"></span>
+    <!-- <button id="themeToggle" style="
+      padding:6px 10px; border-radius:10px; border:1px solid #ccc; cursor:pointer;">
+      Theme
+    </button> -->
+  </div>
+
+  <div id="page-sites">
+    <div id="grid" class="grid"></div>
+
+    <div id="drawer" style="position:fixed;top:0;right:-1020px;width:1020px;max-width:92vw;height:100vh;background:#fff;border-left:1px solid #ddd;box-shadow: -8px 0 24px rgba(0,0,0,.1);transition:right .25s ease;z-index:1000;display:flex;flex-direction:column;">
+      <div style="display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #eee;">
+        <strong id="drawer-title" style="font-size:16px;">Site</strong>
+        <span id="drawer-count" style="opacity:.7"></span>
+        <button id="drawer-close" style="margin-left:auto;padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">Close</button>
+      </div>
+      <div style="padding:10px;border-bottom:1px solid #eee;display:flex;gap:8px;">
+        <input id="dev-filter" placeholder="Filter device ID or local address…" style="flex:1;padding:6px 10px;border-radius:10px;border:1px solid #ccc;" />
+      </div>
+
+      <div id="bundle-card" style="padding:12px 14px; border-bottom:1px solid #eee;">
+        <div style="font-weight:700; margin-bottom:6px; color:rgb(55, 55, 55)">Gateway / Modem Info</div>
+        <div class="kv">
+          <div class="k" style="color:black">Firmware</div><div class="v" id="bfw" style="color:black">—</div>
+          <div class="k" style="color:black">Error code</div><div class="v" id="berr" style="color:black">—</div>
+          <div class="k" style="color:black">ICCID</div><div class="v mono" id="biccid" style="color:black">—</div>
+          <div class="k" style="color:black">IMEI</div><div class="v mono" id="bimei" style="color:black">—</div>
+        </div>
+      </div>
+
+      <!-- Site meta editor -->
+      <div id="meta-form" class="meta-form">
+        <div class="meta-row">
+          <label for="site-name" style="color:black">Name</label>
+          <input id="site-name" type="text" placeholder='e.g. "Br. 101"' />
+        </div>
+        <div class="meta-row">
+          <label style="color:black">Tags</label>
+          <div id="tags-wrap" style="display:flex; gap:6px; flex-wrap:wrap;"></div>
+          <input id="tag-input" class="tag-entry" type="text" placeholder="Add tag… (enter)" />
+        </div>
+        <div class="meta-row" style="justify-content:flex-end">
+          <span id="save-status" class="save-hint"></span>
+          <button id="save-meta" style="padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">Save</button>
+        </div>
+      </div>
+      <div id="drawer-body" style="overflow:auto;padding:8px 12px;"></div>
+    </div>
+  </div>
+
+  <div id="page-cache" style="display:none;">
+    <div class="card" style="padding:12px;">
+      <div class="site">Device Cache Lookup</div>
+      <div class="meta">Enter one or more Device IDs (AA-BB-CC-DD), separated by commas or whitespace, then press Enter.</div>
+      <input id="cache-input" placeholder="e.g. 12-34-56-78, 9A-BC-DE-F0" />
+    </div>
+
+    <div class="toolbar" id="cache-toolbar" style="margin-top:8px;">
+      <button id="export-cache-csv" disabled>Export CSV</button>
+      <span class="meta" id="cache-export-hint" style="opacity:.7;">Exports the table below.</span>
+    </div>
+
+    <div id="cache-results" class="card" style="margin-top:10px; padding:12px;">
+      <div class="row hdr">
+        <div>Device ID</div>
+        <div class="cell--right">Type</div>
+        <div class="cell--right">Site</div>
+        <div class="cell--right">Local addr</div>
+        <div class="cell--right">Latest ts</div>
+        <div class="cell--right">RSSI</div>
+        <div class="cell--right">Voltage</div>
+      </div>
+      <div id="cache-rows"></div>
+    </div>
+
+    <!-- <div id="cache-df-wrap" class="card" style="margin-top:10px; padding:12px;">
+      <div class="site">Type-specific Cached Values</div>
+      <div class="meta">Shows per-device cached DataFormats determined by device type (from Redis).</div>
+      <div id="cache-df-tables"></div>
+    </div> -->
+  </div>
+
+
+  <script>
+    async function load() {
+      const q = document.getElementById('q').value.trim();
+      const state = document.getElementById('state').value;
+      const params = new URLSearchParams();
+      if (q) params.set('q', q);
+      if (state) params.set('state', state);
+      const res = await fetch('/api/site-grid?' + params.toString());
+      const data = await res.json();
+
+      const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+      data.sort((a, b) => collator.compare(a.site_id, b.site_id));
+
+      render(data);
+    }
+    // function render(items) {
+    //   const grid = document.getElementById('grid');
+    //   grid.innerHTML = '';
+    //   document.getElementById('count').textContent = `${items.length} site(s)`;
+    //   for (const it of items) {
+    //     const div = document.createElement('div');
+    //     div.className = 'card';
+    //     div.innerHTML = `
+    //       <div class="site">
+    //         <button class="linklike js-open-devices" data-sid="${it.site_id}">${it.site_id}</button>
+    //         <span class="pill ${it.state}">${it.state}</span>
+    //       </div>
+    //       <div class="meta">Last contact: ${it.last_contact_age_min ?? '–'} min ago</div>
+    //       <div class="meta">Gateways: ${it.num_gateways} • Devices: ${it.num_devices}</div>
+    //       <div class="meta">Inactive &gt;24h: ${it.num_inactive_24h}</div>
+    //     `;
+    //     grid.appendChild(div);
+    //   }
+    // }
+
+    function render(items) {
+      const grid = document.getElementById('grid');
+      grid.innerHTML = '';
+
+      // Totals
+      const totalSites = items.length;
+      const totalDevices = items.reduce((acc, it) => acc + (it.num_devices || 0), 0);
+      const online = items.filter(it => it.state === 'online').length;
+      const recent = items.filter(it => it.state === 'recent').length;
+      const offline = items.filter(it => it.state === 'offline').length;
+
+      // Optional: If you still have a #count span somewhere
+      const countEl = document.getElementById('count');
+      if (countEl) countEl.textContent = `${totalSites} site(s) • ${totalDevices} device(s)`;
+
+      // Render stat cards
+      const stats = document.getElementById('stats');
+      stats.innerHTML = `
+        <div class="stat-card">
+          <div class="stat-title">Total sites</div>
+          <div class="stat-value">${totalSites}</div>
+        </div>
+        <div class="stat-card stat-online">
+          <div class="stat-title">Online</div>
+          <div class="stat-value">${online}</div>
+        </div>
+        <div class="stat-card stat-recent">
+          <div class="stat-title">Recently offline</div>
+          <div class="stat-value">${recent}</div>
+        </div>
+        <div class="stat-card stat-offline">
+          <div class="stat-title">Offline</div>
+          <div class="stat-value">${offline}</div>
+        </div>
+      `;
+
+      // Site cards
+      for (const it of items) {
+        const div = document.createElement('div');
+        div.className = 'card';
+        div.innerHTML = `
+          <div class="site">
+            <button class="linklike js-open-devices" data-sid="${it.site_id}">${it.site_id}</button>
+            ${it.site_name ? `<span style="opacity:.75">— ${it.site_name}</span>` : ''}
+            <span class="pill ${it.state}">${it.state}</span>
+          </div>
+          ${Array.isArray(it.site_tags) && it.site_tags.length ? `
+            <div class="meta">
+              ${it.site_tags.map(t => `<span class="pill-tag">${t}</span>`).join(' ')}
+            </div>
+          ` : ''}
+          <div class="meta">Last contact: ${it.last_contact_age_min ?? '–'} min ago</div>
+          <div class="meta">Gateways: ${it.num_gateways} • Devices: ${it.num_devices}</div>
+          <div class="meta">Inactive &gt;24h: ${it.num_inactive_24h}</div>
+        `;
+        grid.appendChild(div);
+      }
+    }
+
+
+
+    document.getElementById('refresh').onclick = load;
+    document.getElementById('q').oninput = () => load();
+    document.getElementById('state').onchange = () => load();
+    load();
+    setInterval(load, 60000);
+
+    document.addEventListener('click', (e)=>{
+      const btn = e.target.closest('.js-open-devices');
+      if (!btn) return;
+      const sid = btn.getAttribute('data-sid');
+      openDrawerForSite(sid);
+    });
+
+    function openDrawer() {
+      document.getElementById('drawer').style.right = '0';
+    }
+    function closeDrawer() {
+      document.getElementById('drawer').style.right = '-1020px';
+    }
+    document.getElementById('drawer-close').onclick = closeDrawer;
+
+    //async function openDrawerForSite(siteId) {
+    //  // fetch devices
+    //  const res = await fetch('/api/devices?site_id=' + encodeURIComponent(siteId));
+    //  const devs = await res.json();
+//
+    //  // title + count
+    //  document.getElementById('drawer-title').textContent = `Site ${siteId}`;
+    //  document.getElementById('drawer-title').style="color:black";
+    //  document.getElementById('drawer-count').textContent = `• ${devs.length} device(s)`;
+    //  document.getElementById('drawer-count').style="color:black";
+//
+    //  // stash to window for filtering
+    //  window._drawerDevices = devs;
+    //  renderDrawer(devs);
+//
+    //  // show drawer
+    //  openDrawer();
+    //}
+
+    function makeCopyable(el, value) {
+      el.style.cursor = 'pointer';
+      el.title = 'Click to copy';
+      el.onclick = async () => {
+        try { await navigator.clipboard.writeText(value); el.textContent = value + ' ✓'; setTimeout(()=>el.textContent=value, 800); }
+        catch {}
+      };
+    }
+
+    function renderBundle(bundle) {
+      const icc = (bundle && bundle.iccid) ? String(bundle.iccid) : "—";
+      const ime = (bundle && bundle.imei)  ? String(bundle.imei)  : "—";
+
+      document.getElementById('bfw').textContent   = (bundle?.firmware_version ?? "—");
+      document.getElementById('berr').textContent  = (bundle?.error_code ?? "—");
+
+      const iccEl = document.getElementById('biccid');
+      const imeEl = document.getElementById('bimei');
+      iccEl.textContent = icc; imeEl.textContent = ime;
+      if (icc !== "—") makeCopyable(iccEl, icc);
+      if (ime !== "—") makeCopyable(imeEl, ime);
+    }
+
+
+    function renderBundle(bundle) {
+      const fw  = (bundle && bundle.firmware_version != null && bundle.firmware_version !== "") ? String(bundle.firmware_version) : "—";
+      const err = (bundle && bundle.error_code != null && bundle.error_code !== "") ? String(bundle.error_code) : "—";
+      const icc = (bundle && bundle.iccid) ? String(bundle.iccid) : "—";
+      const ime = (bundle && bundle.imei)  ? String(bundle.imei)  : "—";
+
+      document.getElementById('bfw').textContent   = fw;
+      document.getElementById('berr').textContent  = err;
+      document.getElementById('biccid').textContent= icc;
+      document.getElementById('bimei').textContent = ime;
+    }
+
+
+    async function openDrawerForSite(siteId) {
+      // fetch in parallel
+      const [resDevs, resMeta, resBundle] = await Promise.all([
+        fetch('/api/devices?site_id=' + encodeURIComponent(siteId)),
+        fetch('/api/site-meta?site_id=' + encodeURIComponent(siteId)).catch(()=>({ok:false,json:async()=>({})})),
+        fetch('/api/site-bundle?site_id=' + encodeURIComponent(siteId)).catch(()=>({ok:false,json:async()=>({})}))
+      ]);
+
+      const devs = await resDevs.json();
+      const meta = resMeta && resMeta.ok ? await resMeta.json() : {};
+      const bundle = resBundle && resBundle.ok ? await resBundle.json() : {};
+
+      // title + count
+      document.getElementById('drawer-title').textContent = `Site ${siteId}`;
+      document.getElementById('drawer-title').style="color:black";
+      document.getElementById('drawer-count').textContent = `• ${devs.length} device(s)`;
+      document.getElementById('drawer-count').style="color:black";
+
+      // store and render
+      window._drawerDevices = devs;
+      window._siteMeta = { site_id: siteId, name: meta.name || '', tags: Array.isArray(meta.tags) ? meta.tags : [] };
+
+      renderBundle(bundle);
+      renderSiteMeta(window._siteMeta);
+      renderDrawer(devs);
+
+      openDrawer();
+    }
+
+
+    function renderSiteMeta(meta) {
+      // name
+      const nameEl = document.getElementById('site-name');
+      nameEl.value = meta.name || '';
+
+      // tags
+      const wrap = document.getElementById('tags-wrap');
+      wrap.innerHTML = '';
+      (meta.tags || []).forEach((tag) => {
+        const chip = document.createElement('span');
+        chip.className = 'chip';
+        chip.innerHTML = `${tag} <button aria-label="Remove tag" data-tag="${tag}">&times;</button>`;
+        wrap.appendChild(chip);
+      });
+
+      // wire remove
+      wrap.addEventListener('click', (e) => {
+        const btn = e.target.closest('button[data-tag]');
+        if (!btn) return;
+        const t = btn.getAttribute('data-tag');
+        window._siteMeta.tags = (window._siteMeta.tags || []).filter(x => x !== t);
+        renderSiteMeta(window._siteMeta);
+        dirtyMeta();
+      }, { once: true }); // re-wires each render
+    }
+
+    // Add tag on Enter
+    document.getElementById('tag-input').addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter') return;
+      const v = e.currentTarget.value.trim();
+      if (!v) return;
+      if (!window._siteMeta) window._siteMeta = {};
+      if (!Array.isArray(window._siteMeta.tags)) window._siteMeta.tags = [];
+      if (!window._siteMeta.tags.includes(v)) window._siteMeta.tags.push(v);
+      e.currentTarget.value = '';
+      renderSiteMeta(window._siteMeta);
+      dirtyMeta();
+    });
+
+    // Track name edits
+    document.getElementById('site-name').addEventListener('input', (e) => {
+      if (!window._siteMeta) window._siteMeta = {};
+      window._siteMeta.name = e.currentTarget.value;
+      dirtyMeta();
+    });
+
+    // Save button
+    document.getElementById('save-meta').addEventListener('click', async () => {
+      const meta = window._siteMeta || {};
+      setSaveStatus('Saving…');
+      const res = await fetch('/api/site-meta', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          site_id: meta.site_id,
+          name: (meta.name || '').trim(),
+          tags: Array.isArray(meta.tags) ? meta.tags : []
+        })
+      });
+      if (res.ok) {
+        setSaveStatus('Saved ✓');
+        // Optionally refresh grid so name/tags appear on card if your API returns them
+        load();
+      } else {
+        const txt = await res.text();
+        setSaveStatus('Error: ' + txt);
+      }
+    });
+
+    function setSaveStatus(msg) {
+      document.getElementById('save-status').textContent = msg || '';
+    }
+    let _metaDirtyTimer = null;
+    function dirtyMeta() {
+      setSaveStatus('Unsaved changes');
+      // Optional: auto-save after idle
+      clearTimeout(_metaDirtyTimer);
+      _metaDirtyTimer = setTimeout(() => {
+        document.getElementById('save-meta').click();
+      }, 1500);
+    }
+
+
+
+    function renderDrawer(devs) {
+      const body = document.getElementById('drawer-body');
+      const now = Math.floor(Date.now()/1000);
+      const rows = [];
+
+      // header
+      //rows.push(`
+      //  <div class="row hdr">
+      //    <div style="color:black;">Device ID</div>
+      //    <div class="cell--right" style="color:black;">Local address</div>
+      //    <div class="cell--right" style="color:black;">Last connect</div>
+      //    <div class="cell--right" style="color:black;">Status</div>
+      //  </div>
+      //`);
+
+      rows.push(`
+        <div class="row hdr">
+          <div style="color:black;">Device ID</div>
+          <div class="cell--right" style="color:black;">Type</div>
+          <div class="cell--right" style="color:black;">Local address</div>
+
+          <div class="cell--right" style="color:black;">RSSI</div>
+          <div class="cell--right" style="color:black;">Voltage</div>
+
+          <div class="cell--right" style="color:black;">Last connect</div>
+          <div class="cell--right" style="color:black;">Status</div>
+        </div>
+      `);
+
+      for (const d of devs) {
+        const ts = Number(d.last_voltage_ts || 0);
+        const ageMin = ts ? Math.floor((now - ts)/60) : null;
+        const inactive = ts ? (now - ts) > (24*3600) : true;
+
+        // rows.push(`
+        //   <div class="row data">
+        //     <div class="cell--mono" style="color:black;">${d.device_id}</div>
+        //     <div class="cell--right" style="color:black;">${d.local_address ?? '-'}</div>
+        //     <div class="cell--right" style="color:black;">${ageMin != null ? ageMin + ' min' : '–'}</div>
+        //     <div class="cell--right" style="color:black;">
+        //       <span class="pill-sm ${inactive ? 'bad' : 'ok'}">${inactive ? 'inactive' : 'active'}</span>
+        //     </div>
+        //   </div>
+        // `);
+
+        rows.push(`
+          <div class="row data">
+            <div class="cell--mono" style="color:black;">${d.device_id}</div>
+            <div class="cell--right" style="color:black;">${d.device_type_code || d.device_type || '-'}</div>
+            <div class="cell--right" style="color:black;">${d.local_address ?? '-'}</div>
+
+            <div class="cell--right" 
+                style="color: ${d.device_class === 'non_recharge' 
+                                ? 'red' 
+                                : d.device_class === 'recharge' 
+                                ? 'blue' 
+                                : 'black'};">
+              ${d.rssi ?? '-'}
+            </div>
+
+            <div class="cell--right" 
+                style="color: ${d.device_class === 'non_recharge' 
+                                ? 'red' 
+                                : d.device_class === 'recharge' 
+                                ? 'blue' 
+                                : 'black'};">
+              ${d.voltage ?? '-'}
+            </div>
+
+            <div class="cell--right" style="color:black;">${ageMin != null ? ageMin + ' min' : '–'}</div>
+            <div class="cell--right" style="color:black;">
+              <span class="pill-sm ${inactive ? 'bad' : 'ok'}">${inactive ? 'inactive' : 'active'}</span>
+            </div>
+          </div>
+        `);
+      }
+
+      body.innerHTML = rows.join('');
+    }
+
+
+    // client-side filter in the drawer
+    document.getElementById('dev-filter').addEventListener('input', (e)=>{
+      const q = e.target.value.trim().toLowerCase();
+      const all = window._drawerDevices || [];
+      if (!q) return renderDrawer(all);
+      const filtered = all.filter(d =>
+        String(d.device_id).toLowerCase().includes(q) ||
+        String(d.local_address ?? '').toLowerCase().includes(q)
+      );
+      renderDrawer(filtered);
+    });
+
+
+    // Tabs
+    const pageSites = document.getElementById('page-sites');
+    const pageCache = document.getElementById('page-cache');
+    document.getElementById('tab-sites').onclick = () => { pageSites.style.display=''; pageCache.style.display='none'; };
+    document.getElementById('tab-cache').onclick = () => { pageSites.style.display='none'; pageCache.style.display=''; };
+
+    // Cache input: Enter to fetch
+    document.getElementById('cache-input').addEventListener('keydown', async (e) => {
+      if (e.key !== 'Enter') return;
+      const raw = e.currentTarget.value.trim();
+      if (!raw) return;
+      const dids = raw.split(/[\s,]+/).map(s => s.trim()).filter(Boolean);
+      if (!dids.length) return;
+
+      const res = await fetch('/api/device-cache', {
+        method:'POST',
+        headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({ device_ids: dids })
+      });
+      const data = await res.json(); // { devices:[{...}], df_map: {did:{ df: {value, ts, ...}} } }
+      console.log("data: ",data);
+      renderCacheSummary(data);
+      renderCacheDFTables(data);
+    });
+
+    function renderCacheSummary(data) {
+      const rowsEl = document.getElementById('cache-rows');
+      const now = Math.floor(Date.now()/1000);
+      const out = [];
+      for (const d of (data.devices || [])) {
+        const ts = Number(d.latest_ts || 0);
+        out.push(`
+          <div class="row data">
+            <div class="cell--mono">${d.device_id}</div>
+            <div class="cell--right">${d.device_type_code || d.device_type || '-'}</div>
+            <div class="cell--right">${d.site_id || '-'}</div>
+            <div class="cell--right">${d.local_address ?? '-'}</div>
+            <div class="cell--right">${ts ? Math.floor((now-ts)/60) + ' min' : '–'}</div>
+            <div class="cell--right">${d.rssi ?? '-'}</div>
+            <div class="cell--right">${d.voltage ?? '-'}</div>
+          </div>
+        `);
+      }
+      rowsEl.innerHTML = out.join('');
+    }
+
+    function renderCacheDFTables(data) {
+      const wrap = document.getElementById('cache-df-tables');
+      wrap.innerHTML = '';
+      const df_map = data.df_map || {};
+
+      for (const [did, perDf] of Object.entries(df_map)) {
+        const rows = [];
+        rows.push(`
+          <div class="card" style="margin-top:10px; padding:12px;">
+            <div class="site">Device ${did}</div>
+            <div class="row hdr">
+              <div>DataFormat</div>
+              <div class="cell--right">Value</div>
+              <div class="cell--right">Optional</div>
+              <div class="cell--right">Timestamp</div>
+              <div class="cell--right">Type Code</div>
+            </div>
+            <div id="rows-${did}"></div>
+          </div>
+        `);
+        const cont = document.createElement('div');
+        cont.innerHTML = rows.join('');
+        wrap.appendChild(cont);
+
+        const body = cont.querySelector(`#rows-${did}`);
+        const r = [];
+        for (const [df, obj] of Object.entries(perDf)) {
+          r.push(`
+            <div class="row data">
+              <div class="cell--mono" style="color:black;">${df}</div>
+              <div class="cell--right" style="color:black;">${obj.value ?? ''}</div>
+              <div class="cell--right" style="color:black;">${obj.optional ?? ''}</div>
+              <div class="cell--right" style="color:black;">${obj.ts ?? ''}</div>
+              <div class="cell--right" style="color:black;">${obj.type_code ?? ''}</div>
+            </div>
+          `);
+        }
+        body.innerHTML = r.join('') || `<div class="meta">No cached DF values.</div>`;
+      }
+    }
+
+
+  </script>
+
+  <script>
+  // Hold most recent cache lookup results for export
+  window._cacheDevices = [];
+
+  // Enable the button + click handler
+  (function initCacheExport() {
+    const btn = document.getElementById('export-cache-csv');
+    if (!btn) return;
+    btn.addEventListener('click', exportCacheCsv);
+  })();
+
+  function exportCacheCsv() {
+    const rows = window._cacheDevices || [];
+    if (!rows.length) return;
+
+    // CSV header (matches visible columns + a couple of helpful extras)
+    const header = [
+      'Device ID',
+      'Type',
+      'Site',
+      'Local addr',
+      'Latest ts (min ago)',
+      'Latest ts (ISO)',
+      'Latest ts (epoch)'
+    ];
+
+    const nowSec = Math.floor(Date.now()/1000);
+
+    const dataRows = rows.map(d => {
+      const ts = Number(d.latest_ts || 0);
+      const ageMin = ts ? Math.floor((nowSec - ts)/60) : '';
+      const iso = ts ? new Date(ts*1000).toISOString() : '';
+      const type = d.device_type_code || d.device_type || '';
+      return [
+        safeCsv(d.device_id),
+        safeCsv(type),
+        safeCsv(d.site_id || ''),
+        safeCsv(d.local_address ?? ''),
+        String(ageMin),
+        safeCsv(iso),
+        ts ? String(ts) : ''
+      ];
+    });
+
+    const csv = [header, ...dataRows].map(r => r.join(',')).join('\r\n');
+
+    // Prepend BOM so Excel opens UTF-8 cleanly
+    const blob = new Blob(["\uFEFF" + csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+
+    const stamp = new Date().toISOString().replace(/[:T]/g,'-').split('.')[0];
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `device_cache_${stamp}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  function safeCsv(val) {
+    // Ensure strings & escape quotes/newlines/commas
+    const s = (val === null || val === undefined) ? '' : String(val);
+    if (/[",\n\r]/.test(s)) {
+      return `"${s.replace(/"/g, '""')}"`;
+    }
+    return s;
+  }
+
+  // Hook into your existing render to store results & toggle the button
+  const _origRenderCacheSummary = renderCacheSummary;
+  renderCacheSummary = function(data) {
+    // Keep the original behavior
+    _origRenderCacheSummary.call(this, data);
+
+    // Stash for export and toggle button state
+    window._cacheDevices = Array.isArray(data?.devices) ? data.devices : [];
+    const btn = document.getElementById('export-cache-csv');
+    if (btn) btn.disabled = window._cacheDevices.length === 0;
+  };
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..6c3a1db
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,2852 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Resensys Site Status</title>
+  <link rel="icon" href="/static/logo.png" type="image/png">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />
+  <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+
+  <style>
+    :root{color-scheme: light dark;}
+    body {
+      font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      margin: 16px;
+    }
+
+    .toggle-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+      background: #f8f8f8;
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+
+    .toggle-btn:hover {
+      background: #e9e9e9;
+    }
+
+    /* Optional dark mode */
+    @media (prefers-color-scheme: dark) {
+      .toggle-btn {
+        background: #1f1f1f;
+        border-color: #444;
+        color: #e5e7eb;
+      }
+      .toggle-btn:hover {
+        background: #2c2c2c;
+      }
+    }
+
+    /* Hidden state */
+    .stats.hidden {
+      display: none;
+    }
+
+    .check-details {
+      border: 1px dashed rgba(255,255,255,.15);
+      border-radius: 10px;
+      padding: 10px 12px;
+      margin: 8px 16px 16px 16px;
+      background: rgba(0,0,0,.08);
+    }
+
+    @media (prefers-color-scheme: light) {
+      .check-details {
+        background: #f9fafb;
+        border-color: #e5e7eb;
+      }
+    }
+
+    .check-row.expanded {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .detail-row + .detail-row { margin-top: 10px; }
+    .detail-head { display:flex; align-items:center; }
+    .detail-body { margin-left: 26px; margin-top: 6px; }
+    .detail-explain { font-size: 13px; }
+    .detail-metrics .kv { display:grid; grid-template-columns: 160px 1fr; gap:4px 8px; margin-top:6px; }
+
+
+    .toolbar {
+      display:flex;
+      gap:8px;
+      align-items:center;
+      margin-bottom:12px;
+      flex-wrap:wrap;
+      background: rgba(0,0,0,0); /* themed override below */
+    }
+
+    input, select, button {
+      padding:6px 10px;
+      border-radius:10px;
+      border:1px solid #ccc;
+    }
+    button { cursor:pointer; }
+
+    .grid {
+      display:grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap:12px;
+    }
+
+    .card {
+      border-radius:16px;
+      padding:12px;
+      box-shadow: 0 2px 12px rgba(0,0,0,.08);
+      background:#fff;
+      border:1px solid #eee;
+      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
+    }
+    .card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 18px rgba(0,0,0,.12);
+      border-color:#ddd;
+    }
+
+    .site {
+      font-weight:700;
+      font-size:16px;
+      margin-bottom:6px;
+      display:flex;
+      align-items:center;
+      gap:8px;
+    }
+    .meta { font-size:12px; color:#979797; }
+
+    .pill {
+      display:inline-block;
+      padding:2px 8px;
+      border-radius:999px;
+      color:#fff;
+      font-size:12px;
+      text-transform:capitalize;
+    }
+    .online { background:#00a86b; }
+    .recent { background:#e4a11b; }
+    .offline { background:#dc3545; }
+    .portnull { background:#797979; }
+    .port5555 { background:#15add3; }
+    .port5580 { background:#9d15d3; }
+
+    .pill-tag {
+      background:#6b7280;
+      color:#fff;
+      padding:2px 6px;
+      border-radius:999px;
+      font-size:11px;
+    }
+
+    .pill-sm{
+      display:inline-block;
+      padding:2px 6px;
+      border-radius:999px;
+      color:#fff;
+      font-size:11px;
+    }
+    .ok{background:#00a86b}
+    .bad{background:#dc3545}
+
+    .linklike {
+      background:none;
+      border:none;
+      padding:0;
+      margin:0;
+      color:inherit;
+      text-decoration:underline;
+      cursor:pointer;
+      font-weight:700
+    }
+    .linklike:focus {
+      outline: 2px solid #7aa7ff;
+      outline-offset: 2px;
+      border-radius:6px;
+    }
+
+    /* drawer panel */
+    #drawer {
+      position:fixed;
+      top:0;
+      right:-1020px;
+      width:1020px;
+      max-width:92vw;
+      height:100vh;
+      background:#232836;
+      border-left:1px solid #313131;
+      box-shadow:-8px 0 24px rgba(0,0,0,.1);
+      transition:right .25s ease;
+      z-index:1000;
+      display:flex;
+      flex-direction:column;
+    }
+    #drawer .hdr {
+      position:sticky;
+      top:0;
+      background:#1a1e29;
+      z-index:1;
+    }
+
+    /* generalized row grid (used in drawer, cache, and new checks tab) */
+    .row {
+      display:grid;
+      grid-template-columns: minmax(16ch, 1fr) 10ch 10ch 10ch 10ch 10ch 10ch;
+      gap:12px;
+      align-items:center;
+      padding:8px 0;
+      border-bottom:1px solid #f0f0f0;
+    }
+    .row.hdr {
+      font-weight:700;
+      border-bottom:2px solid #ddd;
+      padding-top:10px;
+      padding-bottom:10px;
+    }
+
+    .cell--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .cell--right { text-align:right; }
+
+    .row.data:hover {
+      background: rgba(0,0,0,.035);
+      border-radius:8px;
+    }
+
+    /* stats cards in toolbar */
+    .stats {
+      display:flex;
+      gap:8px;
+      margin-left:auto;
+      flex-wrap:wrap;
+    }
+    .stat-card {
+      min-width: 120px;
+      padding:8px 10px;
+      border:1px solid #eee;
+      border-radius:12px;
+      background:#fff;
+      box-shadow: 0 2px 8px rgba(0,0,0,.06);
+    }
+    .stat-title { font-size:11px; opacity:.7; margin-bottom:2px; }
+    .stat-value { font-size:18px; font-weight:700; }
+    .stat-online  .stat-value { color:#00a86b; }
+    .stat-recent  .stat-value { color:#e4a11b; }
+    .stat-offline .stat-value { color:#dc3545; }
+
+    /* site meta editor */
+    .meta-form {
+      padding:10px 14px;
+      border-bottom:1px solid #eee;
+      display:flex;
+      flex-direction:column;
+      gap:8px;
+    }
+    .meta-row {
+      display:flex;
+      gap:8px;
+      align-items:center;
+      flex-wrap:wrap;
+    }
+    .meta-row label {
+      font-size:12px;
+      opacity:.7;
+      min-width:56px;
+    }
+    .meta-row input[type="text"] {
+      flex:1;
+      padding:6px 10px;
+      border-radius:10px;
+      border:1px solid #ccc;
+    }
+    .chip {
+      display:inline-flex;
+      align-items:center;
+      gap:6px;
+      padding:2px 8px;
+      border-radius:999px;
+      background:#eef2ff;
+      border:1px solid #dbe2ff;
+      font-size:12px;
+    }
+    .chip button {
+      background:none;
+      border:none;
+      cursor:pointer;
+      font-size:12px;
+      opacity:.7;
+    }
+    .chip button:hover { opacity:1; }
+
+    .tag-entry { min-width:160px; }
+    .save-hint { font-size:12px; opacity:.6; }
+
+    .kv {
+      display:grid;
+      grid-template-columns: 120px 1fr;
+      gap:6px 12px;
+    }
+    .k { opacity:.7; font-size:12px; align-self:center; }
+    .v { font-size:14px; }
+    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+    /* ===== NEW: Device Checks Tab ===== */
+
+    /* layout */
+    #page-checks .card-header-row {
+      display:flex;
+      flex-wrap:wrap;
+      align-items:flex-start;
+      gap:12px;
+      margin-bottom:12px;
+    }
+    #checks-input {
+      min-width:200px;
+      flex:1;
+    }
+    #run-all-btn {
+      white-space:nowrap;
+    }
+
+    /* ===== Desktop / default layout ===== */
+
+/* Header + data rows share the same grid template so columns line up */
+.check-row-hdr,
+.check-row {
+  display: grid;
+  grid-template-columns:
+    minmax(14ch, 1fr)   /* Device ID */
+    minmax(10ch, 10ch)  /* Type */
+    minmax(8ch, 8ch)    /* Battery */
+    minmax(8ch, 8ch)    /* Signal */
+    minmax(9ch, 9ch)    /* Classify */
+    minmax(24ch, 1fr)   /* Actions (Run / Remove) */
+  ;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.check-row-hdr {
+  font-weight: 700;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #ddd;
+}
+
+.check-row:hover {
+  background: rgba(0,0,0,.035);
+  border-radius: 8px;
+}
+
+/* When all tests have passed for a row */
+.check-row.all-ok {
+  border: 2px solid #00ff99;
+  box-shadow: 0 0 12px rgba(0, 255, 153, 0.7);
+  border-radius: 10px;
+  transition: box-shadow 0.4s ease, border-color 0.4s ease;
+}
+
+@media (prefers-color-scheme: dark) {
+  .check-row.all-ok {
+    box-shadow: 0 0 16px rgba(0, 255, 153, 0.45);
+  }
+}
+
+/* Actions cell (buttons on the right) */
+.check-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+/* Individual action buttons */
+.check-btn {
+  font-size: 12px;
+  line-height: 1.2;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  background: #fff;
+  padding: 6px 8px;
+  cursor: pointer;
+  transition: box-shadow .12s ease,
+              border-color .12s ease,
+              background .12s ease;
+}
+.check-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(122,167,255,.35);
+  border-color: rgba(122,167,255,.55);
+}
+.check-btn.running {
+  opacity: .6;
+  cursor: wait;
+}
+.check-btn.disable {
+  opacity: .9;
+  color:#616161
+}
+
+/* Per-test status badge cells (Battery / Signal / Classify) */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2ch;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  border-radius: 8px;
+  padding: 4px 6px;
+  background: #aaa;
+  color: #fff;
+  opacity: .8;
+  transition: background .2s ease,
+              box-shadow .2s ease,
+              transform .2s ease;
+}
+
+/* PASS / FAIL / WAIT visual states */
+.status-pass {
+  background:#00a86b;
+  color:#0f0f0f;
+  box-shadow:0 8px 24px rgba(0,168,107,.4);
+  animation: popfade 0.5s ease;
+}
+.status-fail {
+  background:#dc3545;
+  color:#fff;
+  box-shadow:0 8px 24px rgba(220,53,69,.4);
+  animation: popfade 0.5s ease;
+}
+.status-wait {
+  background:#6b7280;
+  color:#fff;
+  box-shadow:0 4px 14px rgba(0,0,0,.4);
+}
+
+/* little pop animation when badge changes */
+@keyframes popfade {
+  0%   { transform: scale(.8);  opacity: .4; }
+  60%  { transform: scale(1.15); opacity: 1; }
+  100% { transform: scale(1.0);  opacity: 1; }
+}
+
+/* Dark mode tweaks */
+@media (prefers-color-scheme: dark) {
+  .check-row-hdr {
+    border-bottom-color:#29374f;
+    background:#0f1522;
+  }
+
+  .check-row {
+    border-bottom-color:#1b2638;
+  }
+
+  .check-row:hover {
+    background: rgba(255,255,255,.06);
+  }
+
+  .check-btn {
+    background:#1b1b1b;
+    border-color:#3a3a3a;
+    color:#e5e7eb;
+  }
+}
+
+/* ===== Mobile layout =====
+   For screens narrower than 768px:
+   - Hide the table-style header.
+   - Each .check-row becomes a "card".
+   - We stack DID, Type, Statuses, and Actions vertically with clear labels.
+*/
+@media (max-width: 768px) {
+
+  /* Hide the header row entirely on mobile */
+  .check-row-hdr {
+    display: none;
+  }
+
+  /* Each device row becomes a card block */
+  .check-row {
+    display: block;
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 12px;
+    padding: 12px;
+    margin-bottom: 12px;
+    background: rgba(0,0,0,0.15);
+  }
+
+  /* light mode fallback for card look */
+  @media (prefers-color-scheme: light) {
+    .check-row {
+      background: #fff;
+      border: 1px solid #e5e7eb;
+    }
+  }
+
+  /* We'll reflow inner cells manually:
+     - The markup you're already rendering is:
+        <div class="cell--mono">DID</div>
+        <div class="cell--right">TYPE</div>
+        <div class="cell--right">[battery badge]</div>
+        <div class="cell--right">[signal badge]</div>
+        <div class="cell--right">[classify badge]</div>
+        <div class="check-actions">[...]</div>
+     We'll just stack them vertically and label as needed.
+  */
+
+  .check-row > div {
+    margin-bottom: 8px;
+  }
+
+  /* Device ID row: make it bold, on its own line */
+  .check-row > div:nth-child(1) {
+    font-weight: 600;
+    font-size: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  /* Type row: "Type: STRED" */
+  .check-row > div:nth-child(2) {
+    font-size: 13px;
+    opacity: .8;
+  }
+  .check-row > div:nth-child(2)::before {
+    content: "Type: ";
+    font-weight: 500;
+    opacity: .9;
+    margin-right: 4px;
+  }
+
+  /* Status badges section (Battery / Signal / Classify):
+     We'll group these three rows visually into one flex row.
+     Easiest way: convert items 3-5 into inline chips with labels.
+  */
+
+  .check-row > div:nth-child(3),
+  .check-row > div:nth-child(4),
+  .check-row > div:nth-child(5) {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    margin-right: 12px;
+  }
+
+  .check-row > div:nth-child(3)::before {
+    content: "Battery";
+    font-weight:500;
+    font-size:12px;
+    color:#9ca3af;
+  }
+  .check-row > div:nth-child(4)::before {
+    content: "Signal";
+    font-weight:500;
+    font-size:12px;
+    color:#9ca3af;
+  }
+  .check-row > div:nth-child(5)::before {
+    content: "Classify";
+    font-weight:500;
+    font-size:12px;
+    color:#9ca3af;
+  }
+
+  /* Put the three status groups (3-5) on one line that wraps if needed */
+  .check-row > div:nth-child(3),
+  .check-row > div:nth-child(4),
+  .check-row > div:nth-child(5) {
+    margin-bottom: 8px;
+  }
+  .check-row > div:nth-child(3) {
+    display:inline-flex;
+    flex-wrap:nowrap;
+  }
+  .check-row > div:nth-child(4) {
+    display:inline-flex;
+    flex-wrap:nowrap;
+  }
+  .check-row > div:nth-child(5) {
+    display:inline-flex;
+    flex-wrap:nowrap;
+  }
+
+  /* Actions block last, full width */
+  .check-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 8px;
+    margin-top: 4px;
+  }
+
+  .check-btn {
+    font-size: 13px;
+    line-height: 1.3;
+    padding: 8px 10px;
+    border-radius: 10px;
+  }
+}
+
+
+    /* ===== THEMES (your existing themes preserved) ===== */
+
+    /* GLASS THEME */
+    body.theme-glass {
+      --accent: #5b8cff;
+      --bg-grad-a: #f7f9ff;
+      --bg-grad-b: #eef2ff;
+      background: linear-gradient(160deg, var(--bg-grad-a), var(--bg-grad-b));
+    }
+    @media (prefers-color-scheme: dark) {
+      body.theme-glass {
+        --accent: #7aa7ff;
+        --bg-grad-a: #0f1220;
+        --bg-grad-b: #14182a;
+        background: radial-gradient(1200px 600px at 20% 0%, #1a1f36 0%, #0f1220 55%);
+      }
+    }
+    body.theme-glass .toolbar,
+    body.theme-glass .stat-card,
+    body.theme-glass .card {
+      background: rgba(255,255,255,.55);
+      border: 1px solid rgba(255,255,255,.35);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      box-shadow: 0 10px 30px rgba(0,0,0,.08);
+    }
+    @media (prefers-color-scheme: dark) {
+      body.theme-glass .toolbar,
+      body.theme-glass .stat-card,
+      body.theme-glass .card {
+        background: rgba(22,26,44,.55);
+        border: 1px solid rgba(122,167,255,.15);
+        box-shadow: 0 12px 28px rgba(0,0,0,.35);
+      }
+    }
+    body.theme-glass input,
+    body.theme-glass select,
+    body.theme-glass button {
+      border-radius: 12px;
+      border: 1px solid rgba(0,0,0,.1);
+      background: rgba(255,255,255,.7);
+    }
+    @media (prefers-color-scheme: dark) {
+      body.theme-glass input,
+      body.theme-glass select,
+      body.theme-glass button {
+        border: 1px solid rgba(255,255,255,.12);
+        background: rgba(255,255,255,.06);
+        color: #e5e7eb;
+      }
+    }
+    body.theme-glass .pill,
+    body.theme-glass .pill-sm {
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
+    }
+    body.theme-glass .online { background: #22c55e; }
+    body.theme-glass .recent { background: #f59e0b; }
+    body.theme-glass .offline{ background: #ef4444; }
+    body.theme-glass .linklike:focus { outline-color: var(--accent); }
+    body.theme-glass .row.data:hover { background: rgba(255,255,255,.35); }
+    @media (prefers-color-scheme: dark) {
+      body.theme-glass .row.data:hover { background: rgba(255,255,255,.08); }
+    }
+
+    /* NEON THEME (current default) */
+    body.theme-neon {
+      background: #0b0f16;
+      color: #e5e7eb;
+      --neon: #4fd1c5;
+      --neon2: #a78bfa;
+    }
+    body.theme-neon .toolbar {
+      background: #0f1522;
+      border: 1px solid #1f2a3a;
+      border-radius: 14px;
+      box-shadow: inset 0 0 0 1px rgba(79,209,197,.08),
+                  0 8px 24px rgba(0,0,0,.4);
+      padding: 10px;
+    }
+    body.theme-neon .card {
+      background: #101725;
+      border: 1px solid #1f2a3a;
+      box-shadow: 0 8px 24px rgba(0,0,0,.5);
+    }
+    body.theme-neon .card:hover {
+      transform: translateY(-2px);
+      border-color: rgba(79,209,197,.35);
+      box-shadow: 0 14px 36px rgba(0,0,0,.65),
+                  0 0 0 1px rgba(167,139,250,.15) inset;
+    }
+    body.theme-neon .site { letter-spacing:.2px; }
+    body.theme-neon .meta { color:#94a3b8; }
+    body.theme-neon input,
+    body.theme-neon select,
+    body.theme-neon button {
+      background:#0f1522;
+      border:1px solid #243044;
+      color:#e5e7eb;
+      box-shadow:0 0 0 2px transparent inset;
+    }
+    body.theme-neon input:focus,
+    body.theme-neon select:focus,
+    body.theme-neon button:focus {
+      outline:none;
+      box-shadow:0 0 0 2px rgba(79,209,197,.35) inset;
+      border-color:rgba(79,209,197,.55);
+    }
+    body.theme-neon .linklike {
+      text-decoration: none;
+      border-bottom:1px dashed rgba(167,139,250,.6);
+    }
+    body.theme-neon .linklike:hover {
+      color: var(--neon2);
+      border-bottom-color: var(--neon2);
+    }
+    body.theme-neon .pill,
+    .theme-neon .pill-sm {
+      background: linear-gradient(90deg, var(--neon), var(--neon));
+      color:#0b0f16;
+      font-weight:700;
+    }
+    body.theme-neon .online  { background:#06d6a0; color:#0b0f16; }
+    body.theme-neon .recent  { background:#ffd166; color:#0b0f16; }
+    body.theme-neon .offline { background:#ef476f; color:#0b0f16; }
+    body.theme-neon .portnull { background:#797979; color:#0b0f16;}
+    body.theme-neon .port5555 { background:#15add3; color:#0b0f16;}
+    body.theme-neon .port5580 { background:#a878ba; color:#0b0f16;}
+    body.theme-neon .row { border-bottom-color:#1b2638; }
+    body.theme-neon .row.hdr {
+      border-bottom-color:#29374f;
+      background:#0f1522;
+    }
+    body.theme-neon .row.data:hover { background: rgba(79,209,197,.06); }
+    body.theme-neon .stat-card {
+      background:#0f1522;
+      border:1px solid #1f2a3a;
+      box-shadow:0 6px 18px rgba(0,0,0,.5);
+    }
+    body.theme-neon .stat-title { color:#9fb3c8; }
+    body.theme-neon .stat-online  .stat-value { color:#06d6a0; }
+    body.theme-neon .stat-recent  .stat-value { color:#ffd166; }
+    body.theme-neon .stat-offline .stat-value { color:#ef476f; }
+
+    /* MINIMAL THEME */
+    body.theme-minimal {
+      --ink: #1f2937;
+      --subink: #6b7280;
+      --bg: #fafafa;
+      --line: #eaeaea;
+      background: var(--bg);
+      color: var(--ink);
+    }
+    @media (prefers-color-scheme: dark) {
+      body.theme-minimal {
+        --ink: #e5e7eb;
+        --subink:#9ca3af;
+        --bg:#0f1115;
+        --line:#22242a;
+        background: var(--bg);
+      }
+    }
+    body.theme-minimal .toolbar {
+      background: transparent;
+      border: none;
+      padding: 0;
+      gap: 10px;
+    }
+    body.theme-minimal input,
+    body.theme-minimal select,
+    body.theme-minimal button {
+      border-radius: 12px;
+      background: #fff;
+      border: 1px solid var(--line);
+    }
+    @media (prefers-color-scheme: dark) {
+      body.theme-minimal input,
+      body.theme-minimal select,
+      body.theme-minimal button {
+        background:#14161b;
+        border-color:#22242a;
+        color:#e5e7eb;
+      }
+    }
+    body.theme-minimal .card {
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+    }
+    body.theme-minimal .card + .card { margin-top: 8px; }
+    body.theme-minimal .site {
+      font-weight: 700;
+      font-size: 18px;
+      margin-bottom: 4px;
+    }
+    body.theme-minimal .meta { color: var(--subink); }
+    body.theme-minimal .row {
+      border-bottom: 1px solid var(--line);
+      padding: 10px 0;
+    }
+    body.theme-minimal .row.hdr {
+      border-bottom: 2px solid var(--ink);
+      background: transparent;
+    }
+    body.theme-minimal .row.data:hover { background: transparent; }
+    body.theme-minimal .pill,
+    body.theme-minimal .pill-sm {
+      background: #111827;
+      color:#fff;
+      border-radius: 999px;
+    }
+    @media (prefers-color-scheme: dark) {
+      body.theme-minimal .pill,
+      body.theme-minimal .pill-sm { background:#374151; }
+    }
+    body.theme-minimal .online  { background:#059669; }
+    body.theme-minimal .recent  { background:#d97706; }
+    body.theme-minimal .offline { background:#b91c1c; }
+    body.theme-minimal .stat-card {
+      background: transparent;
+      border: 1px dashed var(--line);
+      box-shadow: none;
+    }
+    body.theme-minimal .stat-title {
+      color: var(--subink);
+      text-transform: uppercase;
+      letter-spacing: .04em;
+    }
+
+    /* AURORA THEME */
+    body.theme-aurora {
+      --bg: #f9fafb;
+      --card: #ffffff;
+      --ink: #0f172a;
+      --subink: #64748b;
+      --line: #e5e7eb;
+      --accent: #2563eb;
+      --accent-2: #22c55e;
+      --shadow: 0 8px 24px rgba(15, 23, 42, .06);
+
+      background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
+      color: var(--ink);
+    }
+    body.theme-aurora .toolbar {
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 10px;
+      box-shadow: var(--shadow);
+    }
+    body.theme-aurora input,
+    body.theme-aurora select,
+    body.theme-aurora button {
+      background: #fff;
+      color: var(--ink);
+      border: 1px solid var(--line);
+      border-radius: 12px;
+    }
+    body.theme-aurora input:focus,
+    body.theme-aurora select:focus,
+    body.theme-aurora button:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(37,99,235,.18);
+      border-color: rgba(37,99,235,.5);
+    }
+    body.theme-aurora .card {
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      box-shadow: var(--shadow);
+      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
+    }
+    body.theme-aurora .card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 16px 36px rgba(15,23,42,.10);
+      border-color: #d1d5db;
+    }
+    body.theme-aurora .site { font-size: 17px; font-weight: 750; }
+    body.theme-aurora .meta { color: var(--subink); }
+    body.theme-aurora .row { border-bottom: 1px solid var(--line); }
+    body.theme-aurora .row.hdr {
+      border-bottom: 2px solid #cbd5e1;
+      background: #fff;
+    }
+    body.theme-aurora .row.data:hover { background: #f3f4f6; }
+    body.theme-aurora .pill,
+    .theme-aurora .pill-sm {
+      background: linear-gradient(180deg, #ffffff, #eef2ff);
+      border: 1px solid #dbeafe;
+      color: #1e293b;
+    }
+    body.theme-aurora .online  { background: #16a34a; }
+    body.theme-aurora .recent  { background: #d97706; }
+    body.theme-aurora .offline { background: #d83030; }
+    body.theme-aurora .stat-card {
+      background: #fff;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      box-shadow: var(--shadow);
+    }
+    body.theme-aurora .stat-title { color: var(--subink); }
+    body.theme-aurora .stat-online  .stat-value { color: #16a34a; }
+    body.theme-aurora .stat-recent  .stat-value { color: #d97706; }
+    body.theme-aurora .stat-offline .stat-value { color: #d83030; }
+    body.theme-aurora .linklike {
+      text-decoration: none;
+      color: var(--accent);
+      font-weight: 700;
+    }
+    body.theme-aurora .linklike:hover { text-decoration: underline; }
+
+
+    .local-address-grid{
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      gap: 6px;
+      padding: 8px 0;
+    }
+
+    .addr-cell{
+      color: #000;
+      border-radius: 8px;
+      padding: 8px 6px;
+      border: 1px solid rgba(0,0,0,0.12);
+      font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      text-align: center;
+      user-select: none;
+      cursor: default;
+    }
+
+    .addr-cell:hover{
+      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    }
+
+    .addr-free { background: #26f063; }     /* green-ish */
+    .addr-taken{ background: #e33737; }     /* red-ish */
+    .addr-dup  { background: #2a77f2; }     /* blue-ish */
+
+    /* small legend chips */
+    .local-address-legend{
+      display:flex;
+      gap:14px;
+      align-items:center;
+      font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      opacity: 0.85;
+    }
+
+    .chip{
+      display:inline-block;
+      width:12px; height:12px;
+      border-radius:3px;
+      border:1px solid rgba(0,0,0,0.15);
+      margin-right:6px;
+    }
+    .chip-green{ background:#26f063; }
+    .chip-red  { background:#e33737; }
+    .chip-blue { background:#2a77f2; }
+
+    .addr-tooltip{
+      position: fixed;
+      z-index: 9999;
+      max-width: 260px;
+      padding: 6px 8px;
+      background: rgba(0,0,0,0.9);
+      color: #fff;
+      font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      border-radius: 6px;
+      white-space: pre-wrap;
+      pointer-events: none;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    }
+
+    .local-address-grid,
+    .addr-cell{
+      pointer-events: auto;
+    }
+
+    .page h2 { margin: 12px 0; }
+
+    .controls{
+      display:flex;
+      flex-direction:column;
+      gap:8px;
+      max-width: 720px;
+      margin: 8px 0 12px 0;
+    }
+
+    .controls label{
+      font-size:12px;
+      opacity:.8;
+    }
+
+    .controls textarea{
+      width:100%;
+      min-height: 64px;
+      resize: vertical;
+    }
+
+    .status{
+      font-size:12px;
+      opacity:.8;
+    }
+
+    .btn{
+      width: fit-content;
+    }
+
+
+    #confirm-modal {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.65);
+      z-index: 9999;
+      align-items: center;
+      justify-content: center;
+      padding: 18px;
+    }
+
+    .modal-card {
+      width: min(520px, 96vw);
+      border-radius: 18px;
+      background: rgba(14, 22, 40, 0.95);
+      border: 1px solid rgba(255,255,255,0.14);
+      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
+      padding: 16px;
+      backdrop-filter: blur(10px);
+    }
+
+    .modal-title {
+      font-size: 16px;
+      font-weight: 800;
+      margin: 0 0 6px 0;
+    }
+
+    .modal-text {
+      margin: 0 0 14px 0;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.35;
+    }
+
+    .modal-id {
+      margin: 10px 0 14px;
+      display: inline-flex;
+    }
+
+    .modal-actions {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+    }
+
+
+  </style>
+</head>
+
+<body class="theme-neon">
+  <span>
+    <img src="/static/logo.png" alt="App Icon" width="32" height="32" style="vertical-align: middle;">
+    <h1 style="display: inline-block; margin: 10px; vertical-align: middle;">Resensys Site Status</h1>
+  </span>
+
+  <!-- GLOBAL TOOLBAR -->
+  <div class="toolbar">
+    <input id="q" style="margin:5px;" placeholder='Filter by site (e.g., "48-")' />
+    <select id="state">
+      <option value="">All states</option>
+      <option value="online">Online</option>
+      <option value="recent">Recently offline</option>
+      <option value="offline">Offline</option>
+    </select>
+
+    <select id="port">
+      <option value="">All ports</option>
+      <option value="5555">5555</option>
+      <option value="5580">5580</option>
+    </select>
+
+    <button id="refresh">Refresh</button>
+
+    <button id="tab-sites">Sites</button>
+    <button id="tab-cache">Device Cache</button>
+    <button id="tab-checks">Device Checks</button>
+    <button class="nav-btn" data-page="page-local-matrix">Local Address Matrix</button>
+
+    <button id="toggle-stats" class="toggle-btn">
+      <i class="fas fa-chart-bar"></i> Toggle Stats
+    </button>
+    <div id="stats" class="stats"></div>
+    <span id="count" style="margin-left:auto;opacity:.7;margin:5px;"></span>
+  </div>
+
+  <!-- PAGE: SITES -->
+  <div id="page-sites">
+    <div id="grid" class="grid"></div>
+
+    <!-- Drawer for per-site devices -->
+    <div id="drawer">
+      <div style="display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #eee;" class="hdr">
+        <strong id="drawer-title" style="font-size:16px;">Site</strong>
+        <span id="drawer-count" style="opacity:.7"></span>
+        <button id="drawer-close" style="margin-left:auto;padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">Close</button>
+      </div>
+
+      <div style="padding:10px;border-bottom:1px solid #eee;display:flex;gap:8px;">
+        <input id="dev-filter" placeholder="Filter device ID, local address, or device type…" style="flex:1;padding:6px 10px;border-radius:10px;border:1px solid #ccc;" />
+      </div>
+
+      <div id="bundle-card" style="padding:12px 14px; border-bottom:1px solid #eee;">
+        <div style="font-weight:700; margin-bottom:6px; color:rgb(200, 200, 200)">Gateway / Modem Info</div>
+        <div class="kv">
+          <div class="k" style="color:rgb(200,200,200)">Firmware</div><div class="v" id="bfw" style="color:rgb(200,200,200)">—</div>
+          <div class="k" style="color:rgb(200,200,200)">Error code</div><div class="v" id="berr" style="color:rgb(200,200,200)">—</div>
+          <div class="k" style="color:rgb(200,200,200)">ICCID</div><div class="v mono" id="biccid" style="color:rgb(200,200,200)">—</div>
+          <div class="k" style="color:rgb(200,200,200)">IMEI</div><div class="v mono" id="bimei" style="color:rgb(200,200,200)">—</div>
+        </div>
+      </div>
+
+      <!-- Editable site meta -->
+      <!-- <div id="meta-form" class="meta-form">
+        <div class="meta-row">
+          <label for="site-name" style="color:#e5e7eb">Name</label>
+          <input id="site-name" type="text" placeholder='e.g. "Br. 101"' />
+        </div>
+        <div class="meta-row">
+          <label style="color:#e5e7eb">Tags</label>
+          <div id="tags-wrap" style="display:flex; gap:6px; flex-wrap:wrap;"></div>
+          <input id="tag-input" class="tag-entry" type="text" placeholder="Add tag… (enter)" />
+        </div>
+        <div class="meta-row" style="justify-content:flex-end">
+          <span id="save-status" class="save-hint" style="color:#e5e7eb"></span>
+          <button id="save-meta" style="padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">Save</button>
+        </div>
+      </div> -->
+
+      <div style="overflow:auto;">
+        <section class="drawer-section" style="padding:8px 12px;">
+          <div class="drawer-section-title">Local Address Map</div>
+          <div id="local-address-grid" class="local-address-grid" aria-label="Local address occupancy grid"></div>
+          <div class="local-address-legend">
+            <span class="chip chip-green"></span> free
+            <span class="chip chip-red"></span> taken (1 device)
+            <span class="chip chip-blue"></span> conflict (2+ devices)
+          </div>
+        </section>
+
+        <!-- Drawer table -->
+        <div id="drawer-body" style="padding:8px 12px;"></div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- PAGE: DEVICE CACHE -->
+  <div id="page-cache" style="display:none;">
+    <div class="card" style="padding:12px;">
+      <div class="site">Device Cache Lookup</div>
+      <div class="meta">Enter one or more Device IDs (AA-BB-CC-DD), separated by commas or whitespace, then press Enter.</div>
+      <input id="cache-input" placeholder="e.g. 12-34-56-78, 9A-BC-DE-F0" style="width:90%"/>
+    </div>
+
+    <div class="toolbar" id="cache-toolbar" style="margin-top:8px;">
+      <button id="export-cache-csv" disabled>Export CSV</button>
+      <span class="meta" id="cache-export-hint" style="opacity:.7;">Exports the table below.</span>
+    </div>
+
+    <div id="cache-results" class="card" style="margin-top:10px; padding:12px;">
+      <div class="row hdr">
+        <div>Device ID</div>
+        <div class="cell--right">Type</div>
+        <div class="cell--right">Site</div>
+        <div class="cell--right">Local addr</div>
+        <div class="cell--right">Latest ts</div>
+        <div class="cell--right">RSSI</div>
+        <div class="cell--right">Voltage</div>
+      </div>
+      <div id="cache-rows"></div>
+    </div>
+
+    <div id="cache-df-wrap" class="card" style="margin-top:10px; padding:12px; display:none;">
+      <div class="site">Type-specific Cached Values</div>
+      <div class="meta">Shows per-device cached DataFormats determined by device type (from Redis).</div>
+      <div id="cache-df-tables"></div>
+    </div>
+  </div>
+
+  <!-- PAGE: DEVICE CHECKS (NEW) -->
+<div id="page-checks" style="display:none;">
+  <div class="card" style="padding:12px;">
+    <div class="site">Device Health / Classification</div>
+    <div class="meta">
+      Type a device ID and hit Enter. Add multiple devices. Then run tests
+      per device or run all.
+    </div>
+
+    <div class="card-header-row" style="display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:12px;">
+      <input id="checks-input"
+             style="flex:1;min-width:200px;"
+             placeholder="e.g. 15-03-58-80"
+             title="Type Device ID and press Enter to add"/>
+      <!-- <button id="scan-btn"
+              style="padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">
+        <i class="fas fa-barcode"></i> Scan
+      </button> -->
+      <button id="btn-scan" class="check-btn"
+              style="padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">
+        &#128247; Scan ID
+      </button>
+      <button id="run-all-btn"
+              style="padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">
+        ▶ Run All Checks
+      </button>
+      <button id="clear-all-btn"
+              style="padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">
+        ✕ Clear All
+      </button>
+
+      <input id="site-id-input"
+            style="min-width:140px"
+            placeholder="Site ID (e.g. 48-07)"
+            title="Enter a Site ID to load all devices into checks"/>
+      <button id="load-site-btn"
+              style="padding:6px 10px;border-radius:10px;border:1px solid #ccc;cursor:pointer;">
+        ⇥ Load from Site
+      </button>
+      <button id="exportChecksCsvBtn" class="check-btn">Export CSV</button>
+    </div>
+
+    <!-- hidden overlay for scanner -->
+    <div id="scanner-overlay"
+        style="position:fixed;inset:0;background:rgba(0,0,0,.8);color:#fff;
+                display:none;flex-direction:column;align-items:center;justify-content:center;z-index:2000;">
+      <div style="position:relative;width:90%;max-width:400px;">
+        <video id="scanner-video" autoplay playsinline
+              style="width:100%;border:2px solid #00ff99;border-radius:12px;
+                      box-shadow:0 0 20px rgba(0,255,153,.5);"></video>
+        <div style="position:absolute;top:8px;right:8px;">
+          <button id="scanner-cancel"
+                  style="background:#000;border:1px solid #fff;color:#fff;
+                        border-radius:8px;padding:4px 8px;font-size:13px;cursor:pointer;">
+            ✕
+          </button>
+        </div>
+      </div>
+      <div style="margin-top:16px;font-size:14px;opacity:.8;text-align:center;">
+        Align barcode in frame…
+      </div>
+    </div>
+
+    <div id="checks-table" style="margin-top:8px;">
+      <div class="check-row-hdr">
+        <div>Device ID</div>
+        <div class="cell--right">Type</div>
+        <div class="cell--right">Battery</div>
+        <div class="cell--right">Signal</div>
+        <div class="cell--right">Classify</div>
+        <div class="cell--right">
+          Actions
+          <span style="font-size:11px;opacity:.6;display:block;line-height:1.2;">
+            (Run / Remove)
+          </span>
+        </div>
+      </div>
+      <div id="checks-rows"></div>
+    </div>
+  </div>
+</div>
+
+
+<section id="page-local-matrix" class="page" style="display:none;">
+  <h2>Local Address Matrix</h2>
+
+  <div class="controls">
+    <label for="matrix-sids">Site IDs (comma / space / newline separated)</label>
+    <textarea id="matrix-sids" rows="3" placeholder="50-50, 50-51, 3D-34"></textarea>
+
+    <button id="matrix-run" class="btn">Build Matrix</button>
+    <span id="matrix-status" class="status"></span>
+  </div>
+
+  <div class="drawer-section">
+    <div class="drawer-section-title">Local Address Map (combined)</div>
+    <div id="matrix-local-address-grid" class="local-address-grid"></div>
+
+    <div class="local-address-legend">
+      <span class="chip chip-green"></span> free
+      <span class="chip chip-red"></span> taken (1 device)
+      <span class="chip chip-blue"></span> conflict (2+ devices)
+    </div>
+  </div>
+</section>
+
+<div id="confirm-modal">
+    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
+      <div class="modal-title" id="confirm-title">Confirm Device ID</div>
+      <p class="modal-text" id="confirm-text">Add this ID to the table?</p>
+      <div class="modal-id"><span class="pill" id="confirm-id"></span></div>
+
+      <div class="modal-actions">
+        <button class="btn" id="btn-deny">Deny</button>
+        <button class="btn primary" id="btn-accept">Accept</button>
+      </div>
+    </div>
+  </div>
+
+<div id="addr-tooltip" class="addr-tooltip" hidden></div>
+
+
+  <!-- ===================== JS ===================== -->
+
+  <script>
+    const cr123 = ["STRED","STRAIN","4CHSTR","DISP","MRT","2DHRT","HUT","HPA","DISP_ED","WETNESS"]
+    const recharge = ["WLS_S","WLS_A","GEO","WEATHER","SNMX"]
+
+    /* -----------------
+       Shared helpers
+    ------------------*/
+    function safeText(x) {
+      if (x === null || x === undefined) return '';
+      return String(x);
+    }
+
+    /* -----------------
+       Sites tab logic
+    ------------------*/
+    async function load() {
+      const q = document.getElementById('q').value.trim();
+      const state = document.getElementById('state').value;
+      const port = document.getElementById('port').value;
+      const params = new URLSearchParams();
+      if (q) params.set('q', q);
+      if (state) params.set('state', state);
+      if (port) params.set('port', port);
+      console.log('/api/site-grid?' + params.toString());
+      const res = await fetch('/api/site-grid?' + params.toString());
+      const data = await res.json();
+
+      // sort naturally by site_id
+      const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+      data.sort((a, b) => collator.compare(a.site_id, b.site_id));
+
+      renderSites(data);
+    }
+
+    function renderSites(items) {
+      const grid = document.getElementById('grid');
+      grid.innerHTML = '';
+
+      // High-level stats
+      const totalSites = items.length;
+      const totalDevices = items.reduce((acc, it) => acc + (it.num_devices || 0), 0);
+      const online = items.filter(it => it.state === 'online').length;
+      const recent = items.filter(it => it.state === 'recent').length;
+      const offline = items.filter(it => it.state === 'offline').length;
+
+      const countEl = document.getElementById('count');
+      if (countEl)
+        countEl.textContent = `${totalSites} site(s) • ${totalDevices} device(s)`;
+
+      const stats = document.getElementById('stats');
+      stats.innerHTML = `
+        <div class="stat-card">
+          <div class="stat-title">Total sites</div>
+          <div class="stat-value">${totalSites}</div>
+        </div>
+        <div class="stat-card stat-online">
+          <div class="stat-title">Online</div>
+          <div class="stat-value">${online}</div>
+        </div>
+        <div class="stat-card stat-recent">
+          <div class="stat-title">Recently offline</div>
+          <div class="stat-value">${recent}</div>
+        </div>
+        <div class="stat-card stat-offline">
+          <div class="stat-title">Offline</div>
+          <div class="stat-value">${offline}</div>
+        </div>
+      `;
+
+      // Site cards
+      for (const it of items) {
+        const div = document.createElement('div');
+        div.className = 'card';
+        div.innerHTML = `
+          <div class="site">
+            <button class="linklike js-open-devices" data-sid="${it.site_id}">${it.site_id}</button>
+            ${it.site_name ? `<span style="opacity:.75">${it.site_name}</span>` : ''}
+            <span class="pill ${it.state}">${it.state}</span>
+            <span class="pill port${it.port}">${it.port}</span>
+          </div>
+
+          ${Array.isArray(it.site_tags) && it.site_tags.length ? `
+            <div class="meta">
+              ${it.site_tags.map(t => `<span class="pill-tag">${t}</span>`).join(' ')}
+            </div>` : ''}
+
+          <div class="meta">Last contact: ${it.last_contact_age_min ?? '–'} min ago</div>
+          <div class="meta">Gateways: ${it.num_gateways} • Devices: ${it.num_devices}</div>
+          <div class="meta">Inactive &gt;24h: ${it.num_inactive_24h}</div>
+        `;
+        grid.appendChild(div);
+      }
+    }
+
+    document.getElementById('refresh').onclick = load;
+    document.getElementById('q').oninput = load;
+    document.getElementById('state').onchange = load;
+    document.getElementById('port').onchange = load;
+    load();
+    setInterval(load, 60000);
+
+    document.addEventListener('click', (e)=>{
+      const btn = e.target.closest('.js-open-devices');
+      if (!btn) return;
+      const sid = btn.getAttribute('data-sid');
+      openDrawerForSite(sid);
+    });
+
+    function openDrawer() {
+      document.getElementById('drawer').style.right = '0';
+    }
+    function closeDrawer() {
+      document.getElementById('drawer').style.right = '-1020px';
+    }
+    document.getElementById('drawer-close').onclick = closeDrawer;
+
+    function parseSiteIds(raw) {
+      const parts = (raw || "")
+        .split(/[\s,]+/g)
+        .map(s => s.trim())
+        .filter(Boolean);
+
+      // dedupe while preserving order
+      const seen = new Set();
+      const out = [];
+      for (const s of parts) {
+        if (seen.has(s)) continue;
+        seen.add(s);
+        out.push(s);
+      }
+      return out;
+    }
+
+
+    async function fetchDevicesForSites(siteIds) {
+      const requests = siteIds.map(async (sid) => {
+        const res = await fetch('/api/devices?site_id=' + encodeURIComponent(sid));
+        if (!res.ok) throw new Error(`Failed /api/devices for site ${sid}`);
+        const devs = await res.json();
+
+        // Tag each device with its site_id (useful for tooltip context)
+        return (devs || []).map(d => ({
+          ...d,
+          _matrix_site_id: sid
+        }));
+      });
+
+      const results = await Promise.all(requests);
+      return results.flat();
+    }
+
+    function renderLocalAddressGridInto(gridElId, devs) {
+      const gridEl = document.getElementById(gridElId);
+      const tooltip = document.getElementById('addr-tooltip');
+      if (!gridEl || !tooltip) return;
+
+      // addr -> [{device_id, site_id}, ...]
+      const addrMap = new Map();
+      for (const d of devs || []) {
+        const addr = parseInt(d.local_address, 10);
+        if (!Number.isFinite(addr) || addr < 1 || addr > 120) continue;
+
+        if (!addrMap.has(addr)) addrMap.set(addr, []);
+        addrMap.get(addr).push({
+          device_id: d.device_id,
+          site_id: d.site_id || d._matrix_site_id || ""
+        });
+      }
+
+      gridEl.innerHTML = '';
+
+      for (let addr = 1; addr <= 120; addr++) {
+        const entries = addrMap.get(addr) || [];
+        const count = entries.length;
+
+        const cell = document.createElement('div');
+        cell.className =
+          'addr-cell ' +
+          (count === 0 ? 'addr-free' : count === 1 ? 'addr-taken' : 'addr-dup');
+
+        cell.textContent = addr;
+
+        // Tooltip text
+        let tipText;
+        if (count === 0) {
+          tipText = `Local address ${addr}\n(no devices assigned)`;
+        } else if (count === 1) {
+          const e = entries[0];
+          tipText = `Local address ${addr}\nDevice:\n${e.device_id}${e.site_id ? `  (site ${e.site_id})` : ""}`;
+        } else {
+          tipText =
+            `Local address ${addr}\n${count} devices:\n` +
+            entries.map(e => `${e.device_id}${e.site_id ? `  (site ${e.site_id})` : ""}`).join('\n');
+        }
+
+        cell.addEventListener('mouseenter', () => {
+          tooltip.textContent = tipText;
+          tooltip.hidden = false;
+        });
+        cell.addEventListener('mousemove', (e) => {
+          tooltip.style.left = (e.clientX + 12) + 'px';
+          tooltip.style.top  = (e.clientY + 12) + 'px';
+        });
+        cell.addEventListener('mouseleave', () => {
+          tooltip.hidden = true;
+        });
+
+        gridEl.appendChild(cell);
+      }
+    }
+
+    async function runLocalMatrix() {
+      const textarea = document.getElementById('matrix-sids');
+      const statusEl = document.getElementById('matrix-status');
+
+      const siteIds = parseSiteIds(textarea.value);
+
+      if (siteIds.length === 0) {
+        statusEl.textContent = "Enter at least one site_id.";
+        renderLocalAddressGridInto('matrix-local-address-grid', []);
+        return;
+      }
+
+      statusEl.textContent = `Loading ${siteIds.length} site(s)…`;
+
+      try {
+        const devs = await fetchDevicesForSites(siteIds);
+        statusEl.textContent = `Loaded ${devs.length} device(s) across ${siteIds.length} site(s).`;
+        renderLocalAddressGridInto('matrix-local-address-grid', devs);
+      } catch (err) {
+        console.error(err);
+        statusEl.textContent = `Error: ${err.message || err}`;
+        renderLocalAddressGridInto('matrix-local-address-grid', []);
+      }
+    }
+
+    document.getElementById('matrix-run')?.addEventListener('click', runLocalMatrix);
+
+
+
+    function buildLocalAddressCounts(devs) {
+      const counts = new Map(); // addr -> count
+
+      for (const d of devs || []) {
+        // local_address might come back as string from Redis; normalize to int
+        const addr = parseInt(d.local_address, 10);
+        if (!Number.isFinite(addr)) continue;
+        if (addr < 1 || addr > 120) continue;
+
+        counts.set(addr, (counts.get(addr) || 0) + 1);
+      }
+
+      return counts;
+    }
+
+    function renderLocalAddressGrid(devs) {
+      const gridEl = document.getElementById('local-address-grid');
+      const tooltip = document.getElementById('addr-tooltip');
+      if (!gridEl || !tooltip) return;
+
+      // addr -> [device_id, ...]
+      const addrMap = new Map();
+      for (const d of devs || []) {
+        const addr = parseInt(d.local_address, 10);
+        if (!Number.isFinite(addr) || addr < 1 || addr > 120) continue;
+        if (!addrMap.has(addr)) addrMap.set(addr, []);
+        addrMap.get(addr).push(d.device_id);
+      }
+
+      gridEl.innerHTML = '';
+
+      for (let addr = 1; addr <= 120; addr++) {
+        const devices = addrMap.get(addr) || [];
+        const count = devices.length;
+
+        const cell = document.createElement('div');
+        cell.className =
+          'addr-cell ' +
+          (count === 0 ? 'addr-free' : count === 1 ? 'addr-taken' : 'addr-dup');
+
+        cell.textContent = addr;
+
+        // Tooltip text
+        let tipText;
+        if (count === 0) {
+          tipText = `Local address ${addr}\n(no devices assigned)`;
+        } else if (count === 1) {
+          tipText = `Local address ${addr}\nDevice:\n${devices[0]}`;
+        } else {
+          tipText =
+            `Local address ${addr}\n${count} devices:\n` +
+            devices.join('\n');
+        }
+
+        // Hover handlers
+        cell.addEventListener('mouseenter', (e) => {
+          tooltip.textContent = tipText;
+          tooltip.hidden = false;
+        });
+
+        cell.addEventListener('mousemove', (e) => {
+          tooltip.style.left = e.clientX + 12 + 'px';
+          tooltip.style.top  = e.clientY + 12 + 'px';
+        });
+
+        cell.addEventListener('mouseleave', () => {
+          tooltip.hidden = true;
+        });
+
+        gridEl.appendChild(cell);
+      }
+    }
+
+
+    async function openDrawerForSite(siteId) {
+      // fetch in parallel
+      const [resDevs, resMeta, resBundle] = await Promise.all([
+        fetch('/api/devices?site_id=' + encodeURIComponent(siteId)),
+        fetch('/api/site-meta?site_id=' + encodeURIComponent(siteId)).catch(()=>({ok:false,json:async()=>({})})),
+        fetch('/api/site-bundle?site_id=' + encodeURIComponent(siteId)).catch(()=>({ok:false,json:async()=>({})}))
+      ]);
+
+      const devs   = await resDevs.json();
+      const meta   = resMeta && resMeta.ok ? await resMeta.json() : {};
+      const bundle = resBundle && resBundle.ok ? await resBundle.json() : {};
+
+      // title + count
+      const titleEl = document.getElementById('drawer-title');
+      const countEl = document.getElementById('drawer-count');
+      titleEl.textContent = `Site ${siteId}`;
+      countEl.textContent = `• ${devs.length} device(s)`;
+
+      // store + render
+      window._drawerDevices = devs;
+      window._siteMeta = {
+        site_id: siteId,
+        name: meta.name || '',
+        tags: Array.isArray(meta.tags) ? meta.tags : []
+      };
+
+      renderBundle(bundle);
+      //renderSiteMeta(window._siteMeta);
+      renderDrawer(devs);
+
+      // render local-address occupancy grid
+      renderLocalAddressGrid(devs);
+
+      openDrawer();
+    }
+
+    function renderBundle(bundle) {
+      const fw  = (bundle && bundle.firmware_version) ? String(bundle.firmware_version) : "—";
+      const err = (bundle && bundle.error_code) ? String(bundle.error_code) : "—";
+      const icc = (bundle && bundle.iccid) ? String(bundle.iccid) : "—";
+      const ime = (bundle && bundle.imei)  ? String(bundle.imei)  : "—";
+
+      document.getElementById('bfw').textContent = fw;
+      document.getElementById('berr').textContent = err;
+      document.getElementById('biccid').textContent = icc;
+      document.getElementById('bimei').textContent = ime;
+    }
+
+    function renderSiteMeta(meta) {
+      // name
+      const nameEl = document.getElementById('site-name');
+      nameEl.value = meta.name || '';
+
+      // tags
+      const wrap = document.getElementById('tags-wrap');
+      wrap.innerHTML = '';
+      (meta.tags || []).forEach((tag) => {
+        const chip = document.createElement('span');
+        chip.className = 'chip';
+        chip.innerHTML = `${tag} <button aria-label="Remove tag" data-tag="${tag}">&times;</button>`;
+        wrap.appendChild(chip);
+      });
+
+      // single-use listener per render
+      wrap.addEventListener('click', (e) => {
+        const btn = e.target.closest('button[data-tag]');
+        if (!btn) return;
+        const t = btn.getAttribute('data-tag');
+        window._siteMeta.tags = (window._siteMeta.tags || []).filter(x => x !== t);
+        renderSiteMeta(window._siteMeta);
+        dirtyMeta();
+      }, { once: true });
+    }
+
+    document.getElementById('toggle-stats').addEventListener('click', () => {
+      const stats = document.getElementById('stats');
+      stats.classList.toggle('hidden');
+
+      const icon = document.querySelector('#toggle-stats i');
+      if (stats.classList.contains('hidden')) {
+        icon.classList.replace('fa-chart-bar', 'fa-eye');
+      } else {
+        icon.classList.replace('fa-eye', 'fa-chart-bar');
+      }
+    });
+
+
+    // Tag add on Enter
+    // document.getElementById('tag-input').addEventListener('keydown', (e) => {
+    //   if (e.key !== 'Enter') return;
+    //   const v = e.currentTarget.value.trim();
+    //   if (!v) return;
+    //   if (!window._siteMeta) window._siteMeta = {};
+    //   if (!Array.isArray(window._siteMeta.tags)) window._siteMeta.tags = [];
+    //   if (!window._siteMeta.tags.includes(v)) window._siteMeta.tags.push(v);
+    //   e.currentTarget.value = '';
+    //   renderSiteMeta(window._siteMeta);
+    //   dirtyMeta();
+    // });
+
+    // Track name edits
+    // document.getElementById('site-name').addEventListener('input', (e) => {
+    //   if (!window._siteMeta) window._siteMeta = {};
+    //   window._siteMeta.name = e.currentTarget.value;
+    //   dirtyMeta();
+    // });
+
+    // Save site meta button
+    // document.getElementById('save-meta').addEventListener('click', async () => {
+    //   const meta = window._siteMeta || {};
+    //   setSaveStatus('Saving…');
+    //   const res = await fetch('/api/site-meta', {
+    //     method: 'POST',
+    //     headers: { 'Content-Type': 'application/json' },
+    //     body: JSON.stringify({
+    //       site_id: meta.site_id,
+    //       name: (meta.name || '').trim(),
+    //       tags: Array.isArray(meta.tags) ? meta.tags : []
+    //     })
+    //   });
+    //   if (res.ok) {
+    //     setSaveStatus('Saved ✓');
+    //     load(); // refresh cards to show updated name/tags
+    //   } else {
+    //     const txt = await res.text();
+    //     setSaveStatus('Error: ' + txt);
+    //   }
+    // });
+
+    // function setSaveStatus(msg) {
+    //   document.getElementById('save-status').textContent = msg || '';
+    // }
+    // let _metaDirtyTimer = null;
+    // function dirtyMeta() {
+    //   setSaveStatus('Unsaved changes');
+    //   clearTimeout(_metaDirtyTimer);
+    //   _metaDirtyTimer = setTimeout(() => {
+    //     document.getElementById('save-meta').click();
+    //   }, 1500);
+    // }
+
+    function renderDrawer(devs) {
+      const body = document.getElementById('drawer-body');
+      const now = Math.floor(Date.now()/1000);
+      const rows = [];
+
+      rows.push(`
+        <div class="row hdr">
+          <div>Device ID</div>
+          <div class="cell--right">Type</div>
+          <div class="cell--right">Local</div>
+          <div class="cell--right">RSSI</div>
+          <div class="cell--right">Volt</div>
+          <div class="cell--right">Last</div>
+          <div class="cell--right">Status</div>
+        </div>
+      `);
+
+      for (const d of devs) {
+        const ts = Number(d.last_voltage_ts || 0);
+        const ageMin = ts ? Math.floor((now - ts)/60) : null;
+        const inactive = ts ? (now - ts) > (24*3600) : true;
+
+        // RSSI checks
+        rssi_color = "#eb4034" // red
+        if (d.rssi >= -70){
+          rssi_color = "#34eb74" // green
+        } else if (d.rssi >= -80){
+          rssi_color = "#ebd234" // yellow
+        } else {
+          rssi_color = "#eb4034" // red
+        }
+
+        // Voltage checks
+        volt_color = "#eb4034" // red
+        if (cr123.includes(d.device_type_code)){
+          if (d.voltage >= 2.9){
+            volt_color = "#34eb74" // green
+          } else if (d.voltage >= 2.8) {
+            volt_color = "#ebd234" // yellow
+          } else {
+            volt_color = "#eb4034" // red
+          }
+        } else if (recharge.includes(d.device_type_code)){
+          if (d.voltage >= 3.6){
+            volt_color = "#34eb74" // green
+          } else if (d.voltage >= 3.2) {
+            volt_color = "#ebd234" // yellow
+          } else {
+            volt_color = "#eb4034" // red
+          }
+        } else {
+          volt_color = "#eb4034" // red
+        }
+
+        rows.push(`
+          <div class="row data">
+            <div class="cell--mono">${safeText(d.device_id)}</div>
+            <div class="cell--right">${safeText(d.device_type_code || '-')}</div>
+            <div class="cell--right">${safeText(d.local_address ?? '-')}</div>
+            <div class="cell--right" style="background-color:${rssi_color};color:black"><strong>${safeText(d.rssi ?? '-')}</strong></div>
+            <div class="cell--right" style="background-color:${volt_color};color:black"><strong>${safeText(d.voltage ?? '-')}</strong></div>
+            <div class="cell--right">${ageMin != null ? ageMin + ' min' : '–'}</div>
+            <div class="cell--right">
+              <span class="pill-sm ${inactive ? 'bad' : 'ok'}">${inactive ? 'inactive' : 'active'}</span>
+            </div>
+          </div>
+        `);
+      }
+
+      body.innerHTML = rows.join('');
+    }
+
+    // drawer filter
+    document.getElementById('dev-filter').addEventListener('input', (e)=>{
+      const q = e.target.value.trim().toLowerCase();
+      const all = window._drawerDevices || [];
+      if (!q) return renderDrawer(all);
+      const filtered = all.filter(d =>
+        String(d.device_id).toLowerCase().includes(q) ||
+        String(d.local_address ?? '').toLowerCase().includes(q) ||
+        String(d.device_type_code ?? '').toLowerCase().includes(q)
+      );
+      renderDrawer(filtered);
+    });
+
+    /* -----------------
+       Cache tab logic
+    ------------------*/
+    window._cacheDevices = [];
+
+    const exportBtn = document.getElementById('export-cache-csv');
+    if (exportBtn) {
+      exportBtn.addEventListener('click', exportCacheCsv);
+    }
+
+    document.getElementById('cache-input').addEventListener('keydown', async (e) => {
+      if (e.key !== 'Enter') return;
+      const raw = e.currentTarget.value.trim();
+      if (!raw) return;
+      const dids = raw.split(/[\s,]+/).map(s => s.trim()).filter(Boolean);
+      if (!dids.length) return;
+
+      const res = await fetch('/api/device-cache', {
+        method:'POST',
+        headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({ device_ids: dids })
+      });
+      const data = await res.json();
+      renderCacheSummary(data);
+      renderCacheDFTables(data);
+    });
+
+    function renderCacheSummary(data) {
+      const rowsEl = document.getElementById('cache-rows');
+      const now = Math.floor(Date.now()/1000);
+      const out = [];
+      for (const d of (data.devices || [])) {
+        const ts = Number(d.latest_ts || 0);
+        out.push(`
+          <div class="row data">
+            <div class="cell--mono">${safeText(d.device_id)}</div>
+            <div class="cell--right">${safeText(d.device_type_code || d.device_type || '-')}</div>
+            <div class="cell--right">${safeText(d.site_id || '-')}</div>
+            <div class="cell--right">${safeText(d.local_address ?? '-')}</div>
+            <div class="cell--right">${ts ? Math.floor((now-ts)/60) + ' min' : '–'}</div>
+            <div class="cell--right">${safeText(d.rssi ?? '-')}</div>
+            <div class="cell--right">${safeText(d.voltage ?? '-')}</div>
+          </div>
+        `);
+      }
+      rowsEl.innerHTML = out.join('');
+
+      // store for CSV export
+      window._cacheDevices = Array.isArray(data?.devices) ? data.devices : [];
+      if (exportBtn) exportBtn.disabled = window._cacheDevices.length === 0;
+    }
+
+    function renderCacheDFTables(data) {
+      // keep hidden by default unless you want it visible
+      const wrapCard = document.getElementById('cache-df-wrap');
+      const wrap = document.getElementById('cache-df-tables');
+      wrap.innerHTML = '';
+
+      const df_map = data.df_map || {};
+      const dids = Object.keys(df_map);
+      if (!dids.length) {
+        wrapCard.style.display = 'none';
+        return;
+      }
+      wrapCard.style.display = '';
+
+      for (const [did, perDf] of Object.entries(df_map)) {
+        const cont = document.createElement('div');
+        cont.className = 'card';
+        cont.style.marginTop = '10px';
+        cont.style.padding = '12px';
+
+        cont.innerHTML = `
+          <div class="site">Device ${safeText(did)}</div>
+          <div class="row hdr">
+            <div>DataFormat</div>
+            <div class="cell--right">Value</div>
+            <div class="cell--right">Optional</div>
+            <div class="cell--right">Timestamp</div>
+            <div class="cell--right">Type Code</div>
+          </div>
+          <div id="rows-${did}"></div>
+        `;
+        wrap.appendChild(cont);
+
+        const body = cont.querySelector(`#rows-${did}`);
+        const r = [];
+        for (const [df, obj] of Object.entries(perDf)) {
+          r.push(`
+            <div class="row data">
+              <div class="cell--mono">${safeText(df)}</div>
+              <div class="cell--right">${safeText(obj.value ?? '')}</div>
+              <div class="cell--right">${safeText(obj.optional ?? '')}</div>
+              <div class="cell--right">${safeText(obj.ts ?? '')}</div>
+              <div class="cell--right">${safeText(obj.type_code ?? '')}</div>
+            </div>
+          `);
+        }
+        body.innerHTML = r.join('') || `<div class="meta">No cached DF values.</div>`;
+      }
+    }
+
+    function exportCacheCsv() {
+      const rows = window._cacheDevices || [];
+      if (!rows.length) return;
+      const nowSec = Math.floor(Date.now()/1000);
+
+      const header = [
+        'Device ID',
+        'Type',
+        'Site',
+        'Local addr',
+        'Latest ts (min ago)',
+        'Latest ts (ISO)',
+        'Latest ts (epoch)'
+      ];
+
+      const dataRows = rows.map(d => {
+        const ts = Number(d.latest_ts || 0);
+        const ageMin = ts ? Math.floor((nowSec - ts)/60) : '';
+        const iso = ts ? new Date(ts*1000).toISOString() : '';
+        const type = d.device_type_code || d.device_type || '';
+        return [
+          csvEscape(d.device_id),
+          csvEscape(type),
+          csvEscape(d.site_id || ''),
+          csvEscape(d.local_address ?? ''),
+          String(ageMin),
+          csvEscape(iso),
+          ts ? String(ts) : ''
+        ];
+      });
+
+      const csv = [header, ...dataRows].map(r => r.join(',')).join('\r\n');
+      const blob = new Blob(["\uFEFF" + csv], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+
+      const stamp = new Date().toISOString().replace(/[:T]/g,'-').split('.')[0];
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `device_cache_${stamp}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    }
+
+    function csvEscape(val) {
+      const s = (val === null || val === undefined) ? '' : String(val);
+      if (/[",\n\r]/.test(s)) {
+        return '"' + s.replace(/"/g, '""') + '"';
+      }
+      return s;
+    }
+
+    /* -----------------
+       Device Checks tab logic (NEW)
+    ------------------*/
+    // We'll maintain an array of {did, type, status} objects
+    window._checksList = [];
+
+  const checksInput   = document.getElementById('checks-input');
+  const checksRowsEl  = document.getElementById('checks-rows');
+  const runAllBtn     = document.getElementById('run-all-btn');
+  const clearAllBtn   = document.getElementById('clear-all-btn');
+
+  // Return the list of tests this device supports, based on its code_name
+  function getTestsForCodeName(codeName) {
+    // normalize for safety
+    const c = (codeName || '').toUpperCase();
+
+    // STRAIN-like devices (STRAIN / STRED share behavior here)
+    if (c === 'STRAIN' || c === 'STRED') {
+      return [
+        { kind: 'battery',          label: 'Battery' },
+        { kind: 'signal',           label: 'Signal' },
+        { kind: 'strain_classify',  label: 'Measurements' }
+      ];
+    }
+
+    // Water level sensor (WLS example)
+    if (c === 'WLS_S') {
+      return [
+        { kind: 'battery',        label: 'Battery' },
+        { kind: 'signal',         label: 'Signal' },
+        { kind: 'wls_classify',   label: 'Measurements' }
+      ];
+    }
+
+    if (c === 'HPA') {
+      return [
+        { kind: 'battery',        label: 'Battery' },
+        { kind: 'signal',         label: 'Signal' },
+        { kind: 'hpa_classify',   label: 'Measurements' }
+      ];
+    }
+
+    if (c === 'SNMX') {
+      return [
+        { kind: 'battery',        label: 'Battery' },
+        { kind: 'charge_classify',         label: 'Charging' },
+      ];
+    }
+
+    // Default / fallback
+    // If you really do have a generic "classify", include it here:
+    return [
+      { kind: 'battery',   label: 'Battery' },
+      { kind: 'signal',    label: 'Signal' },
+      { kind: 'classify',  label: 'Classify' }
+    ];
+  }
+
+  function updateRowHighlight(did) {
+    const row = document.querySelector(`.check-row[data-did="${CSS.escape(did)}"]`);
+    if (!row) return;
+    const device = window._checksList.find(d => d.did === did);
+    if (!device) return;
+    const statuses = Object.values(device.statuses);
+    const allPass  = statuses.length && statuses.every(v => v === 'pass');
+    const anyFail  = statuses.some(v => v === 'fail');
+
+    row.classList.toggle('all-ok', allPass);
+
+    if (anyFail) {
+      const panel = document.querySelector(`.check-details[data-did="${CSS.escape(did)}"]`);
+      panel?.removeAttribute('hidden'); // auto-open on failure (optional)
+      row.classList.add('expanded');
+    }
+  }
+
+  async function addDeviceToChecks(did) {
+    const clean = (did || '').trim();
+    if (!clean) return;
+
+    // De-duplicate
+    if (window._checksList.find(d => d.did === clean)) return;
+
+    // Fetch device meta (for code_name) — falls back gracefully
+    let devInfo = { device_id: clean, code_name: '—' };
+    try {
+      const res = await fetch('/api/device-info?did=' + encodeURIComponent(clean));
+      if (res.ok) devInfo = await res.json();
+    } catch (_) {}
+
+    const codeName = devInfo.code_name || '—';
+    const tests = getTestsForCodeName(codeName);
+
+    const statuses = {};
+    for (const t of tests) statuses[t.kind] = 'wait';
+
+    window._checksList.push({
+      did: clean,
+      codeName,
+      tests,
+      statuses,             // e.g., { battery: 'wait', signal: 'wait', ... }
+      details: {}           // e.g., { battery: { ts, explain, metrics, thresholds } }
+    });
+
+    renderChecksTable();
+  }
+
+
+  // Add device on Enter
+  checksInput.addEventListener('keydown', async (e) => {
+    if (e.key !== 'Enter') return;
+    const did = e.currentTarget.value.trim();
+    if (!did) return;
+    e.currentTarget.value = '';
+    await addDeviceToChecks(did);
+  });
+
+  document.getElementById('load-site-btn')?.addEventListener('click', async () => {
+    const siteInput = document.getElementById('site-id-input');
+    const btn = document.getElementById('load-site-btn');
+    const sid = (siteInput?.value || '').trim();
+
+    if (!sid) {
+      siteInput?.focus();
+      siteInput?.setAttribute('placeholder', 'Please enter a Site ID');
+      return;
+    }
+
+    btn.disabled = true;
+    const original = btn.textContent;
+    btn.textContent = 'Loading…';
+
+    try {
+      // Reuse the same API the drawer uses
+      const res = await fetch('/api/devices?site_id=' + encodeURIComponent(sid));
+      if (!res.ok) throw new Error('Failed to fetch devices');
+
+      const devs = await res.json();
+
+      // Optional: sort by device_id for stable UX
+      devs.sort((a, b) => String(a.device_id).localeCompare(String(b.device_id)));
+
+      // Add each device to the checks list (dedupe handled inside helper)
+      for (const d of devs) {
+        await addDeviceToChecks(d.device_id);
+        // (Optional) small micro-yield for smoother rendering:
+        // await new Promise(r => setTimeout(r, 0));
+      }
+
+      // Visual confirmation
+      btn.textContent = `Loaded ${devs.length} device(s)`;
+
+    } catch (err) {
+      console.error(err);
+      btn.textContent = 'Error loading';
+    } finally {
+      setTimeout(() => {
+        btn.textContent = original;
+        btn.disabled = false;
+      }, 1200);
+    }
+  });
+
+  // Clear all rows
+  clearAllBtn.addEventListener('click', () => {
+    window._checksList = [];
+    renderChecksTable();
+  });
+
+  // Run all checks for all devices
+  // runAllBtn.addEventListener('click', async () => {
+  //   for (const row of window._checksList) {
+  //     await runSingleTest(row.did, 'battery');
+  //     await runSingleTest(row.did, 'signal');
+  //     await runSingleTest(row.did, 'classify');
+  //   }
+  // });
+
+  runAllBtn.addEventListener('click', async () => {
+    for (const row of window._checksList) {
+      for (const t of row.tests) {
+        await runSingleTest(row.did, t.kind);
+      }
+    }
+  });
+
+  // Main executor for a single test on a single device.
+  async function runSingleTest(did, kind) {
+    markTestRunning(did, kind, true);
+    try {
+      let ok = false, explain = '', metrics = null, thresholds = null;
+
+      const post = async (url) => {
+        const resp = await fetch(url, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ did })});
+        if (!resp.ok) return { ok:false };
+        const data = await resp.json();
+        return {
+          ok: !!data.ok,
+          explain: data.explain || '',
+          metrics: data.metrics || null,
+          thresholds: data.thresholds || null
+        };
+      };
+
+      let res = { ok:false };
+      if (kind === 'signal')            res = await post('/internal/check-signal');
+      else if (kind === 'battery')      res = await post('/internal/check-battery');
+      else if (kind === 'strain_classify') res = await post('/internal/check-strain');
+      else if (kind === 'hpa_classify') res = await post('/internal/check-hpa');
+      else if (kind === 'charge_classify') res = await post('/internal/check-charge');
+      else if (kind === 'wls_classify') res = await post('/internal/check-wls');
+      else if (kind === 'classify')     res = { ok: Math.random() > 0.25, explain: 'Generic classifier used.' };
+
+      console.log("INTERNAL RES: ",res);
+
+      ok = res.ok; explain = res.explain; metrics = res.metrics; thresholds = res.thresholds;
+
+      // Fallback: if API didn’t send an explanation, create a simple one
+      if (!explain) {
+        explain = ok ? 'All checks within expected ranges.' : 'One or more values out of range.';
+      }
+
+      // Save details on the device model
+      const rowObj = window._checksList.find(x => x.did === did);
+      if (rowObj) {
+        rowObj.details[kind] = {
+          ts: new Date().toISOString(),
+          ok,
+          explain,
+          metrics,
+          thresholds
+        };
+      }
+
+      setTestStatus(did, kind, ok ? 'pass' : 'fail');
+    } catch {
+      setTestStatus(did, kind, 'fail');
+    } finally {
+      markTestRunning(did, kind, false);
+      renderChecksTable();
+    }
+  }
+
+
+
+  // Update internal model + DOM badge for one test
+  function setTestStatus(did, kind, status) {
+    // update in-memory model
+    const rowObj = window._checksList.find(x => x.did === did);
+    if (!rowObj) return;
+
+    if (!rowObj.statuses.hasOwnProperty(kind)) {
+      // this device doesn't track this test kind
+      return;
+    }
+
+    rowObj.statuses[kind] = status;
+
+    // update DOM badge if present
+    const badge = document.querySelector(
+      `.check-row[data-did="${CSS.escape(did)}"] .status-badge[data-kind="${kind}"]`
+    );
+    if (!badge) return;
+
+    badge.classList.remove('status-pass','status-fail','status-wait');
+
+    if (status === 'pass') {
+      badge.textContent = '✓';
+      badge.classList.add('status-pass');
+    } else if (status === 'fail') {
+      badge.textContent = '✕';
+      badge.classList.add('status-fail');
+    } else {
+      badge.textContent = '…';
+      badge.classList.add('status-wait');
+    }
+    updateRowHighlight(did);
+  }
+
+  function markTestRunning(did, kind, isRunning) {
+    const btn = document.querySelector(
+      `.check-row[data-did="${CSS.escape(did)}"] .check-btn[data-kind="${kind}"]`
+    );
+    if (!btn) return;
+    if (isRunning) {
+      btn.classList.add('running');
+      btn.disabled = true;
+    } else {
+      btn.classList.remove('running');
+      btn.disabled = false;
+    }
+  }
+
+
+  // Remove a row by DID
+  function removeDeviceRow(did) {
+    window._checksList = window._checksList.filter(d => d.did !== did);
+    renderChecksTable();
+  }
+
+
+  function iconHTMLForDevice(code) {
+    const c = (code || '').toUpperCase();
+
+    if (['STRAIN', 'STRED'].includes(c))
+      return '<i class="fas fa-wave-square" title="Strain gauge"></i>';
+    if (c.startsWith('WLS'))
+      return '<i class="fas fa-water" title="Water level sensor"></i>';
+    if (c === 'HPA')
+      return '<i class="fas fa-bolt" title="Accelerometer"></i>';
+
+    return '<i class="fas fa-microchip" title="Generic sensor"></i>';
+  }
+
+  function getOpenPanels() {
+    const open = {};
+    document.querySelectorAll('.check-details').forEach(p => {
+      const did = p.getAttribute('data-did');
+      open[did] = !p.hasAttribute('hidden');
+    });
+    return open;
+  }
+
+  function restoreOpenPanels(openMap) {
+    Object.entries(openMap || {}).forEach(([did, isOpen]) => {
+      const panel = document.querySelector(`.check-details[data-did="${CSS.escape(did)}"]`);
+      const row   = document.querySelector(`.check-row[data-did="${CSS.escape(did)}"]`);
+      if (!panel || !row) return;
+      if (isOpen) {
+        panel.removeAttribute('hidden');
+        row.classList.add('expanded');
+      } else {
+        panel.setAttribute('hidden','');
+        row.classList.remove('expanded');
+      }
+    });
+  }
+
+
+  function renderChecksTable() {
+  // Remember which panels are open (merge any persisted state too)
+  const openFromDOM = {};
+  document.querySelectorAll('.check-details').forEach(p => {
+    const did = p.getAttribute('data-did');
+    openFromDOM[did] = !p.hasAttribute('hidden');
+  });
+  window._checksOpen = window._checksOpen || {};
+  const openMap = { ...window._checksOpen, ...openFromDOM };
+
+  const rows = [];
+
+  for (const d of window._checksList) {
+    // helper: get current status badge HTML for a given test kind
+    function badgeHtml(kind, labelIfMissing = '') {
+      // if this device doesn't even have that test, show '' so table cell is blank
+      if (!d.statuses.hasOwnProperty(kind)) {
+        return labelIfMissing;
+      }
+      const st = d.statuses[kind];
+      const statusClass =
+        st === 'pass' ? 'status-pass' :
+        st === 'fail' ? 'status-fail' :
+        'status-wait';
+      const statusChar =
+        st === 'pass' ? '✓' :
+        st === 'fail' ? '✕' :
+        '…';
+      return `<span class="status-badge ${statusClass}" data-kind="${kind}">${statusChar}</span>`;
+    }
+
+    // build action buttons (Battery / Signal / Measurements / etc.)
+    const actionBtnsHtml = d.tests.map(t => {
+      return `<button class="check-btn js-check"
+                      data-kind="${t.kind}"
+                      data-did="${d.did}">${t.label}</button>`;
+    }).join(' ')
+    + `<button class="check-btn js-details"
+              data-did="${d.did}">Details</button>`
+    + `<button class="check-btn js-install disable"
+              data-did="${d.did}" disabled>Mark Installed</button>`
+    + `<button class="check-btn js-remove"
+              data-did="${d.did}"
+              title="Remove this device">✕</button>`;
+
+    // For column 5 we try to choose the "primary" classify-ish test
+    // In priority order: strain_classify, wls_classify, hpa_classify, classify
+    const primaryClassifyKind =
+      d.statuses['strain_classify'] ? 'strain_classify' :
+      d.statuses['wls_classify']    ? 'wls_classify'    :
+      d.statuses['hpa_classify']    ? 'hpa_classify'    :
+      d.statuses['classify']        ? 'classify'        :
+      null;
+
+    rows.push(`
+      <div class="check-row data" data-did="${d.did}" style="padding: 8px 16px;">
+        <div class="cell--mono">${d.did}</div>
+        <div class="cell--right">${iconHTMLForDevice(d.codeName)} ${safeText(d.codeName)}</div>
+        <div class="cell--right">${badgeHtml('battery')}</div>
+        <div class="cell--right">${badgeHtml('signal')}</div>
+        <div class="cell--right">${primaryClassifyKind ? badgeHtml(primaryClassifyKind) : ''}</div>
+        <div class="check-actions">${actionBtnsHtml}</div>
+      </div>
+
+      <div class="check-details" data-did="${d.did}" hidden>
+        ${d.tests.map(t => {
+          const det = (d.details && d.details[t.kind]) || null;
+          const icon = det?.ok ? '✓' : (det === null ? '…' : '✕');
+          const state = det?.ok ? 'status-pass' : (det === null ? 'status-wait' : 'status-fail');
+          const when = det?.ts ? new Date(det.ts).toLocaleString() : '';
+          const explain = det?.explain ? safeText(det.explain) : 'No results yet — run this test.';
+          const metrics = det?.metrics ? Object.entries(det.metrics).map(([k,v]) => `<div class="kv"><div class="k">${safeText(k)}</div><div class="v mono">${safeText(v)}</div></div>`).join('') : '';
+          const thresholds = det?.thresholds ? Object.entries(det.thresholds).map(([k,v]) => `<span class="pill-tag">${safeText(k)}: ${safeText(v)}</span>`).join(' ') : '';
+          return `
+            <div class="detail-row">
+              <div class="detail-head">
+                <span class="status-badge ${state}" aria-hidden="true">${icon}</span>
+                <strong style="margin-left:8px">${safeText(t.label)}</strong>
+                ${when ? `<span class="meta" style="margin-left:8px">(${when})</span>` : ''}
+              </div>
+              <div class="detail-body">
+                <div class="detail-explain">${explain}</div>
+                ${metrics ? `<div class="detail-metrics">${metrics}</div>` : ''}
+                ${thresholds ? `<div class="detail-thresholds" style="margin-top:6px">${thresholds}</div>` : ''}
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    `);
+  }
+
+  // Swap DOM
+  const openBeforeSwap = openMap; // snapshot
+  checksRowsEl.innerHTML = rows.join('');
+
+  // Re-bind listeners
+  checksRowsEl.querySelectorAll('.js-check').forEach(btn => {
+    btn.addEventListener('click', async (ev) => {
+      const did  = ev.currentTarget.getAttribute('data-did');
+      const kind = ev.currentTarget.getAttribute('data-kind');
+      await runSingleTest(did, kind);
+      // Re-render; open panels will be preserved below
+      renderChecksTable();
+    });
+  });
+
+  checksRowsEl.querySelectorAll('.js-remove').forEach(btn => {
+    btn.addEventListener('click', (ev) => {
+      const did  = ev.currentTarget.getAttribute('data-did');
+      removeDeviceRow(did);
+    });
+  });
+
+  checksRowsEl.querySelectorAll('.js-details').forEach(btn => {
+    btn.addEventListener('click', (ev) => {
+      const did = ev.currentTarget.getAttribute('data-did');
+      const panel = checksRowsEl.querySelector(`.check-details[data-did="${CSS.escape(did)}"]`);
+      const row   = checksRowsEl.querySelector(`.check-row[data-did="${CSS.escape(did)}"]`);
+      if (!panel) return;
+      const willOpen = panel.hasAttribute('hidden');
+      if (willOpen) {
+        panel.removeAttribute('hidden');
+        row?.classList.add('expanded');
+        window._checksOpen[did] = true;
+      } else {
+        panel.setAttribute('hidden','');
+        row?.classList.remove('expanded');
+        window._checksOpen[did] = false;
+      }
+    });
+  });
+
+  function exportChecksCSV() {
+    const rows = [];
+    const allMetricKeys = new Set();
+    const allThreshKeys = new Set();
+
+    // Build an intermediate array of per-test results we’ll flatten to CSV
+    const results = [];
+
+    for (const d of (window._checksList || [])) {
+      // Only include tests that have details (i.e., were run at least once)
+      for (const t of (d.tests || [])) {
+        const det = d.details?.[t.kind];
+        if (!det) continue;
+
+        // Track column keys we might need to add
+        if (det.metrics && typeof det.metrics === 'object') {
+          Object.keys(det.metrics).forEach(k => allMetricKeys.add(k));
+        }
+        if (det.thresholds && typeof det.thresholds === 'object') {
+          Object.keys(det.thresholds).forEach(k => allThreshKeys.add(k));
+        }
+
+        results.push({
+          did: d.did,
+          codeName: d.codeName || '',
+          testKind: t.kind,
+          testLabel: t.label || t.kind,
+          status: det.ok === true ? 'pass' : det.ok === false ? 'fail' : 'wait',
+          ts: det.ts || '',
+          explain: det.explain || '',
+          metrics: det.metrics || {},
+          thresholds: det.thresholds || {}
+        });
+      }
+    }
+
+    if (results.length === 0) {
+      alert('No test results to export yet.');
+      return;
+    }
+
+    // Build header
+    const metricCols = Array.from(allMetricKeys).map(k => `metric_${k}`);
+    const threshCols = Array.from(allThreshKeys).map(k => `threshold_${k}`);
+    const header = [
+      'did','device_type','test_kind','test_label','status','timestamp','explain',
+      ...metricCols,
+      ...threshCols
+    ];
+
+    // CSV escape helper
+    const esc = (v) => {
+      const s = v == null ? '' : String(v);
+      return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+    };
+
+    // Header row
+    rows.push(header.map(esc).join(','));
+
+    // Data rows
+    for (const r of results) {
+      const metricVals = metricCols.map(col => {
+        const key = col.replace(/^metric_/, '');
+        return esc(r.metrics[key]);
+      });
+      const threshVals = threshCols.map(col => {
+        const key = col.replace(/^threshold_/, '');
+        return esc(r.thresholds[key]);
+      });
+
+      rows.push([
+        esc(r.did),
+        esc(r.codeName),
+        esc(r.testKind),
+        esc(r.testLabel),
+        esc(r.status),
+        esc(r.ts),
+        esc(r.explain),
+        ...metricVals,
+        ...threshVals
+      ].join(','));
+    }
+
+    const csv = rows.join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    const now = new Date().toISOString().replace(/[:.]/g,'-');
+    a.download = `device_checks_${now}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  document.getElementById('exportChecksCsvBtn')?.addEventListener('mouseup', (ev) => {
+    ev.stopPropagation();
+    exportChecksCSV();
+  });
+
+
+  // Restore open/closed state after re-render
+  function restoreOpenPanels(map) {
+    Object.entries(map || {}).forEach(([did, isOpen]) => {
+      const panel = checksRowsEl.querySelector(`.check-details[data-did="${CSS.escape(did)}"]`);
+      const row   = checksRowsEl.querySelector(`.check-row[data-did="${CSS.escape(did)}"]`);
+      if (!panel || !row) return;
+      if (isOpen) {
+        panel.removeAttribute('hidden');
+        row.classList.add('expanded');
+      } else {
+        panel.setAttribute('hidden','');
+        row.classList.remove('expanded');
+      }
+    });
+  }
+  restoreOpenPanels(openBeforeSwap);
+
+  // Persist current state for future renders
+  window._checksOpen = { ...openBeforeSwap };
+}
+
+
+
+    /* -----------------
+       Tabs switching
+    ------------------*/
+    const pageSites = document.getElementById('page-sites');
+    const pageCache = document.getElementById('page-cache');
+    const pageChecks = document.getElementById('page-checks');
+    const pageMatrix = document.getElementById('page-local-matrix');
+
+    function showPage(which) {
+      pageSites.style.display  = (which === 'sites')  ? '' : 'none';
+      pageCache.style.display  = (which === 'cache')  ? '' : 'none';
+      pageChecks.style.display = (which === 'checks') ? '' : 'none';
+      pageMatrix.style.display = (which === 'matrix') ? '' : 'none';
+    }
+
+    document.getElementById('tab-sites').onclick = () => showPage('sites');
+    document.getElementById('tab-cache').onclick = () => showPage('cache');
+    document.getElementById('tab-checks').onclick = () => showPage('checks');
+
+    document.querySelector('.nav-btn[data-page="page-local-matrix"]')?.addEventListener('click', () => {
+      showPage('matrix');
+
+      // Optional: auto-run if textarea has values
+      const v = document.getElementById('matrix-sids')?.value?.trim();
+      if (v) runLocalMatrix();
+    });
+  </script>
+
+  <script type="module">
+    import "https://cdn.jsdelivr.net/npm/scanbot-web-sdk@8.0.0/bundle/ScanbotSDK.ui2.min.js";
+
+    // -------------------------------------------------------------------------
+    // Toast helpers (Toastify is global from the non-module script tag above)
+    // -------------------------------------------------------------------------
+    function toastOk(msg) {
+      Toastify({
+        text: msg,
+        duration: 2600,
+        gravity: "bottom",
+        position: "center",
+        style: { background: "rgba(34,197,94,0.95)" }
+      }).showToast();
+    }
+
+    function toastErr(msg) {
+      Toastify({
+        text: msg,
+        duration: 3200,
+        gravity: "bottom",
+        position: "center",
+        style: { background: "rgba(239,68,68,0.95)" }
+      }).showToast();
+    }
+
+    function toastInfo(msg) {
+      Toastify({
+        text: msg,
+        duration: 2600,
+        gravity: "bottom",
+        position: "center",
+        style: { background: "rgba(56,189,248,0.95)" }
+      }).showToast();
+    }
+
+    // -------------------------------------------------------------------------
+    // Scanbot init
+    // -------------------------------------------------------------------------
+    const cdn = "https://cdn.jsdelivr.net/npm/scanbot-web-sdk@8.0.0/bundle/bin/complete/";
+    const sdk = await ScanbotSDK.initialize({ enginePath: cdn, licenseKey: "" });
+
+    // -------------------------------------------------------------------------
+    // State
+    // -------------------------------------------------------------------------
+    const accepted = new Map(); // id -> { id, deviceType }
+    const pendingQueue = [];
+    let confirming = false;
+
+    // -------------------------------------------------------------------------
+    // Device ID parsing/validation
+    // -------------------------------------------------------------------------
+    function normalizeCandidate(text) {
+      if (!text) return null;
+
+      let t = String(text).trim().toUpperCase();
+
+      // Convert common separators to '-'
+      t = t.replace(/[:\s_]+/g, "-");
+
+      // If 8 hex chars with no separators, convert to XX-XX-XX-XX
+      if (/^[0-9A-F]{8}$/.test(t)) {
+        t = t.match(/../g).join("-");
+      }
+
+      // If it looks like 4 groups of 2 hex, normalize
+      const parts = t.split("-").filter(Boolean);
+      if (parts.length === 4 && parts.every(p => /^[0-9A-F]{2}$/.test(p))) {
+        t = parts.join("-");
+      }
+
+      return t;
+    }
+
+    function isValidDeviceId(t) {
+      return /^[0-9A-F]{2}(-[0-9A-F]{2}){3}$/.test(t);
+    }
+
+    function makeMiniBtn(label, kind, onClick) {
+      const btn = document.createElement("button");
+      btn.className = `btn mini ${kind}`;
+      btn.textContent = label;
+      btn.onclick = onClick;
+      return btn;
+    }
+
+    function onAction(id, n) {
+      // Placeholder for later: API call, WebSocket emit, etc.
+      toastInfo(`Clicked Action ${n} for ${id}`);
+    }
+
+    // -------------------------------------------------------------------------
+    // Confirm modal (queue-based)
+    // -------------------------------------------------------------------------
+    const modal = document.getElementById("confirm-modal");
+    const confirmTextEl = document.getElementById("confirm-text");
+    const confirmIdEl = document.getElementById("confirm-id");
+    const btnAccept = document.getElementById("btn-accept");
+    const btnDeny = document.getElementById("btn-deny");
+
+    function enqueueForConfirm(id) {
+      if (accepted.has(id)) return;
+      if (pendingQueue.includes(id)) return;
+      pendingQueue.push(id);
+    }
+
+    function processQueue() {
+      if (confirming) return;
+      const next = pendingQueue.shift();
+      if (!next) return;
+      showConfirm(next);
+    }
+
+    function showConfirm(id) {
+      confirming = true;
+      confirmTextEl.textContent = `Add this ID to the table?`;
+      confirmIdEl.textContent = id;
+
+      modal.style.display = "flex";
+
+      const cleanup = () => {
+        modal.style.display = "none";
+        confirming = false;
+      };
+
+      btnAccept.onclick = async () => {
+        cleanup();
+
+        console.log(`We got id ${id}.`);
+
+        if (!accepted.has(id)) {
+          accepted.set(id, { id, deviceType: "" });
+          // renderTable();
+          toastOk(`Added ${id}`);
+          await addDeviceToChecks(id);
+        } else {
+          toastErr(`Already added: ${id}`);
+        }
+
+        processQueue();
+      };
+
+      btnDeny.onclick = () => {
+        cleanup();
+        toastErr(`Denied ${id}`);
+        processQueue();
+      };
+    }
+
+    // Keyboard shortcuts for modal
+    window.addEventListener("keydown", (e) => {
+      if (modal.style.display !== "flex") return;
+      if (e.key === "Escape") btnDeny.click();
+      if (e.key === "Enter") btnAccept.click();
+    });
+
+    // Clicking outside the modal card denies
+    modal.addEventListener("click", (e) => {
+      if (e.target === modal) btnDeny.click();
+    });
+
+    // -------------------------------------------------------------------------
+    // Buttons
+    // -------------------------------------------------------------------------
+    document.getElementById("btn-scan").onclick = async () => {
+      try {
+        const config = new ScanbotSDK.UI.Config.BarcodeScannerScreenConfiguration();
+
+        // Depending on Scanbot version/features, you may be able to restrict formats here.
+        // Example (pseudo): config.barcodeFormats = [ScanbotSDK.BarcodeFormat.CODE_128, ...];
+
+        const result = await ScanbotSDK.UI.createBarcodeScanner(config);
+
+        const items = result?.items ?? [];
+        if (!items.length) {
+          toastErr("No barcodes found.");
+          return;
+        }
+
+        let valid = 0;
+        let invalid = 0;
+        let duplicates = 0;
+
+        for (const item of items) {
+          const raw = item?.barcode?.text ?? "";
+          const norm = normalizeCandidate(raw);
+
+          if (!norm || !isValidDeviceId(norm)) {
+            invalid++;
+            continue;
+          }
+
+          if (accepted.has(norm) || pendingQueue.includes(norm)) {
+            duplicates++;
+            continue;
+          }
+
+          enqueueForConfirm(norm);
+          valid++;
+        }
+
+        if (valid === 0) {
+          toastErr(`No valid device IDs found. Invalid: ${invalid}, duplicates: ${duplicates}.`);
+          return;
+        }
+
+        toastOk(`Found ${valid} valid device ID(s). Confirming…`);
+        processQueue();
+
+      } catch (err) {
+        console.error(err);
+        toastErr("Scanner error. Check console for details.");
+      }
+    };
+
+  </script>
+</body>
+</html>