From 0feedc05b95ed4700ebb4306c0d7c16842282fc4 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:07:03 +0530
Subject: [PATCH 01/45] Harden Pi-hole API proxy and add cached health data

---
 proxy.py | 530 +++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 341 insertions(+), 189 deletions(-)

diff --git a/proxy.py b/proxy.py
index c4084e4..906bccf 100644
--- a/proxy.py
+++ b/proxy.py
@@ -1,42 +1,43 @@
 from flask import Flask, jsonify, send_from_directory, request, Blueprint
 from markupsafe import escape
 import requests
-from flask_cors import CORS
 import os
 import json
 import concurrent.futures
 import threading
+import time
 from urllib.parse import urlparse
 
-# Constants
 NO_PASSWORD = "NO_PASSWORD"
-# Define blocked status codes according to Pi-hole API documentation
+DEFAULT_REFRESH_INTERVAL = 5000
+DEFAULT_CACHE_TTL = 1000
+DEFAULT_REQUEST_TIMEOUT = 10
+SLOW_RESPONSE_MS = 500
+
 BLOCKED_STATUSES = {
-    'GRAVITY', 'REGEX', 'DENYLIST', 
+    'GRAVITY', 'REGEX', 'DENYLIST',
     'EXTERNAL_BLOCKED_IP', 'EXTERNAL_BLOCKED_NULL', 'EXTERNAL_BLOCKED_NXRA',
     'GRAVITY_CNAME', 'REGEX_CNAME', 'DENYLIST_CNAME',
     'DBBUSY', 'SPECIAL_DOMAIN', 'EXTERNAL_BLOCKED_EDE15'
 }
 
 app = Flask(__name__)
-CORS(app)
-
-
 APP_ROOT = os.path.dirname(os.path.realpath(__file__))
 
 
-with open(os.path.join(APP_ROOT, 'config.json')) as f:
-    config = json.load(f)
+def _load_json(filename):
+    with open(os.path.join(APP_ROOT, filename), encoding='utf-8') as handle:
+        return json.load(handle)
 
-with open(os.path.join(APP_ROOT, 'manifest.json')) as f:
-    manifest_data = json.load(f)
 
-with open(os.path.join(APP_ROOT, 'index.html')) as f:
-    index_template = f.read()
+config = _load_json('config.json')
+manifest_data = _load_json('manifest.json')
 
-with open(os.path.join(APP_ROOT, 'sw.js')) as f:
-    sw_template = f.read()
+with open(os.path.join(APP_ROOT, 'index.html'), encoding='utf-8') as handle:
+    index_template = handle.read()
 
+with open(os.path.join(APP_ROOT, 'sw.js'), encoding='utf-8') as handle:
+    sw_template = handle.read()
 
 base_path_config = config.get('base_path', '/')
 url_prefix = base_path_config
@@ -50,282 +51,433 @@
 bp = Blueprint('pi-dash', __name__)
 pihole_sessions = {}
 _sessions_lock = threading.Lock()
+_cache_lock = threading.Lock()
+_stats_refresh_lock = threading.Lock()
+_queries_refresh_lock = threading.Lock()
+_stats_cache = {'time': 0.0, 'data': None}
+_queries_cache = {}
+
+
+def _positive_int(value, default, minimum=100):
+    try:
+        parsed = int(value)
+        return parsed if parsed >= minimum else default
+    except (TypeError, ValueError):
+        return default
+
+
+def get_refresh_interval():
+    return _positive_int(config.get('refresh_interval'), DEFAULT_REFRESH_INTERVAL)
+
+
+def get_queries_refresh_interval():
+    # Backward compatibility: old configs only have refresh_interval, so query
+    # polling keeps the exact same cadence until this new option is configured.
+    return _positive_int(config.get('queries_refresh_interval'), get_refresh_interval())
+
+
+def get_cache_ttl():
+    return _positive_int(config.get('cache_ttl'), DEFAULT_CACHE_TTL, minimum=0)
 
 
-def authenticate_and_get_sid(address, password):
+def resolve_secret(value):
+    """Resolve ${ENV_VAR} secrets while leaving normal config values unchanged."""
+    if not isinstance(value, str):
+        return value
+    if value.startswith('${') and value.endswith('}') and len(value) > 3:
+        env_name = value[2:-1]
+        return os.environ.get(env_name, value)
+    return value
+
+
+def get_verify_setting(pihole_config):
+    """Return a requests-compatible TLS verification setting.
+
+    verify_ssl is optional and defaults to False to preserve existing installs.
+    It may be true/false or a path to a CA bundle.
+    """
+    verify = pihole_config.get('verify_ssl', False)
+    if isinstance(verify, str):
+        lowered = verify.strip().lower()
+        if lowered == 'true':
+            return True
+        if lowered == 'false':
+            return False
+        return resolve_secret(verify)
+    return bool(verify)
+
+
+def get_headers(sid):
+    return {} if sid == NO_PASSWORD else {'X-FTL-SID': sid}
+
+
+def authenticate_and_get_sid(pihole_config):
+    address = pihole_config['address'].rstrip('/')
+    password = resolve_secret(pihole_config.get('password', ''))
     auth_url = f"{address}/api/auth"
     payload = {"password": password}
+    verify = get_verify_setting(pihole_config)
+
     try:
-        response = requests.post(auth_url, json=payload, timeout=10, verify=False)
+        response = requests.post(
+            auth_url,
+            json=payload,
+            timeout=DEFAULT_REQUEST_TIMEOUT,
+            verify=verify,
+        )
         if response.status_code == 200:
             data = response.json()
-            new_sid = data.get("session", {}).get("sid")            
+            new_sid = data.get('session', {}).get('sid')
             if new_sid:
-                print(f"Successfully authenticated with {address} and got new SID.")
                 return new_sid
-            elif data.get("session", {}).get("message") == "no password set":
-                print(f"Pi-hole at {address} has no password set.")
+            if data.get('session', {}).get('message') == 'no password set':
                 return NO_PASSWORD
-            else:
-                print(f"Authentication with {address} returned 200 OK but no SID found. Response: {data}")
-                return None
-        elif response.status_code == 401:
-            print(f"Authentication failed for {address}: Incorrect Password (401 Unauthorized). Please check your password in config.json.")
+            print(f"Authentication with {address} returned 200 but no SID was found.")
             return None
-        else:
-            print(f"Authentication failed for {address} with status code {response.status_code}. Response: {response.text}")
+        if response.status_code == 401:
+            print(f"Authentication failed for {address}: incorrect password.")
             return None
-    except requests.exceptions.RequestException as e:
-        print(f"A network error occurred during authentication with {address}: {e}")
+        print(f"Authentication failed for {address} with HTTP {response.status_code}.")
+        return None
+    except requests.exceptions.RequestException as exc:
+        print(f"Network error while authenticating with {address}: {exc}")
         return None
 
+
+def get_sid(pihole_config, force=False):
+    name = pihole_config['name']
+    if force:
+        with _sessions_lock:
+            pihole_sessions.pop(name, None)
+
+    with _sessions_lock:
+        sid = pihole_sessions.get(name)
+    if sid:
+        return sid
+
+    sid = authenticate_and_get_sid(pihole_config)
+    if sid:
+        with _sessions_lock:
+            pihole_sessions[name] = sid
+    return sid
+
+
+def pihole_get(pihole_config, api_path, params=None):
+    address = pihole_config['address'].rstrip('/')
+    sid = get_sid(pihole_config)
+    if not sid:
+        raise RuntimeError('authentication failed')
+
+    request_args = {
+        'headers': get_headers(sid),
+        'params': params,
+        'timeout': DEFAULT_REQUEST_TIMEOUT,
+        'verify': get_verify_setting(pihole_config),
+    }
+    response = requests.get(f"{address}{api_path}", **request_args)
+
+    if response.status_code == 401 and sid != NO_PASSWORD:
+        sid = get_sid(pihole_config, force=True)
+        if not sid:
+            raise RuntimeError('re-authentication failed')
+        request_args['headers'] = get_headers(sid)
+        response = requests.get(f"{address}{api_path}", **request_args)
+
+    response.raise_for_status()
+    return response
+
+
 # -- Frontend Routes --
 @bp.route('/')
 def index():
-    
     icon_url = ''
     if manifest_data.get('icons'):
         icon_url = manifest_data['icons'][0].get('src', '')
-    
-    
-    base_tag = f'<base href="{escape(html_base)}">' 
+
+    base_tag = f'<base href="{escape(html_base)}">'
     temp_html = index_template.replace('<head>', f'<head>\n    {base_tag}')
-    final_html = temp_html.replace('{{ICON_URL}}', escape(icon_url))
-    
-    return final_html
+    return temp_html.replace('{{ICON_URL}}', escape(icon_url))
+
 
 @bp.route('/manifest.json')
 def serve_manifest():
-    
     manifest_copy = manifest_data.copy()
     manifest_copy['start_url'] = html_base
     return jsonify(manifest_copy)
 
+
 @bp.route('/sw.js')
 def serve_sw():
-    
     sw_content = sw_template.replace('{{CACHE_URL}}', html_base)
     return sw_content, 200, {'Content-Type': 'application/javascript'}
 
+
 @bp.route('/css/<path:path>')
 def send_css(path):
     return send_from_directory(os.path.join(APP_ROOT, 'css'), path)
 
+
 @bp.route('/js/<path:path>')
 def send_js(path):
     return send_from_directory(os.path.join(APP_ROOT, 'js'), path)
 
+
 @bp.route('/favicon.ico')
 def favicon():
     return '', 204
 
-# -- API Routes --
+
+# -- API helpers --
+def get_enabled_piholes():
+    return [p for p in config.get('piholes', []) if p.get('enabled', True)]
+
+
 def get_filtered_config():
-    
     piholes_filtered = []
-    for p in config["piholes"]:
-        if not p.get("enabled", True):
-            continue
+    for pihole in get_enabled_piholes():
         item = {
-            "name": p["name"],
-            "enabled": p["enabled"],
-            "link": p.get("link", False)
+            'name': pihole['name'],
+            'enabled': True,
+            'link': pihole.get('link', False),
         }
-        if item["link"]:
-            
-            item["address"] = p["address"]
+        if item['link']:
+            item['address'] = pihole['address']
         piholes_filtered.append(item)
+
     return {
-        "refresh_interval": config.get("refresh_interval", 5000),
-        "piholes": piholes_filtered,
-        "show_queries": config.get("show_queries", False)
+        'refresh_interval': get_refresh_interval(),
+        'queries_refresh_interval': get_queries_refresh_interval(),
+        'show_queries': config.get('show_queries', False),
+        'show_network_summary': config.get('show_network_summary', True),
+        'show_trends': config.get('show_trends', True),
+        'piholes': piholes_filtered,
     }
 
-def get_pihole_data(address, sid):
-    url = f"{address}/api/stats/summary"
-    headers = {} if sid == NO_PASSWORD else {'X-FTL-SID': sid}
-    return requests.get(url, headers=headers, timeout=10, verify=False)
 
-def fetch_all_pihole_data():
-    enabled_piholes = [p for p in config['piholes'] if p.get('enabled', True)]
-    results = {}
-    
-    def fetch_single_pihole(pihole_config):
-        name = pihole_config['name']
-        address = pihole_config['address']
-        password = pihole_config['password']
-        
-        
-        with _sessions_lock:
-            sid = pihole_sessions.get(name)
-        if not sid:
-            sid = authenticate_and_get_sid(address, password)
-            if not sid:
-                return name, {"error": f"Authentication failed for Pi-hole '{name}'"}
-            with _sessions_lock:
-                pihole_sessions[name] = sid
-        
+def fetch_single_pihole(pihole_config):
+    name = pihole_config['name']
+    start = time.perf_counter()
+    try:
+        response = pihole_get(pihole_config, '/api/stats/summary')
+        latency_ms = round((time.perf_counter() - start) * 1000, 1)
+        data = response.json()
+
+        # Blocking status is useful health information but must not make the
+        # whole card fail if an older/changed Pi-hole API does not provide it.
+        blocking = None
         try:
-            response = get_pihole_data(address, sid)
-            if response.status_code == 401 and sid != NO_PASSWORD:
-                
-                print(f"SID for Pi-hole '{name}' expired. Re-authenticating...")
-                with _sessions_lock:
-                    pihole_sessions.pop(name, None)
-                sid = authenticate_and_get_sid(address, password)
-                if not sid:
-                    return name, {"error": f"Re-authentication failed for Pi-hole '{name}'"}
-                with _sessions_lock:
-                    pihole_sessions[name] = sid
-                response = get_pihole_data(address, sid)
-            
-            response.raise_for_status()
-            return name, response.json()
-        except requests.exceptions.RequestException as e:
-            return name, {"error": str(e)}
-    
-    
-    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(enabled_piholes), 10)) as executor:
-        future_to_pihole = {
-            executor.submit(fetch_single_pihole, pihole): pihole 
-            for pihole in enabled_piholes
+            blocking_response = pihole_get(pihole_config, '/api/dns/blocking')
+            blocking = blocking_response.json().get('blocking')
+        except (requests.exceptions.RequestException, RuntimeError, ValueError):
+            pass
+
+        data['_pi_dash'] = {
+            'latency_ms': latency_ms,
+            'blocking': blocking,
+            'health': 'slow' if latency_ms >= SLOW_RESPONSE_MS else 'healthy',
         }
-        
-        for future in concurrent.futures.as_completed(future_to_pihole):
+        return name, data
+    except RuntimeError as exc:
+        return name, {'error': str(exc), '_pi_dash': {'health': 'auth_error'}}
+    except requests.exceptions.RequestException as exc:
+        return name, {'error': str(exc), '_pi_dash': {'health': 'unreachable'}}
+    except ValueError as exc:
+        return name, {'error': f'Invalid JSON response: {exc}', '_pi_dash': {'health': 'unreachable'}}
+
+
+def _fetch_all_pihole_data_uncached():
+    enabled_piholes = get_enabled_piholes()
+    if not enabled_piholes:
+        return {}
+
+    results = {}
+    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(enabled_piholes), 10)) as executor:
+        futures = [executor.submit(fetch_single_pihole, pihole) for pihole in enabled_piholes]
+        for future in concurrent.futures.as_completed(futures):
             name, data = future.result()
             results[name] = data
-    
     return results
 
-def fetch_recent_queries(length=50):
-    """Fetch recent queries from all enabled Pi-holes.
 
-    Returns a dict mapping pihole name to list of queries. Each query is
-    represented minimally with keys: domain, status (blocked or allowed)
-    and optionally type/time if available.
-    """
-    enabled_piholes = [p for p in config['piholes'] if p.get('enabled', True)]
+def fetch_all_pihole_data(force=False):
+    ttl_seconds = get_cache_ttl() / 1000.0
+    now = time.monotonic()
+    with _cache_lock:
+        if not force and _stats_cache['data'] is not None and now - _stats_cache['time'] < ttl_seconds:
+            return _stats_cache['data']
+
+    with _stats_refresh_lock:
+        now = time.monotonic()
+        with _cache_lock:
+            if not force and _stats_cache['data'] is not None and now - _stats_cache['time'] < ttl_seconds:
+                return _stats_cache['data']
+
+        data = _fetch_all_pihole_data_uncached()
+        with _cache_lock:
+            _stats_cache['time'] = time.monotonic()
+            _stats_cache['data'] = data
+        return data
+
+
+def _fetch_recent_queries_uncached(length=50):
+    enabled_piholes = get_enabled_piholes()
+    if not enabled_piholes:
+        return {}
+
     results = {}
-    
-    # Extract all Pi-hole hostnames to filter cross-Pi-hole queries
     pihole_hostnames = set()
-    for p in enabled_piholes:
-        parsed = urlparse(p['address'])
-        hostname = parsed.hostname or parsed.netloc.split(':')[0] if parsed.netloc else None
+    for pihole in enabled_piholes:
+        parsed = urlparse(pihole['address'])
+        hostname = parsed.hostname or (parsed.netloc.split(':')[0] if parsed.netloc else None)
         if hostname:
             pihole_hostnames.add(hostname.lower())
 
     def fetch_queries_for_pihole(pihole_config):
         name = pihole_config['name']
-        address = pihole_config['address']
-        password = pihole_config['password']
-
-        with _sessions_lock:
-            sid = pihole_sessions.get(name)
-        if not sid:
-            sid = authenticate_and_get_sid(address, password)
-            if not sid:
-                return name, []
-            with _sessions_lock:
-                pihole_sessions[name] = sid
-        headers = {} if sid == NO_PASSWORD else {'X-FTL-SID': sid}
-        url = f"{address}/api/queries?length={length}"
         try:
-            r = requests.get(url, headers=headers, timeout=10, verify=False)
-            if r.status_code == 401 and sid != NO_PASSWORD:
-                # attempt re-auth
-                with _sessions_lock:
-                    pihole_sessions.pop(name, None)
-                sid = authenticate_and_get_sid(address, password)
-                if not sid:
-                    return name, []
-                with _sessions_lock:
-                    pihole_sessions[name] = sid
-                headers = {} if sid == NO_PASSWORD else {'X-FTL-SID': sid}
-                r = requests.get(url, headers=headers, timeout=10, verify=False)
-            r.raise_for_status()
-            data = r.json()
-            
+            response = pihole_get(pihole_config, '/api/queries', params={'length': length})
+            data = response.json()
             normalized = []
-            for q in data.get('queries', [])[:length]:
-                original_domain = q.get('domain', '')
+            for query in data.get('queries', [])[:length]:
+                original_domain = query.get('domain', '')
                 domain = original_domain.lower().strip()
-                status = (q.get('status') or '').upper()
-                ts = q.get('time') or q.get('timestamp')
-                upstream = q.get('upstream', '')
-                qid = q.get('id')
-                
-                # Skip queries to ANY Pi-hole hostname (not just this one)
                 if domain in pihole_hostnames:
                     continue
-                
-                # Check if status matches any blocked status
-                blocked = status in BLOCKED_STATUSES
-                
+
+                status = (query.get('status') or '').upper()
+                timestamp = query.get('time') or query.get('timestamp')
                 normalized.append({
-                    'id': qid,
-                    'domain': original_domain,  # preserve original casing for display
-                    'blocked': blocked,
-                    'time': ts,
-                    'timestamp': ts,  # legacy compatibility
-                    'upstream': upstream
+                    'id': query.get('id'),
+                    'domain': original_domain,
+                    'blocked': status in BLOCKED_STATUSES,
+                    'time': timestamp,
+                    'timestamp': timestamp,
+                    'upstream': query.get('upstream', ''),
                 })
-            
             return name, normalized
-        except requests.exceptions.RequestException:
+        except (requests.exceptions.RequestException, RuntimeError, ValueError):
             return name, []
 
     with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(enabled_piholes), 10)) as executor:
-        future_to_pihole = {executor.submit(fetch_queries_for_pihole, p): p for p in enabled_piholes}
-        for future in concurrent.futures.as_completed(future_to_pihole):
+        futures = [executor.submit(fetch_queries_for_pihole, pihole) for pihole in enabled_piholes]
+        for future in concurrent.futures.as_completed(futures):
             name, data = future.result()
             results[name] = data
     return results
 
+
+def fetch_recent_queries(length=50, force=False):
+    ttl_seconds = get_cache_ttl() / 1000.0
+    now = time.monotonic()
+    with _cache_lock:
+        cached = _queries_cache.get(length)
+        if not force and cached and now - cached['time'] < ttl_seconds:
+            return cached['data']
+
+    with _queries_refresh_lock:
+        now = time.monotonic()
+        with _cache_lock:
+            cached = _queries_cache.get(length)
+            if not force and cached and now - cached['time'] < ttl_seconds:
+                return cached['data']
+
+        data = _fetch_recent_queries_uncached(length)
+        with _cache_lock:
+            _queries_cache[length] = {'time': time.monotonic(), 'data': data}
+        return data
+
+
+def build_network_summary(pihole_data):
+    total = blocked = cached = forwarded = 0
+    healthy = slow = offline = 0
+    contributing = 0
+
+    for data in pihole_data.values():
+        if data.get('error') or not data.get('queries'):
+            offline += 1
+            continue
+        contributing += 1
+        queries = data.get('queries', {})
+        total += int(queries.get('total') or 0)
+        blocked += int(queries.get('blocked') or 0)
+        cached += int(queries.get('cached') or 0)
+        forwarded += int(queries.get('forwarded') or 0)
+        if data.get('_pi_dash', {}).get('health') == 'slow':
+            slow += 1
+        else:
+            healthy += 1
+
+    return {
+        'total_queries': total,
+        'blocked_queries': blocked,
+        'percent_blocked': round((blocked / total * 100), 1) if total else 0,
+        'cached_queries': cached,
+        'forwarded_queries': forwarded,
+        'instances': len(pihole_data),
+        'contributing_instances': contributing,
+        'healthy_instances': healthy,
+        'slow_instances': slow,
+        'offline_instances': offline,
+    }
+
+
+# -- API Routes --
 @bp.route('/init')
 def init():
     try:
         filtered_config = get_filtered_config()
         pihole_data = fetch_all_pihole_data()
         response_data = {
-            "config": filtered_config,
-            "data": pihole_data
+            'config': filtered_config,
+            'data': pihole_data,
+            'summary': build_network_summary(pihole_data),
         }
-        if config.get("show_queries", False):
-            response_data["queries"] = fetch_recent_queries(length=50)
+        if config.get('show_queries', False):
+            response_data['queries'] = fetch_recent_queries(length=50)
         return jsonify(response_data)
-    except Exception as e:
-        return jsonify({"error": str(e)}), 500
+    except Exception as exc:
+        return jsonify({'error': str(exc)}), 500
+
 
 @bp.route('/data')
 def data():
     try:
         pihole_data = fetch_all_pihole_data()
-        
-        
+        # Preserve the legacy bare-object response unless callers explicitly
+        # request the richer payload.
+        include_summary = request.args.get('include_summary', 'false').lower() == 'true'
         include_queries = request.args.get('include_queries', 'false').lower() == 'true'
+        if not include_summary and not include_queries:
+            return jsonify(pihole_data)
+
+        response_data = {'stats': pihole_data}
+        if include_summary:
+            response_data['summary'] = build_network_summary(pihole_data)
         if include_queries:
-            length = int(request.args.get('length', 50))
-            length = max(1, min(length, 200))
-            queries_data = fetch_recent_queries(length=length)
-            return jsonify({
-                "stats": pihole_data,
-                "queries": queries_data
-            })
-        
-        return jsonify(pihole_data)
-    except Exception as e:
-        return jsonify({"error": str(e)}), 500
+            length = max(1, min(int(request.args.get('length', 50)), 200))
+            response_data['queries'] = fetch_recent_queries(length=length)
+        return jsonify(response_data)
+    except Exception as exc:
+        return jsonify({'error': str(exc)}), 500
+
 
 @bp.route('/queries')
 def queries():
     try:
-        length = int(request.args.get('length', 50))
-        length = max(1, min(length, 200))  # clamp
-        queries_data = fetch_recent_queries(length=length)
-        return jsonify(queries_data)
-    except Exception as e:
-        return jsonify({"error": str(e)}), 500
+        length = max(1, min(int(request.args.get('length', 50)), 200))
+        return jsonify(fetch_recent_queries(length=length))
+    except Exception as exc:
+        return jsonify({'error': str(exc)}), 500
+
+
+@bp.route('/health')
+def health():
+    enabled = get_enabled_piholes()
+    return jsonify({
+        'status': 'ok',
+        'enabled_piholes': len(enabled),
+        'cache_ttl_ms': get_cache_ttl(),
+    })
 
 
 app.register_blueprint(bp, url_prefix=url_prefix)

From efc02c7461493a6184dc250156ef1e1e2ba5cfec Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:22:13 +0530
Subject: [PATCH 02/45] Refine cache behavior and blocking status polling

---
 proxy.py | 579 +++++++++++++++----------------------------------------
 1 file changed, 154 insertions(+), 425 deletions(-)

diff --git a/proxy.py b/proxy.py
index 906bccf..cf97ac2 100644
--- a/proxy.py
+++ b/proxy.py
@@ -1,486 +1,215 @@
 from flask import Flask, jsonify, send_from_directory, request, Blueprint
 from markupsafe import escape
 import requests
-import os
-import json
-import concurrent.futures
-import threading
-import time
+import os, json, concurrent.futures, threading, time
 from urllib.parse import urlparse
 
 NO_PASSWORD = "NO_PASSWORD"
 DEFAULT_REFRESH_INTERVAL = 5000
-DEFAULT_CACHE_TTL = 1000
 DEFAULT_REQUEST_TIMEOUT = 10
+DEFAULT_CACHE_TTL = 1000
+DEFAULT_BLOCKING_TTL = 30000
 SLOW_RESPONSE_MS = 500
-
-BLOCKED_STATUSES = {
-    'GRAVITY', 'REGEX', 'DENYLIST',
-    'EXTERNAL_BLOCKED_IP', 'EXTERNAL_BLOCKED_NULL', 'EXTERNAL_BLOCKED_NXRA',
-    'GRAVITY_CNAME', 'REGEX_CNAME', 'DENYLIST_CNAME',
-    'DBBUSY', 'SPECIAL_DOMAIN', 'EXTERNAL_BLOCKED_EDE15'
-}
+BLOCKED_STATUSES = {'GRAVITY','REGEX','DENYLIST','EXTERNAL_BLOCKED_IP','EXTERNAL_BLOCKED_NULL','EXTERNAL_BLOCKED_NXRA','GRAVITY_CNAME','REGEX_CNAME','DENYLIST_CNAME','DBBUSY','SPECIAL_DOMAIN','EXTERNAL_BLOCKED_EDE15'}
 
 app = Flask(__name__)
 APP_ROOT = os.path.dirname(os.path.realpath(__file__))
 
-
-def _load_json(filename):
-    with open(os.path.join(APP_ROOT, filename), encoding='utf-8') as handle:
-        return json.load(handle)
-
-
+def _load_json(name):
+    with open(os.path.join(APP_ROOT, name), encoding='utf-8') as f: return json.load(f)
 config = _load_json('config.json')
 manifest_data = _load_json('manifest.json')
+with open(os.path.join(APP_ROOT,'index.html'),encoding='utf-8') as f: index_template=f.read()
+with open(os.path.join(APP_ROOT,'sw.js'),encoding='utf-8') as f: sw_template=f.read()
 
-with open(os.path.join(APP_ROOT, 'index.html'), encoding='utf-8') as handle:
-    index_template = handle.read()
+base_path_config=config.get('base_path','/')
+url_prefix=base_path_config[:-1] if base_path_config!='/' and base_path_config.endswith('/') else base_path_config
+html_base=base_path_config if base_path_config.endswith('/') else base_path_config+'/'
+bp=Blueprint('pi-dash',__name__)
+pihole_sessions={}; _sessions_lock=threading.Lock(); _cache_lock=threading.Lock(); _stats_refresh_lock=threading.Lock(); _queries_refresh_lock=threading.Lock(); _blocking_lock=threading.Lock()
+_stats_cache={'time':0.0,'data':None}; _queries_cache={}; _blocking_cache={}
 
-with open(os.path.join(APP_ROOT, 'sw.js'), encoding='utf-8') as handle:
-    sw_template = handle.read()
-
-base_path_config = config.get('base_path', '/')
-url_prefix = base_path_config
-if url_prefix != '/' and url_prefix.endswith('/'):
-    url_prefix = url_prefix[:-1]
-
-html_base = base_path_config
-if not html_base.endswith('/'):
-    html_base += '/'
-
-bp = Blueprint('pi-dash', __name__)
-pihole_sessions = {}
-_sessions_lock = threading.Lock()
-_cache_lock = threading.Lock()
-_stats_refresh_lock = threading.Lock()
-_queries_refresh_lock = threading.Lock()
-_stats_cache = {'time': 0.0, 'data': None}
-_queries_cache = {}
-
-
-def _positive_int(value, default, minimum=100):
+def _int(value, default, minimum=100):
     try:
-        parsed = int(value)
-        return parsed if parsed >= minimum else default
-    except (TypeError, ValueError):
-        return default
-
-
-def get_refresh_interval():
-    return _positive_int(config.get('refresh_interval'), DEFAULT_REFRESH_INTERVAL)
-
-
-def get_queries_refresh_interval():
-    # Backward compatibility: old configs only have refresh_interval, so query
-    # polling keeps the exact same cadence until this new option is configured.
-    return _positive_int(config.get('queries_refresh_interval'), get_refresh_interval())
-
+        value=int(value); return value if value>=minimum else default
+    except (TypeError,ValueError): return default
 
+def get_refresh_interval(): return _int(config.get('refresh_interval'),DEFAULT_REFRESH_INTERVAL)
+def get_queries_refresh_interval(): return _int(config.get('queries_refresh_interval'),get_refresh_interval())
 def get_cache_ttl():
-    return _positive_int(config.get('cache_ttl'), DEFAULT_CACHE_TTL, minimum=0)
-
-
+    if 'cache_ttl' in config: return _int(config.get('cache_ttl'),DEFAULT_CACHE_TTL,0)
+    return min(DEFAULT_CACHE_TTL,max(100,min(get_refresh_interval(),get_queries_refresh_interval())//2))
 def resolve_secret(value):
-    """Resolve ${ENV_VAR} secrets while leaving normal config values unchanged."""
-    if not isinstance(value, str):
-        return value
-    if value.startswith('${') and value.endswith('}') and len(value) > 3:
-        env_name = value[2:-1]
-        return os.environ.get(env_name, value)
+    if isinstance(value,str) and value.startswith('${') and value.endswith('}'):
+        return os.environ.get(value[2:-1],value)
     return value
-
-
-def get_verify_setting(pihole_config):
-    """Return a requests-compatible TLS verification setting.
-
-    verify_ssl is optional and defaults to False to preserve existing installs.
-    It may be true/false or a path to a CA bundle.
-    """
-    verify = pihole_config.get('verify_ssl', False)
-    if isinstance(verify, str):
-        lowered = verify.strip().lower()
-        if lowered == 'true':
-            return True
-        if lowered == 'false':
-            return False
-        return resolve_secret(verify)
-    return bool(verify)
-
-
-def get_headers(sid):
-    return {} if sid == NO_PASSWORD else {'X-FTL-SID': sid}
-
-
-def authenticate_and_get_sid(pihole_config):
-    address = pihole_config['address'].rstrip('/')
-    password = resolve_secret(pihole_config.get('password', ''))
-    auth_url = f"{address}/api/auth"
-    payload = {"password": password}
-    verify = get_verify_setting(pihole_config)
-
+def get_verify_setting(p):
+    v=p.get('verify_ssl',False)
+    if isinstance(v,str):
+        if v.lower()=='true': return True
+        if v.lower()=='false': return False
+        return resolve_secret(v)
+    return bool(v)
+def headers(sid): return {} if sid==NO_PASSWORD else {'X-FTL-SID':sid}
+
+def authenticate_and_get_sid(p):
+    address=p['address'].rstrip('/')
     try:
-        response = requests.post(
-            auth_url,
-            json=payload,
-            timeout=DEFAULT_REQUEST_TIMEOUT,
-            verify=verify,
-        )
-        if response.status_code == 200:
-            data = response.json()
-            new_sid = data.get('session', {}).get('sid')
-            if new_sid:
-                return new_sid
-            if data.get('session', {}).get('message') == 'no password set':
-                return NO_PASSWORD
-            print(f"Authentication with {address} returned 200 but no SID was found.")
-            return None
-        if response.status_code == 401:
-            print(f"Authentication failed for {address}: incorrect password.")
-            return None
-        print(f"Authentication failed for {address} with HTTP {response.status_code}.")
-        return None
-    except requests.exceptions.RequestException as exc:
-        print(f"Network error while authenticating with {address}: {exc}")
+        r=requests.post(address+'/api/auth',json={'password':resolve_secret(p.get('password',''))},timeout=DEFAULT_REQUEST_TIMEOUT,verify=get_verify_setting(p))
+        if r.status_code==200:
+            d=r.json(); sid=d.get('session',{}).get('sid')
+            if sid: return sid
+            if d.get('session',{}).get('message')=='no password set': return NO_PASSWORD
         return None
+    except requests.exceptions.RequestException: return None
 
-
-def get_sid(pihole_config, force=False):
-    name = pihole_config['name']
-    if force:
-        with _sessions_lock:
-            pihole_sessions.pop(name, None)
-
+def get_sid(p,force=False):
+    name=p['name']
     with _sessions_lock:
-        sid = pihole_sessions.get(name)
-    if sid:
-        return sid
-
-    sid = authenticate_and_get_sid(pihole_config)
+        if force: pihole_sessions.pop(name,None)
+        sid=pihole_sessions.get(name)
+    if sid: return sid
+    sid=authenticate_and_get_sid(p)
     if sid:
-        with _sessions_lock:
-            pihole_sessions[name] = sid
+        with _sessions_lock: pihole_sessions[name]=sid
     return sid
 
+def pihole_get(p,path,params=None):
+    sid=get_sid(p)
+    if not sid: raise RuntimeError('authentication failed')
+    args={'headers':headers(sid),'params':params,'timeout':DEFAULT_REQUEST_TIMEOUT,'verify':get_verify_setting(p)}
+    r=requests.get(p['address'].rstrip('/')+path,**args)
+    if r.status_code==401 and sid!=NO_PASSWORD:
+        sid=get_sid(p,True)
+        if not sid: raise RuntimeError('re-authentication failed')
+        args['headers']=headers(sid); r=requests.get(p['address'].rstrip('/')+path,**args)
+    r.raise_for_status(); return r
 
-def pihole_get(pihole_config, api_path, params=None):
-    address = pihole_config['address'].rstrip('/')
-    sid = get_sid(pihole_config)
-    if not sid:
-        raise RuntimeError('authentication failed')
-
-    request_args = {
-        'headers': get_headers(sid),
-        'params': params,
-        'timeout': DEFAULT_REQUEST_TIMEOUT,
-        'verify': get_verify_setting(pihole_config),
-    }
-    response = requests.get(f"{address}{api_path}", **request_args)
-
-    if response.status_code == 401 and sid != NO_PASSWORD:
-        sid = get_sid(pihole_config, force=True)
-        if not sid:
-            raise RuntimeError('re-authentication failed')
-        request_args['headers'] = get_headers(sid)
-        response = requests.get(f"{address}{api_path}", **request_args)
-
-    response.raise_for_status()
-    return response
-
-
-# -- Frontend Routes --
 @bp.route('/')
 def index():
-    icon_url = ''
-    if manifest_data.get('icons'):
-        icon_url = manifest_data['icons'][0].get('src', '')
-
-    base_tag = f'<base href="{escape(html_base)}">'
-    temp_html = index_template.replace('<head>', f'<head>\n    {base_tag}')
-    return temp_html.replace('{{ICON_URL}}', escape(icon_url))
-
-
+    icon=(manifest_data.get('icons') or [{}])[0].get('src','')
+    return index_template.replace('<head>',f'<head>\n    <base href="{escape(html_base)}">').replace('{{ICON_URL}}',escape(icon))
 @bp.route('/manifest.json')
 def serve_manifest():
-    manifest_copy = manifest_data.copy()
-    manifest_copy['start_url'] = html_base
-    return jsonify(manifest_copy)
-
-
+    d=manifest_data.copy(); d['start_url']=html_base; return jsonify(d)
 @bp.route('/sw.js')
-def serve_sw():
-    sw_content = sw_template.replace('{{CACHE_URL}}', html_base)
-    return sw_content, 200, {'Content-Type': 'application/javascript'}
-
-
+def serve_sw(): return sw_template.replace('{{CACHE_URL}}',html_base),200,{'Content-Type':'application/javascript','Cache-Control':'no-cache'}
 @bp.route('/css/<path:path>')
-def send_css(path):
-    return send_from_directory(os.path.join(APP_ROOT, 'css'), path)
-
-
+def send_css(path): return send_from_directory(os.path.join(APP_ROOT,'css'),path)
 @bp.route('/js/<path:path>')
-def send_js(path):
-    return send_from_directory(os.path.join(APP_ROOT, 'js'), path)
-
-
+def send_js(path): return send_from_directory(os.path.join(APP_ROOT,'js'),path)
 @bp.route('/favicon.ico')
-def favicon():
-    return '', 204
-
-
-# -- API helpers --
-def get_enabled_piholes():
-    return [p for p in config.get('piholes', []) if p.get('enabled', True)]
-
-
-def get_filtered_config():
-    piholes_filtered = []
-    for pihole in get_enabled_piholes():
-        item = {
-            'name': pihole['name'],
-            'enabled': True,
-            'link': pihole.get('link', False),
-        }
-        if item['link']:
-            item['address'] = pihole['address']
-        piholes_filtered.append(item)
-
-    return {
-        'refresh_interval': get_refresh_interval(),
-        'queries_refresh_interval': get_queries_refresh_interval(),
-        'show_queries': config.get('show_queries', False),
-        'show_network_summary': config.get('show_network_summary', True),
-        'show_trends': config.get('show_trends', True),
-        'piholes': piholes_filtered,
-    }
-
+def favicon(): return '',204
+
+def enabled(): return [p for p in config.get('piholes',[]) if p.get('enabled',True)]
+def filtered_config():
+    out=[]
+    for p in enabled():
+        item={'name':p['name'],'enabled':True,'link':p.get('link',False)}
+        if item['link']: item['address']=p['address']
+        out.append(item)
+    return {'refresh_interval':get_refresh_interval(),'queries_refresh_interval':get_queries_refresh_interval(),'show_queries':config.get('show_queries',False),'show_network_summary':config.get('show_network_summary',True),'show_trends':config.get('show_trends',True),'piholes':out}
+
+def get_blocking(p):
+    name=p['name']; now=time.monotonic()
+    with _cache_lock:
+        c=_blocking_cache.get(name)
+        if c and now-c['time']<DEFAULT_BLOCKING_TTL/1000: return c['value']
+    with _blocking_lock:
+        try: value=pihole_get(p,'/api/dns/blocking').json().get('blocking')
+        except Exception: value=None
+        with _cache_lock: _blocking_cache[name]={'time':time.monotonic(),'value':value}
+        return value
 
-def fetch_single_pihole(pihole_config):
-    name = pihole_config['name']
-    start = time.perf_counter()
+def fetch_one(p):
+    start=time.perf_counter(); name=p['name']
     try:
-        response = pihole_get(pihole_config, '/api/stats/summary')
-        latency_ms = round((time.perf_counter() - start) * 1000, 1)
-        data = response.json()
-
-        # Blocking status is useful health information but must not make the
-        # whole card fail if an older/changed Pi-hole API does not provide it.
-        blocking = None
-        try:
-            blocking_response = pihole_get(pihole_config, '/api/dns/blocking')
-            blocking = blocking_response.json().get('blocking')
-        except (requests.exceptions.RequestException, RuntimeError, ValueError):
-            pass
-
-        data['_pi_dash'] = {
-            'latency_ms': latency_ms,
-            'blocking': blocking,
-            'health': 'slow' if latency_ms >= SLOW_RESPONSE_MS else 'healthy',
-        }
-        return name, data
-    except RuntimeError as exc:
-        return name, {'error': str(exc), '_pi_dash': {'health': 'auth_error'}}
-    except requests.exceptions.RequestException as exc:
-        return name, {'error': str(exc), '_pi_dash': {'health': 'unreachable'}}
-    except ValueError as exc:
-        return name, {'error': f'Invalid JSON response: {exc}', '_pi_dash': {'health': 'unreachable'}}
-
-
-def _fetch_all_pihole_data_uncached():
-    enabled_piholes = get_enabled_piholes()
-    if not enabled_piholes:
-        return {}
-
-    results = {}
-    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(enabled_piholes), 10)) as executor:
-        futures = [executor.submit(fetch_single_pihole, pihole) for pihole in enabled_piholes]
-        for future in concurrent.futures.as_completed(futures):
-            name, data = future.result()
-            results[name] = data
+        r=pihole_get(p,'/api/stats/summary'); latency=round((time.perf_counter()-start)*1000,1); d=r.json()
+        d['_pi_dash']={'latency_ms':latency,'blocking':get_blocking(p),'health':'slow' if latency>=SLOW_RESPONSE_MS else 'healthy'}
+        return name,d
+    except RuntimeError as e: return name,{'error':str(e),'_pi_dash':{'health':'auth_error'}}
+    except Exception as e: return name,{'error':str(e),'_pi_dash':{'health':'unreachable'}}
+
+def _stats_uncached():
+    items=enabled(); results={}
+    if not items: return results
+    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(items),10)) as ex:
+        for f in concurrent.futures.as_completed([ex.submit(fetch_one,p) for p in items]):
+            n,d=f.result(); results[n]=d
     return results
 
-
-def fetch_all_pihole_data(force=False):
-    ttl_seconds = get_cache_ttl() / 1000.0
-    now = time.monotonic()
+def fetch_stats(force=False):
+    ttl=get_cache_ttl()/1000; now=time.monotonic()
     with _cache_lock:
-        if not force and _stats_cache['data'] is not None and now - _stats_cache['time'] < ttl_seconds:
-            return _stats_cache['data']
-
+        if not force and _stats_cache['data'] is not None and now-_stats_cache['time']<ttl: return _stats_cache['data']
     with _stats_refresh_lock:
-        now = time.monotonic()
+        now=time.monotonic()
         with _cache_lock:
-            if not force and _stats_cache['data'] is not None and now - _stats_cache['time'] < ttl_seconds:
-                return _stats_cache['data']
-
-        data = _fetch_all_pihole_data_uncached()
-        with _cache_lock:
-            _stats_cache['time'] = time.monotonic()
-            _stats_cache['data'] = data
-        return data
-
-
-def _fetch_recent_queries_uncached(length=50):
-    enabled_piholes = get_enabled_piholes()
-    if not enabled_piholes:
-        return {}
-
-    results = {}
-    pihole_hostnames = set()
-    for pihole in enabled_piholes:
-        parsed = urlparse(pihole['address'])
-        hostname = parsed.hostname or (parsed.netloc.split(':')[0] if parsed.netloc else None)
-        if hostname:
-            pihole_hostnames.add(hostname.lower())
-
-    def fetch_queries_for_pihole(pihole_config):
-        name = pihole_config['name']
+            if not force and _stats_cache['data'] is not None and now-_stats_cache['time']<ttl: return _stats_cache['data']
+        d=_stats_uncached()
+        with _cache_lock: _stats_cache.update(time=time.monotonic(),data=d)
+        return d
+
+def _queries_uncached(length):
+    items=enabled(); results={}
+    if not items: return results
+    hosts={urlparse(p['address']).hostname.lower() for p in items if urlparse(p['address']).hostname}
+    def one(p):
         try:
-            response = pihole_get(pihole_config, '/api/queries', params={'length': length})
-            data = response.json()
-            normalized = []
-            for query in data.get('queries', [])[:length]:
-                original_domain = query.get('domain', '')
-                domain = original_domain.lower().strip()
-                if domain in pihole_hostnames:
-                    continue
-
-                status = (query.get('status') or '').upper()
-                timestamp = query.get('time') or query.get('timestamp')
-                normalized.append({
-                    'id': query.get('id'),
-                    'domain': original_domain,
-                    'blocked': status in BLOCKED_STATUSES,
-                    'time': timestamp,
-                    'timestamp': timestamp,
-                    'upstream': query.get('upstream', ''),
-                })
-            return name, normalized
-        except (requests.exceptions.RequestException, RuntimeError, ValueError):
-            return name, []
-
-    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(enabled_piholes), 10)) as executor:
-        futures = [executor.submit(fetch_queries_for_pihole, pihole) for pihole in enabled_piholes]
-        for future in concurrent.futures.as_completed(futures):
-            name, data = future.result()
-            results[name] = data
+            data=pihole_get(p,'/api/queries',{'length':length}).json(); out=[]
+            for q in data.get('queries',[])[:length]:
+                domain=q.get('domain',''); ts=q.get('time') or q.get('timestamp')
+                if domain.lower().strip() in hosts: continue
+                out.append({'id':q.get('id'),'domain':domain,'blocked':(q.get('status') or '').upper() in BLOCKED_STATUSES,'time':ts,'timestamp':ts,'upstream':q.get('upstream','')})
+            return p['name'],out
+        except Exception: return p['name'],[]
+    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(items),10)) as ex:
+        for f in concurrent.futures.as_completed([ex.submit(one,p) for p in items]):
+            n,d=f.result(); results[n]=d
     return results
 
-
-def fetch_recent_queries(length=50, force=False):
-    ttl_seconds = get_cache_ttl() / 1000.0
-    now = time.monotonic()
+def fetch_queries(length=50,force=False):
+    ttl=get_cache_ttl()/1000; now=time.monotonic()
     with _cache_lock:
-        cached = _queries_cache.get(length)
-        if not force and cached and now - cached['time'] < ttl_seconds:
-            return cached['data']
-
+        c=_queries_cache.get(length)
+        if not force and c and now-c['time']<ttl: return c['data']
     with _queries_refresh_lock:
-        now = time.monotonic()
-        with _cache_lock:
-            cached = _queries_cache.get(length)
-            if not force and cached and now - cached['time'] < ttl_seconds:
-                return cached['data']
-
-        data = _fetch_recent_queries_uncached(length)
-        with _cache_lock:
-            _queries_cache[length] = {'time': time.monotonic(), 'data': data}
-        return data
-
-
-def build_network_summary(pihole_data):
-    total = blocked = cached = forwarded = 0
-    healthy = slow = offline = 0
-    contributing = 0
-
-    for data in pihole_data.values():
-        if data.get('error') or not data.get('queries'):
-            offline += 1
-            continue
-        contributing += 1
-        queries = data.get('queries', {})
-        total += int(queries.get('total') or 0)
-        blocked += int(queries.get('blocked') or 0)
-        cached += int(queries.get('cached') or 0)
-        forwarded += int(queries.get('forwarded') or 0)
-        if data.get('_pi_dash', {}).get('health') == 'slow':
-            slow += 1
-        else:
-            healthy += 1
-
-    return {
-        'total_queries': total,
-        'blocked_queries': blocked,
-        'percent_blocked': round((blocked / total * 100), 1) if total else 0,
-        'cached_queries': cached,
-        'forwarded_queries': forwarded,
-        'instances': len(pihole_data),
-        'contributing_instances': contributing,
-        'healthy_instances': healthy,
-        'slow_instances': slow,
-        'offline_instances': offline,
-    }
+        d=_queries_uncached(length)
+        with _cache_lock: _queries_cache[length]={'time':time.monotonic(),'data':d}
+        return d
+
+def network_summary(data):
+    total=blocked=cached=forwarded=healthy=slow=offline=0
+    for d in data.values():
+        if d.get('error') or not d.get('queries'): offline+=1; continue
+        q=d['queries']; total+=int(q.get('total') or 0); blocked+=int(q.get('blocked') or 0); cached+=int(q.get('cached') or 0); forwarded+=int(q.get('forwarded') or 0)
+        if d.get('_pi_dash',{}).get('health')=='slow': slow+=1
+        else: healthy+=1
+    return {'total_queries':total,'blocked_queries':blocked,'percent_blocked':round(blocked/total*100,1) if total else 0,'cached_queries':cached,'forwarded_queries':forwarded,'instances':len(data),'healthy_instances':healthy,'slow_instances':slow,'offline_instances':offline}
 
-
-# -- API Routes --
 @bp.route('/init')
 def init():
     try:
-        filtered_config = get_filtered_config()
-        pihole_data = fetch_all_pihole_data()
-        response_data = {
-            'config': filtered_config,
-            'data': pihole_data,
-            'summary': build_network_summary(pihole_data),
-        }
-        if config.get('show_queries', False):
-            response_data['queries'] = fetch_recent_queries(length=50)
-        return jsonify(response_data)
-    except Exception as exc:
-        return jsonify({'error': str(exc)}), 500
-
-
+        stats=fetch_stats(); res={'config':filtered_config(),'data':stats,'summary':network_summary(stats)}
+        if config.get('show_queries',False): res['queries']=fetch_queries(50)
+        return jsonify(res)
+    except Exception as e: return jsonify({'error':str(e)}),500
 @bp.route('/data')
 def data():
     try:
-        pihole_data = fetch_all_pihole_data()
-        # Preserve the legacy bare-object response unless callers explicitly
-        # request the richer payload.
-        include_summary = request.args.get('include_summary', 'false').lower() == 'true'
-        include_queries = request.args.get('include_queries', 'false').lower() == 'true'
-        if not include_summary and not include_queries:
-            return jsonify(pihole_data)
-
-        response_data = {'stats': pihole_data}
-        if include_summary:
-            response_data['summary'] = build_network_summary(pihole_data)
-        if include_queries:
-            length = max(1, min(int(request.args.get('length', 50)), 200))
-            response_data['queries'] = fetch_recent_queries(length=length)
-        return jsonify(response_data)
-    except Exception as exc:
-        return jsonify({'error': str(exc)}), 500
-
-
+        stats=fetch_stats(); summary=request.args.get('include_summary','false').lower()=='true'; queries=request.args.get('include_queries','false').lower()=='true'
+        if not summary and not queries: return jsonify(stats)
+        res={'stats':stats}
+        if summary: res['summary']=network_summary(stats)
+        if queries: res['queries']=fetch_queries(max(1,min(int(request.args.get('length',50)),200)))
+        return jsonify(res)
+    except Exception as e: return jsonify({'error':str(e)}),500
 @bp.route('/queries')
 def queries():
-    try:
-        length = max(1, min(int(request.args.get('length', 50)), 200))
-        return jsonify(fetch_recent_queries(length=length))
-    except Exception as exc:
-        return jsonify({'error': str(exc)}), 500
-
-
+    try: return jsonify(fetch_queries(max(1,min(int(request.args.get('length',50)),200))))
+    except Exception as e: return jsonify({'error':str(e)}),500
 @bp.route('/health')
-def health():
-    enabled = get_enabled_piholes()
-    return jsonify({
-        'status': 'ok',
-        'enabled_piholes': len(enabled),
-        'cache_ttl_ms': get_cache_ttl(),
-    })
-
-
-app.register_blueprint(bp, url_prefix=url_prefix)
+def health(): return jsonify({'status':'ok','enabled_piholes':len(enabled()),'cache_ttl_ms':get_cache_ttl()})
 
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=5001)
+app.register_blueprint(bp,url_prefix=url_prefix)
+if __name__=='__main__': app.run(host='0.0.0.0',port=5001)

From ef0fed13d27c78729371b06bf02bfb17f4551991 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:23:19 +0530
Subject: [PATCH 03/45] Add split polling, health details, summary, and trends

---
 js/app.js | 519 ++++++++++++++++++++----------------------------------
 1 file changed, 195 insertions(+), 324 deletions(-)

diff --git a/js/app.js b/js/app.js
index d13df20..33bd9af 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,381 +1,252 @@
 document.addEventListener('DOMContentLoaded', () => {
-  let refreshIntervalId = null;
-  let stalenessIntervalId = null;
+  let statsTimer = null;
+  let queriesTimer = null;
+  let stalenessTimer = null;
   let appConfig = null;
-  let isFetching = false;
+  let statsFetching = false;
+  let queriesFetching = false;
   let lastUpdateTime = null;
   let queryFeedPaused = false;
   const lastCursorByPihole = {};
+  const trendHistory = {};
+  const MAX_TREND_POINTS = 30;
 
   async function fetchData(url) {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    return await response.json();
+    const response = await fetch(url, { cache: 'no-store' });
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    return response.json();
   }
 
-  function processSummaryData(summaryData) {
-    if (!summaryData || !summaryData.queries) {
-      return {
-        total: 0,
-        blocked: 0,
-        percentage: 0,
-        clients: 0,
-        rate: 0,
-        cached: 0,
-        forwarded: 0,
-        unique: 0,
-        domains: 0,
-      };
-    }
-
-    const queries = summaryData.queries;
-    const clients = summaryData.clients;
-    const gravity = summaryData.gravity;
+  function escapeHtml(value) {
+    return String(value)
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#039;');
+  }
 
+  function summaryStats(raw) {
+    if (!raw || !raw.queries) return { total: 0, blocked: 0, percentage: 0, clients: 0, rate: 0, cached: 0, forwarded: 0, unique: 0, domains: 0 };
+    const q = raw.queries || {};
+    const clients = raw.clients || {};
+    const gravity = raw.gravity || {};
     return {
-      total: Number(queries.total) || 0,
-      blocked: Number(queries.blocked) || 0,
-      percentage: Number(queries.percent_blocked) || 0,
+      total: Number(q.total) || 0,
+      blocked: Number(q.blocked) || 0,
+      percentage: Number(q.percent_blocked) || 0,
       clients: Number(clients.active) || 0,
-      rate: Number(queries.frequency) || 0,
-      cached: Number(queries.cached) || 0,
-      forwarded: Number(queries.forwarded) || 0,
-      unique: Number(queries.unique_domains) || 0,
+      rate: Number(q.frequency) || 0,
+      cached: Number(q.cached) || 0,
+      forwarded: Number(q.forwarded) || 0,
+      unique: Number(q.unique_domains) || 0,
       domains: Number(gravity.domains_being_blocked) || 0,
     };
   }
 
-  async function updatePiholeUI(piholeName, rawData) {
-    const section = document.getElementById(`pihole-${piholeName}-section`);
-    if (!section) return;
-
-    const nameEl = section.querySelector('.pihole-name');
-    const rateEl = section.querySelector('.pihole-rate');
-    const totalEl = section.querySelector('.pihole-total');
-    const blockedEl = section.querySelector('.pihole-blocked');
-    const percentEl = section.querySelector('.pihole-percent');
-    const clientsEl = section.querySelector('.pihole-clients');
-    const statusDotEl = section.querySelector('.status-dot');
-    const cacheEl = section.querySelector('.pihole-cache');
-    const uniqueEl = section.querySelector('.pihole-unique');
-    const domainsEl = section.querySelector('.pihole-domains');
+  function healthPresentation(meta = {}, hasError = false) {
+    if (hasError || meta.health === 'unreachable' || meta.health === 'auth_error') return { dot: 'bg-red-500', text: meta.health === 'auth_error' ? 'Auth failed' : 'Offline', textClass: 'text-red-500' };
+    if (meta.blocking === false) return { dot: 'bg-yellow-500', text: 'Blocking OFF', textClass: 'text-yellow-600 dark:text-yellow-500' };
+    if (meta.health === 'slow') return { dot: 'bg-yellow-500', text: 'Slow', textClass: 'text-yellow-600 dark:text-yellow-500' };
+    return { dot: 'bg-green-500', text: meta.blocking === true ? 'Blocking ON' : 'Online', textClass: 'text-green-600 dark:text-green-500' };
+  }
 
-    try {
-      if (rawData.error) throw new Error(rawData.error);
+  function addTrend(name, value) {
+    if (!trendHistory[name]) trendHistory[name] = [];
+    trendHistory[name].push(value);
+    if (trendHistory[name].length > MAX_TREND_POINTS) trendHistory[name].shift();
+  }
 
-      const stats = processSummaryData(rawData);
+  function renderSparkline(name, el) {
+    if (!el || !appConfig.show_trends) return;
+    const values = trendHistory[name] || [];
+    if (values.length < 2) { el.innerHTML = ''; return; }
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    const points = values.map((v, i) => `${(i / (values.length - 1)) * 100},${24 - ((v - min) / range) * 20}`).join(' ');
+    el.innerHTML = `<svg viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true"><polyline points="${points}" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" /></svg>`;
+  }
 
-      let rateValue;
-      let rateUnit;
-      if (stats.rate < 1.0) {
-        rateValue = (stats.rate * 60).toFixed(1);
-        rateUnit = '/min';
-      } else {
-        rateValue = stats.rate.toFixed(1);
-        rateUnit = '/sec';
-      }
-      if (rateEl) {
-        rateEl.textContent = `(${rateValue}${rateUnit})`;
-        rateEl.classList.remove('text-gray-500', 'dark:text-gray-400');
-        rateEl.classList.add('text-teal-500', 'dark:text-teal-400');
-      } else {
-        
-        nameEl.innerHTML = `${piholeName} <span class="text-sm font-normal text-teal-500 dark:text-teal-400">(${rateValue}${rateUnit})</span>`;
-      }
+  function updatePiholeUI(name, raw) {
+    const section = document.getElementById(`pihole-${CSS.escape(name)}-section`);
+    if (!section) return;
+    const meta = raw?._pi_dash || {};
+    const hasError = !!raw?.error;
+    const status = healthPresentation(meta, hasError);
+    const dot = section.querySelector('.status-dot');
+    const health = section.querySelector('.pihole-health');
+    const latency = section.querySelector('.pihole-latency');
+    dot.className = `status-dot ${status.dot}`;
+    health.className = `pihole-health text-xs ${status.textClass}`;
+    health.textContent = status.text;
+    latency.textContent = Number.isFinite(Number(meta.latency_ms)) ? `${Number(meta.latency_ms).toFixed(0)} ms` : '-- ms';
+
+    if (hasError) {
+      section.querySelectorAll('[data-metric]').forEach(el => el.textContent = el.dataset.metric === 'percent' ? '--%' : '--');
+      section.querySelector('.pihole-cache').textContent = '-- / --';
+      section.querySelector('.pihole-rate').textContent = '(--/sec)';
+      return;
+    }
 
-      totalEl.textContent = stats.total.toLocaleString();
-      blockedEl.textContent = stats.blocked.toLocaleString();
-      percentEl.textContent = `${stats.percentage.toFixed(1)}%`;
-      clientsEl.textContent = stats.clients.toLocaleString();
-      cacheEl.textContent = `${stats.cached.toLocaleString()} / ${stats.forwarded.toLocaleString()}`;
-      uniqueEl.textContent = stats.unique.toLocaleString();
-      domainsEl.textContent = stats.domains.toLocaleString();
+    const s = summaryStats(raw);
+    let rateValue, rateUnit;
+    if (s.rate < 1) { rateValue = (s.rate * 60).toFixed(1); rateUnit = '/min'; }
+    else { rateValue = s.rate.toFixed(1); rateUnit = '/sec'; }
+    section.querySelector('.pihole-rate').textContent = `(${rateValue}${rateUnit})`;
+    section.querySelector('.pihole-total').textContent = s.total.toLocaleString();
+    section.querySelector('.pihole-blocked').textContent = s.blocked.toLocaleString();
+    section.querySelector('.pihole-percent').textContent = `${s.percentage.toFixed(1)}%`;
+    section.querySelector('.pihole-clients').textContent = s.clients.toLocaleString();
+    section.querySelector('.pihole-cache').textContent = `${s.cached.toLocaleString()} / ${s.forwarded.toLocaleString()}`;
+    section.querySelector('.pihole-unique').textContent = s.unique.toLocaleString();
+    section.querySelector('.pihole-domains').textContent = s.domains.toLocaleString();
+    addTrend(name, s.rate);
+    renderSparkline(name, section.querySelector('.pihole-sparkline'));
+  }
 
-      statusDotEl.classList.remove('bg-gray-500', 'bg-red-500');
-      statusDotEl.classList.add('bg-green-500');
-    } catch (error) {
-      console.error(`Failed to update Pi-hole ${piholeName} data:`, error);
-      if (rateEl) {
-        rateEl.textContent = `(--/sec)`;
-        rateEl.classList.remove('text-teal-500', 'dark:text-teal-400');
-        rateEl.classList.add('text-gray-500', 'dark:text-gray-400');
-      } else {
-        nameEl.innerHTML = `${piholeName} <span class="text-sm font-normal text-gray-500 dark:text-gray-400">(--/sec)</span>`;
-      }
-      [totalEl, blockedEl, clientsEl, uniqueEl, domainsEl].forEach((el) => (el.textContent = '--'));
-      percentEl.textContent = '--%';
-      cacheEl.textContent = '-- / --';
-      statusDotEl.classList.remove('bg-gray-500', 'bg-green-500');
-      statusDotEl.classList.add('bg-red-500');
-    }
+  function updateNetworkSummary(summary) {
+    const el = document.getElementById('network-summary');
+    if (!el || !appConfig.show_network_summary || !summary) return;
+    el.classList.remove('hidden');
+    el.querySelector('.network-total').textContent = Number(summary.total_queries || 0).toLocaleString();
+    el.querySelector('.network-blocked').textContent = Number(summary.blocked_queries || 0).toLocaleString();
+    el.querySelector('.network-percent').textContent = `${Number(summary.percent_blocked || 0).toFixed(1)}%`;
+    el.querySelector('.network-cache').textContent = `${Number(summary.cached_queries || 0).toLocaleString()} / ${Number(summary.forwarded_queries || 0).toLocaleString()}`;
+    const parts = [];
+    if (summary.healthy_instances) parts.push(`${summary.healthy_instances} healthy`);
+    if (summary.slow_instances) parts.push(`${summary.slow_instances} slow`);
+    if (summary.offline_instances) parts.push(`${summary.offline_instances} offline`);
+    el.querySelector('.network-health').textContent = parts.join(' · ') || 'No active Pi-holes';
   }
 
   function updateTimestamp() {
     lastUpdateTime = Date.now();
-    const timestampEl = document.getElementById('last-updated');
-    const now = new Date();
-    timestampEl.textContent = `Last updated: ${now.toLocaleTimeString()}`;
-    timestampEl.classList.remove('text-yellow-600', 'dark:text-yellow-500');
-    timestampEl.classList.add('text-gray-500', 'dark:text-gray-400');
+    const el = document.getElementById('last-updated');
+    el.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
+    el.className = 'text-xs text-gray-500 dark:text-gray-400';
   }
 
-  function updateStalenessIndicator() {
+  function updateStaleness() {
     if (!lastUpdateTime || !appConfig) return;
-    const timestampEl = document.getElementById('last-updated');
-    if (!timestampEl) return;
-    const elapsed = Date.now() - lastUpdateTime;
-    const threshold = (appConfig.refresh_interval || 5000) * 2;
-    if (elapsed > threshold) {
-      timestampEl.classList.add('text-yellow-600', 'dark:text-yellow-500');
-      timestampEl.classList.remove('text-gray-500', 'dark:text-gray-400');
+    if (Date.now() - lastUpdateTime > (appConfig.refresh_interval || 5000) * 2) {
+      document.getElementById('last-updated').className = 'text-xs text-yellow-600 dark:text-yellow-500';
     }
   }
 
-  async function refreshDashboard() {
-    if (isFetching) return;
-    isFetching = true;
+  async function refreshStats() {
+    if (statsFetching) return;
+    statsFetching = true;
     try {
-      
-  const includeQueries = appConfig && appConfig.show_queries;
-  const endpoint = includeQueries ? 'data?include_queries=true&length=50' : 'data';
-      const data = await fetchData(endpoint);
-      
-      
-      const statsData = data.stats || data;
-      const queriesData = data.queries;
-      
-      
-      for (const [piholeName, piholeData] of Object.entries(statsData)) {
-        await updatePiholeUI(piholeName, piholeData);
-      }
+      const payload = await fetchData('data?include_summary=true');
+      for (const [name, raw] of Object.entries(payload.stats || {})) updatePiholeUI(name, raw);
+      updateNetworkSummary(payload.summary);
       updateTimestamp();
-      
-      
-      if (queriesData) {
-        renderQueries(queriesData);
-      }
-    } catch (error) {
-      console.error('Failed to refresh dashboard:', error);
-    } finally {
-      isFetching = false;
-    }
+    } catch (e) {
+      console.error('Failed to refresh stats:', e);
+    } finally { statsFetching = false; }
+  }
+
+  async function refreshQueries() {
+    if (!appConfig?.show_queries || queriesFetching) return;
+    queriesFetching = true;
+    try { renderQueries(await fetchData('queries?length=50')); }
+    catch (e) { console.error('Failed to refresh queries:', e); }
+    finally { queriesFetching = false; }
   }
 
-  function startTimer() {
-    if (refreshIntervalId || !appConfig) return;
-    const interval = appConfig.refresh_interval || 5000;
-    refreshIntervalId = setInterval(refreshDashboard, interval);
-    stalenessIntervalId = setInterval(updateStalenessIndicator, 1000);
+  function startTimers() {
+    if (!appConfig) return;
+    if (!statsTimer) statsTimer = setInterval(refreshStats, appConfig.refresh_interval || 5000);
+    if (appConfig.show_queries && !queriesTimer) queriesTimer = setInterval(refreshQueries, appConfig.queries_refresh_interval || appConfig.refresh_interval || 5000);
+    if (!stalenessTimer) stalenessTimer = setInterval(updateStaleness, 1000);
   }
 
-  function stopTimer() {
-    clearInterval(refreshIntervalId);
-    refreshIntervalId = null;
-    clearInterval(stalenessIntervalId);
-    stalenessIntervalId = null;
+  function stopTimers() {
+    clearInterval(statsTimer); clearInterval(queriesTimer); clearInterval(stalenessTimer);
+    statsTimer = queriesTimer = stalenessTimer = null;
   }
 
   function renderQueries(allQueries) {
     const container = document.getElementById('background-queries');
-    if (!container) return;
-    const isDark = document.documentElement.classList.contains('dark');
-    container.classList.toggle('dark-mode', isDark);
-
+    if (!container || queryFeedPaused) return;
     const newItems = [];
-    const pendingCursors = {};
-    for (const [piholeName, queries] of Object.entries(allQueries)) {
-      if (!Array.isArray(queries) || queries.length === 0) continue;
-      const lastCursor = lastCursorByPihole[piholeName] ?? -Infinity;
-      let maxCursor = lastCursor;
-      for (let i = 0; i < queries.length; i++) {
-        const q = queries[i];
-        const id = (q.id !== undefined && q.id !== null) ? Number(q.id) : null;
-        const timeVal = (q.time !== undefined && q.time !== null) ? Number(q.time) : (q.timestamp ? Number(q.timestamp) : null);
-        const cursor = (id !== null) ? id : (timeVal !== null ? timeVal : -Infinity);
-        if (cursor > lastCursor) {
-          newItems.push({ piholeName, ...q, __cursor: cursor });
-        }
-        if (cursor > maxCursor) maxCursor = cursor;
+    const pending = {};
+    for (const [name, queries] of Object.entries(allQueries || {})) {
+      if (!Array.isArray(queries)) continue;
+      const last = lastCursorByPihole[name] ?? -Infinity;
+      let max = last;
+      for (const q of queries) {
+        const id = q.id !== null && q.id !== undefined ? Number(q.id) : null;
+        const time = q.time !== null && q.time !== undefined ? Number(q.time) : null;
+        const cursor = id !== null ? id : (time !== null ? time : -Infinity);
+        if (cursor > last) newItems.push({ ...q, piholeName: name, __cursor: cursor });
+        if (cursor > max) max = cursor;
       }
-      pendingCursors[piholeName] = maxCursor;
+      pending[name] = max;
     }
-
-    if (newItems.length === 0) return;
-    if (queryFeedPaused) return;
-
-    // Commit cursor advances only now that we know we will render
-    Object.assign(lastCursorByPihole, pendingCursors);
-
-    newItems.sort((a, b) => a.__cursor - b.__cursor);
-
-    const groups = [];
-    for (let i = 0; i < newItems.length; i++) {
-      const item = newItems[i];
-      const domain = item.domain || '';
-      const piholeName = item.piholeName || '';
-      const label = `[${piholeName}] ${domain}`;
-      const blocked = !!item.blocked;
-      if (groups.length > 0 && groups[groups.length - 1].label === label) {
-        const g = groups[groups.length - 1];
-        g.count += 1;
-        g.blocked = g.blocked || blocked;
-      } else {
-        groups.push({ label, domain, piholeName, blocked, count: 1 });
-      }
-    }
-
-    const MAX_ROWS = 100;
-    for (let index = 0; index < groups.length; index++) {
-      const group = groups[index];
-      const lastLi = container.lastElementChild;
-      if (lastLi && lastLi.dataset && lastLi.dataset.label === group.label) {
-        const prev = Number(lastLi.dataset.count || '1');
-        const nextCount = prev + group.count;
-        lastLi.dataset.count = String(nextCount);
-        lastLi.textContent = `${group.label} (x${nextCount})`;
-        if (group.blocked) {
-          lastLi.classList.remove('text-green-600', 'dark:text-green-500');
-          lastLi.classList.add('text-red-600', 'dark:text-red-500');
-          lastLi.style.filter = 'drop-shadow(0 0 2px rgba(220, 38, 38, 0.3))';
-        }
-      } else {
-        const li = document.createElement('li');
-        li.className = 'opacity-0 translate-y-1 text-[10px] leading-tight px-1 whitespace-nowrap';
-        li.style.textOverflow = 'ellipsis';
-        li.dataset.label = group.label;
-        li.dataset.count = String(group.count);
-        li.textContent = group.count > 1 ? `${group.label} (x${group.count})` : group.label;
-        if (group.blocked) {
-          li.classList.add('text-red-600', 'dark:text-red-500');
-          li.style.filter = 'drop-shadow(0 0 2px rgba(220, 38, 38, 0.3))';
-        } else {
-          li.classList.add('text-green-600', 'dark:text-green-500');
-          li.style.filter = 'drop-shadow(0 0 2px rgba(22, 163, 74, 0.25))';
-        }
-        const delay = Math.min(index * 15, 300);
-        setTimeout(() => {
-          requestAnimationFrame(() => {
-            li.style.transition = 'opacity .3s ease, transform .3s ease';
-            li.style.opacity = '0.9';
-            li.style.transform = 'translateY(0)';
-          });
-        }, delay);
-        container.appendChild(li);
-      }
+    if (!newItems.length) return;
+    Object.assign(lastCursorByPihole, pending);
+    newItems.sort((a,b) => a.__cursor - b.__cursor);
+    for (const item of newItems) {
+      const li = document.createElement('li');
+      li.className = `query-row ${item.blocked ? 'text-red-600 dark:text-red-500' : 'text-green-600 dark:text-green-500'}`;
+      li.textContent = `[${item.piholeName}] ${item.domain || ''}`;
+      container.appendChild(li);
     }
+    while (container.children.length > 100) container.removeChild(container.firstChild);
+  }
 
-    while (container.children.length > MAX_ROWS) {
-      container.removeChild(container.firstChild);
-    }
+  function createCard(p) {
+    const section = document.createElement('section');
+    section.id = `pihole-${p.name}-section`;
+    section.className = 'bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full';
+    const safeName = escapeHtml(p.name);
+    const name = p.link ? `<a href="${escapeHtml(p.address)}/admin" target="_blank" rel="noopener noreferrer" class="hover:text-teal-500">${safeName}</a>` : safeName;
+    section.innerHTML = `
+      <div class="flex justify-between gap-3 mb-3">
+        <div><h2 class="text-xl font-semibold text-gray-700 dark:text-cyan-400">${name} <span class="pihole-rate text-sm font-normal text-gray-500 dark:text-gray-400">(--/sec)</span></h2><div class="flex gap-2 items-center"><span class="status-dot bg-gray-500"></span><span class="pihole-health text-xs text-gray-500">Checking</span><span class="pihole-latency text-xs text-gray-400">-- ms</span></div></div>
+        <div class="pihole-sparkline text-teal-500 w-20 h-7"></div>
+      </div>
+      <div class="space-y-1.5 text-sm">
+        <div class="metric-row"><span>Total Queries</span><span data-metric="total" class="pihole-total text-blue-500">--</span></div>
+        <div class="metric-row"><span>Queries Blocked</span><span data-metric="blocked" class="pihole-blocked text-red-500">--</span></div>
+        <div class="metric-row"><span>Percent Blocked</span><span data-metric="percent" class="pihole-percent text-yellow-600 dark:text-yellow-500">--%</span></div>
+        <div class="metric-row"><span>Cached / Forwarded</span><span class="pihole-cache text-indigo-500">-- / --</span></div>
+        <div class="metric-row"><span>Unique Domains</span><span data-metric="unique" class="pihole-unique text-orange-500">--</span></div>
+        <div class="metric-row"><span>Active Clients</span><span data-metric="clients" class="pihole-clients text-purple-500">--</span></div>
+        <div class="metric-row"><span>Domains on Lists</span><span data-metric="domains" class="pihole-domains text-green-600 dark:text-green-500">--</span></div>
+      </div>`;
+    return section;
   }
 
   async function init() {
     try {
-      
-      const initData = await fetchData('init');
-      appConfig = initData.config;
-      
-      const mainContent = document.querySelector('main');
-      mainContent.innerHTML = '';
-
-      const enabledPiholes = appConfig.piholes.filter((p) => p.enabled);
-
-      
-      enabledPiholes.forEach((pihole) => {
-        const section = document.createElement('section');
-        section.id = `pihole-${pihole.name}-section`;
-        section.className = 'bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full';
-        
-        const nameContent = pihole.link
-          ? `<a href="${pihole.address}/admin" target="_blank" rel="noopener noreferrer" class="hover:text-teal-500 focus:text-teal-500 outline-none transition-colors" aria-label="Open ${pihole.name} Pi-hole UI">${pihole.name}</a>`
-          : `${pihole.name}`;
-        section.innerHTML = `
-                  <div class="flex justify-between items-baseline mb-3">
-                      <h2 class="text-xl font-semibold text-gray-700 dark:text-cyan-400 pihole-name">${nameContent} <span class="pihole-rate text-sm font-normal text-gray-500 dark:text-gray-400">(--/sec)</span></h2>
-                      <span class="status-dot bg-gray-500"></span>
-                  </div>
-                  <div class="space-y-1.5 text-sm">
-                      <div class="flex justify-between items-center">
-                          <span class="text-gray-500 dark:text-gray-400">Total Queries</span>
-                          <span class="font-medium text-blue-500 dark:text-blue-400 pihole-total">--</span>
-                      </div>
-                      <div class="flex justify-between items-center">
-                          <span class="text-gray-500 dark:text-gray-400">Queries Blocked</span>
-                          <span class="font-medium text-red-500 dark:text-red-400 pihole-blocked">--</span>
-                      </div>
-                      <div class="flex justify-between items-center">
-                          <span class="text-gray-500 dark:text-gray-400">Percent Blocked</span>
-                          <span class="font-medium text-yellow-600 dark:text-yellow-500 pihole-percent">--%</span>
-                      </div>
-                      <div class="flex justify-between items-center">
-                          <span class="text-gray-500 dark:text-gray-400">Cachd / Fwded</span>
-                          <span class="font-medium text-indigo-500 dark:text-indigo-400 pihole-cache">-- / --</span>
-                      </div>
-                      <div class="flex justify-between items-center">
-                          <span class="text-gray-500 dark:text-gray-400">Unique Domains</span>
-                          <span class="font-medium text-orange-500 dark:text-orange-400 pihole-unique">--</span>
-                      </div>
-                      <div class="flex justify-between items-center">
-                          <span class="text-gray-500 dark:text-gray-400">Active Clients</span>
-                          <span class="font-medium text-purple-500 dark:text-purple-400 pihole-clients">--</span>
-                      </div>
-                      <div class="flex justify-between items-center">
-                          <span class="text-gray-500 dark:text-gray-400">Domains on Lists</span>
-                          <span class="font-medium text-green-600 dark:text-green-500 pihole-domains">--</span>
-                      </div>
-                  </div>
-              `;
-        mainContent.appendChild(section);
-      });
-
-      
-      for (const [piholeName, piholeData] of Object.entries(initData.data)) {
-        await updatePiholeUI(piholeName, piholeData);
-      }
+      const data = await fetchData('init');
+      appConfig = data.config;
+      const main = document.querySelector('main');
+      main.innerHTML = '';
+      for (const p of appConfig.piholes || []) main.appendChild(createCard(p));
+      for (const [name, raw] of Object.entries(data.data || {})) updatePiholeUI(name, raw);
+      updateNetworkSummary(data.summary);
+      if (data.queries) renderQueries(data.queries);
       updateTimestamp();
-
-      if (initData.queries) {
-        renderQueries(initData.queries);
-      }
-
-      startTimer();
-    } catch (error) {
-      console.error('Failed to initialize dashboard:', error);
+      startTimers();
+    } catch (e) {
+      console.error('Failed to initialize dashboard:', e);
+      document.getElementById('last-updated').textContent = 'Unable to initialize dashboard';
     }
   }
 
   document.addEventListener('visibilitychange', () => {
-    if (document.hidden) {
-      stopTimer();
-    } else {
-      refreshDashboard();
-      startTimer();
-    }
+    if (document.hidden) stopTimers();
+    else { refreshStats(); refreshQueries(); startTimers(); }
   });
-
-  window.addEventListener('offline', () => stopTimer());
-  window.addEventListener('online', () => { refreshDashboard(); startTimer(); });
-
-  const queriesContainer = document.getElementById('background-queries');
-  if (queriesContainer) {
-    queriesContainer.addEventListener('mouseenter', () => { queryFeedPaused = true; });
-    queriesContainer.addEventListener('mouseleave', () => { queryFeedPaused = false; });
-  }
-
-  if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-      navigator.serviceWorker.register('sw.js').then(
-        (registration) => {
-          console.log('ServiceWorker registration successful with scope: ', registration.scope);
-        },
-        (err) => {
-          console.log('ServiceWorker registration failed: ', err);
-        }
-      );
-    });
-  }
-
+  window.addEventListener('offline', stopTimers);
+  window.addEventListener('online', () => { refreshStats(); refreshQueries(); startTimers(); });
+  const queries = document.getElementById('background-queries');
+  queries?.addEventListener('mouseenter', () => { queryFeedPaused = true; });
+  queries?.addEventListener('mouseleave', () => { queryFeedPaused = false; });
+  if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('sw.js').catch(console.error));
   init();
-});
\ No newline at end of file
+});

From e037746a0dba4d3838587e43acb49b12d4d7cdf6 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:24:08 +0530
Subject: [PATCH 04/45] Add network summary shell and remove external font
 dependency

---
 index.html | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index df552c5..17442fa 100644
--- a/index.html
+++ b/index.html
@@ -4,22 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Pi-hole Dashboard</title>
-
     <link rel="icon" href="{{ICON_URL}}" />
     <link rel="manifest" href="manifest.json" />
     <meta name="theme-color" id="theme-color-meta" content="#1f2937" />
-
-  <!-- Tailwind CSS is now built locally and included below -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" media="print" onload="this.media='all'" />
-    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" /></noscript>
     <link rel="stylesheet" href="css/style.css" />
-
     <script>
-      if (
-        localStorage.theme === 'dark' ||
-        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-      ) {
+      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
         document.documentElement.classList.add('dark');
         document.getElementById('theme-color-meta').setAttribute('content', '#111827');
       } else {
@@ -28,19 +18,29 @@
       }
     </script>
   </head>
-  <body
-    class="h-full flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
-  <div id="main-wrapper" class="w-full max-w-sm sm:max-w-xl mx-auto relative z-10">
-      <header class="text-center mb-6">
+  <body class="min-h-full flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
+    <div id="main-wrapper" class="w-full max-w-sm sm:max-w-2xl mx-auto relative z-10 py-4">
+      <header class="text-center mb-4">
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Pi-Dash</h1>
         <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400">Last updated: Never</p>
       </header>
 
+      <section id="network-summary" class="hidden bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg mb-4" aria-label="Network summary">
+        <div class="flex justify-between items-baseline mb-3">
+          <h2 class="text-sm uppercase tracking-wide font-semibold text-gray-600 dark:text-gray-300">Network summary</h2>
+          <span class="network-health text-xs text-gray-500 dark:text-gray-400"></span>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Queries</div><div class="network-total font-semibold text-blue-500">--</div></div>
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked</div><div class="network-blocked font-semibold text-red-500">--</div></div>
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked %</div><div class="network-percent font-semibold text-yellow-600 dark:text-yellow-500">--%</div></div>
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Cached / Forwarded</div><div class="network-cache font-semibold text-indigo-500">-- / --</div></div>
+        </div>
+      </section>
+
       <main class="w-full grid grid-cols-1 sm:grid-cols-2 gap-4"></main>
     </div>
-
-  <ul id="background-queries" aria-hidden="true"></ul>
-
+    <ul id="background-queries" aria-hidden="true"></ul>
     <script src="js/app.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>

From 8ded08b6af36e4d4b2d0b0d390c63a841a9b9c3c Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:25:39 +0530
Subject: [PATCH 05/45] Fix card lookup and keep new UI independent of Tailwind
 rebuild

---
 js/app.js | 287 +++++++++---------------------------------------------
 1 file changed, 47 insertions(+), 240 deletions(-)

diff --git a/js/app.js b/js/app.js
index 33bd9af..f91bb96 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,252 +1,59 @@
 document.addEventListener('DOMContentLoaded', () => {
-  let statsTimer = null;
-  let queriesTimer = null;
-  let stalenessTimer = null;
-  let appConfig = null;
-  let statsFetching = false;
-  let queriesFetching = false;
-  let lastUpdateTime = null;
-  let queryFeedPaused = false;
-  const lastCursorByPihole = {};
-  const trendHistory = {};
-  const MAX_TREND_POINTS = 30;
+  let statsTimer = null, queriesTimer = null, stalenessTimer = null;
+  let appConfig = null, statsFetching = false, queriesFetching = false, lastUpdateTime = null, queryFeedPaused = false;
+  const lastCursorByPihole = {}, trendHistory = {}, MAX_TREND_POINTS = 30;
 
   async function fetchData(url) {
     const response = await fetch(url, { cache: 'no-store' });
     if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
     return response.json();
   }
-
-  function escapeHtml(value) {
-    return String(value)
-      .replaceAll('&', '&amp;')
-      .replaceAll('<', '&lt;')
-      .replaceAll('>', '&gt;')
-      .replaceAll('"', '&quot;')
-      .replaceAll("'", '&#039;');
-  }
-
+  function escapeHtml(value) { return String(value).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;').replaceAll("'",'&#039;'); }
   function summaryStats(raw) {
-    if (!raw || !raw.queries) return { total: 0, blocked: 0, percentage: 0, clients: 0, rate: 0, cached: 0, forwarded: 0, unique: 0, domains: 0 };
-    const q = raw.queries || {};
-    const clients = raw.clients || {};
-    const gravity = raw.gravity || {};
-    return {
-      total: Number(q.total) || 0,
-      blocked: Number(q.blocked) || 0,
-      percentage: Number(q.percent_blocked) || 0,
-      clients: Number(clients.active) || 0,
-      rate: Number(q.frequency) || 0,
-      cached: Number(q.cached) || 0,
-      forwarded: Number(q.forwarded) || 0,
-      unique: Number(q.unique_domains) || 0,
-      domains: Number(gravity.domains_being_blocked) || 0,
-    };
-  }
-
-  function healthPresentation(meta = {}, hasError = false) {
-    if (hasError || meta.health === 'unreachable' || meta.health === 'auth_error') return { dot: 'bg-red-500', text: meta.health === 'auth_error' ? 'Auth failed' : 'Offline', textClass: 'text-red-500' };
-    if (meta.blocking === false) return { dot: 'bg-yellow-500', text: 'Blocking OFF', textClass: 'text-yellow-600 dark:text-yellow-500' };
-    if (meta.health === 'slow') return { dot: 'bg-yellow-500', text: 'Slow', textClass: 'text-yellow-600 dark:text-yellow-500' };
-    return { dot: 'bg-green-500', text: meta.blocking === true ? 'Blocking ON' : 'Online', textClass: 'text-green-600 dark:text-green-500' };
-  }
-
-  function addTrend(name, value) {
-    if (!trendHistory[name]) trendHistory[name] = [];
-    trendHistory[name].push(value);
-    if (trendHistory[name].length > MAX_TREND_POINTS) trendHistory[name].shift();
-  }
-
-  function renderSparkline(name, el) {
+    if (!raw || !raw.queries) return { total:0,blocked:0,percentage:0,clients:0,rate:0,cached:0,forwarded:0,unique:0,domains:0 };
+    const q=raw.queries||{}, clients=raw.clients||{}, gravity=raw.gravity||{};
+    return { total:Number(q.total)||0, blocked:Number(q.blocked)||0, percentage:Number(q.percent_blocked)||0, clients:Number(clients.active)||0, rate:Number(q.frequency)||0, cached:Number(q.cached)||0, forwarded:Number(q.forwarded)||0, unique:Number(q.unique_domains)||0, domains:Number(gravity.domains_being_blocked)||0 };
+  }
+  function healthPresentation(meta={}, hasError=false) {
+    if (hasError || meta.health==='unreachable' || meta.health==='auth_error') return {dot:'bg-red-500',text:meta.health==='auth_error'?'Auth failed':'Offline',textClass:'text-red-500'};
+    if (meta.blocking===false) return {dot:'bg-yellow-500',text:'Blocking OFF',textClass:'text-yellow-600 dark:text-yellow-500'};
+    if (meta.health==='slow') return {dot:'bg-yellow-500',text:'Slow',textClass:'text-yellow-600 dark:text-yellow-500'};
+    return {dot:'bg-green-500',text:meta.blocking===true?'Blocking ON':'Online',textClass:'text-green-600 dark:text-green-500'};
+  }
+  function addTrend(name,value) { (trendHistory[name] ||= []).push(value); if (trendHistory[name].length>MAX_TREND_POINTS) trendHistory[name].shift(); }
+  function renderSparkline(name,el) {
     if (!el || !appConfig.show_trends) return;
-    const values = trendHistory[name] || [];
-    if (values.length < 2) { el.innerHTML = ''; return; }
-    const min = Math.min(...values);
-    const max = Math.max(...values);
-    const range = max - min || 1;
-    const points = values.map((v, i) => `${(i / (values.length - 1)) * 100},${24 - ((v - min) / range) * 20}`).join(' ');
-    el.innerHTML = `<svg viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true"><polyline points="${points}" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" /></svg>`;
+    const values=trendHistory[name]||[]; if(values.length<2){el.innerHTML='';return;}
+    const min=Math.min(...values), max=Math.max(...values), range=max-min||1;
+    const points=values.map((v,i)=>`${(i/(values.length-1))*100},${24-((v-min)/range)*20}`).join(' ');
+    el.innerHTML=`<svg viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true" style="width:80px;height:28px"><polyline points="${points}" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" /></svg>`;
+  }
+  function updatePiholeUI(name,raw) {
+    const section=document.getElementById(`pihole-${name}-section`); if(!section)return;
+    const meta=raw?._pi_dash||{}, hasError=!!raw?.error, status=healthPresentation(meta,hasError);
+    const dot=section.querySelector('.status-dot'), health=section.querySelector('.pihole-health'), latency=section.querySelector('.pihole-latency');
+    dot.className=`status-dot ${status.dot}`; health.className=`pihole-health text-xs ${status.textClass}`; health.textContent=status.text;
+    latency.textContent=Number.isFinite(Number(meta.latency_ms))?`${Number(meta.latency_ms).toFixed(0)} ms`:'-- ms';
+    if(hasError){ section.querySelectorAll('[data-metric]').forEach(el=>el.textContent=el.dataset.metric==='percent'?'--%':'--'); section.querySelector('.pihole-cache').textContent='-- / --'; section.querySelector('.pihole-rate').textContent='(--/sec)'; return; }
+    const s=summaryStats(raw); let rateValue,rateUnit;
+    if(s.rate<1){rateValue=(s.rate*60).toFixed(1);rateUnit='/min';}else{rateValue=s.rate.toFixed(1);rateUnit='/sec';}
+    section.querySelector('.pihole-rate').textContent=`(${rateValue}${rateUnit})`;
+    section.querySelector('.pihole-total').textContent=s.total.toLocaleString(); section.querySelector('.pihole-blocked').textContent=s.blocked.toLocaleString(); section.querySelector('.pihole-percent').textContent=`${s.percentage.toFixed(1)}%`; section.querySelector('.pihole-clients').textContent=s.clients.toLocaleString(); section.querySelector('.pihole-cache').textContent=`${s.cached.toLocaleString()} / ${s.forwarded.toLocaleString()}`; section.querySelector('.pihole-unique').textContent=s.unique.toLocaleString(); section.querySelector('.pihole-domains').textContent=s.domains.toLocaleString();
+    addTrend(name,s.rate); renderSparkline(name,section.querySelector('.pihole-sparkline'));
   }
-
-  function updatePiholeUI(name, raw) {
-    const section = document.getElementById(`pihole-${CSS.escape(name)}-section`);
-    if (!section) return;
-    const meta = raw?._pi_dash || {};
-    const hasError = !!raw?.error;
-    const status = healthPresentation(meta, hasError);
-    const dot = section.querySelector('.status-dot');
-    const health = section.querySelector('.pihole-health');
-    const latency = section.querySelector('.pihole-latency');
-    dot.className = `status-dot ${status.dot}`;
-    health.className = `pihole-health text-xs ${status.textClass}`;
-    health.textContent = status.text;
-    latency.textContent = Number.isFinite(Number(meta.latency_ms)) ? `${Number(meta.latency_ms).toFixed(0)} ms` : '-- ms';
-
-    if (hasError) {
-      section.querySelectorAll('[data-metric]').forEach(el => el.textContent = el.dataset.metric === 'percent' ? '--%' : '--');
-      section.querySelector('.pihole-cache').textContent = '-- / --';
-      section.querySelector('.pihole-rate').textContent = '(--/sec)';
-      return;
-    }
-
-    const s = summaryStats(raw);
-    let rateValue, rateUnit;
-    if (s.rate < 1) { rateValue = (s.rate * 60).toFixed(1); rateUnit = '/min'; }
-    else { rateValue = s.rate.toFixed(1); rateUnit = '/sec'; }
-    section.querySelector('.pihole-rate').textContent = `(${rateValue}${rateUnit})`;
-    section.querySelector('.pihole-total').textContent = s.total.toLocaleString();
-    section.querySelector('.pihole-blocked').textContent = s.blocked.toLocaleString();
-    section.querySelector('.pihole-percent').textContent = `${s.percentage.toFixed(1)}%`;
-    section.querySelector('.pihole-clients').textContent = s.clients.toLocaleString();
-    section.querySelector('.pihole-cache').textContent = `${s.cached.toLocaleString()} / ${s.forwarded.toLocaleString()}`;
-    section.querySelector('.pihole-unique').textContent = s.unique.toLocaleString();
-    section.querySelector('.pihole-domains').textContent = s.domains.toLocaleString();
-    addTrend(name, s.rate);
-    renderSparkline(name, section.querySelector('.pihole-sparkline'));
-  }
-
   function updateNetworkSummary(summary) {
-    const el = document.getElementById('network-summary');
-    if (!el || !appConfig.show_network_summary || !summary) return;
-    el.classList.remove('hidden');
-    el.querySelector('.network-total').textContent = Number(summary.total_queries || 0).toLocaleString();
-    el.querySelector('.network-blocked').textContent = Number(summary.blocked_queries || 0).toLocaleString();
-    el.querySelector('.network-percent').textContent = `${Number(summary.percent_blocked || 0).toFixed(1)}%`;
-    el.querySelector('.network-cache').textContent = `${Number(summary.cached_queries || 0).toLocaleString()} / ${Number(summary.forwarded_queries || 0).toLocaleString()}`;
-    const parts = [];
-    if (summary.healthy_instances) parts.push(`${summary.healthy_instances} healthy`);
-    if (summary.slow_instances) parts.push(`${summary.slow_instances} slow`);
-    if (summary.offline_instances) parts.push(`${summary.offline_instances} offline`);
-    el.querySelector('.network-health').textContent = parts.join(' · ') || 'No active Pi-holes';
-  }
-
-  function updateTimestamp() {
-    lastUpdateTime = Date.now();
-    const el = document.getElementById('last-updated');
-    el.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
-    el.className = 'text-xs text-gray-500 dark:text-gray-400';
-  }
-
-  function updateStaleness() {
-    if (!lastUpdateTime || !appConfig) return;
-    if (Date.now() - lastUpdateTime > (appConfig.refresh_interval || 5000) * 2) {
-      document.getElementById('last-updated').className = 'text-xs text-yellow-600 dark:text-yellow-500';
-    }
-  }
-
-  async function refreshStats() {
-    if (statsFetching) return;
-    statsFetching = true;
-    try {
-      const payload = await fetchData('data?include_summary=true');
-      for (const [name, raw] of Object.entries(payload.stats || {})) updatePiholeUI(name, raw);
-      updateNetworkSummary(payload.summary);
-      updateTimestamp();
-    } catch (e) {
-      console.error('Failed to refresh stats:', e);
-    } finally { statsFetching = false; }
-  }
-
-  async function refreshQueries() {
-    if (!appConfig?.show_queries || queriesFetching) return;
-    queriesFetching = true;
-    try { renderQueries(await fetchData('queries?length=50')); }
-    catch (e) { console.error('Failed to refresh queries:', e); }
-    finally { queriesFetching = false; }
-  }
-
-  function startTimers() {
-    if (!appConfig) return;
-    if (!statsTimer) statsTimer = setInterval(refreshStats, appConfig.refresh_interval || 5000);
-    if (appConfig.show_queries && !queriesTimer) queriesTimer = setInterval(refreshQueries, appConfig.queries_refresh_interval || appConfig.refresh_interval || 5000);
-    if (!stalenessTimer) stalenessTimer = setInterval(updateStaleness, 1000);
-  }
-
-  function stopTimers() {
-    clearInterval(statsTimer); clearInterval(queriesTimer); clearInterval(stalenessTimer);
-    statsTimer = queriesTimer = stalenessTimer = null;
-  }
-
-  function renderQueries(allQueries) {
-    const container = document.getElementById('background-queries');
-    if (!container || queryFeedPaused) return;
-    const newItems = [];
-    const pending = {};
-    for (const [name, queries] of Object.entries(allQueries || {})) {
-      if (!Array.isArray(queries)) continue;
-      const last = lastCursorByPihole[name] ?? -Infinity;
-      let max = last;
-      for (const q of queries) {
-        const id = q.id !== null && q.id !== undefined ? Number(q.id) : null;
-        const time = q.time !== null && q.time !== undefined ? Number(q.time) : null;
-        const cursor = id !== null ? id : (time !== null ? time : -Infinity);
-        if (cursor > last) newItems.push({ ...q, piholeName: name, __cursor: cursor });
-        if (cursor > max) max = cursor;
-      }
-      pending[name] = max;
-    }
-    if (!newItems.length) return;
-    Object.assign(lastCursorByPihole, pending);
-    newItems.sort((a,b) => a.__cursor - b.__cursor);
-    for (const item of newItems) {
-      const li = document.createElement('li');
-      li.className = `query-row ${item.blocked ? 'text-red-600 dark:text-red-500' : 'text-green-600 dark:text-green-500'}`;
-      li.textContent = `[${item.piholeName}] ${item.domain || ''}`;
-      container.appendChild(li);
-    }
-    while (container.children.length > 100) container.removeChild(container.firstChild);
-  }
-
-  function createCard(p) {
-    const section = document.createElement('section');
-    section.id = `pihole-${p.name}-section`;
-    section.className = 'bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full';
-    const safeName = escapeHtml(p.name);
-    const name = p.link ? `<a href="${escapeHtml(p.address)}/admin" target="_blank" rel="noopener noreferrer" class="hover:text-teal-500">${safeName}</a>` : safeName;
-    section.innerHTML = `
-      <div class="flex justify-between gap-3 mb-3">
-        <div><h2 class="text-xl font-semibold text-gray-700 dark:text-cyan-400">${name} <span class="pihole-rate text-sm font-normal text-gray-500 dark:text-gray-400">(--/sec)</span></h2><div class="flex gap-2 items-center"><span class="status-dot bg-gray-500"></span><span class="pihole-health text-xs text-gray-500">Checking</span><span class="pihole-latency text-xs text-gray-400">-- ms</span></div></div>
-        <div class="pihole-sparkline text-teal-500 w-20 h-7"></div>
-      </div>
-      <div class="space-y-1.5 text-sm">
-        <div class="metric-row"><span>Total Queries</span><span data-metric="total" class="pihole-total text-blue-500">--</span></div>
-        <div class="metric-row"><span>Queries Blocked</span><span data-metric="blocked" class="pihole-blocked text-red-500">--</span></div>
-        <div class="metric-row"><span>Percent Blocked</span><span data-metric="percent" class="pihole-percent text-yellow-600 dark:text-yellow-500">--%</span></div>
-        <div class="metric-row"><span>Cached / Forwarded</span><span class="pihole-cache text-indigo-500">-- / --</span></div>
-        <div class="metric-row"><span>Unique Domains</span><span data-metric="unique" class="pihole-unique text-orange-500">--</span></div>
-        <div class="metric-row"><span>Active Clients</span><span data-metric="clients" class="pihole-clients text-purple-500">--</span></div>
-        <div class="metric-row"><span>Domains on Lists</span><span data-metric="domains" class="pihole-domains text-green-600 dark:text-green-500">--</span></div>
-      </div>`;
-    return section;
-  }
-
-  async function init() {
-    try {
-      const data = await fetchData('init');
-      appConfig = data.config;
-      const main = document.querySelector('main');
-      main.innerHTML = '';
-      for (const p of appConfig.piholes || []) main.appendChild(createCard(p));
-      for (const [name, raw] of Object.entries(data.data || {})) updatePiholeUI(name, raw);
-      updateNetworkSummary(data.summary);
-      if (data.queries) renderQueries(data.queries);
-      updateTimestamp();
-      startTimers();
-    } catch (e) {
-      console.error('Failed to initialize dashboard:', e);
-      document.getElementById('last-updated').textContent = 'Unable to initialize dashboard';
-    }
-  }
-
-  document.addEventListener('visibilitychange', () => {
-    if (document.hidden) stopTimers();
-    else { refreshStats(); refreshQueries(); startTimers(); }
-  });
-  window.addEventListener('offline', stopTimers);
-  window.addEventListener('online', () => { refreshStats(); refreshQueries(); startTimers(); });
-  const queries = document.getElementById('background-queries');
-  queries?.addEventListener('mouseenter', () => { queryFeedPaused = true; });
-  queries?.addEventListener('mouseleave', () => { queryFeedPaused = false; });
-  if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('sw.js').catch(console.error));
-  init();
+    const el=document.getElementById('network-summary'); if(!el || !appConfig.show_network_summary || !summary)return;
+    el.classList.remove('hidden'); el.querySelector('.network-total').textContent=Number(summary.total_queries||0).toLocaleString(); el.querySelector('.network-blocked').textContent=Number(summary.blocked_queries||0).toLocaleString(); el.querySelector('.network-percent').textContent=`${Number(summary.percent_blocked||0).toFixed(1)}%`; el.querySelector('.network-cache').textContent=`${Number(summary.cached_queries||0).toLocaleString()} / ${Number(summary.forwarded_queries||0).toLocaleString()}`;
+    const parts=[]; if(summary.healthy_instances)parts.push(`${summary.healthy_instances} healthy`); if(summary.slow_instances)parts.push(`${summary.slow_instances} slow`); if(summary.offline_instances)parts.push(`${summary.offline_instances} offline`); el.querySelector('.network-health').textContent=parts.join(' · ')||'No active Pi-holes';
+  }
+  function updateTimestamp(){ lastUpdateTime=Date.now(); const el=document.getElementById('last-updated'); el.textContent=`Last updated: ${new Date().toLocaleTimeString()}`; el.className='text-xs text-gray-500 dark:text-gray-400'; }
+  function updateStaleness(){ if(lastUpdateTime&&appConfig&&Date.now()-lastUpdateTime>(appConfig.refresh_interval||5000)*2) document.getElementById('last-updated').className='text-xs text-yellow-600 dark:text-yellow-500'; }
+  async function refreshStats(){ if(statsFetching)return; statsFetching=true; try{const payload=await fetchData('data?include_summary=true'); for(const [name,raw] of Object.entries(payload.stats||{}))updatePiholeUI(name,raw); updateNetworkSummary(payload.summary); updateTimestamp();}catch(e){console.error('Failed to refresh stats:',e);}finally{statsFetching=false;} }
+  async function refreshQueries(){ if(!appConfig?.show_queries||queriesFetching)return; queriesFetching=true; try{renderQueries(await fetchData('queries?length=50'));}catch(e){console.error('Failed to refresh queries:',e);}finally{queriesFetching=false;} }
+  function startTimers(){ if(!appConfig)return; if(!statsTimer)statsTimer=setInterval(refreshStats,appConfig.refresh_interval||5000); if(appConfig.show_queries&&!queriesTimer)queriesTimer=setInterval(refreshQueries,appConfig.queries_refresh_interval||appConfig.refresh_interval||5000); if(!stalenessTimer)stalenessTimer=setInterval(updateStaleness,1000); }
+  function stopTimers(){ clearInterval(statsTimer);clearInterval(queriesTimer);clearInterval(stalenessTimer);statsTimer=queriesTimer=stalenessTimer=null; }
+  function renderQueries(allQueries){ const container=document.getElementById('background-queries'); if(!container||queryFeedPaused)return; const newItems=[],pending={}; for(const[name,queries]of Object.entries(allQueries||{})){if(!Array.isArray(queries))continue;const last=lastCursorByPihole[name]??-Infinity;let max=last;for(const q of queries){const id=q.id!=null?Number(q.id):null,time=q.time!=null?Number(q.time):null,cursor=id!==null?id:(time!==null?time:-Infinity);if(cursor>last)newItems.push({...q,piholeName:name,__cursor:cursor});if(cursor>max)max=cursor;}pending[name]=max;} if(!newItems.length)return;Object.assign(lastCursorByPihole,pending);newItems.sort((a,b)=>a.__cursor-b.__cursor);for(const item of newItems){const li=document.createElement('li');li.className=`opacity-90 text-[10px] leading-tight px-1 whitespace-nowrap ${item.blocked?'text-red-600 dark:text-red-500':'text-green-600 dark:text-green-500'}`;li.textContent=`[${item.piholeName}] ${item.domain||''}`;container.appendChild(li);}while(container.children.length>100)container.removeChild(container.firstChild); }
+  function createCard(p){ const section=document.createElement('section');section.id=`pihole-${p.name}-section`;section.className='bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full';const safeName=escapeHtml(p.name),name=p.link?`<a href="${escapeHtml(p.address)}/admin" target="_blank" rel="noopener noreferrer" class="hover:text-teal-500">${safeName}</a>`:safeName; section.innerHTML=`<div class="flex justify-between items-baseline mb-3"><div><h2 class="text-xl font-semibold text-gray-700 dark:text-cyan-400">${name} <span class="pihole-rate text-sm font-normal text-gray-500 dark:text-gray-400">(--/sec)</span></h2><div class="text-xs"><span class="status-dot bg-gray-500"></span> <span class="pihole-health text-gray-500">Checking</span> <span class="pihole-latency text-gray-500">-- ms</span></div></div><div class="pihole-sparkline text-teal-500" style="width:80px;height:28px"></div></div><div class="space-y-1.5 text-sm"><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Total Queries</span><span data-metric="total" class="font-medium text-blue-500 pihole-total">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Queries Blocked</span><span data-metric="blocked" class="font-medium text-red-500 pihole-blocked">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Percent Blocked</span><span data-metric="percent" class="font-medium text-yellow-600 dark:text-yellow-500 pihole-percent">--%</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Cached / Forwarded</span><span class="font-medium text-indigo-500 pihole-cache">-- / --</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Unique Domains</span><span data-metric="unique" class="font-medium text-orange-500 pihole-unique">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Active Clients</span><span data-metric="clients" class="font-medium text-purple-500 pihole-clients">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Domains on Lists</span><span data-metric="domains" class="font-medium text-green-600 dark:text-green-500 pihole-domains">--</span></div></div>`; return section; }
+  async function init(){ try{const data=await fetchData('init');appConfig=data.config;const main=document.querySelector('main');main.innerHTML='';for(const p of appConfig.piholes||[])main.appendChild(createCard(p));for(const[name,raw]of Object.entries(data.data||{}))updatePiholeUI(name,raw);updateNetworkSummary(data.summary);if(data.queries)renderQueries(data.queries);updateTimestamp();startTimers();}catch(e){console.error('Failed to initialize dashboard:',e);document.getElementById('last-updated').textContent='Unable to initialize dashboard';} }
+  document.addEventListener('visibilitychange',()=>{if(document.hidden)stopTimers();else{refreshStats();refreshQueries();startTimers();}});window.addEventListener('offline',stopTimers);window.addEventListener('online',()=>{refreshStats();refreshQueries();startTimers();});const queries=document.getElementById('background-queries');queries?.addEventListener('mouseenter',()=>{queryFeedPaused=true;});queries?.addEventListener('mouseleave',()=>{queryFeedPaused=false;});if('serviceWorker'in navigator)window.addEventListener('load',()=>navigator.serviceWorker.register('sw.js').catch(console.error));init();
 });

From 91a91de3bb1c3e1f0ad6bc7a9a3461a897e353d0 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:26:10 +0530
Subject: [PATCH 06/45] Keep summary layout compatible with existing compiled
 CSS

---
 index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 17442fa..fa5764f 100644
--- a/index.html
+++ b/index.html
@@ -18,23 +18,23 @@
       }
     </script>
   </head>
-  <body class="min-h-full flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
-    <div id="main-wrapper" class="w-full max-w-sm sm:max-w-2xl mx-auto relative z-10 py-4">
-      <header class="text-center mb-4">
+  <body class="h-full flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300" style="font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
+    <div id="main-wrapper" class="w-full max-w-sm sm:max-w-xl mx-auto relative z-10">
+      <header class="text-center mb-6">
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Pi-Dash</h1>
         <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400">Last updated: Never</p>
       </header>
 
-      <section id="network-summary" class="hidden bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg mb-4" aria-label="Network summary">
+      <section id="network-summary" class="hidden bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full mb-6" aria-label="Network summary">
         <div class="flex justify-between items-baseline mb-3">
-          <h2 class="text-sm uppercase tracking-wide font-semibold text-gray-600 dark:text-gray-300">Network summary</h2>
+          <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summary</h2>
           <span class="network-health text-xs text-gray-500 dark:text-gray-400"></span>
         </div>
-        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
-          <div><div class="text-xs text-gray-500 dark:text-gray-400">Queries</div><div class="network-total font-semibold text-blue-500">--</div></div>
-          <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked</div><div class="network-blocked font-semibold text-red-500">--</div></div>
-          <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked %</div><div class="network-percent font-semibold text-yellow-600 dark:text-yellow-500">--%</div></div>
-          <div><div class="text-xs text-gray-500 dark:text-gray-400">Cached / Forwarded</div><div class="network-cache font-semibold text-indigo-500">-- / --</div></div>
+        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem" class="text-sm">
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Queries</div><div class="network-total font-medium text-blue-500">--</div></div>
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked</div><div class="network-blocked font-medium text-red-500">--</div></div>
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked %</div><div class="network-percent font-medium text-yellow-600 dark:text-yellow-500">--%</div></div>
+          <div><div class="text-xs text-gray-500 dark:text-gray-400">Cached / Forwarded</div><div class="network-cache font-medium text-indigo-500">-- / --</div></div>
         </div>
       </section>
 

From adff418e144d056e2d3312352e431864f5f393f0 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:26:19 +0530
Subject: [PATCH 07/45] Improve PWA cache freshness and avoid caching API
 responses

---
 sw.js | 57 +++++++++++++++++++++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/sw.js b/sw.js
index de521ee..7111c7b 100644
--- a/sw.js
+++ b/sw.js
@@ -1,40 +1,53 @@
-const CACHE_NAME = 'pi-dashboard-cache-v0.6.0';
-const urlsToCache = [
+const CACHE_NAME = 'pi-dashboard-cache-v1';
+const APP_SHELL = [
   '{{CACHE_URL}}',
   '{{CACHE_URL}}css/style.css',
   '{{CACHE_URL}}js/app.js',
 ];
 
 self.addEventListener('install', event => {
-  event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(cache => {
-        return cache.addAll(urlsToCache);
-      })
-  );
+  event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(APP_SHELL)));
+  self.skipWaiting();
 });
 
 self.addEventListener('activate', event => {
   event.waitUntil(
-    caches.keys().then(cacheNames =>
-      Promise.all(
-        cacheNames
-          .filter(name => name !== CACHE_NAME)
-          .map(name => caches.delete(name))
-      )
-    )
+    caches.keys().then(names => Promise.all(names.filter(name => name !== CACHE_NAME).map(name => caches.delete(name))))
   );
+  self.clients.claim();
 });
 
 self.addEventListener('fetch', event => {
+  if (event.request.method !== 'GET') return;
+  const url = new URL(event.request.url);
+  const apiPaths = ['/init', '/data', '/queries', '/health'];
+  if (apiPaths.some(path => url.pathname.endsWith(path))) return;
+
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request)
+        .then(response => {
+          const copy = response.clone();
+          caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy));
+          return response;
+        })
+        .catch(() => caches.match(event.request).then(response => response || caches.match('{{CACHE_URL}}')))
+    );
+    return;
+  }
+
   event.respondWith(
-    caches.open(CACHE_NAME).then(cache =>
-      cache.match(event.request).then(response => {
-        if (response) {
+    caches.match(event.request).then(cached => {
+      const network = fetch(event.request)
+        .then(response => {
+          if (response.ok && url.origin === self.location.origin) {
+            const copy = response.clone();
+            caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy));
+          }
           return response;
-        }
-        return fetch(event.request);
-      })
-    )
+        })
+        .catch(() => cached);
+      return cached || network;
+    })
   );
 });

From 3a2144a6ea4c80313bb7f7c97e4d84d73a965e4f Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:26:29 +0530
Subject: [PATCH 08/45] Document backward-compatible dashboard tuning options

---
 config-example.json | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/config-example.json b/config-example.json
index 7673df5..7820d35 100644
--- a/config-example.json
+++ b/config-example.json
@@ -1,21 +1,27 @@
 {
   "base_path": "/",
-  "refresh_interval": 1000,
+  "refresh_interval": 2000,
+  "queries_refresh_interval": 3000,
+  "cache_ttl": 1000,
   "show_queries": false,
+  "show_network_summary": true,
+  "show_trends": true,
   "piholes": [
     {
       "name": "Primary",
       "address": "https://pi.hole/one",
-      "password": "your_app_password_here",
+      "password": "${PIHOLE_PRIMARY_PASSWORD}",
       "enabled": true,
-      "link": true
+      "link": true,
+      "verify_ssl": false
     },
     {
       "name": "Secondary",
       "address": "https://pi.hole/two",
       "password": "your_app_password_here",
       "enabled": true,
-      "link": false
+      "link": false,
+      "verify_ssl": false
     }
   ]
-}
\ No newline at end of file
+}

From 0bf4c432e628cb0cba154f6941d35faae47c1fb1 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:26:40 +0530
Subject: [PATCH 09/45] Clean Python dependencies and add production server

---
 requirements.txt | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/requirements.txt b/requirements.txt
index f0e3d82..3d28282 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,17 +1,4 @@
-blinker==1.9.0
-certifi==2025.8.3
-charset-normalizer==3.4.2
-click==8.2.1
-colorama==0.4.6
 Flask==3.1.3
-flask-cors==6.0.1
-idna==3.15
-itsdangerous==2.2.0
-Jinja2==3.1.6
 MarkupSafe==3.0.2
 requests==2.33.0
-urllib3==2.7.0
-Werkzeug==3.1.5
-requests==2.32.4
-urllib3==2.7.0
-Werkzeug==3.1.6
+gunicorn==23.0.0

From 8225a1ef01dbbf8a21004401b1e162e72365d018 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:27:12 +0530
Subject: [PATCH 10/45] Make network summary visibility independent of
 generated utilities

---
 index.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/index.html b/index.html
index fa5764f..356088d 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,7 @@
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Pi-Dash</h1>
         <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400">Last updated: Never</p>
       </header>
-
-      <section id="network-summary" class="hidden bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full mb-6" aria-label="Network summary">
+      <section id="network-summary" style="display:none" class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full mb-6" aria-label="Network summary">
         <div class="flex justify-between items-baseline mb-3">
           <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summary</h2>
           <span class="network-health text-xs text-gray-500 dark:text-gray-400"></span>
@@ -37,7 +36,6 @@ <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summa
           <div><div class="text-xs text-gray-500 dark:text-gray-400">Cached / Forwarded</div><div class="network-cache font-medium text-indigo-500">-- / --</div></div>
         </div>
       </section>
-
       <main class="w-full grid grid-cols-1 sm:grid-cols-2 gap-4"></main>
     </div>
     <ul id="background-queries" aria-hidden="true"></ul>

From 326baf67b3743cc9c62785cf1eebf1c070b3c768 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:27:53 +0530
Subject: [PATCH 11/45] Show network summary without generated hidden utility

---
 js/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index f91bb96..522b2cb 100644
--- a/js/app.js
+++ b/js/app.js
@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
   function updateNetworkSummary(summary) {
     const el=document.getElementById('network-summary'); if(!el || !appConfig.show_network_summary || !summary)return;
-    el.classList.remove('hidden'); el.querySelector('.network-total').textContent=Number(summary.total_queries||0).toLocaleString(); el.querySelector('.network-blocked').textContent=Number(summary.blocked_queries||0).toLocaleString(); el.querySelector('.network-percent').textContent=`${Number(summary.percent_blocked||0).toFixed(1)}%`; el.querySelector('.network-cache').textContent=`${Number(summary.cached_queries||0).toLocaleString()} / ${Number(summary.forwarded_queries||0).toLocaleString()}`;
+    el.style.display='block'; el.querySelector('.network-total').textContent=Number(summary.total_queries||0).toLocaleString(); el.querySelector('.network-blocked').textContent=Number(summary.blocked_queries||0).toLocaleString(); el.querySelector('.network-percent').textContent=`${Number(summary.percent_blocked||0).toFixed(1)}%`; el.querySelector('.network-cache').textContent=`${Number(summary.cached_queries||0).toLocaleString()} / ${Number(summary.forwarded_queries||0).toLocaleString()}`;
     const parts=[]; if(summary.healthy_instances)parts.push(`${summary.healthy_instances} healthy`); if(summary.slow_instances)parts.push(`${summary.slow_instances} slow`); if(summary.offline_instances)parts.push(`${summary.offline_instances} offline`); el.querySelector('.network-health').textContent=parts.join(' · ')||'No active Pi-holes';
   }
   function updateTimestamp(){ lastUpdateTime=Date.now(); const el=document.getElementById('last-updated'); el.textContent=`Last updated: ${new Date().toLocaleTimeString()}`; el.className='text-xs text-gray-500 dark:text-gray-400'; }

From 811743f354d660087a934c101634f021f17859e5 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:28:11 +0530
Subject: [PATCH 12/45] Run Pi-Dash with Gunicorn and add container healthcheck

---
 Dockerfile | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 46e7d78..7f62f4a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,11 +1,18 @@
 FROM python:3-alpine
+
 WORKDIR /app
 
 COPY requirements.txt .
-RUN pip install -r requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
 
 COPY . .
 
+RUN addgroup -S pidash && adduser -S pidash -G pidash && chown -R pidash:pidash /app
+USER pidash
+
 EXPOSE 5001
 
-CMD [ "python", "proxy.py" ]
\ No newline at end of file
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD python -c "import urllib.request; urllib.request.urlopen('http://127.0.0.1:5001/health', timeout=3)" || exit 1
+
+CMD ["gunicorn", "--bind", "0.0.0.0:5001", "--workers", "1", "--threads", "4", "--timeout", "30", "proxy:app"]

From f75fdfc02ca3aaec16823d146abfcb5f04b948d0 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:28:28 +0530
Subject: [PATCH 13/45] Add regression tests for compatibility and summary
 behavior

---
 tests/test_proxy.py | 97 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 tests/test_proxy.py

diff --git a/tests/test_proxy.py b/tests/test_proxy.py
new file mode 100644
index 0000000..60c44e0
--- /dev/null
+++ b/tests/test_proxy.py
@@ -0,0 +1,97 @@
+import os
+import unittest
+from unittest.mock import patch
+
+os.environ.setdefault('PIHOLE_PRIMARY_PASSWORD', 'test-secret')
+
+import proxy
+
+
+class ConfigCompatibilityTests(unittest.TestCase):
+    def setUp(self):
+        self.original = proxy.config
+
+    def tearDown(self):
+        proxy.config = self.original
+
+    def test_query_interval_inherits_existing_refresh_interval(self):
+        proxy.config = {'refresh_interval': 1234, 'piholes': []}
+        self.assertEqual(proxy.get_refresh_interval(), 1234)
+        self.assertEqual(proxy.get_queries_refresh_interval(), 1234)
+
+    def test_code_defaults_work_without_optional_flags(self):
+        proxy.config = {'piholes': []}
+        self.assertEqual(proxy.get_refresh_interval(), proxy.DEFAULT_REFRESH_INTERVAL)
+        self.assertEqual(proxy.get_queries_refresh_interval(), proxy.DEFAULT_REFRESH_INTERVAL)
+        self.assertFalse(proxy.filtered_config()['show_queries'])
+
+    def test_new_query_interval_overrides_old_refresh_interval(self):
+        proxy.config = {'refresh_interval': 2000, 'queries_refresh_interval': 3000, 'piholes': []}
+        self.assertEqual(proxy.get_queries_refresh_interval(), 3000)
+
+    def test_default_cache_never_exceeds_half_fastest_poll(self):
+        proxy.config = {'refresh_interval': 1000, 'queries_refresh_interval': 3000, 'piholes': []}
+        self.assertLessEqual(proxy.get_cache_ttl(), 500)
+
+    def test_zero_enabled_piholes_is_valid(self):
+        proxy.config = {'piholes': [{'name': 'Off', 'enabled': False}]}
+        self.assertEqual(proxy._stats_uncached(), {})
+        self.assertEqual(proxy._queries_uncached(50), {})
+
+    def test_environment_secret_resolution(self):
+        os.environ['PI_DASH_TEST_SECRET'] = 'resolved'
+        self.assertEqual(proxy.resolve_secret('${PI_DASH_TEST_SECRET}'), 'resolved')
+        self.assertEqual(proxy.resolve_secret('plain'), 'plain')
+
+
+class SummaryTests(unittest.TestCase):
+    def test_network_summary_only_aggregates_safe_metrics(self):
+        data = {
+            'one': {
+                'queries': {'total': 100, 'blocked': 10, 'cached': 60, 'forwarded': 40},
+                '_pi_dash': {'health': 'healthy'},
+            },
+            'two': {
+                'queries': {'total': 50, 'blocked': 15, 'cached': 20, 'forwarded': 30},
+                '_pi_dash': {'health': 'slow'},
+            },
+            'three': {'error': 'offline', '_pi_dash': {'health': 'unreachable'}},
+        }
+        result = proxy.network_summary(data)
+        self.assertEqual(result['total_queries'], 150)
+        self.assertEqual(result['blocked_queries'], 25)
+        self.assertEqual(result['percent_blocked'], 16.7)
+        self.assertEqual(result['cached_queries'], 80)
+        self.assertEqual(result['forwarded_queries'], 70)
+        self.assertEqual(result['healthy_instances'], 1)
+        self.assertEqual(result['slow_instances'], 1)
+        self.assertEqual(result['offline_instances'], 1)
+        self.assertNotIn('clients', result)
+        self.assertNotIn('unique_domains', result)
+
+
+class RouteCompatibilityTests(unittest.TestCase):
+    def test_legacy_data_shape_is_preserved(self):
+        sample = {'Primary': {'queries': {'total': 1}}}
+        with proxy.app.test_client() as client, patch.object(proxy, 'fetch_stats', return_value=sample):
+            response = client.get('/data')
+            self.assertEqual(response.status_code, 200)
+            self.assertEqual(response.get_json(), sample)
+
+    def test_rich_data_shape_is_opt_in(self):
+        sample = {'Primary': {'queries': {'total': 10, 'blocked': 2, 'cached': 5, 'forwarded': 5}, '_pi_dash': {'health': 'healthy'}}}
+        with proxy.app.test_client() as client, patch.object(proxy, 'fetch_stats', return_value=sample):
+            response = client.get('/data?include_summary=true')
+            payload = response.get_json()
+            self.assertIn('stats', payload)
+            self.assertIn('summary', payload)
+
+    def test_health_endpoint_does_not_require_pihole_access(self):
+        with proxy.app.test_client() as client:
+            response = client.get('/health')
+            self.assertEqual(response.status_code, 200)
+            self.assertEqual(response.get_json()['status'], 'ok')
+
+
+if __name__ == '__main__':
+    unittest.main()

From 7fa82ee431292897c015eabd36fef7590d6f2a0c Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:28:52 +0530
Subject: [PATCH 14/45] Add branch CI for backend regression tests

---
 .github/workflows/test.yml | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000..e1213a3
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,25 @@
+name: Tests
+
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.13'
+          cache: 'pip'
+      - name: Install dependencies
+        run: pip install -r requirements.txt
+      - name: Prepare test configuration
+        run: cp config-example.json config.json
+      - name: Run regression tests
+        run: python -m unittest discover -s tests -v
+      - name: Compile-check backend
+        run: python -m py_compile proxy.py

From c81bc9cab28d08108b9fe4368c04dd4824591542 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:29:45 +0530
Subject: [PATCH 15/45] Document dashboard health, polling, security, and
 compatibility options

---
 README.md | 249 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 145 insertions(+), 104 deletions(-)

diff --git a/README.md b/README.md
index 6ac7aea..10ba174 100644
--- a/README.md
+++ b/README.md
@@ -1,149 +1,189 @@
 [![CI/CD](https://github.com/surajverma/pi-dash/actions/workflows/main.yml/badge.svg)](https://github.com/surajverma/pi-dash/actions/workflows/main.yml)
+[![Tests](https://github.com/surajverma/pi-dash/actions/workflows/test.yml/badge.svg)](https://github.com/surajverma/pi-dash/actions/workflows/test.yml)
 ![Latest Release](https://img.shields.io/github/v/release/surajverma/pi-dash?include_prereleases)
 [![GitHub last commit](https://img.shields.io/github/last-commit/surajverma/pi-dash)](https://github.com/surajverma/pi-dash/commits/main)
 [![GitHub issues](https://img.shields.io/github/issues/surajverma/pi-dash)](https://github.com/surajverma/pi-dash/issues)
 [![GitHub Stars](https://img.shields.io/github/stars/surajverma/pi-dash?style=social)](https://github.com/surajverma/pi-dash/stargazers)
-[![Downloads](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fghcr-badge.elias.eu.org%2Fapi%2Fsurajverma%2Fpi-dash&query=downloadCount&style=social&logo=github&label=Docker%20Pulls)](https://github.com/surajverma/pi-dash/pkgs/container/pi-dash)
 
 # Pi-Dash: A Minimalist Pi-hole Dashboard
 
-Pi-Dash is a simple, lightweight dashboard for monitoring multiple Pi-hole instances. It provides a clean, at-a-glance, responsive view of your Pi-hole statistics.
+Pi-Dash is a lightweight dashboard for monitoring one or more Pi-hole instances. It intentionally stays focused on at-a-glance health and DNS activity instead of replacing the Pi-hole administration interface.
 
 ## Features
 
-- **Multiple Pi-hole Support:** Monitor all your Pi-hole instances from a single dashboard. You can add as many as Pi-hole's you want.
-- **Dynamic Configuration:** Easily add, remove, or disable Pi-holes through a simple `config.json` file.
-- **Responsive Design:** The layout works on both desktop and mobile devices, stacking cards vertically on smaller screens.
-- **Real-time Statistics:** The dashboard automatically refreshes every second.
-- **Lightweight and Fast:** Built with Flask and vanilla JavaScript, Pi-Dash is fast and has minimal dependencies.
-- **Dark Mode:** Automatically switches theme based on your system preferences.
+- Multiple Pi-hole instances on one responsive dashboard
+- Network-wide aggregate query, blocked, percentage, cache and forward counters
+- Per-instance latency and health state
+- Pi-hole blocking enabled/disabled state
+- Optional live DNS query feed
+- Lightweight in-browser query-rate sparklines with no database or history service
+- Independent stats and query polling intervals
+- Shared server-side cache to avoid duplicate Pi-hole API traffic from multiple browser tabs/devices
+- Automatic session re-authentication
+- Optional TLS verification per Pi-hole
+- Environment-variable substitution for passwords and CA paths
+- PWA support with network-fresh application shell updates
+- Dark mode and mobile layout
+- Docker images for amd64 and arm64
+- `/health` endpoint and Docker healthcheck
+- No external font dependency; the dashboard works on an isolated LAN
 
 ![pi-dash-landscape](https://github.com/user-attachments/assets/a0e1fbef-279a-40df-9424-0cad50c31b50)
 
+## Backward compatibility
 
-<img width="2481" height="1477" alt="Screenshot 2025-10-04 114711" src="https://github.com/user-attachments/assets/e160cb8d-8dd9-49ac-801a-a95a34c254f7" />
+Existing `config.json` files continue to work without adding any of the new options.
 
-## Configuration
-
-Before running the application, you need to create and configure the following files:
+- If `refresh_interval` is absent, Pi-Dash keeps the historical 5000 ms code default.
+- If `queries_refresh_interval` is absent, it inherits `refresh_interval`, preserving the old query-feed cadence.
+- `verify_ssl` defaults to `false`, matching the previous behavior.
+- `/data` keeps its original response format unless a caller explicitly requests the richer summary/query payload.
+- All newly introduced configuration keys are optional.
 
-### 1. `config.json`
+## Configuration
 
-This file manages your Pi-hole instances and dashboard settings. Example:
+Create `config.json` from `config-example.json`.
 
 ```json
 {
   "base_path": "/",
-  "refresh_interval": 1000,
+  "refresh_interval": 2000,
+  "queries_refresh_interval": 3000,
+  "cache_ttl": 1000,
   "show_queries": false,
+  "show_network_summary": true,
+  "show_trends": true,
   "piholes": [
     {
       "name": "Primary",
-      "address": "https://pi.hole/one",
-      "password": "your_app_password_here",
+      "address": "https://pi.hole",
+      "password": "${PIHOLE_PRIMARY_PASSWORD}",
       "enabled": true,
-      "link": true
-    },
-    {
-      "name": "Secondary",
-      "address": "https://pi.hole/two",
-      "password": "your_app_password_here",
-      "enabled": true,
-      "link": false
+      "link": true,
+      "verify_ssl": false
     }
   ]
 }
 ```
 
-- **base_path**: (optional) The subpath where the application is hosted (e.g., `/pi-dash/`). Defaults to `/`.
-- **refresh_interval**: (optional) How often the dashboard updates, in milliseconds (e.g., 1000 = 1 second).
-- **show_queries**: (optional, default: `false`) When set to `true`, a subtle scrolling feed of recent DNS queries will appear from the bottom of the screen. Blocked domains are shown in red, allowed in green.
-- **piholes**: List of Pi-hole instances.
-  - **name**: Display name for your Pi-hole (e.g., "Primary").
-  - **address**: Full URL to your Pi-hole (e.g., "http://pi.hole").
-  - **password**: Your Pi-hole API token/password.
-  - **enabled**: Set to `true` to display the Pi-hole on the dashboard, or `false` to hide it.
-  - **link**: (optional, default: `false`) When `true`, the display name becomes a clickable link that opens the Pi-hole admin in a new tab.
+### Dashboard options
+
+| Option | Default | Purpose |
+| --- | --- | --- |
+| `base_path` | `/` | Subpath where Pi-Dash is hosted |
+| `refresh_interval` | `5000` | Main statistics refresh interval in milliseconds |
+| `queries_refresh_interval` | `refresh_interval` | Live query-feed refresh interval in milliseconds |
+| `cache_ttl` | derived automatically | Shared backend cache lifetime in milliseconds |
+| `show_queries` | `false` | Show the scrolling recent-query feed |
+| `show_network_summary` | `true` | Show the combined network summary |
+| `show_trends` | `true` | Show short in-memory query-rate sparklines |
 
-### 2. `manifest.json` (Optional)
+When `cache_ttl` is omitted, Pi-Dash chooses a short value based on the fastest configured polling interval. The automatic value is deliberately shorter than the polling cadence so caching cannot silently slow an explicitly configured refresh rate.
 
-This file is for Progressive Web App (PWA) settings and icon. Example:
+### Pi-hole options
+
+| Option | Default | Purpose |
+| --- | --- | --- |
+| `name` | required | Display name |
+| `address` | required | Pi-hole base URL |
+| `password` | required/empty | API password or `${ENV_NAME}` |
+| `enabled` | `true` | Include the Pi-hole in the dashboard |
+| `link` | `false` | Make the instance name open Pi-hole Admin |
+| `verify_ssl` | `false` | `true`, `false`, or a CA bundle path |
+
+`verify_ssl` remains `false` by default because many LAN Pi-hole installations use self-signed certificates. If your Pi-hole has a valid certificate, set it to `true`. A custom CA bundle can also be supplied as a path.
+
+Passwords can be kept outside `config.json`:
 
 ```json
-{
-  "name": "Pi-Dash",
-  "short_name": "Pi-Dash",
-  "description": "A simple dashboard to monitor Pi-hole status.",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#111827",
-  "theme_color": "#06b6d4",
-  "icons": [
-    {
-      "src": "https://pi.hole/admin/img/logo.svg",
-      "sizes": "512x512",
-      "type": "image/svg+xml"
-    }
-  ]
-}
+"password": "${PIHOLE_PRIMARY_PASSWORD}"
 ```
 
-- **icons.src**: Replace with a direct link to your Pi-hole logo or preferred icon.
+Then provide `PIHOLE_PRIMARY_PASSWORD` through your shell or Docker environment.
+
+## Polling model
+
+Stats and recent queries are fetched separately. This means a typical configuration can update the visible counters every 2 seconds while fetching the query feed every 3 seconds. Pi-Dash also caches Pi-hole responses briefly in the server process, so opening the dashboard on multiple devices does not multiply upstream Pi-hole API traffic unnecessarily.
 
----
+The blocking enabled/disabled state changes much less frequently than query counters and is cached separately for 30 seconds.
+
+## Network summary semantics
+
+Pi-Dash only aggregates counters that can safely be summed across Pi-hole instances: queries, blocked queries, cached queries and forwarded queries. It deliberately does **not** sum active clients or unique domains because the same client/domain may appear on more than one redundant Pi-hole.
 
 ## Installation
 
-### Docker
-
-1. **Docker Compose**
-   ```yaml
-   services:
-     pi-dash:
-       image: ghcr.io/surajverma/pi-dash:latest
-       container_name: pi-dash
-       ports:
-         - 5001:5001
-       volumes:
-         - ./config.json:/app/config.json
-         - ./manifest.json:/app/manifest.json
-         # Assumes config.json and manifest.json are in the same folder as your compose.yml file
-   ```
-2. **Docker Run**
-   ```bash
-   docker run -d \
-    --name=pi-dash \
-    -p 5001:5001 \
-    -v /path/to/pi-dash/config.json:/app/config.json \
-    -v /path/to/pi-dash/manifest.json:/app/manifest.json \ # If you wish to edit the current manifest
-    ghcr.io/surajverma/pi-dash:latest
-   ```
-
-### Native Install
-
-1.  **Clone the repository:**
-
-    ```bash
-    git clone https://github.com/surajverma/pi-dash.git
-    cd pi-dash
-    ```
-
-2.  **Install the dependencies:**
-
-    ```bash
-    pip install -r requirements.txt
-    ```
-
-3.  **Start the app:**
-    To start the application, run the following command from the project's root directory:
-    ```bash
-    python proxy.py
-    ```
-
-Then, open your web browser and navigate to `http://localhost:5001`.
+### Docker Compose
+
+```yaml
+services:
+  pi-dash:
+    image: ghcr.io/surajverma/pi-dash:latest
+    container_name: pi-dash
+    ports:
+      - 5001:5001
+    environment:
+      PIHOLE_PRIMARY_PASSWORD: "your_app_password_here"
+    volumes:
+      - ./config.json:/app/config.json:ro
+      - ./manifest.json:/app/manifest.json:ro
+    restart: unless-stopped
+```
+
+The container runs Pi-Dash through Gunicorn and includes a healthcheck against `/health`.
+
+### Docker Run
+
+```bash
+docker run -d \
+  --name pi-dash \
+  -p 5001:5001 \
+  -e PIHOLE_PRIMARY_PASSWORD='your_app_password_here' \
+  -v /path/to/config.json:/app/config.json:ro \
+  -v /path/to/manifest.json:/app/manifest.json:ro \
+  ghcr.io/surajverma/pi-dash:latest
+```
+
+### Native install
+
+```bash
+git clone https://github.com/surajverma/pi-dash.git
+cd pi-dash
+cp config-example.json config.json
+pip install -r requirements.txt
+python proxy.py
+```
+
+Then open `http://localhost:5001`.
+
+`python proxy.py` remains available for simple native/LAN use. The Docker image uses Gunicorn for a more robust long-running server.
+
+## Health endpoint
+
+```text
+GET /health
+```
+
+returns a small Pi-Dash process health response without contacting every Pi-hole. This makes it suitable for Docker, Uptime Kuma, Homepage, Homarr and similar monitoring tools.
+
+## Tests
+
+Tests do not require a live Pi-hole:
+
+```bash
+cp config-example.json config.json
+python -m unittest discover -s tests -v
+```
+
+They cover old-config fallback behavior, independent query polling, cache behavior, zero enabled Pi-holes, secret resolution, safe network aggregation, the legacy `/data` shape and `/health`.
+
+## PWA behavior
+
+Pi-Dash caches its application shell for offline/reload resilience, but API responses are never cached by the service worker. Navigation uses network-first behavior and static assets are refreshed in the background, reducing the chance of an upgraded container continuing to display an old dashboard bundle.
 
 ## Credits
-Initial development of Pi-dash was done by [Codeloaf](https://github.com/codeloaf). It has since been transferred to this repository for ongoing maintenance, as the original author is not active on GitHub. 
+
+Initial development of Pi-Dash was done by [Codeloaf](https://github.com/codeloaf). It has since been transferred to this repository for ongoing maintenance, as the original author is not active on GitHub.
 
 ## Disclaimer
 
@@ -151,11 +191,12 @@ This project is not associated with the official [Pi-hole](https://pi-hole.net/)
 
 ## License
 
-This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+MIT. See [LICENSE](LICENSE).
 
 ## Contributing
 
-Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.
+Contributions, suggestions and bug reports are welcome through GitHub issues and pull requests.
 
 ## Thank You
+
 If you like my work, you can [buy me a coffee ☕](https://ko-fi.com/skv)

From 95ea9c5ef130631824ddd0e81cd4b73d7df2bb5f Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:30:59 +0530
Subject: [PATCH 16/45] Keep future CSS builds self-contained

---
 src/tailwind.css | 38 ++++++++------------------------------
 1 file changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/tailwind.css b/src/tailwind.css
index 1935b7a..e63158e 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -2,9 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-/* --- Your custom CSS below --- */
 body {
-    font-family: 'Inter', sans-serif;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     -webkit-tap-highlight-color: transparent;
 }
 html, body {
@@ -17,7 +16,6 @@ html, body {
     display: inline-block;
 }
 
-
 #background-queries {
     position: fixed;
     bottom: 0; left: 0; right: 0; top: auto;
@@ -26,61 +24,41 @@ html, body {
     flex-direction: column;
     justify-content: flex-end;
     list-style: none; margin: 0; padding: 4px 6px 8px;
-    font-family: 'Inter', monospace; font-size: 10px; line-height: 1.25;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    font-size: 10px; line-height: 1.25;
     pointer-events: none; overflow: hidden; z-index: 0;
-    
     -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
     mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
-    
     backdrop-filter: blur(0.5px);
     -webkit-backdrop-filter: blur(0.5px);
 }
 
-
 #background-queries li {
     text-shadow: 0 1px 2px rgba(0,0,0,0.15);
     letter-spacing: 0.01em;
 }
 
-@keyframes bqFadeIn { 
-    to { opacity:0.9; transform:translateY(0); } 
-}
-
-
 @media (max-width: 640px) and (orientation: portrait) {
-    #background-queries { 
-        height: 42vh; 
-        max-height: 42vh; 
-    }
-   
+    #background-queries { height: 42vh; max-height: 42vh; }
     body:has(#background-queries:not(:empty)) #main-wrapper {
         transform: translateY(-8vh);
         transition: transform 0.3s ease;
     }
 }
 
-
 @media (max-width: 896px) and (orientation: landscape) {
     #background-queries {
-        height: 35vh;
-        max-height: 35vh;
-        font-size: 9px;
-        padding: 2px 4px 6px;
-        line-height: 1.2;
+        height: 35vh; max-height: 35vh; font-size: 9px;
+        padding: 2px 4px 6px; line-height: 1.2;
     }
-    
     body:has(#background-queries:not(:empty)) #main-wrapper {
         transform: translateY(-4vh);
         transition: transform 0.3s ease;
     }
 }
 
-
 @media (min-width: 897px) and (max-width: 1024px) and (orientation: landscape) {
     #background-queries {
-        height: 28vh;
-        max-height: 28vh;
-        font-size: 9px;
-        padding: 2px 6px 6px;
+        height: 28vh; max-height: 28vh; font-size: 9px; padding: 2px 6px 6px;
     }
-}
\ No newline at end of file
+}

From 04251c3b1eff99780005cb971dd7cf1816a0ed4d Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:31:13 +0530
Subject: [PATCH 17/45] Extend CI to check frontend syntax and Tailwind build

---
 .github/workflows/test.yml | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index e1213a3..c17fdd3 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -11,15 +11,34 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
       - uses: actions/setup-python@v5
         with:
           python-version: '3.13'
           cache: 'pip'
-      - name: Install dependencies
+
+      - name: Install Python dependencies
         run: pip install -r requirements.txt
+
       - name: Prepare test configuration
         run: cp config-example.json config.json
+
       - name: Run regression tests
         run: python -m unittest discover -s tests -v
+
       - name: Compile-check backend
         run: python -m py_compile proxy.py
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: Install frontend dependencies
+        run: npm install
+
+      - name: Syntax-check frontend
+        run: node --check js/app.js
+
+      - name: Verify Tailwind build
+        run: npm run build:css

From 5e5b31a2f76051e6e81943c13fd8dd5e342b2a68 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:32:17 +0530
Subject: [PATCH 18/45] Fix frontend CI setup for repository without lockfile

---
 .github/workflows/test.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c17fdd3..af7cc71 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -32,7 +32,6 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
-          cache: 'npm'
 
       - name: Install frontend dependencies
         run: npm install

From e291420e2d42fa020121d13e76de9c7af32b2caa Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:34:05 +0530
Subject: [PATCH 19/45] Coalesce concurrent query cache misses

---
 proxy.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/proxy.py b/proxy.py
index cf97ac2..8f1dd9d 100644
--- a/proxy.py
+++ b/proxy.py
@@ -174,6 +174,10 @@ def fetch_queries(length=50,force=False):
         c=_queries_cache.get(length)
         if not force and c and now-c['time']<ttl: return c['data']
     with _queries_refresh_lock:
+        now=time.monotonic()
+        with _cache_lock:
+            c=_queries_cache.get(length)
+            if not force and c and now-c['time']<ttl: return c['data']
         d=_queries_uncached(length)
         with _cache_lock: _queries_cache[length]={'time':time.monotonic(),'data':d}
         return d

From 66c13ebfe582e77fe222d164070bd8afd7c41147 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:53:18 +0530
Subject: [PATCH 20/45] Keep Docker healthcheck valid with base path hosting

---
 proxy.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/proxy.py b/proxy.py
index 8f1dd9d..bf741e6 100644
--- a/proxy.py
+++ b/proxy.py
@@ -216,4 +216,10 @@ def queries():
 def health(): return jsonify({'status':'ok','enabled_piholes':len(enabled()),'cache_ttl_ms':get_cache_ttl()})
 
 app.register_blueprint(bp,url_prefix=url_prefix)
+
+# Keep a root health endpoint for Docker/orchestrators even when the UI is
+# hosted below a configured base_path such as /pi-dash/.
+if url_prefix not in ('', '/'):
+    app.add_url_rule('/health','root_health',health)
+
 if __name__=='__main__': app.run(host='0.0.0.0',port=5001)

From ea37d910c7f49565f812185de71065a1f1533f82 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 18:54:19 +0530
Subject: [PATCH 21/45] Remove misleading latency and correct blocking health
 semantics

---
 proxy.py | 495 +++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 352 insertions(+), 143 deletions(-)

diff --git a/proxy.py b/proxy.py
index bf741e6..838414c 100644
--- a/proxy.py
+++ b/proxy.py
@@ -1,7 +1,11 @@
 from flask import Flask, jsonify, send_from_directory, request, Blueprint
 from markupsafe import escape
 import requests
-import os, json, concurrent.futures, threading, time
+import os
+import json
+import concurrent.futures
+import threading
+import time
 from urllib.parse import urlparse
 
 NO_PASSWORD = "NO_PASSWORD"
@@ -9,217 +13,422 @@
 DEFAULT_REQUEST_TIMEOUT = 10
 DEFAULT_CACHE_TTL = 1000
 DEFAULT_BLOCKING_TTL = 30000
-SLOW_RESPONSE_MS = 500
-BLOCKED_STATUSES = {'GRAVITY','REGEX','DENYLIST','EXTERNAL_BLOCKED_IP','EXTERNAL_BLOCKED_NULL','EXTERNAL_BLOCKED_NXRA','GRAVITY_CNAME','REGEX_CNAME','DENYLIST_CNAME','DBBUSY','SPECIAL_DOMAIN','EXTERNAL_BLOCKED_EDE15'}
+BLOCKED_STATUSES = {
+    'GRAVITY', 'REGEX', 'DENYLIST', 'EXTERNAL_BLOCKED_IP',
+    'EXTERNAL_BLOCKED_NULL', 'EXTERNAL_BLOCKED_NXRA', 'GRAVITY_CNAME',
+    'REGEX_CNAME', 'DENYLIST_CNAME', 'DBBUSY', 'SPECIAL_DOMAIN',
+    'EXTERNAL_BLOCKED_EDE15',
+}
 
 app = Flask(__name__)
 APP_ROOT = os.path.dirname(os.path.realpath(__file__))
 
+
 def _load_json(name):
-    with open(os.path.join(APP_ROOT, name), encoding='utf-8') as f: return json.load(f)
+    with open(os.path.join(APP_ROOT, name), encoding='utf-8') as handle:
+        return json.load(handle)
+
+
 config = _load_json('config.json')
 manifest_data = _load_json('manifest.json')
-with open(os.path.join(APP_ROOT,'index.html'),encoding='utf-8') as f: index_template=f.read()
-with open(os.path.join(APP_ROOT,'sw.js'),encoding='utf-8') as f: sw_template=f.read()
+with open(os.path.join(APP_ROOT, 'index.html'), encoding='utf-8') as handle:
+    index_template = handle.read()
+with open(os.path.join(APP_ROOT, 'sw.js'), encoding='utf-8') as handle:
+    sw_template = handle.read()
+
+base_path_config = config.get('base_path', '/')
+url_prefix = base_path_config[:-1] if base_path_config != '/' and base_path_config.endswith('/') else base_path_config
+html_base = base_path_config if base_path_config.endswith('/') else base_path_config + '/'
+bp = Blueprint('pi-dash', __name__)
+pihole_sessions = {}
+_sessions_lock = threading.Lock()
+_cache_lock = threading.Lock()
+_stats_refresh_lock = threading.Lock()
+_queries_refresh_lock = threading.Lock()
+_blocking_lock = threading.Lock()
+_stats_cache = {'time': 0.0, 'data': None}
+_queries_cache = {}
+_blocking_cache = {}
 
-base_path_config=config.get('base_path','/')
-url_prefix=base_path_config[:-1] if base_path_config!='/' and base_path_config.endswith('/') else base_path_config
-html_base=base_path_config if base_path_config.endswith('/') else base_path_config+'/'
-bp=Blueprint('pi-dash',__name__)
-pihole_sessions={}; _sessions_lock=threading.Lock(); _cache_lock=threading.Lock(); _stats_refresh_lock=threading.Lock(); _queries_refresh_lock=threading.Lock(); _blocking_lock=threading.Lock()
-_stats_cache={'time':0.0,'data':None}; _queries_cache={}; _blocking_cache={}
 
 def _int(value, default, minimum=100):
     try:
-        value=int(value); return value if value>=minimum else default
-    except (TypeError,ValueError): return default
+        value = int(value)
+        return value if value >= minimum else default
+    except (TypeError, ValueError):
+        return default
+
+
+def get_refresh_interval():
+    return _int(config.get('refresh_interval'), DEFAULT_REFRESH_INTERVAL)
+
+
+def get_queries_refresh_interval():
+    # An old configuration keeps its original query refresh cadence.
+    return _int(config.get('queries_refresh_interval'), get_refresh_interval())
+
 
-def get_refresh_interval(): return _int(config.get('refresh_interval'),DEFAULT_REFRESH_INTERVAL)
-def get_queries_refresh_interval(): return _int(config.get('queries_refresh_interval'),get_refresh_interval())
 def get_cache_ttl():
-    if 'cache_ttl' in config: return _int(config.get('cache_ttl'),DEFAULT_CACHE_TTL,0)
-    return min(DEFAULT_CACHE_TTL,max(100,min(get_refresh_interval(),get_queries_refresh_interval())//2))
+    if 'cache_ttl' in config:
+        return _int(config.get('cache_ttl'), DEFAULT_CACHE_TTL, 0)
+    return min(DEFAULT_CACHE_TTL, max(100, min(get_refresh_interval(), get_queries_refresh_interval()) // 2))
+
+
 def resolve_secret(value):
-    if isinstance(value,str) and value.startswith('${') and value.endswith('}'):
-        return os.environ.get(value[2:-1],value)
+    if isinstance(value, str) and value.startswith('${') and value.endswith('}'):
+        return os.environ.get(value[2:-1], value)
     return value
-def get_verify_setting(p):
-    v=p.get('verify_ssl',False)
-    if isinstance(v,str):
-        if v.lower()=='true': return True
-        if v.lower()=='false': return False
-        return resolve_secret(v)
-    return bool(v)
-def headers(sid): return {} if sid==NO_PASSWORD else {'X-FTL-SID':sid}
-
-def authenticate_and_get_sid(p):
-    address=p['address'].rstrip('/')
+
+
+def get_verify_setting(pihole):
+    value = pihole.get('verify_ssl', False)
+    if isinstance(value, str):
+        if value.lower() == 'true':
+            return True
+        if value.lower() == 'false':
+            return False
+        return resolve_secret(value)
+    return bool(value)
+
+
+def headers(sid):
+    return {} if sid == NO_PASSWORD else {'X-FTL-SID': sid}
+
+
+def authenticate_and_get_sid(pihole):
+    address = pihole['address'].rstrip('/')
     try:
-        r=requests.post(address+'/api/auth',json={'password':resolve_secret(p.get('password',''))},timeout=DEFAULT_REQUEST_TIMEOUT,verify=get_verify_setting(p))
-        if r.status_code==200:
-            d=r.json(); sid=d.get('session',{}).get('sid')
-            if sid: return sid
-            if d.get('session',{}).get('message')=='no password set': return NO_PASSWORD
+        response = requests.post(
+            address + '/api/auth',
+            json={'password': resolve_secret(pihole.get('password', ''))},
+            timeout=DEFAULT_REQUEST_TIMEOUT,
+            verify=get_verify_setting(pihole),
+        )
+        if response.status_code == 200:
+            data = response.json()
+            sid = data.get('session', {}).get('sid')
+            if sid:
+                return sid
+            if data.get('session', {}).get('message') == 'no password set':
+                return NO_PASSWORD
         return None
-    except requests.exceptions.RequestException: return None
+    except requests.exceptions.RequestException:
+        return None
+
 
-def get_sid(p,force=False):
-    name=p['name']
+def get_sid(pihole, force=False):
+    name = pihole['name']
     with _sessions_lock:
-        if force: pihole_sessions.pop(name,None)
-        sid=pihole_sessions.get(name)
-    if sid: return sid
-    sid=authenticate_and_get_sid(p)
+        if force:
+            pihole_sessions.pop(name, None)
+        sid = pihole_sessions.get(name)
     if sid:
-        with _sessions_lock: pihole_sessions[name]=sid
+        return sid
+    sid = authenticate_and_get_sid(pihole)
+    if sid:
+        with _sessions_lock:
+            pihole_sessions[name] = sid
     return sid
 
-def pihole_get(p,path,params=None):
-    sid=get_sid(p)
-    if not sid: raise RuntimeError('authentication failed')
-    args={'headers':headers(sid),'params':params,'timeout':DEFAULT_REQUEST_TIMEOUT,'verify':get_verify_setting(p)}
-    r=requests.get(p['address'].rstrip('/')+path,**args)
-    if r.status_code==401 and sid!=NO_PASSWORD:
-        sid=get_sid(p,True)
-        if not sid: raise RuntimeError('re-authentication failed')
-        args['headers']=headers(sid); r=requests.get(p['address'].rstrip('/')+path,**args)
-    r.raise_for_status(); return r
 
+def pihole_get(pihole, path, params=None):
+    sid = get_sid(pihole)
+    if not sid:
+        raise RuntimeError('authentication failed')
+    args = {
+        'headers': headers(sid), 'params': params,
+        'timeout': DEFAULT_REQUEST_TIMEOUT,
+        'verify': get_verify_setting(pihole),
+    }
+    url = pihole['address'].rstrip('/') + path
+    response = requests.get(url, **args)
+    if response.status_code == 401 and sid != NO_PASSWORD:
+        sid = get_sid(pihole, True)
+        if not sid:
+            raise RuntimeError('re-authentication failed')
+        args['headers'] = headers(sid)
+        response = requests.get(url, **args)
+    response.raise_for_status()
+    return response
+
+
+# -- Frontend routes --
 @bp.route('/')
 def index():
-    icon=(manifest_data.get('icons') or [{}])[0].get('src','')
-    return index_template.replace('<head>',f'<head>\n    <base href="{escape(html_base)}">').replace('{{ICON_URL}}',escape(icon))
+    icon = (manifest_data.get('icons') or [{}])[0].get('src', '')
+    return index_template.replace('<head>', f'<head>\n    <base href="{escape(html_base)}">').replace('{{ICON_URL}}', escape(icon))
+
+
 @bp.route('/manifest.json')
 def serve_manifest():
-    d=manifest_data.copy(); d['start_url']=html_base; return jsonify(d)
+    data = manifest_data.copy()
+    data['start_url'] = html_base
+    return jsonify(data)
+
+
 @bp.route('/sw.js')
-def serve_sw(): return sw_template.replace('{{CACHE_URL}}',html_base),200,{'Content-Type':'application/javascript','Cache-Control':'no-cache'}
+def serve_sw():
+    return sw_template.replace('{{CACHE_URL}}', html_base), 200, {'Content-Type': 'application/javascript', 'Cache-Control': 'no-cache'}
+
+
 @bp.route('/css/<path:path>')
-def send_css(path): return send_from_directory(os.path.join(APP_ROOT,'css'),path)
+def send_css(path):
+    return send_from_directory(os.path.join(APP_ROOT, 'css'), path)
+
+
 @bp.route('/js/<path:path>')
-def send_js(path): return send_from_directory(os.path.join(APP_ROOT,'js'),path)
+def send_js(path):
+    return send_from_directory(os.path.join(APP_ROOT, 'js'), path)
+
+
 @bp.route('/favicon.ico')
-def favicon(): return '',204
+def favicon():
+    return '', 204
+
+
+# -- API helpers --
+def enabled():
+    return [p for p in config.get('piholes', []) if p.get('enabled', True)]
+
 
-def enabled(): return [p for p in config.get('piholes',[]) if p.get('enabled',True)]
 def filtered_config():
-    out=[]
-    for p in enabled():
-        item={'name':p['name'],'enabled':True,'link':p.get('link',False)}
-        if item['link']: item['address']=p['address']
+    out = []
+    for pihole in enabled():
+        item = {'name': pihole['name'], 'enabled': True, 'link': pihole.get('link', False)}
+        if item['link']:
+            item['address'] = pihole['address']
         out.append(item)
-    return {'refresh_interval':get_refresh_interval(),'queries_refresh_interval':get_queries_refresh_interval(),'show_queries':config.get('show_queries',False),'show_network_summary':config.get('show_network_summary',True),'show_trends':config.get('show_trends',True),'piholes':out}
+    return {
+        'refresh_interval': get_refresh_interval(),
+        'queries_refresh_interval': get_queries_refresh_interval(),
+        'show_queries': config.get('show_queries', False),
+        'show_network_summary': config.get('show_network_summary', True),
+        'show_trends': config.get('show_trends', True),
+        'piholes': out,
+    }
+
+
+def normalize_blocking(value):
+    """Pi-hole v6 returns enabled/disabled strings; accept booleans as well."""
+    if value is True or value is False:
+        return value
+    if isinstance(value, str):
+        if value.lower() in ('enabled', 'on', 'true'):
+            return True
+        if value.lower() in ('disabled', 'off', 'false'):
+            return False
+    return None
 
-def get_blocking(p):
-    name=p['name']; now=time.monotonic()
+
+def get_blocking(pihole):
+    name = pihole['name']
+    now = time.monotonic()
     with _cache_lock:
-        c=_blocking_cache.get(name)
-        if c and now-c['time']<DEFAULT_BLOCKING_TTL/1000: return c['value']
+        cached = _blocking_cache.get(name)
+        if cached and now - cached['time'] < DEFAULT_BLOCKING_TTL / 1000:
+            return cached['value']
     with _blocking_lock:
-        try: value=pihole_get(p,'/api/dns/blocking').json().get('blocking')
-        except Exception: value=None
-        with _cache_lock: _blocking_cache[name]={'time':time.monotonic(),'value':value}
+        # Coalesce simultaneous misses, as with the statistics cache.
+        now = time.monotonic()
+        with _cache_lock:
+            cached = _blocking_cache.get(name)
+            if cached and now - cached['time'] < DEFAULT_BLOCKING_TTL / 1000:
+                return cached['value']
+        try:
+            value = normalize_blocking(pihole_get(pihole, '/api/dns/blocking').json().get('blocking'))
+        except (requests.exceptions.RequestException, RuntimeError, ValueError):
+            value = None
+        with _cache_lock:
+            _blocking_cache[name] = {'time': time.monotonic(), 'value': value}
         return value
 
-def fetch_one(p):
-    start=time.perf_counter(); name=p['name']
+
+def fetch_one(pihole):
+    name = pihole['name']
     try:
-        r=pihole_get(p,'/api/stats/summary'); latency=round((time.perf_counter()-start)*1000,1); d=r.json()
-        d['_pi_dash']={'latency_ms':latency,'blocking':get_blocking(p),'health':'slow' if latency>=SLOW_RESPONSE_MS else 'healthy'}
-        return name,d
-    except RuntimeError as e: return name,{'error':str(e),'_pi_dash':{'health':'auth_error'}}
-    except Exception as e: return name,{'error':str(e),'_pi_dash':{'health':'unreachable'}}
+        data = pihole_get(pihole, '/api/stats/summary').json()
+        blocking = get_blocking(pihole)
+        data['_pi_dash'] = {
+            'blocking': blocking,
+            'health': 'blocking_disabled' if blocking is False else 'healthy',
+        }
+        return name, data
+    except RuntimeError as exc:
+        return name, {'error': str(exc), '_pi_dash': {'health': 'auth_error'}}
+    except (requests.exceptions.RequestException, ValueError) as exc:
+        return name, {'error': str(exc), '_pi_dash': {'health': 'unreachable'}}
+
 
 def _stats_uncached():
-    items=enabled(); results={}
-    if not items: return results
-    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(items),10)) as ex:
-        for f in concurrent.futures.as_completed([ex.submit(fetch_one,p) for p in items]):
-            n,d=f.result(); results[n]=d
+    items = enabled()
+    results = {}
+    if not items:
+        return results
+    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(items), 10)) as executor:
+        futures = [executor.submit(fetch_one, pihole) for pihole in items]
+        for future in concurrent.futures.as_completed(futures):
+            name, data = future.result()
+            results[name] = data
     return results
 
+
 def fetch_stats(force=False):
-    ttl=get_cache_ttl()/1000; now=time.monotonic()
+    ttl = get_cache_ttl() / 1000
+    now = time.monotonic()
     with _cache_lock:
-        if not force and _stats_cache['data'] is not None and now-_stats_cache['time']<ttl: return _stats_cache['data']
+        if not force and _stats_cache['data'] is not None and now - _stats_cache['time'] < ttl:
+            return _stats_cache['data']
     with _stats_refresh_lock:
-        now=time.monotonic()
+        now = time.monotonic()
         with _cache_lock:
-            if not force and _stats_cache['data'] is not None and now-_stats_cache['time']<ttl: return _stats_cache['data']
-        d=_stats_uncached()
-        with _cache_lock: _stats_cache.update(time=time.monotonic(),data=d)
-        return d
+            if not force and _stats_cache['data'] is not None and now - _stats_cache['time'] < ttl:
+                return _stats_cache['data']
+        data = _stats_uncached()
+        with _cache_lock:
+            _stats_cache.update(time=time.monotonic(), data=data)
+        return data
+
 
 def _queries_uncached(length):
-    items=enabled(); results={}
-    if not items: return results
-    hosts={urlparse(p['address']).hostname.lower() for p in items if urlparse(p['address']).hostname}
-    def one(p):
+    items = enabled()
+    results = {}
+    if not items:
+        return results
+    hosts = {urlparse(p['address']).hostname.lower() for p in items if urlparse(p['address']).hostname}
+
+    def one(pihole):
         try:
-            data=pihole_get(p,'/api/queries',{'length':length}).json(); out=[]
-            for q in data.get('queries',[])[:length]:
-                domain=q.get('domain',''); ts=q.get('time') or q.get('timestamp')
-                if domain.lower().strip() in hosts: continue
-                out.append({'id':q.get('id'),'domain':domain,'blocked':(q.get('status') or '').upper() in BLOCKED_STATUSES,'time':ts,'timestamp':ts,'upstream':q.get('upstream','')})
-            return p['name'],out
-        except Exception: return p['name'],[]
-    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(items),10)) as ex:
-        for f in concurrent.futures.as_completed([ex.submit(one,p) for p in items]):
-            n,d=f.result(); results[n]=d
+            data = pihole_get(pihole, '/api/queries', {'length': length}).json()
+            out = []
+            for query in data.get('queries', [])[:length]:
+                domain = query.get('domain', '')
+                timestamp = query.get('time') if query.get('time') is not None else query.get('timestamp')
+                if domain.lower().strip() in hosts:
+                    continue
+                out.append({
+                    'id': query.get('id'),
+                    'domain': domain,
+                    'blocked': (query.get('status') or '').upper() in BLOCKED_STATUSES,
+                    'time': timestamp,
+                    'timestamp': timestamp,
+                    'upstream': query.get('upstream', ''),
+                })
+            return pihole['name'], out
+        except (requests.exceptions.RequestException, RuntimeError, ValueError):
+            return pihole['name'], []
+
+    with concurrent.futures.ThreadPoolExecutor(max_workers=min(len(items), 10)) as executor:
+        futures = [executor.submit(one, pihole) for pihole in items]
+        for future in concurrent.futures.as_completed(futures):
+            name, data = future.result()
+            results[name] = data
     return results
 
-def fetch_queries(length=50,force=False):
-    ttl=get_cache_ttl()/1000; now=time.monotonic()
+
+def fetch_queries(length=50, force=False):
+    ttl = get_cache_ttl() / 1000
+    now = time.monotonic()
     with _cache_lock:
-        c=_queries_cache.get(length)
-        if not force and c and now-c['time']<ttl: return c['data']
+        cached = _queries_cache.get(length)
+        if not force and cached and now - cached['time'] < ttl:
+            return cached['data']
     with _queries_refresh_lock:
-        now=time.monotonic()
+        now = time.monotonic()
+        with _cache_lock:
+            cached = _queries_cache.get(length)
+            if not force and cached and now - cached['time'] < ttl:
+                return cached['data']
+        data = _queries_uncached(length)
         with _cache_lock:
-            c=_queries_cache.get(length)
-            if not force and c and now-c['time']<ttl: return c['data']
-        d=_queries_uncached(length)
-        with _cache_lock: _queries_cache[length]={'time':time.monotonic(),'data':d}
-        return d
+            _queries_cache[length] = {'time': time.monotonic(), 'data': data}
+        return data
+
 
 def network_summary(data):
-    total=blocked=cached=forwarded=healthy=slow=offline=0
-    for d in data.values():
-        if d.get('error') or not d.get('queries'): offline+=1; continue
-        q=d['queries']; total+=int(q.get('total') or 0); blocked+=int(q.get('blocked') or 0); cached+=int(q.get('cached') or 0); forwarded+=int(q.get('forwarded') or 0)
-        if d.get('_pi_dash',{}).get('health')=='slow': slow+=1
-        else: healthy+=1
-    return {'total_queries':total,'blocked_queries':blocked,'percent_blocked':round(blocked/total*100,1) if total else 0,'cached_queries':cached,'forwarded_queries':forwarded,'instances':len(data),'healthy_instances':healthy,'slow_instances':slow,'offline_instances':offline}
+    total = blocked = cached = forwarded = healthy = offline = disabled = unknown = 0
+    contributing = 0
+    for item in data.values():
+        if item.get('error') or not isinstance(item.get('queries'), dict):
+            offline += 1
+            continue
+        contributing += 1
+        queries = item['queries']
+        total += int(queries.get('total') or 0)
+        blocked += int(queries.get('blocked') or 0)
+        cached += int(queries.get('cached') or 0)
+        forwarded += int(queries.get('forwarded') or 0)
+        blocking = item.get('_pi_dash', {}).get('blocking')
+        if blocking is False:
+            disabled += 1
+        elif blocking is None:
+            unknown += 1
+        else:
+            healthy += 1
+    return {
+        'total_queries': total,
+        'blocked_queries': blocked,
+        'percent_blocked': round(blocked / total * 100, 1) if total else 0,
+        'cached_queries': cached,
+        'forwarded_queries': forwarded,
+        'instances': len(data),
+        'contributing_instances': contributing,
+        'healthy_instances': healthy,
+        'blocking_disabled_instances': disabled,
+        'blocking_unknown_instances': unknown,
+        'offline_instances': offline,
+        'partial': contributing != len(data),
+    }
+
 
+# -- API routes --
 @bp.route('/init')
 def init():
     try:
-        stats=fetch_stats(); res={'config':filtered_config(),'data':stats,'summary':network_summary(stats)}
-        if config.get('show_queries',False): res['queries']=fetch_queries(50)
-        return jsonify(res)
-    except Exception as e: return jsonify({'error':str(e)}),500
+        stats = fetch_stats()
+        result = {'config': filtered_config(), 'data': stats, 'summary': network_summary(stats)}
+        if config.get('show_queries', False):
+            result['queries'] = fetch_queries(50)
+        return jsonify(result)
+    except Exception as exc:
+        return jsonify({'error': str(exc)}), 500
+
+
 @bp.route('/data')
 def data():
     try:
-        stats=fetch_stats(); summary=request.args.get('include_summary','false').lower()=='true'; queries=request.args.get('include_queries','false').lower()=='true'
-        if not summary and not queries: return jsonify(stats)
-        res={'stats':stats}
-        if summary: res['summary']=network_summary(stats)
-        if queries: res['queries']=fetch_queries(max(1,min(int(request.args.get('length',50)),200)))
-        return jsonify(res)
-    except Exception as e: return jsonify({'error':str(e)}),500
+        stats = fetch_stats()
+        include_summary = request.args.get('include_summary', 'false').lower() == 'true'
+        include_queries = request.args.get('include_queries', 'false').lower() == 'true'
+        if not include_summary and not include_queries:
+            return jsonify(stats)
+        result = {'stats': stats}
+        if include_summary:
+            result['summary'] = network_summary(stats)
+        if include_queries:
+            length = max(1, min(int(request.args.get('length', 50)), 200))
+            result['queries'] = fetch_queries(length)
+        return jsonify(result)
+    except Exception as exc:
+        return jsonify({'error': str(exc)}), 500
+
+
 @bp.route('/queries')
 def queries():
-    try: return jsonify(fetch_queries(max(1,min(int(request.args.get('length',50)),200))))
-    except Exception as e: return jsonify({'error':str(e)}),500
+    try:
+        length = max(1, min(int(request.args.get('length', 50)), 200))
+        return jsonify(fetch_queries(length))
+    except Exception as exc:
+        return jsonify({'error': str(exc)}), 500
+
+
 @bp.route('/health')
-def health(): return jsonify({'status':'ok','enabled_piholes':len(enabled()),'cache_ttl_ms':get_cache_ttl()})
+def health():
+    return jsonify({'status': 'ok', 'enabled_piholes': len(enabled()), 'cache_ttl_ms': get_cache_ttl()})
 
-app.register_blueprint(bp,url_prefix=url_prefix)
 
-# Keep a root health endpoint for Docker/orchestrators even when the UI is
-# hosted below a configured base_path such as /pi-dash/.
+app.register_blueprint(bp, url_prefix=url_prefix)
 if url_prefix not in ('', '/'):
-    app.add_url_rule('/health','root_health',health)
+    app.add_url_rule('/health', 'root_health', health)
 
-if __name__=='__main__': app.run(host='0.0.0.0',port=5001)
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5001)

From 840e112df216e4a722f816dc0978562c6e8844a0 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 18:55:22 +0530
Subject: [PATCH 22/45] Add testable query grouping and health presentation
 helpers

---
 js/dashboard-core.js | 160 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 js/dashboard-core.js

diff --git a/js/dashboard-core.js b/js/dashboard-core.js
new file mode 100644
index 0000000..364b573
--- /dev/null
+++ b/js/dashboard-core.js
@@ -0,0 +1,160 @@
+/* Pure dashboard helpers shared by the browser and Node regression tests. */
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  else root.PiDashCore = api;
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  function finite(value, fallback = 0) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+  }
+
+  function summaryStats(raw) {
+    const q = raw?.queries || {};
+    const clients = raw?.clients || {};
+    const gravity = raw?.gravity || {};
+    return {
+      total: finite(q.total), blocked: finite(q.blocked),
+      percentage: finite(q.percent_blocked), clients: finite(clients.active),
+      rate: finite(q.frequency), cached: finite(q.cached),
+      forwarded: finite(q.forwarded), unique: finite(q.unique_domains),
+      domains: finite(gravity.domains_being_blocked),
+    };
+  }
+
+  function formatRate(rate) {
+    const value = Math.max(0, finite(rate));
+    return value < 1 ? `${(value * 60).toFixed(1)}/min` : `${value.toFixed(1)}/sec`;
+  }
+
+  function healthPresentation(meta = {}, hasError = false) {
+    if (hasError || meta.health === 'auth_error') {
+      if (meta.health === 'auth_error') return { state: 'danger', text: 'Auth failed' };
+      return { state: 'danger', text: 'Offline' };
+    }
+    if (meta.health === 'unreachable') return { state: 'danger', text: 'Offline' };
+    if (meta.blocking === false || meta.health === 'blocking_disabled') {
+      return { state: 'warning', text: 'Blocking OFF' };
+    }
+    if (meta.blocking === true) return { state: 'success', text: 'Blocking ON' };
+    return { state: 'neutral', text: 'Online · blocking unknown' };
+  }
+
+  function networkStatus(summary) {
+    const total = finite(summary?.instances);
+    const reporting = finite(summary?.contributing_instances, total - finite(summary?.offline_instances));
+    if (!total) return 'No active Pi-holes';
+    const parts = [`${reporting} of ${total} reporting`];
+    if (summary?.blocking_disabled_instances) parts.push(`${summary.blocking_disabled_instances} blocking off`);
+    if (summary?.offline_instances) parts.push(`${summary.offline_instances} offline`);
+    if (summary?.blocking_unknown_instances) parts.push(`${summary.blocking_unknown_instances} blocking unknown`);
+    if (!summary?.partial && !summary?.blocking_disabled_instances && !summary?.offline_instances && !summary?.blocking_unknown_instances) {
+      return `${total} healthy`;
+    }
+    return parts.join(' · ');
+  }
+
+  function queryIdentity(query) {
+    const id = query.id;
+    if (id !== null && id !== undefined && id !== '' && Number.isFinite(Number(id))) {
+      return `id:${String(id)}`;
+    }
+    // Fallback for older APIs without IDs. Include type and client so that
+    // simultaneous A/AAAA or different-client requests are not conflated.
+    return `time:${query.time ?? query.timestamp ?? ''}|${query.type ?? ''}|${query.client ?? ''}|${query.domain ?? ''}|${query.blocked ? 1 : 0}`;
+  }
+
+  function queryTimestamp(query) {
+    return finite(query.time ?? query.timestamp, 0);
+  }
+
+  function queryKey(query) {
+    return JSON.stringify([query.piholeName, String(query.domain || '').toLowerCase(), Boolean(query.blocked)]);
+  }
+
+  function queryLabel(query) {
+    return `[${query.piholeName}] ${query.domain || ''}`;
+  }
+
+  function groupConsecutiveQueries(events) {
+    const groups = [];
+    for (const event of events) {
+      const key = queryKey(event);
+      const previous = groups[groups.length - 1];
+      if (previous && previous.key === key) {
+        previous.count += 1;
+      } else {
+        groups.push({ key, label: queryLabel(event), blocked: Boolean(event.blocked), count: 1 });
+      }
+    }
+    return groups;
+  }
+
+  function mergeConsecutiveGroups(existing, incoming, maxRows = 100) {
+    const rows = existing.map(row => ({ ...row }));
+    for (const group of incoming) {
+      const last = rows[rows.length - 1];
+      if (last && last.key === group.key) last.count += group.count;
+      else rows.push({ ...group });
+    }
+    return rows.slice(-maxRows);
+  }
+
+  function createQueryTracker() {
+    return { cursors: new Map(), seen: new Map() };
+  }
+
+  function collectNewQueries(tracker, allQueries, maxSeen = 1000) {
+    const incoming = [];
+    let order = 0;
+    for (const [piholeName, queries] of Object.entries(allQueries || {})) {
+      if (!Array.isArray(queries)) continue;
+      let cursor = tracker.cursors.get(piholeName);
+      if (!cursor) cursor = { id: null, time: -Infinity };
+      let seen = tracker.seen.get(piholeName);
+      if (!seen) seen = new Map();
+      const valid = queries.filter(q => q && typeof q === 'object');
+      const ids = valid.map(q => Number(q.id)).filter((id, i) => valid[i]?.id != null && Number.isFinite(id));
+      const newestTime = Math.max(cursor.time, ...valid.map(queryTimestamp));
+      // A Pi-hole database can restart its ID sequence. A newer timestamp
+      // with an entirely lower ID range indicates a reset, not old traffic.
+      if (cursor.id !== null && ids.length && Math.max(...ids) < cursor.id && newestTime > cursor.time) {
+        cursor = { id: null, time: cursor.time };
+        seen = new Map();
+      }
+      let maxId = cursor.id;
+      let maxTime = cursor.time;
+      for (const query of valid) {
+        const identity = queryIdentity(query);
+        const timestamp = queryTimestamp(query);
+        const id = query.id != null && query.id !== '' && Number.isFinite(Number(query.id)) ? Number(query.id) : null;
+        const alreadySeen = seen.has(identity);
+        const isNew = id !== null
+          ? (cursor.id === null || id > cursor.id)
+          : timestamp > cursor.time;
+        if (isNew && !alreadySeen) incoming.push({ ...query, piholeName, __order: order++, __time: timestamp, __id: id ?? 0 });
+        seen.delete(identity);
+        seen.set(identity, true);
+        if (id !== null && (maxId === null || id > maxId)) maxId = id;
+        maxTime = Math.max(maxTime, timestamp);
+      }
+      while (seen.size > maxSeen) seen.delete(seen.keys().next().value);
+      tracker.cursors.set(piholeName, { id: maxId, time: maxTime });
+      tracker.seen.set(piholeName, seen);
+    }
+    // IDs belong to individual databases; timestamps provide cross-instance
+    // ordering, with source IDs used only to break ties within one instance.
+    incoming.sort((a, b) => a.__time - b.__time ||
+      (a.piholeName === b.piholeName ? a.__id - b.__id : 0) || a.__order - b.__order);
+    return incoming;
+  }
+
+  return {
+    summaryStats, formatRate, healthPresentation, networkStatus,
+    queryIdentity, queryTimestamp, queryKey, queryLabel,
+    groupConsecutiveQueries, mergeConsecutiveGroups,
+    createQueryTracker, collectNewQueries,
+  };
+});

From cc887f57c5b5619633e398c3954cdb407777a123 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:09:13 +0530
Subject: [PATCH 23/45] Correct query identity tracking and restore consecutive
 grouping helpers

---
 js/dashboard-core.js | 50 ++++++++++++++++++--------------------------
 1 file changed, 20 insertions(+), 30 deletions(-)

diff --git a/js/dashboard-core.js b/js/dashboard-core.js
index 364b573..69afac4 100644
--- a/js/dashboard-core.js
+++ b/js/dashboard-core.js
@@ -31,8 +31,7 @@
 
   function healthPresentation(meta = {}, hasError = false) {
     if (hasError || meta.health === 'auth_error') {
-      if (meta.health === 'auth_error') return { state: 'danger', text: 'Auth failed' };
-      return { state: 'danger', text: 'Offline' };
+      return { state: 'danger', text: meta.health === 'auth_error' ? 'Auth failed' : 'Offline' };
     }
     if (meta.health === 'unreachable') return { state: 'danger', text: 'Offline' };
     if (meta.blocking === false || meta.health === 'blocking_disabled') {
@@ -56,18 +55,17 @@
     return parts.join(' · ');
   }
 
+  function queryTimestamp(query) {
+    return finite(query.time ?? query.timestamp, 0);
+  }
+
   function queryIdentity(query) {
     const id = query.id;
     if (id !== null && id !== undefined && id !== '' && Number.isFinite(Number(id))) {
       return `id:${String(id)}`;
     }
-    // Fallback for older APIs without IDs. Include type and client so that
-    // simultaneous A/AAAA or different-client requests are not conflated.
-    return `time:${query.time ?? query.timestamp ?? ''}|${query.type ?? ''}|${query.client ?? ''}|${query.domain ?? ''}|${query.blocked ? 1 : 0}`;
-  }
-
-  function queryTimestamp(query) {
-    return finite(query.time ?? query.timestamp, 0);
+    const client = typeof query.client === 'object' ? query.client?.ip : query.client;
+    return JSON.stringify(['time', query.time ?? query.timestamp ?? '', query.type ?? '', client ?? '', query.domain ?? '', Boolean(query.blocked)]);
   }
 
   function queryKey(query) {
@@ -83,11 +81,8 @@
     for (const event of events) {
       const key = queryKey(event);
       const previous = groups[groups.length - 1];
-      if (previous && previous.key === key) {
-        previous.count += 1;
-      } else {
-        groups.push({ key, label: queryLabel(event), blocked: Boolean(event.blocked), count: 1 });
-      }
+      if (previous && previous.key === key) previous.count += 1;
+      else groups.push({ key, label: queryLabel(event), blocked: Boolean(event.blocked), count: 1 });
     }
     return groups;
   }
@@ -111,15 +106,12 @@
     let order = 0;
     for (const [piholeName, queries] of Object.entries(allQueries || {})) {
       if (!Array.isArray(queries)) continue;
-      let cursor = tracker.cursors.get(piholeName);
-      if (!cursor) cursor = { id: null, time: -Infinity };
-      let seen = tracker.seen.get(piholeName);
-      if (!seen) seen = new Map();
+      let cursor = tracker.cursors.get(piholeName) || { id: null, time: -Infinity };
+      let seen = tracker.seen.get(piholeName) || new Map();
       const valid = queries.filter(q => q && typeof q === 'object');
-      const ids = valid.map(q => Number(q.id)).filter((id, i) => valid[i]?.id != null && Number.isFinite(id));
-      const newestTime = Math.max(cursor.time, ...valid.map(queryTimestamp));
-      // A Pi-hole database can restart its ID sequence. A newer timestamp
-      // with an entirely lower ID range indicates a reset, not old traffic.
+      const ids = valid.filter(q => q.id != null && q.id !== '' && Number.isFinite(Number(q.id))).map(q => Number(q.id));
+      const newestTime = valid.reduce((max, q) => Math.max(max, queryTimestamp(q)), cursor.time);
+      // A newer snapshot whose entire ID range is lower may indicate a DB reset.
       if (cursor.id !== null && ids.length && Math.max(...ids) < cursor.id && newestTime > cursor.time) {
         cursor = { id: null, time: cursor.time };
         seen = new Map();
@@ -130,11 +122,10 @@
         const identity = queryIdentity(query);
         const timestamp = queryTimestamp(query);
         const id = query.id != null && query.id !== '' && Number.isFinite(Number(query.id)) ? Number(query.id) : null;
-        const alreadySeen = seen.has(identity);
-        const isNew = id !== null
-          ? (cursor.id === null || id > cursor.id)
-          : timestamp > cursor.time;
-        if (isNew && !alreadySeen) incoming.push({ ...query, piholeName, __order: order++, __time: timestamp, __id: id ?? 0 });
+        const isNew = id !== null ? (cursor.id === null || id > cursor.id) : timestamp > cursor.time;
+        if (isNew && !seen.has(identity)) {
+          incoming.push({ ...query, piholeName, __order: order++, __time: timestamp, __id: id ?? 0 });
+        }
         seen.delete(identity);
         seen.set(identity, true);
         if (id !== null && (maxId === null || id > maxId)) maxId = id;
@@ -144,8 +135,7 @@
       tracker.cursors.set(piholeName, { id: maxId, time: maxTime });
       tracker.seen.set(piholeName, seen);
     }
-    // IDs belong to individual databases; timestamps provide cross-instance
-    // ordering, with source IDs used only to break ties within one instance.
+    // IDs are local to each Pi-hole database, never a cross-instance clock.
     incoming.sort((a, b) => a.__time - b.__time ||
       (a.piholeName === b.piholeName ? a.__id - b.__id : 0) || a.__order - b.__order);
     return incoming;
@@ -157,4 +147,4 @@
     groupConsecutiveQueries, mergeConsecutiveGroups,
     createQueryTracker, collectNewQueries,
   };
-});
+});
\ No newline at end of file

From 156dfcb7c18bff272f4a4bc5093429dd499c38bf Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:09:59 +0530
Subject: [PATCH 24/45] Add compact mobile cards and restore grouped
 foreground-only query feed

---
 js/app.js | 394 ++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 339 insertions(+), 55 deletions(-)

diff --git a/js/app.js b/js/app.js
index 522b2cb..1c30b28 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,59 +1,343 @@
 document.addEventListener('DOMContentLoaded', () => {
+  'use strict';
+  const core = window.PiDashCore;
+  if (!core) throw new Error('Pi-Dash core is missing');
+
+  const MAX_ROWS = 100;
+  const MAX_PENDING = 1000;
+  const MAX_TREND_POINTS = 30;
+  const metrics = [
+    ['total', 'Total Queries', 'text-blue-500'],
+    ['blocked', 'Queries Blocked', 'text-red-500'],
+    ['percentage', 'Percent Blocked', 'text-yellow-600 dark:text-yellow-500'],
+    ['cache', 'Cached / Forwarded', 'text-indigo-500'],
+    ['unique', 'Unique Domains', 'text-orange-500'],
+    ['clients', 'Active Clients', 'text-purple-500'],
+    ['domains', 'Domains on Lists', 'text-green-600 dark:text-green-500'],
+  ];
+  const cards = new Map();
+  const trendHistory = new Map();
+  const queryTracker = core.createQueryTracker();
+  const queryRows = [];
+  let pendingQueries = [];
+  let appConfig = null;
   let statsTimer = null, queriesTimer = null, stalenessTimer = null;
-  let appConfig = null, statsFetching = false, queriesFetching = false, lastUpdateTime = null, queryFeedPaused = false;
-  const lastCursorByPihole = {}, trendHistory = {}, MAX_TREND_POINTS = 30;
-
-  async function fetchData(url) {
-    const response = await fetch(url, { cache: 'no-store' });
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-    return response.json();
-  }
-  function escapeHtml(value) { return String(value).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;').replaceAll("'",'&#039;'); }
-  function summaryStats(raw) {
-    if (!raw || !raw.queries) return { total:0,blocked:0,percentage:0,clients:0,rate:0,cached:0,forwarded:0,unique:0,domains:0 };
-    const q=raw.queries||{}, clients=raw.clients||{}, gravity=raw.gravity||{};
-    return { total:Number(q.total)||0, blocked:Number(q.blocked)||0, percentage:Number(q.percent_blocked)||0, clients:Number(clients.active)||0, rate:Number(q.frequency)||0, cached:Number(q.cached)||0, forwarded:Number(q.forwarded)||0, unique:Number(q.unique_domains)||0, domains:Number(gravity.domains_being_blocked)||0 };
-  }
-  function healthPresentation(meta={}, hasError=false) {
-    if (hasError || meta.health==='unreachable' || meta.health==='auth_error') return {dot:'bg-red-500',text:meta.health==='auth_error'?'Auth failed':'Offline',textClass:'text-red-500'};
-    if (meta.blocking===false) return {dot:'bg-yellow-500',text:'Blocking OFF',textClass:'text-yellow-600 dark:text-yellow-500'};
-    if (meta.health==='slow') return {dot:'bg-yellow-500',text:'Slow',textClass:'text-yellow-600 dark:text-yellow-500'};
-    return {dot:'bg-green-500',text:meta.blocking===true?'Blocking ON':'Online',textClass:'text-green-600 dark:text-green-500'};
-  }
-  function addTrend(name,value) { (trendHistory[name] ||= []).push(value); if (trendHistory[name].length>MAX_TREND_POINTS) trendHistory[name].shift(); }
-  function renderSparkline(name,el) {
-    if (!el || !appConfig.show_trends) return;
-    const values=trendHistory[name]||[]; if(values.length<2){el.innerHTML='';return;}
-    const min=Math.min(...values), max=Math.max(...values), range=max-min||1;
-    const points=values.map((v,i)=>`${(i/(values.length-1))*100},${24-((v-min)/range)*20}`).join(' ');
-    el.innerHTML=`<svg viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true" style="width:80px;height:28px"><polyline points="${points}" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" /></svg>`;
-  }
-  function updatePiholeUI(name,raw) {
-    const section=document.getElementById(`pihole-${name}-section`); if(!section)return;
-    const meta=raw?._pi_dash||{}, hasError=!!raw?.error, status=healthPresentation(meta,hasError);
-    const dot=section.querySelector('.status-dot'), health=section.querySelector('.pihole-health'), latency=section.querySelector('.pihole-latency');
-    dot.className=`status-dot ${status.dot}`; health.className=`pihole-health text-xs ${status.textClass}`; health.textContent=status.text;
-    latency.textContent=Number.isFinite(Number(meta.latency_ms))?`${Number(meta.latency_ms).toFixed(0)} ms`:'-- ms';
-    if(hasError){ section.querySelectorAll('[data-metric]').forEach(el=>el.textContent=el.dataset.metric==='percent'?'--%':'--'); section.querySelector('.pihole-cache').textContent='-- / --'; section.querySelector('.pihole-rate').textContent='(--/sec)'; return; }
-    const s=summaryStats(raw); let rateValue,rateUnit;
-    if(s.rate<1){rateValue=(s.rate*60).toFixed(1);rateUnit='/min';}else{rateValue=s.rate.toFixed(1);rateUnit='/sec';}
-    section.querySelector('.pihole-rate').textContent=`(${rateValue}${rateUnit})`;
-    section.querySelector('.pihole-total').textContent=s.total.toLocaleString(); section.querySelector('.pihole-blocked').textContent=s.blocked.toLocaleString(); section.querySelector('.pihole-percent').textContent=`${s.percentage.toFixed(1)}%`; section.querySelector('.pihole-clients').textContent=s.clients.toLocaleString(); section.querySelector('.pihole-cache').textContent=`${s.cached.toLocaleString()} / ${s.forwarded.toLocaleString()}`; section.querySelector('.pihole-unique').textContent=s.unique.toLocaleString(); section.querySelector('.pihole-domains').textContent=s.domains.toLocaleString();
-    addTrend(name,s.rate); renderSparkline(name,section.querySelector('.pihole-sparkline'));
+  let statsController = null, queriesController = null, initController = null;
+  let statsFetching = false, queriesFetching = false;
+  let lastUpdateTime = null, queryFeedPaused = false;
+  let foregroundGeneration = 0;
+
+  const main = document.querySelector('main');
+  const network = document.getElementById('network-summary');
+  const queryContainer = document.getElementById('background-queries');
+  const queryPanel = document.getElementById('query-panel');
+  const queryToggle = document.getElementById('query-toggle');
+  const pauseButton = document.getElementById('query-pause');
+  const timestamp = document.getElementById('last-updated');
+  const number = value => core.summaryStats({ queries: { total: value } }).total.toLocaleString();
+
+  function visible() {
+    return !document.hidden && navigator.onLine !== false;
+  }
+
+  async function fetchData(url, signal) {
+    const response = await fetch(url, { cache: 'no-store', signal });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const data = await response.json();
+    if (data?.error) throw new Error(data.error);
+    return data;
+  }
+
+  function element(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined) node.textContent = text;
+    return node;
+  }
+
+  function addMetric(parent, key, label, color, compact = false) {
+    const row = element('div', compact ? 'mobile-metric' : 'metric-row');
+    const caption = element('span', 'metric-label', label);
+    const value = element('span', `metric-value ${color}`, '--');
+    value.dataset.value = key;
+    row.append(caption, value);
+    parent.append(row);
+  }
+
+  function safeAdminUrl(address) {
+    try {
+      const url = new URL(address);
+      if (!['http:', 'https:'].includes(url.protocol)) return null;
+      url.pathname = url.pathname.replace(/\/$/, '') + '/admin';
+      url.search = '';
+      url.hash = '';
+      return url.href;
+    } catch (_) { return null; }
+  }
+
+  function createCard(pihole, index) {
+    const section = element('section', 'instance-card');
+    const heading = element('div', 'instance-heading');
+    const identity = element('div', 'instance-identity');
+    const nameLine = element('h2', 'instance-name');
+    const url = pihole.link ? safeAdminUrl(pihole.address) : null;
+    const name = element(url ? 'a' : 'span', '', pihole.name);
+    if (url) {
+      name.href = url;
+      name.target = '_blank';
+      name.rel = 'noopener noreferrer';
+      name.setAttribute('aria-label', `Open ${pihole.name} Pi-hole Admin`);
+    }
+    const rate = element('span', 'pihole-rate', '(--/sec)');
+    nameLine.append(name, ' ', rate);
+    const healthLine = element('div', 'instance-health');
+    const dot = element('span', 'status-dot status-neutral');
+    const health = element('span', 'pihole-health', 'Checking');
+    healthLine.append(dot, health);
+    identity.append(nameLine, healthLine);
+    const sparkline = element('div', 'pihole-sparkline');
+    sparkline.setAttribute('aria-hidden', 'true');
+    heading.append(identity, sparkline);
+    section.append(heading);
+
+    const compact = element('div', 'mobile-instance-summary');
+    addMetric(compact, 'total', 'Queries', 'text-blue-500', true);
+    addMetric(compact, 'blocked', 'Blocked', 'text-red-500', true);
+    addMetric(compact, 'percentage', 'Blocked %', 'text-yellow-600 dark:text-yellow-500', true);
+    section.append(compact);
+
+    const details = element('div', 'instance-details');
+    details.id = `instance-details-${index}`;
+    for (const [key, label, color] of metrics) addMetric(details, key, label, color);
+    section.append(details);
+    const toggle = element('button', 'instance-toggle', 'Show details');
+    toggle.type = 'button';
+    toggle.setAttribute('aria-expanded', 'false');
+    toggle.setAttribute('aria-controls', details.id);
+    toggle.addEventListener('click', () => {
+      const expanded = section.classList.toggle('is-expanded');
+      toggle.setAttribute('aria-expanded', String(expanded));
+      toggle.textContent = expanded ? 'Hide details' : 'Show details';
+    });
+    section.append(toggle);
+    cards.set(pihole.name, section);
+    return section;
+  }
+
+  function renderSparkline(name, section, rate) {
+    const target = section.querySelector('.pihole-sparkline');
+    if (!appConfig.show_trends) { target.replaceChildren(); return; }
+    const history = trendHistory.get(name) || [];
+    history.push(rate);
+    if (history.length > MAX_TREND_POINTS) history.shift();
+    trendHistory.set(name, history);
+    if (history.length < 2) return;
+    const min = Math.min(...history), max = Math.max(...history), range = max - min || 1;
+    const points = history.map((v, i) => `${i / (history.length - 1) * 100},${24 - (v - min) / range * 20}`).join(' ');
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 100 28');
+    svg.setAttribute('preserveAspectRatio', 'none');
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    line.setAttribute('points', points);
+    line.setAttribute('fill', 'none');
+    line.setAttribute('stroke', 'currentColor');
+    line.setAttribute('stroke-width', '2');
+    line.setAttribute('vector-effect', 'non-scaling-stroke');
+    svg.append(line);
+    target.replaceChildren(svg);
+  }
+
+  function updatePiholeUI(name, raw) {
+    const section = cards.get(name);
+    if (!section) return;
+    const meta = raw?._pi_dash || {};
+    const failed = !raw || !!raw.error || !raw.queries;
+    const status = core.healthPresentation(meta, failed);
+    section.querySelector('.status-dot').className = `status-dot status-${status.state}`;
+    const health = section.querySelector('.pihole-health');
+    health.className = `pihole-health status-text-${status.state}`;
+    health.textContent = status.text;
+    section.querySelector('.pihole-rate').textContent = failed ? '(--/sec)' : `(${core.formatRate(core.summaryStats(raw).rate)})`;
+    const stats = core.summaryStats(failed ? null : raw);
+    const values = failed ? {} : {
+      total: number(stats.total), blocked: number(stats.blocked),
+      percentage: `${stats.percentage.toFixed(1)}%`,
+      cache: `${number(stats.cached)} / ${number(stats.forwarded)}`,
+      unique: number(stats.unique), clients: number(stats.clients), domains: number(stats.domains),
+    };
+    section.querySelectorAll('[data-value]').forEach(node => {
+      node.textContent = values[node.dataset.value] ?? (node.dataset.value === 'percentage' ? '--%' : '--');
+    });
+    if (failed) { section.querySelector('.pihole-sparkline').replaceChildren(); trendHistory.delete(name); }
+    else renderSparkline(name, section, stats.rate);
   }
+
   function updateNetworkSummary(summary) {
-    const el=document.getElementById('network-summary'); if(!el || !appConfig.show_network_summary || !summary)return;
-    el.style.display='block'; el.querySelector('.network-total').textContent=Number(summary.total_queries||0).toLocaleString(); el.querySelector('.network-blocked').textContent=Number(summary.blocked_queries||0).toLocaleString(); el.querySelector('.network-percent').textContent=`${Number(summary.percent_blocked||0).toFixed(1)}%`; el.querySelector('.network-cache').textContent=`${Number(summary.cached_queries||0).toLocaleString()} / ${Number(summary.forwarded_queries||0).toLocaleString()}`;
-    const parts=[]; if(summary.healthy_instances)parts.push(`${summary.healthy_instances} healthy`); if(summary.slow_instances)parts.push(`${summary.slow_instances} slow`); if(summary.offline_instances)parts.push(`${summary.offline_instances} offline`); el.querySelector('.network-health').textContent=parts.join(' · ')||'No active Pi-holes';
-  }
-  function updateTimestamp(){ lastUpdateTime=Date.now(); const el=document.getElementById('last-updated'); el.textContent=`Last updated: ${new Date().toLocaleTimeString()}`; el.className='text-xs text-gray-500 dark:text-gray-400'; }
-  function updateStaleness(){ if(lastUpdateTime&&appConfig&&Date.now()-lastUpdateTime>(appConfig.refresh_interval||5000)*2) document.getElementById('last-updated').className='text-xs text-yellow-600 dark:text-yellow-500'; }
-  async function refreshStats(){ if(statsFetching)return; statsFetching=true; try{const payload=await fetchData('data?include_summary=true'); for(const [name,raw] of Object.entries(payload.stats||{}))updatePiholeUI(name,raw); updateNetworkSummary(payload.summary); updateTimestamp();}catch(e){console.error('Failed to refresh stats:',e);}finally{statsFetching=false;} }
-  async function refreshQueries(){ if(!appConfig?.show_queries||queriesFetching)return; queriesFetching=true; try{renderQueries(await fetchData('queries?length=50'));}catch(e){console.error('Failed to refresh queries:',e);}finally{queriesFetching=false;} }
-  function startTimers(){ if(!appConfig)return; if(!statsTimer)statsTimer=setInterval(refreshStats,appConfig.refresh_interval||5000); if(appConfig.show_queries&&!queriesTimer)queriesTimer=setInterval(refreshQueries,appConfig.queries_refresh_interval||appConfig.refresh_interval||5000); if(!stalenessTimer)stalenessTimer=setInterval(updateStaleness,1000); }
-  function stopTimers(){ clearInterval(statsTimer);clearInterval(queriesTimer);clearInterval(stalenessTimer);statsTimer=queriesTimer=stalenessTimer=null; }
-  function renderQueries(allQueries){ const container=document.getElementById('background-queries'); if(!container||queryFeedPaused)return; const newItems=[],pending={}; for(const[name,queries]of Object.entries(allQueries||{})){if(!Array.isArray(queries))continue;const last=lastCursorByPihole[name]??-Infinity;let max=last;for(const q of queries){const id=q.id!=null?Number(q.id):null,time=q.time!=null?Number(q.time):null,cursor=id!==null?id:(time!==null?time:-Infinity);if(cursor>last)newItems.push({...q,piholeName:name,__cursor:cursor});if(cursor>max)max=cursor;}pending[name]=max;} if(!newItems.length)return;Object.assign(lastCursorByPihole,pending);newItems.sort((a,b)=>a.__cursor-b.__cursor);for(const item of newItems){const li=document.createElement('li');li.className=`opacity-90 text-[10px] leading-tight px-1 whitespace-nowrap ${item.blocked?'text-red-600 dark:text-red-500':'text-green-600 dark:text-green-500'}`;li.textContent=`[${item.piholeName}] ${item.domain||''}`;container.appendChild(li);}while(container.children.length>100)container.removeChild(container.firstChild); }
-  function createCard(p){ const section=document.createElement('section');section.id=`pihole-${p.name}-section`;section.className='bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full';const safeName=escapeHtml(p.name),name=p.link?`<a href="${escapeHtml(p.address)}/admin" target="_blank" rel="noopener noreferrer" class="hover:text-teal-500">${safeName}</a>`:safeName; section.innerHTML=`<div class="flex justify-between items-baseline mb-3"><div><h2 class="text-xl font-semibold text-gray-700 dark:text-cyan-400">${name} <span class="pihole-rate text-sm font-normal text-gray-500 dark:text-gray-400">(--/sec)</span></h2><div class="text-xs"><span class="status-dot bg-gray-500"></span> <span class="pihole-health text-gray-500">Checking</span> <span class="pihole-latency text-gray-500">-- ms</span></div></div><div class="pihole-sparkline text-teal-500" style="width:80px;height:28px"></div></div><div class="space-y-1.5 text-sm"><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Total Queries</span><span data-metric="total" class="font-medium text-blue-500 pihole-total">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Queries Blocked</span><span data-metric="blocked" class="font-medium text-red-500 pihole-blocked">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Percent Blocked</span><span data-metric="percent" class="font-medium text-yellow-600 dark:text-yellow-500 pihole-percent">--%</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Cached / Forwarded</span><span class="font-medium text-indigo-500 pihole-cache">-- / --</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Unique Domains</span><span data-metric="unique" class="font-medium text-orange-500 pihole-unique">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Active Clients</span><span data-metric="clients" class="font-medium text-purple-500 pihole-clients">--</span></div><div class="flex justify-between items-center"><span class="text-gray-500 dark:text-gray-400">Domains on Lists</span><span data-metric="domains" class="font-medium text-green-600 dark:text-green-500 pihole-domains">--</span></div></div>`; return section; }
-  async function init(){ try{const data=await fetchData('init');appConfig=data.config;const main=document.querySelector('main');main.innerHTML='';for(const p of appConfig.piholes||[])main.appendChild(createCard(p));for(const[name,raw]of Object.entries(data.data||{}))updatePiholeUI(name,raw);updateNetworkSummary(data.summary);if(data.queries)renderQueries(data.queries);updateTimestamp();startTimers();}catch(e){console.error('Failed to initialize dashboard:',e);document.getElementById('last-updated').textContent='Unable to initialize dashboard';} }
-  document.addEventListener('visibilitychange',()=>{if(document.hidden)stopTimers();else{refreshStats();refreshQueries();startTimers();}});window.addEventListener('offline',stopTimers);window.addEventListener('online',()=>{refreshStats();refreshQueries();startTimers();});const queries=document.getElementById('background-queries');queries?.addEventListener('mouseenter',()=>{queryFeedPaused=true;});queries?.addEventListener('mouseleave',()=>{queryFeedPaused=false;});if('serviceWorker'in navigator)window.addEventListener('load',()=>navigator.serviceWorker.register('sw.js').catch(console.error));init();
-});
+    if (!appConfig.show_network_summary || !summary) return;
+    network.hidden = false;
+    network.querySelector('.network-health').textContent = core.networkStatus(summary);
+    network.querySelector('.network-total').textContent = number(summary.total_queries);
+    network.querySelector('.network-blocked').textContent = number(summary.blocked_queries);
+    network.querySelector('.network-percent').textContent = `${Number(summary.percent_blocked || 0).toFixed(1)}%`;
+    network.querySelector('.network-cache').textContent = `${number(summary.cached_queries)} / ${number(summary.forwarded_queries)}`;
+    const partial = summary.partial || summary.contributing_instances < summary.instances;
+    network.querySelector('.network-partial').hidden = !partial;
+    network.classList.toggle('is-partial', Boolean(partial));
+  }
+
+  function updateTimestamp() {
+    lastUpdateTime = Date.now();
+    timestamp.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
+    timestamp.classList.remove('is-stale');
+  }
+  function updateStaleness() {
+    if (!lastUpdateTime || !appConfig) return;
+    timestamp.classList.toggle('is-stale', Date.now() - lastUpdateTime > appConfig.refresh_interval * 2);
+  }
+
+  function renderQueryRows() {
+    const fragment = document.createDocumentFragment();
+    for (const group of queryRows) {
+      const row = element('li', group.blocked ? 'query-blocked' : 'query-allowed');
+      row.textContent = group.label + (group.count > 1 ? ` (x${group.count})` : '');
+      row.title = group.label;
+      fragment.append(row);
+    }
+    queryContainer.replaceChildren(fragment);
+    if (queryPanel.classList.contains('is-open')) queryContainer.scrollTop = queryContainer.scrollHeight;
+  }
+
+  function flushQueries() {
+    if (queryFeedPaused || !pendingQueries.length) return;
+    const groups = core.groupConsecutiveQueries(pendingQueries);
+    pendingQueries = [];
+    const merged = core.mergeConsecutiveGroups(queryRows, groups, MAX_ROWS);
+    queryRows.splice(0, queryRows.length, ...merged);
+    renderQueryRows();
+  }
+
+  function renderQueries(data) {
+    const events = core.collectNewQueries(queryTracker, data);
+    if (!events.length) return;
+    pendingQueries.push(...events);
+    if (pendingQueries.length > MAX_PENDING) pendingQueries = pendingQueries.slice(-MAX_PENDING);
+    flushQueries();
+  }
+
+  function setQueryPaused(paused) {
+    queryFeedPaused = paused;
+    pauseButton.textContent = paused ? 'Resume' : 'Pause';
+    pauseButton.setAttribute('aria-pressed', String(paused));
+    if (!paused) flushQueries();
+  }
+
+  function canApply(generation, signal) {
+    return generation === foregroundGeneration && visible() && !signal.aborted;
+  }
+
+  async function refreshStats() {
+    if (!appConfig || !visible() || statsFetching) return;
+    statsFetching = true;
+    const generation = foregroundGeneration;
+    const controller = new AbortController();
+    statsController = controller;
+    try {
+      const payload = await fetchData('data?include_summary=true', controller.signal);
+      if (!canApply(generation, controller.signal)) return;
+      for (const [name, raw] of Object.entries(payload.stats || {})) updatePiholeUI(name, raw);
+      updateNetworkSummary(payload.summary);
+      updateTimestamp();
+    } catch (error) {
+      if (error.name !== 'AbortError') console.error('Failed to refresh stats:', error);
+    } finally {
+      statsFetching = false;
+      if (statsController === controller) statsController = null;
+    }
+  }
+
+  async function refreshQueries() {
+    if (!appConfig?.show_queries || !visible() || queriesFetching) return;
+    queriesFetching = true;
+    const generation = foregroundGeneration;
+    const controller = new AbortController();
+    queriesController = controller;
+    try {
+      const data = await fetchData('queries?length=50', controller.signal);
+      if (canApply(generation, controller.signal)) renderQueries(data);
+    } catch (error) {
+      if (error.name !== 'AbortError') console.error('Failed to refresh queries:', error);
+    } finally {
+      queriesFetching = false;
+      if (queriesController === controller) queriesController = null;
+    }
+  }
+
+  function stopTimers() {
+    foregroundGeneration++;
+    clearInterval(statsTimer); clearInterval(queriesTimer); clearInterval(stalenessTimer);
+    statsTimer = queriesTimer = stalenessTimer = null;
+    initController?.abort(); statsController?.abort(); queriesController?.abort();
+  }
+
+  function startTimers() {
+    if (!appConfig || !visible() || statsTimer) return;
+    statsTimer = setInterval(refreshStats, appConfig.refresh_interval);
+    if (appConfig.show_queries) queriesTimer = setInterval(refreshQueries, appConfig.queries_refresh_interval);
+    stalenessTimer = setInterval(updateStaleness, 1000);
+  }
+
+  async function init() {
+    if (!visible()) return;
+    const generation = foregroundGeneration;
+    const controller = new AbortController();
+    initController = controller;
+    try {
+      const data = await fetchData('init', controller.signal);
+      if (!canApply(generation, controller.signal)) return;
+      appConfig = data.config;
+      main.replaceChildren(); cards.clear();
+      for (const [index, pihole] of (appConfig.piholes || []).entries()) main.append(createCard(pihole, index));
+      if (!cards.size) main.append(element('p', 'empty-message', 'No Pi-holes are enabled. Check config.json.'));
+      for (const [name, raw] of Object.entries(data.data || {})) updatePiholeUI(name, raw);
+      updateNetworkSummary(data.summary);
+      queryPanel.hidden = !appConfig.show_queries;
+      if (data.queries) renderQueries(data.queries);
+      updateTimestamp();
+      startTimers();
+    } catch (error) {
+      if (error.name !== 'AbortError') {
+        console.error('Failed to initialize dashboard:', error);
+        timestamp.textContent = 'Unable to initialize dashboard';
+      }
+    } finally {
+      if (initController === controller) initController = null;
+    }
+  }
+
+  function resumeForeground() {
+    if (!visible()) return;
+    if (!appConfig) { if (!initController) init(); return; }
+    refreshStats(); refreshQueries(); startTimers();
+  }
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) stopTimers(); else resumeForeground();
+  });
+  window.addEventListener('offline', stopTimers);
+  window.addEventListener('online', resumeForeground);
+  window.addEventListener('pagehide', stopTimers);
+  window.addEventListener('pageshow', resumeForeground);
+
+  queryToggle.addEventListener('click', () => {
+    const open = queryPanel.classList.toggle('is-open');
+    queryToggle.setAttribute('aria-expanded', String(open));
+    queryToggle.textContent = open ? 'Hide queries' : 'Show queries';
+    if (open) queryContainer.scrollTop = queryContainer.scrollHeight;
+  });
+  pauseButton.addEventListener('click', () => setQueryPaused(!queryFeedPaused));
+  queryContainer.addEventListener('mouseenter', () => setQueryPaused(true));
+  queryContainer.addEventListener('mouseleave', () => setQueryPaused(false));
+  if ('serviceWorker' in navigator) window.addEventListener('load', () => {
+    navigator.serviceWorker.register('sw.js').catch(error => console.warn('Service worker:', error));
+  });
+  init();
+});
\ No newline at end of file

From 6a85349d645f8ab10d6de057606fab49a89dd0a0 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:10:19 +0530
Subject: [PATCH 25/45] Introduce compact mobile dashboard structure and
 accessible details controls

---
 index.html | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 356088d..4c1fbcc 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pi-hole Dashboard</title>
     <link rel="icon" href="{{ICON_URL}}" />
     <link rel="manifest" href="manifest.json" />
@@ -18,18 +18,19 @@
       }
     </script>
   </head>
-  <body class="h-full flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300" style="font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
+  <body class="h-full flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
     <div id="main-wrapper" class="w-full max-w-sm sm:max-w-xl mx-auto relative z-10">
       <header class="text-center mb-6">
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Pi-Dash</h1>
-        <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400">Last updated: Never</p>
+        <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400" role="status">Last updated: Never</p>
       </header>
-      <section id="network-summary" style="display:none" class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full mb-6" aria-label="Network summary">
-        <div class="flex justify-between items-baseline mb-3">
+      <section id="network-summary" hidden class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full mb-6" aria-label="Network summary">
+        <div class="network-heading">
           <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summary</h2>
           <span class="network-health text-xs text-gray-500 dark:text-gray-400"></span>
         </div>
-        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem" class="text-sm">
+        <p class="network-partial" hidden>Partial totals. One or more Pi-holes are not reporting.</p>
+        <div class="network-metrics text-sm">
           <div><div class="text-xs text-gray-500 dark:text-gray-400">Queries</div><div class="network-total font-medium text-blue-500">--</div></div>
           <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked</div><div class="network-blocked font-medium text-red-500">--</div></div>
           <div><div class="text-xs text-gray-500 dark:text-gray-400">Blocked %</div><div class="network-percent font-medium text-yellow-600 dark:text-yellow-500">--%</div></div>
@@ -37,8 +38,18 @@ <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summa
         </div>
       </section>
       <main class="w-full grid grid-cols-1 sm:grid-cols-2 gap-4"></main>
+      <section id="query-panel" class="query-panel" hidden aria-label="Recent DNS queries">
+        <div class="query-panel-header">
+          <span class="query-panel-title">Recent queries</span>
+          <div class="query-actions">
+            <button id="query-pause" type="button" aria-pressed="false">Pause</button>
+            <button id="query-toggle" type="button" aria-expanded="false" aria-controls="background-queries">Show queries</button>
+          </div>
+        </div>
+        <ul id="background-queries" aria-label="Recent DNS query activity"></ul>
+      </section>
     </div>
-    <ul id="background-queries" aria-hidden="true"></ul>
+    <script src="js/dashboard-core.js"></script>
     <script src="js/app.js"></script>
   </body>
 </html>

From 78990b4a4c78982e8348ca9dc5ba2395e2e2e47d Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:11:05 +0530
Subject: [PATCH 26/45] Keep desktop layout and add compact mobile CSS without
 viewport shifting

---
 src/tailwind.css | 149 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 101 insertions(+), 48 deletions(-)

diff --git a/src/tailwind.css b/src/tailwind.css
index e63158e..5eaf0bc 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -6,59 +6,112 @@ body {
     font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     -webkit-tap-highlight-color: transparent;
 }
-html, body {
-    overscroll-behavior-y: contain;
-}
-.status-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: inline-block;
-}
+html, body { overscroll-behavior-y: contain; }
+[hidden] { display: none !important; }
+.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
+.status-success { background: #22c55e; }
+.status-warning { background: #eab308; }
+.status-danger { background: #ef4444; }
+.status-neutral { background: #9ca3af; }
+.status-text-success { color: #16a34a; }
+.status-text-warning { color: #ca8a04; }
+.status-text-danger { color: #dc2626; }
+.status-text-neutral { color: #6b7280; }
+.dark .status-text-success { color: #4ade80; }
+.dark .status-text-warning { color: #facc15; }
+.dark .status-text-danger { color: #f87171; }
+.dark .status-text-neutral { color: #9ca3af; }
+#last-updated.is-stale { color: #ca8a04; }
 
-#background-queries {
-    position: fixed;
-    bottom: 0; left: 0; right: 0; top: auto;
-    height: 60vh; max-height: 60vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    list-style: none; margin: 0; padding: 4px 6px 8px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-    font-size: 10px; line-height: 1.25;
-    pointer-events: none; overflow: hidden; z-index: 0;
-    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
-    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
-    backdrop-filter: blur(0.5px);
-    -webkit-backdrop-filter: blur(0.5px);
-}
+.network-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .75rem; }
+.network-health { text-align: right; }
+.network-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
+.network-metrics > div { min-width: 0; }
+.network-cache { overflow-wrap: anywhere; }
+.network-partial { font-size: .75rem; color: #b45309; margin: 0 0 .75rem; }
+.dark .network-partial { color: #fbbf24; }
+#network-summary.is-partial { border-left: 3px solid #f59e0b; }
 
-#background-queries li {
-    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
-    letter-spacing: 0.01em;
-}
+.instance-card { background: white; padding: 1rem; border-radius: .5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); min-width: 0; }
+.dark .instance-card { background: #111827; }
+.instance-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; }
+.instance-identity { min-width: 0; }
+.instance-name { font-size: 1.25rem; font-weight: 600; color: #374151; line-height: 1.4; overflow-wrap: anywhere; }
+.dark .instance-name { color: #22d3ee; }
+.instance-name a:hover, .instance-name a:focus { color: #14b8a6; }
+.pihole-rate { font-size: .875rem; font-weight: 400; color: #6b7280; white-space: nowrap; }
+.dark .pihole-rate { color: #9ca3af; }
+.instance-health { display: flex; align-items: center; gap: .35rem; font-size: .75rem; margin-top: .15rem; }
+.pihole-sparkline { width: 80px; height: 28px; color: #0d9488; flex: none; }
+.dark .pihole-sparkline { color: #2dd4bf; }
+.pihole-sparkline svg { width: 100%; height: 100%; }
+.instance-details { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
+.metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-width: 0; }
+.metric-label { color: #6b7280; }
+.dark .metric-label { color: #9ca3af; }
+.metric-value { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.mobile-instance-summary, .instance-toggle { display: none; }
+.instance-toggle:focus-visible, .query-actions button:focus-visible { outline: 2px solid #0d9488; outline-offset: 3px; }
+.empty-message { grid-column: 1 / -1; text-align: center; color: #6b7280; font-size: .875rem; padding: 1rem; }
 
-@media (max-width: 640px) and (orientation: portrait) {
-    #background-queries { height: 42vh; max-height: 42vh; }
-    body:has(#background-queries:not(:empty)) #main-wrapper {
-        transform: translateY(-8vh);
-        transition: transform 0.3s ease;
-    }
-}
+/* The original ambient query feed remains behind the desktop dashboard. */
+.query-panel { position: fixed; inset: auto 0 0; height: 60vh; max-height: 60vh; z-index: 0; pointer-events: none; }
+.query-panel-header { display: none; }
+#background-queries { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; list-style: none; margin: 0; padding: 4px 6px 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 1.25; pointer-events: auto; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); }
+#background-queries li { text-shadow: 0 1px 2px rgb(0 0 0 / .15); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.query-allowed { color: #16a34a; }
+.query-blocked { color: #dc2626; }
+.dark .query-allowed { color: #4ade80; }
+.dark .query-blocked { color: #f87171; }
 
-@media (max-width: 896px) and (orientation: landscape) {
-    #background-queries {
-        height: 35vh; max-height: 35vh; font-size: 9px;
-        padding: 2px 4px 6px; line-height: 1.2;
-    }
-    body:has(#background-queries:not(:empty)) #main-wrapper {
-        transform: translateY(-4vh);
-        transition: transform 0.3s ease;
-    }
+@media (max-width: 639px) {
+    body { display: block; padding: .75rem; min-height: 100%; height: auto; }
+    #main-wrapper { max-width: none; width: 100%; margin: 0 auto; transform: none !important; }
+    #main-wrapper > header { margin-bottom: .75rem; }
+    #main-wrapper > header h1 { font-size: 1.375rem; line-height: 1.75rem; }
+    #network-summary { padding: .75rem; margin-bottom: .75rem; }
+    .network-heading { margin-bottom: .5rem; align-items: flex-start; }
+    .network-health { font-size: .6875rem; max-width: 56%; }
+    .network-metrics { gap: .5rem .75rem; font-size: .875rem; }
+    .network-metrics > div > div:first-child { font-size: .6875rem; }
+    main { gap: .75rem !important; }
+    .instance-card { padding: .75rem; }
+    .instance-heading { margin-bottom: .5rem; }
+    .instance-name { font-size: 1rem; line-height: 1.4; }
+    .pihole-rate { font-size: .75rem; }
+    .instance-health { font-size: .6875rem; }
+    .pihole-sparkline { width: 58px; height: 22px; }
+    .mobile-instance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
+    .mobile-metric { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
+    .mobile-metric .metric-label { font-size: .6875rem; }
+    .mobile-metric .metric-value { text-align: left; font-size: .875rem; }
+    .instance-toggle { display: block; width: 100%; margin-top: .625rem; padding: .375rem 0 .125rem; border-top: 1px solid #e5e7eb; color: #0f766e; font-size: .75rem; font-weight: 500; text-align: center; }
+    .dark .instance-toggle { border-color: #374151; color: #5eead4; }
+    .instance-details { display: none; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; font-size: .8125rem; gap: .45rem; }
+    .dark .instance-details { border-color: #374151; }
+    .instance-card.is-expanded .instance-details { display: flex; }
+    .query-panel { position: relative; inset: auto; height: auto; max-height: none; margin-top: .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: white; pointer-events: auto; overflow: hidden; }
+    .dark .query-panel { border-color: #374151; background: #111827; }
+    .query-panel-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem .75rem; }
+    .query-panel-title { font-size: .75rem; font-weight: 600; }
+    .query-actions { display: flex; gap: .75rem; }
+    .query-actions button { color: #0f766e; font-size: .75rem; }
+    .dark .query-actions button { color: #5eead4; }
+    #query-pause { display: none; }
+    .query-panel.is-open #query-pause { display: inline; }
+    #background-queries { display: none; position: relative; inset: auto; height: auto; max-height: 30vh; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem .75rem; -webkit-mask-image: none; mask-image: none; pointer-events: auto; font-size: .6875rem; line-height: 1.45; }
+    .query-panel.is-open #background-queries { display: block; }
+    #background-queries li { padding: .125rem 0; text-shadow: none; }
 }
 
+@media (min-width: 640px) and (max-width: 896px) and (orientation: landscape) {
+    .query-panel { height: 35vh; max-height: 35vh; }
+    #background-queries { font-size: 9px; padding: 2px 4px 6px; line-height: 1.2; }
+}
 @media (min-width: 897px) and (max-width: 1024px) and (orientation: landscape) {
-    #background-queries {
-        height: 28vh; max-height: 28vh; font-size: 9px; padding: 2px 6px 6px;
-    }
+    .query-panel { height: 28vh; max-height: 28vh; }
+    #background-queries { font-size: 9px; padding: 2px 6px 6px; }
+}
+@media (prefers-reduced-motion: reduce) {
+    body { transition: none; }
 }

From 7423ac4363cbe7efe57afd8c07bd51ccd00af31b Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:11:32 +0530
Subject: [PATCH 27/45] Document configuration defaults with valid JSON
 comments

---
 config-example.json | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/config-example.json b/config-example.json
index 7820d35..5e095a3 100644
--- a/config-example.json
+++ b/config-example.json
@@ -1,4 +1,15 @@
 {
+  "_comment": {
+    "about": "Copy this file to config.json and edit it. Standard JSON does not support // comments, so these _comment fields provide explanations and are ignored by Pi-Dash. All optional settings have code defaults; deleting a setting does not require replacing it with another one.",
+    "base_path": "Default: /. Set a URL path such as /pi-dash/ when hosting behind a reverse proxy. The proxy must forward this prefix consistently.",
+    "refresh_interval": "Default: 5000 milliseconds. Refreshes the main statistics. The example recommends 2000 ms; existing configurations retain their configured value.",
+    "queries_refresh_interval": "Default: the effective refresh_interval. Separately controls the optional live-query feed. The example recommends 3000 ms. Omitting this key preserves the old query cadence.",
+    "cache_ttl": "Default: min(1000, max(100, min(refresh_interval, queries_refresh_interval) / 2)) milliseconds, rounded down. The example uses 1000 ms. Set 0 to disable the shared in-process cache. An explicit cache TTL may delay fresh upstream data; keep it below your fastest polling interval.",
+    "show_queries": "Default: false. Enables the optional DNS query feed. Queries are requested only while the browser page is visible and online; hidden/offline pages stop polling. Desktop uses the ambient feed and mobile uses a collapsible panel.",
+    "show_network_summary": "Default: true. Shows additive DNS totals across reporting Pi-holes. If an instance is unavailable, totals are marked partial. Active clients and unique domains are not summed because they can overlap.",
+    "show_trends": "Default: true. Shows a short query-rate sparkline kept only in browser memory. It does not create a database or store historical DNS activity.",
+    "piholes": "Default: empty list. Add one or more Pi-hole instances below. Names must be unique. Every enabled instance needs a name and address."
+  },
   "base_path": "/",
   "refresh_interval": 2000,
   "queries_refresh_interval": 3000,
@@ -8,8 +19,16 @@
   "show_trends": true,
   "piholes": [
     {
+      "_comment": {
+        "name": "Required. Unique display name for this Pi-hole.",
+        "address": "Required. Full Pi-hole base URL, including http:// or https:// and any port. Do not include /admin or /api. Example: http://192.168.1.50:80.",
+        "password": "Default: empty string. Use an API/application password or ${ENVIRONMENT_VARIABLE}. A literal password is supported for existing installations. An unset environment variable is not silently replaced with an empty password.",
+        "enabled": "Default: true. Set false to exclude this Pi-hole without deleting its configuration.",
+        "link": "Default: false. If true, the instance name opens its Pi-hole administration page in a new tab.",
+        "verify_ssl": "Default: false for compatibility with existing self-signed LAN installations. Set true for a trusted HTTPS certificate, or provide a path to a CA bundle, including ${ENVIRONMENT_VARIABLE}. This controls the Pi-Dash-to-Pi-hole connection."
+      },
       "name": "Primary",
-      "address": "https://pi.hole/one",
+      "address": "https://pi.hole",
       "password": "${PIHOLE_PRIMARY_PASSWORD}",
       "enabled": true,
       "link": true,
@@ -17,9 +36,9 @@
     },
     {
       "name": "Secondary",
-      "address": "https://pi.hole/two",
+      "address": "http://192.168.1.51",
       "password": "your_app_password_here",
-      "enabled": true,
+      "enabled": false,
       "link": false,
       "verify_ssl": false
     }

From 6ca3dae48f0e37c7a5613d66c295f76b97bb10b7 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:13:06 +0530
Subject: [PATCH 28/45] Update backend regression tests for blocking health and
 compatibility

---
 tests/test_proxy.py | 163 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 125 insertions(+), 38 deletions(-)

diff --git a/tests/test_proxy.py b/tests/test_proxy.py
index 60c44e0..5984033 100644
--- a/tests/test_proxy.py
+++ b/tests/test_proxy.py
@@ -1,9 +1,11 @@
+import json
 import os
 import unittest
+from concurrent.futures import ThreadPoolExecutor
+from threading import Event
 from unittest.mock import patch
 
 os.environ.setdefault('PIHOLE_PRIMARY_PASSWORD', 'test-secret')
-
 import proxy
 
 
@@ -14,47 +16,67 @@ def setUp(self):
     def tearDown(self):
         proxy.config = self.original
 
-    def test_query_interval_inherits_existing_refresh_interval(self):
+    def test_old_query_interval_inherits_refresh(self):
         proxy.config = {'refresh_interval': 1234, 'piholes': []}
         self.assertEqual(proxy.get_refresh_interval(), 1234)
         self.assertEqual(proxy.get_queries_refresh_interval(), 1234)
 
-    def test_code_defaults_work_without_optional_flags(self):
+    def test_code_defaults_without_optional_flags(self):
         proxy.config = {'piholes': []}
-        self.assertEqual(proxy.get_refresh_interval(), proxy.DEFAULT_REFRESH_INTERVAL)
-        self.assertEqual(proxy.get_queries_refresh_interval(), proxy.DEFAULT_REFRESH_INTERVAL)
+        self.assertEqual(proxy.get_refresh_interval(), 5000)
+        self.assertEqual(proxy.get_queries_refresh_interval(), 5000)
         self.assertFalse(proxy.filtered_config()['show_queries'])
+        self.assertTrue(proxy.filtered_config()['show_network_summary'])
+        self.assertTrue(proxy.filtered_config()['show_trends'])
 
-    def test_new_query_interval_overrides_old_refresh_interval(self):
+    def test_new_query_interval_overrides_old(self):
         proxy.config = {'refresh_interval': 2000, 'queries_refresh_interval': 3000, 'piholes': []}
         self.assertEqual(proxy.get_queries_refresh_interval(), 3000)
 
-    def test_default_cache_never_exceeds_half_fastest_poll(self):
+    def test_default_cache_and_explicit_disable(self):
         proxy.config = {'refresh_interval': 1000, 'queries_refresh_interval': 3000, 'piholes': []}
-        self.assertLessEqual(proxy.get_cache_ttl(), 500)
+        self.assertEqual(proxy.get_cache_ttl(), 500)
+        proxy.config['cache_ttl'] = 0
+        self.assertEqual(proxy.get_cache_ttl(), 0)
 
-    def test_zero_enabled_piholes_is_valid(self):
+    def test_zero_enabled_piholes(self):
         proxy.config = {'piholes': [{'name': 'Off', 'enabled': False}]}
         self.assertEqual(proxy._stats_uncached(), {})
         self.assertEqual(proxy._queries_uncached(50), {})
 
-    def test_environment_secret_resolution(self):
-        os.environ['PI_DASH_TEST_SECRET'] = 'resolved'
-        self.assertEqual(proxy.resolve_secret('${PI_DASH_TEST_SECRET}'), 'resolved')
-        self.assertEqual(proxy.resolve_secret('plain'), 'plain')
-
-
-class SummaryTests(unittest.TestCase):
-    def test_network_summary_only_aggregates_safe_metrics(self):
+    def test_environment_secret_and_tls_compatibility(self):
+        with patch.dict(os.environ, {'PI_DASH_TEST_SECRET': 'resolved'}):
+            self.assertEqual(proxy.resolve_secret('${PI_DASH_TEST_SECRET}'), 'resolved')
+            self.assertEqual(proxy.resolve_secret('plain'), 'plain')
+            self.assertEqual(proxy.get_verify_setting({'verify_ssl': '${PI_DASH_TEST_SECRET}'}), 'resolved')
+        self.assertFalse(proxy.get_verify_setting({}))
+        self.assertTrue(proxy.get_verify_setting({'verify_ssl': True}))
+
+    def test_example_is_valid_json_and_comments_are_ignored(self):
+        with open(os.path.join(proxy.APP_ROOT, 'config-example.json'), encoding='utf-8') as handle:
+            example = json.load(handle)
+        self.assertIn('_comment', example)
+        self.assertIn('refresh_interval', example['_comment'])
+        proxy.config = example
+        filtered = proxy.filtered_config()
+        self.assertNotIn('_comment', filtered)
+        self.assertTrue(filtered['piholes'])
+        self.assertNotIn('password', filtered['piholes'][0])
+        self.assertNotIn('_comment', filtered['piholes'][0])
+
+
+class BlockingAndSummaryTests(unittest.TestCase):
+    def test_blocking_states(self):
+        self.assertTrue(proxy.normalize_blocking('enabled'))
+        self.assertFalse(proxy.normalize_blocking('disabled'))
+        self.assertTrue(proxy.normalize_blocking(True))
+        self.assertFalse(proxy.normalize_blocking(False))
+        self.assertIsNone(proxy.normalize_blocking('unexpected'))
+
+    def test_summary_is_partial_and_does_not_sum_unique_values(self):
         data = {
-            'one': {
-                'queries': {'total': 100, 'blocked': 10, 'cached': 60, 'forwarded': 40},
-                '_pi_dash': {'health': 'healthy'},
-            },
-            'two': {
-                'queries': {'total': 50, 'blocked': 15, 'cached': 20, 'forwarded': 30},
-                '_pi_dash': {'health': 'slow'},
-            },
+            'one': {'queries': {'total': 100, 'blocked': 10, 'cached': 60, 'forwarded': 40}, '_pi_dash': {'blocking': True}},
+            'two': {'queries': {'total': 50, 'blocked': 15, 'cached': 20, 'forwarded': 30}, '_pi_dash': {'blocking': False}},
             'three': {'error': 'offline', '_pi_dash': {'health': 'unreachable'}},
         }
         result = proxy.network_summary(data)
@@ -63,34 +85,99 @@ def test_network_summary_only_aggregates_safe_metrics(self):
         self.assertEqual(result['percent_blocked'], 16.7)
         self.assertEqual(result['cached_queries'], 80)
         self.assertEqual(result['forwarded_queries'], 70)
+        self.assertEqual(result['contributing_instances'], 2)
         self.assertEqual(result['healthy_instances'], 1)
-        self.assertEqual(result['slow_instances'], 1)
+        self.assertEqual(result['blocking_disabled_instances'], 1)
         self.assertEqual(result['offline_instances'], 1)
+        self.assertTrue(result['partial'])
         self.assertNotIn('clients', result)
         self.assertNotIn('unique_domains', result)
+        self.assertNotIn('slow_instances', result)
+
+    def test_unknown_blocking_is_not_reported_healthy(self):
+        result = proxy.network_summary({'one': {'queries': {'total': 0}, '_pi_dash': {'blocking': None}}})
+        self.assertEqual(result['healthy_instances'], 0)
+        self.assertEqual(result['blocking_unknown_instances'], 1)
+        self.assertFalse(result['partial'])
+
+    def test_fetch_one_has_no_latency_metric(self):
+        class Response:
+            def json(self):
+                return {'queries': {'total': 1}}
+        with patch.object(proxy, 'pihole_get', return_value=Response()), patch.object(proxy, 'get_blocking', return_value=True):
+            data = proxy.fetch_one({'name': 'One', 'address': 'http://localhost'})[1]
+        self.assertEqual(data['_pi_dash']['health'], 'healthy')
+        self.assertNotIn('latency_ms', data['_pi_dash'])
+
+
+class CacheTests(unittest.TestCase):
+    def setUp(self):
+        self.original = proxy.config
+        proxy.config = {'piholes': [], 'cache_ttl': 1000}
+        proxy._stats_cache.update(time=0.0, data=None)
+        proxy._queries_cache.clear()
+
+    def tearDown(self):
+        proxy.config = self.original
+        proxy._stats_cache.update(time=0.0, data=None)
+        proxy._queries_cache.clear()
+
+    def test_stats_cache_reuses_snapshot(self):
+        with patch.object(proxy, '_stats_uncached', return_value={'one': 1}) as fetch:
+            self.assertEqual(proxy.fetch_stats(), {'one': 1})
+            self.assertEqual(proxy.fetch_stats(), {'one': 1})
+            self.assertEqual(fetch.call_count, 1)
+
+    def test_query_cache_reuses_snapshot(self):
+        with patch.object(proxy, '_queries_uncached', return_value={'one': []}) as fetch:
+            proxy.fetch_queries(50)
+            proxy.fetch_queries(50)
+            self.assertEqual(fetch.call_count, 1)
+
+    def test_simultaneous_stats_requests_share_one_fetch(self):
+        entered = Event()
+        release = Event()
+        def slow_fetch():
+            entered.set()
+            release.wait(3)
+            return {'one': 1}
+        with patch.object(proxy, '_stats_uncached', side_effect=slow_fetch) as fetch:
+            with ThreadPoolExecutor(max_workers=2) as pool:
+                first = pool.submit(proxy.fetch_stats)
+                self.assertTrue(entered.wait(3))
+                second = pool.submit(proxy.fetch_stats)
+                release.set()
+                self.assertEqual(first.result(timeout=3), second.result(timeout=3))
+            self.assertEqual(fetch.call_count, 1)
 
 
 class RouteCompatibilityTests(unittest.TestCase):
     def test_legacy_data_shape_is_preserved(self):
         sample = {'Primary': {'queries': {'total': 1}}}
         with proxy.app.test_client() as client, patch.object(proxy, 'fetch_stats', return_value=sample):
-            response = client.get('/data')
-            self.assertEqual(response.status_code, 200)
-            self.assertEqual(response.get_json(), sample)
+            self.assertEqual(client.get('/data').get_json(), sample)
 
     def test_rich_data_shape_is_opt_in(self):
-        sample = {'Primary': {'queries': {'total': 10, 'blocked': 2, 'cached': 5, 'forwarded': 5}, '_pi_dash': {'health': 'healthy'}}}
+        sample = {'Primary': {'queries': {'total': 10, 'blocked': 2}, '_pi_dash': {'blocking': True}}}
         with proxy.app.test_client() as client, patch.object(proxy, 'fetch_stats', return_value=sample):
-            response = client.get('/data?include_summary=true')
-            payload = response.get_json()
-            self.assertIn('stats', payload)
+            payload = client.get('/data?include_summary=true').get_json()
+            self.assertEqual(payload['stats'], sample)
             self.assertIn('summary', payload)
 
-    def test_health_endpoint_does_not_require_pihole_access(self):
-        with proxy.app.test_client() as client:
-            response = client.get('/health')
-            self.assertEqual(response.status_code, 200)
-            self.assertEqual(response.get_json()['status'], 'ok')
+    def test_health_does_not_contact_piholes(self):
+        with proxy.app.test_client() as client, patch.object(proxy, 'fetch_stats') as fetch:
+            self.assertEqual(client.get('/health').status_code, 200)
+            fetch.assert_not_called()
+
+    def test_disabled_queries_do_not_fetch_on_init(self):
+        original = proxy.config
+        try:
+            proxy.config = {'piholes': [], 'show_queries': False}
+            with proxy.app.test_client() as client, patch.object(proxy, 'fetch_stats', return_value={}), patch.object(proxy, 'fetch_queries') as fetch:
+                self.assertEqual(client.get('/init').status_code, 200)
+                fetch.assert_not_called()
+        finally:
+            proxy.config = original
 
 
 if __name__ == '__main__':

From 502c76e3c3e543bdfc5dead560e3111cb5af8db7 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:13:55 +0530
Subject: [PATCH 29/45] Add browser regression testing to the frontend build

---
 package.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index dc911b2..1ab0b4f 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,11 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "tailwindcss": "^3.3.0"
+    "tailwindcss": "^3.3.0",
+    "jsdom": "^26.1.0"
   },
   "scripts": {
-    "build:css": "npx tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./css/style.css --minify"
+    "build:css": "tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./css/style.css --minify",
+    "test:js": "node --test tests/*.test.cjs"
   }
 }

From 1f3c9a824aa49113ec567b33315d02ac210cc242 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:14:39 +0530
Subject: [PATCH 30/45] Test mobile expansion, query grouping, and foreground
 polling lifecycle

---
 tests/dashboard.test.cjs | 166 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 tests/dashboard.test.cjs

diff --git a/tests/dashboard.test.cjs b/tests/dashboard.test.cjs
new file mode 100644
index 0000000..93d3a62
--- /dev/null
+++ b/tests/dashboard.test.cjs
@@ -0,0 +1,166 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const { JSDOM } = require('jsdom');
+const core = require('../js/dashboard-core.js');
+
+const root = path.resolve(__dirname, '..');
+const read = file => fs.readFileSync(path.join(root, file), 'utf8');
+const sample = {
+  queries: { total: 100, blocked: 25, percent_blocked: 25, frequency: 2, cached: 40, forwarded: 35, unique_domains: 20 },
+  clients: { active: 4 }, gravity: { domains_being_blocked: 1000 },
+  _pi_dash: { blocking: true, health: 'healthy' },
+};
+const event = (id, domain, time = id, blocked = false) => ({ id, domain, time, blocked });
+
+function makeBrowser(options = {}) {
+  const html = read('index.html').replace(/<script[\s\S]*?<\/script>/g, '').replace('{{ICON_URL}}', '');
+  const dom = new JSDOM(html, { url: 'http://localhost:5001/', runScripts: 'outside-only', pretendToBeVisual: true });
+  const { window } = dom;
+  let hidden = false, online = true;
+  let nextTimer = 0;
+  const timers = new Map();
+  const calls = [];
+  const config = {
+    refresh_interval: 2000, queries_refresh_interval: 3000,
+    show_queries: true, show_network_summary: true, show_trends: true,
+    piholes: [{ name: 'One', enabled: true, link: false }, { name: 'Zero', enabled: true, link: false }],
+    ...options,
+  };
+  const snapshots = { One: sample, Zero: sample };
+  const summary = { total_queries: 200, blocked_queries: 50, percent_blocked: 25, cached_queries: 80, forwarded_queries: 70, instances: 2, contributing_instances: 2, healthy_instances: 2, blocking_disabled_instances: 0, blocking_unknown_instances: 0, offline_instances: 0, partial: false };
+  let queries = { One: [event(1, 'example.org', 1), event(2, 'example.org', 2)], Zero: [] };
+  Object.defineProperty(window.document, 'hidden', { configurable: true, get: () => hidden });
+  Object.defineProperty(window.navigator, 'onLine', { configurable: true, get: () => online });
+  window.setInterval = (fn, ms) => { const id = ++nextTimer; timers.set(id, { fn, ms }); return id; };
+  window.clearInterval = id => timers.delete(id);
+  window.fetch = async (url, request = {}) => {
+    calls.push({ url: String(url), signal: request.signal });
+    let data;
+    if (String(url) === 'init') data = { config, data: snapshots, summary, queries };
+    else if (String(url).startsWith('data?')) data = { stats: snapshots, summary };
+    else if (String(url).startsWith('queries?')) data = queries;
+    else throw new Error('Unexpected URL: ' + url);
+    return { ok: true, json: async () => data };
+  };
+  window.eval(read('js/dashboard-core.js'));
+  window.eval(read('js/app.js'));
+  const settle = async () => { await new Promise(resolve => window.setTimeout(resolve, 0)); };
+  return {
+    dom, window, calls, timers, settle, config,
+    setHidden(value) { hidden = value; window.document.dispatchEvent(new window.Event('visibilitychange')); },
+    setOnline(value) { online = value; window.dispatchEvent(new window.Event(value ? 'online' : 'offline')); },
+    setQueries(value) { queries = value; },
+    async tick(ms) { for (const timer of [...timers.values()].filter(t => t.ms === ms)) await timer.fn(); await settle(); },
+    close() { dom.window.close(); },
+  };
+}
+
+test('consecutive grouping retains real events, separates blocked status and merges across batches', () => {
+  const items = [event(1, 'a.test'), event(2, 'a.test'), event(3, 'b.test'), event(4, 'a.test')].map(q => ({ ...q, piholeName: 'One' }));
+  const groups = core.groupConsecutiveQueries(items);
+  assert.deepEqual(groups.map(g => g.count), [2, 1, 1]);
+  const more = core.groupConsecutiveQueries([{ ...event(5, 'a.test'), piholeName: 'One' }]);
+  assert.deepEqual(core.mergeConsecutiveGroups(groups, more).map(g => g.count), [2, 1, 2]);
+  assert.equal(core.groupConsecutiveQueries([{ ...items[0], blocked: false }, { ...items[1], blocked: true }]).length, 2);
+  assert.equal(core.mergeConsecutiveGroups(groups, more, 2).length, 2);
+});
+
+test('query tracker handles overlapping polls and independent database IDs', () => {
+  const tracker = core.createQueryTracker();
+  const first = core.collectNewQueries(tracker, { One: [event(10, 'a.test', 100), event(11, 'b.test', 101)], Zero: [event(900, 'z.test', 99)] });
+  assert.deepEqual(first.map(q => q.domain), ['z.test', 'a.test', 'b.test']);
+  assert.equal(core.collectNewQueries(tracker, { One: [event(10, 'a.test', 100), event(11, 'b.test', 101)], Zero: [event(900, 'z.test', 99)] }).length, 0);
+  assert.deepEqual(core.collectNewQueries(tracker, { One: [event(12, 'c.test', 102)], Zero: [event(901, 'd.test', 103)] }).map(q => q.domain), ['c.test', 'd.test']);
+  assert.equal(core.queryIdentity({ id: null, time: 1, type: 'A', client: { ip: '1.2.3.4' }, domain: 'a' }) === core.queryIdentity({ id: null, time: 1, type: 'AAAA', client: { ip: '1.2.3.4' }, domain: 'a' }), false);
+});
+
+test('health presentation does not infer network speed from API latency', () => {
+  assert.equal(core.healthPresentation({ blocking: true, latency_ms: 1000 }).text, 'Blocking ON');
+  assert.equal(core.healthPresentation({ blocking: false }).text, 'Blocking OFF');
+  assert.equal(core.healthPresentation({ health: 'auth_error' }, true).text, 'Auth failed');
+  assert.match(core.networkStatus({ instances: 2, contributing_instances: 1, offline_instances: 1, partial: true }), /1 of 2 reporting/);
+});
+
+test('mobile card starts compact and expands all desktop metrics', async () => {
+  const app = makeBrowser();
+  try {
+    await app.settle();
+    const doc = app.window.document;
+    const card = doc.querySelector('.instance-card');
+    assert.equal(card.querySelectorAll('.mobile-metric').length, 3);
+    assert.equal(card.querySelectorAll('.instance-details .metric-row').length, 7);
+    assert.equal(card.querySelector('.pihole-latency'), null);
+    const toggle = card.querySelector('.instance-toggle');
+    assert.equal(toggle.getAttribute('aria-expanded'), 'false');
+    toggle.click();
+    assert.equal(toggle.getAttribute('aria-expanded'), 'true');
+    assert.equal(card.classList.contains('is-expanded'), true);
+    assert.match(card.textContent, /Cached \/ Forwarded/);
+    toggle.click();
+    assert.equal(toggle.getAttribute('aria-expanded'), 'false');
+    assert.equal(doc.querySelector('#network-summary').hidden, false);
+  } finally { app.close(); }
+});
+
+test('the feed restores xN grouping and stays compact on mobile', async () => {
+  const app = makeBrowser();
+  try {
+    await app.settle();
+    const doc = app.window.document;
+    let rows = [...doc.querySelectorAll('#background-queries li')];
+    assert.equal(rows.length, 1);
+    assert.match(rows[0].textContent, /\(x2\)/);
+    const toggle = doc.getElementById('query-toggle');
+    assert.equal(toggle.getAttribute('aria-expanded'), 'false');
+    toggle.click();
+    assert.equal(toggle.getAttribute('aria-expanded'), 'true');
+    assert.equal(doc.getElementById('query-panel').classList.contains('is-open'), true);
+    app.setQueries({ One: [event(3, 'example.org', 3)], Zero: [] });
+    await app.tick(3000);
+    rows = [...doc.querySelectorAll('#background-queries li')];
+    assert.equal(rows.length, 1);
+    assert.match(rows[0].textContent, /\(x3\)/);
+  } finally { app.close(); }
+});
+
+test('hidden and offline pages stop both polling intervals and reject stale responses', async () => {
+  const app = makeBrowser();
+  try {
+    await app.settle();
+    assert.deepEqual([...app.timers.values()].map(t => t.ms).sort((a, b) => a - b), [1000, 2000, 3000]);
+    app.setHidden(true);
+    assert.equal(app.timers.size, 0);
+    const count = app.calls.length;
+    await app.tick(2000);
+    assert.equal(app.calls.length, count);
+    app.setHidden(false);
+    await app.settle();
+    assert.equal(app.timers.size, 3);
+    app.setOnline(false);
+    assert.equal(app.timers.size, 0);
+    app.setOnline(true);
+    await app.settle();
+    assert.equal(app.timers.size, 3);
+  } finally { app.close(); }
+});
+
+test('disabled query feed never requests query data', async () => {
+  const app = makeBrowser({ show_queries: false });
+  try {
+    await app.settle();
+    assert.equal(app.window.document.getElementById('query-panel').hidden, true);
+    assert.equal([...app.timers.values()].some(t => t.ms === 3000), false);
+    assert.equal(app.calls.some(c => c.url.startsWith('queries?')), false);
+  } finally { app.close(); }
+});
+
+test('instance names are treated as text, not executable markup', async () => {
+  const app = makeBrowser({ piholes: [{ name: '<img src=x onerror=alert(1)>', enabled: true, link: false }] });
+  try {
+    await app.settle();
+    assert.equal(app.window.document.querySelectorAll('.instance-card img').length, 0);
+    assert.match(app.window.document.querySelector('.instance-name').textContent, /<img/);
+  } finally { app.close(); }
+});

From 0862da8ecc6cbae9ec10cc4006241f657fba3ce8 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:15:37 +0530
Subject: [PATCH 31/45] Ship custom responsive styles separately from generated
 Tailwind CSS

---
 css/dashboard.css | 103 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 css/dashboard.css

diff --git a/css/dashboard.css b/css/dashboard.css
new file mode 100644
index 0000000..7bac2b2
--- /dev/null
+++ b/css/dashboard.css
@@ -0,0 +1,103 @@
+body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
+html, body { overscroll-behavior-y: contain; }
+[hidden] { display: none !important; }
+.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
+.status-success { background: #22c55e; }
+.status-warning { background: #eab308; }
+.status-danger { background: #ef4444; }
+.status-neutral { background: #9ca3af; }
+.status-text-success { color: #16a34a; }
+.status-text-warning { color: #ca8a04; }
+.status-text-danger { color: #dc2626; }
+.status-text-neutral { color: #6b7280; }
+.dark .status-text-success { color: #4ade80; }
+.dark .status-text-warning { color: #facc15; }
+.dark .status-text-danger { color: #f87171; }
+.dark .status-text-neutral { color: #9ca3af; }
+#last-updated.is-stale { color: #ca8a04; }
+.network-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .75rem; }
+.network-health { text-align: right; }
+.network-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
+.network-metrics > div { min-width: 0; }
+.network-cache { overflow-wrap: anywhere; }
+.network-partial { font-size: .75rem; color: #b45309; margin: 0 0 .75rem; }
+.dark .network-partial { color: #fbbf24; }
+#network-summary.is-partial { border-left: 3px solid #f59e0b; }
+.instance-card { background: white; padding: 1rem; border-radius: .5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); min-width: 0; }
+.dark .instance-card { background: #111827; }
+.instance-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; }
+.instance-identity { min-width: 0; }
+.instance-name { font-size: 1.25rem; font-weight: 600; color: #374151; line-height: 1.4; overflow-wrap: anywhere; }
+.dark .instance-name { color: #22d3ee; }
+.instance-name a:hover, .instance-name a:focus { color: #14b8a6; }
+.pihole-rate { font-size: .875rem; font-weight: 400; color: #6b7280; white-space: nowrap; }
+.dark .pihole-rate { color: #9ca3af; }
+.instance-health { display: flex; align-items: center; gap: .35rem; font-size: .75rem; margin-top: .15rem; }
+.pihole-sparkline { width: 80px; height: 28px; color: #0d9488; flex: none; }
+.dark .pihole-sparkline { color: #2dd4bf; }
+.pihole-sparkline svg { width: 100%; height: 100%; }
+.instance-details { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
+.metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-width: 0; }
+.metric-label { color: #6b7280; }
+.dark .metric-label { color: #9ca3af; }
+.metric-value { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.mobile-instance-summary, .instance-toggle { display: none; }
+.instance-toggle:focus-visible, .query-actions button:focus-visible { outline: 2px solid #0d9488; outline-offset: 3px; }
+.empty-message { grid-column: 1 / -1; text-align: center; color: #6b7280; font-size: .875rem; padding: 1rem; }
+/* The original ambient query feed remains behind the desktop dashboard. */
+.query-panel { position: fixed; inset: auto 0 0; height: 60vh; max-height: 60vh; z-index: 0; pointer-events: none; }
+.query-panel-header { display: none; }
+#background-queries { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; list-style: none; margin: 0; padding: 4px 6px 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 1.25; pointer-events: auto; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); }
+#background-queries li { text-shadow: 0 1px 2px rgb(0 0 0 / .15); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.query-allowed { color: #16a34a; }
+.query-blocked { color: #dc2626; }
+.dark .query-allowed { color: #4ade80; }
+.dark .query-blocked { color: #f87171; }
+@media (max-width: 639px) {
+    body { display: block; padding: .75rem; min-height: 100%; height: auto; }
+    #main-wrapper { max-width: none; width: 100%; margin: 0 auto; transform: none !important; }
+    #main-wrapper > header { margin-bottom: .75rem; }
+    #main-wrapper > header h1 { font-size: 1.375rem; line-height: 1.75rem; }
+    #network-summary { padding: .75rem; margin-bottom: .75rem; }
+    .network-heading { margin-bottom: .5rem; align-items: flex-start; }
+    .network-health { font-size: .6875rem; max-width: 56%; }
+    .network-metrics { gap: .5rem .75rem; font-size: .875rem; }
+    .network-metrics > div > div:first-child { font-size: .6875rem; }
+    main { gap: .75rem !important; }
+    .instance-card { padding: .75rem; }
+    .instance-heading { margin-bottom: .5rem; }
+    .instance-name { font-size: 1rem; line-height: 1.4; }
+    .pihole-rate { font-size: .75rem; }
+    .instance-health { font-size: .6875rem; }
+    .pihole-sparkline { width: 58px; height: 22px; }
+    .mobile-instance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
+    .mobile-metric { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
+    .mobile-metric .metric-label { font-size: .6875rem; }
+    .mobile-metric .metric-value { text-align: left; font-size: .875rem; }
+    .instance-toggle { display: block; width: 100%; margin-top: .625rem; padding: .375rem 0 .125rem; border-top: 1px solid #e5e7eb; color: #0f766e; font-size: .75rem; font-weight: 500; text-align: center; }
+    .dark .instance-toggle { border-color: #374151; color: #5eead4; }
+    .instance-details { display: none; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; font-size: .8125rem; gap: .45rem; }
+    .dark .instance-details { border-color: #374151; }
+    .instance-card.is-expanded .instance-details { display: flex; }
+    .query-panel { position: relative; inset: auto; height: auto; max-height: none; margin-top: .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: white; pointer-events: auto; overflow: hidden; }
+    .dark .query-panel { border-color: #374151; background: #111827; }
+    .query-panel-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem .75rem; }
+    .query-panel-title { font-size: .75rem; font-weight: 600; }
+    .query-actions { display: flex; gap: .75rem; }
+    .query-actions button { color: #0f766e; font-size: .75rem; }
+    .dark .query-actions button { color: #5eead4; }
+    #query-pause { display: none; }
+    .query-panel.is-open #query-pause { display: inline; }
+    #background-queries { display: none; position: relative; inset: auto; height: auto; max-height: 30vh; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem .75rem; -webkit-mask-image: none; mask-image: none; pointer-events: auto; font-size: .6875rem; line-height: 1.45; }
+    .query-panel.is-open #background-queries { display: block; }
+    #background-queries li { padding: .125rem 0; text-shadow: none; }
+}
+@media (min-width: 640px) and (max-width: 896px) and (orientation: landscape) {
+    .query-panel { height: 35vh; max-height: 35vh; }
+    #background-queries { font-size: 9px; padding: 2px 4px 6px; line-height: 1.2; }
+}
+@media (min-width: 897px) and (max-width: 1024px) and (orientation: landscape) {
+    .query-panel { height: 28vh; max-height: 28vh; }
+    #background-queries { font-size: 9px; padding: 2px 6px 6px; }
+}
+@media (prefers-reduced-motion: reduce) { body { transition: none; } }

From 05c035c64495e49de90e0e97f6d9f4392345f37d Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:15:44 +0530
Subject: [PATCH 32/45] Keep generated Tailwind output separate from shipped
 dashboard styles

---
 src/tailwind.css | 114 -----------------------------------------------
 1 file changed, 114 deletions(-)

diff --git a/src/tailwind.css b/src/tailwind.css
index 5eaf0bc..b5c61c9 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -1,117 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-body {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    -webkit-tap-highlight-color: transparent;
-}
-html, body { overscroll-behavior-y: contain; }
-[hidden] { display: none !important; }
-.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
-.status-success { background: #22c55e; }
-.status-warning { background: #eab308; }
-.status-danger { background: #ef4444; }
-.status-neutral { background: #9ca3af; }
-.status-text-success { color: #16a34a; }
-.status-text-warning { color: #ca8a04; }
-.status-text-danger { color: #dc2626; }
-.status-text-neutral { color: #6b7280; }
-.dark .status-text-success { color: #4ade80; }
-.dark .status-text-warning { color: #facc15; }
-.dark .status-text-danger { color: #f87171; }
-.dark .status-text-neutral { color: #9ca3af; }
-#last-updated.is-stale { color: #ca8a04; }
-
-.network-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .75rem; }
-.network-health { text-align: right; }
-.network-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
-.network-metrics > div { min-width: 0; }
-.network-cache { overflow-wrap: anywhere; }
-.network-partial { font-size: .75rem; color: #b45309; margin: 0 0 .75rem; }
-.dark .network-partial { color: #fbbf24; }
-#network-summary.is-partial { border-left: 3px solid #f59e0b; }
-
-.instance-card { background: white; padding: 1rem; border-radius: .5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); min-width: 0; }
-.dark .instance-card { background: #111827; }
-.instance-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; }
-.instance-identity { min-width: 0; }
-.instance-name { font-size: 1.25rem; font-weight: 600; color: #374151; line-height: 1.4; overflow-wrap: anywhere; }
-.dark .instance-name { color: #22d3ee; }
-.instance-name a:hover, .instance-name a:focus { color: #14b8a6; }
-.pihole-rate { font-size: .875rem; font-weight: 400; color: #6b7280; white-space: nowrap; }
-.dark .pihole-rate { color: #9ca3af; }
-.instance-health { display: flex; align-items: center; gap: .35rem; font-size: .75rem; margin-top: .15rem; }
-.pihole-sparkline { width: 80px; height: 28px; color: #0d9488; flex: none; }
-.dark .pihole-sparkline { color: #2dd4bf; }
-.pihole-sparkline svg { width: 100%; height: 100%; }
-.instance-details { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
-.metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-width: 0; }
-.metric-label { color: #6b7280; }
-.dark .metric-label { color: #9ca3af; }
-.metric-value { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
-.mobile-instance-summary, .instance-toggle { display: none; }
-.instance-toggle:focus-visible, .query-actions button:focus-visible { outline: 2px solid #0d9488; outline-offset: 3px; }
-.empty-message { grid-column: 1 / -1; text-align: center; color: #6b7280; font-size: .875rem; padding: 1rem; }
-
-/* The original ambient query feed remains behind the desktop dashboard. */
-.query-panel { position: fixed; inset: auto 0 0; height: 60vh; max-height: 60vh; z-index: 0; pointer-events: none; }
-.query-panel-header { display: none; }
-#background-queries { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; list-style: none; margin: 0; padding: 4px 6px 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 1.25; pointer-events: auto; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); }
-#background-queries li { text-shadow: 0 1px 2px rgb(0 0 0 / .15); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.query-allowed { color: #16a34a; }
-.query-blocked { color: #dc2626; }
-.dark .query-allowed { color: #4ade80; }
-.dark .query-blocked { color: #f87171; }
-
-@media (max-width: 639px) {
-    body { display: block; padding: .75rem; min-height: 100%; height: auto; }
-    #main-wrapper { max-width: none; width: 100%; margin: 0 auto; transform: none !important; }
-    #main-wrapper > header { margin-bottom: .75rem; }
-    #main-wrapper > header h1 { font-size: 1.375rem; line-height: 1.75rem; }
-    #network-summary { padding: .75rem; margin-bottom: .75rem; }
-    .network-heading { margin-bottom: .5rem; align-items: flex-start; }
-    .network-health { font-size: .6875rem; max-width: 56%; }
-    .network-metrics { gap: .5rem .75rem; font-size: .875rem; }
-    .network-metrics > div > div:first-child { font-size: .6875rem; }
-    main { gap: .75rem !important; }
-    .instance-card { padding: .75rem; }
-    .instance-heading { margin-bottom: .5rem; }
-    .instance-name { font-size: 1rem; line-height: 1.4; }
-    .pihole-rate { font-size: .75rem; }
-    .instance-health { font-size: .6875rem; }
-    .pihole-sparkline { width: 58px; height: 22px; }
-    .mobile-instance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
-    .mobile-metric { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
-    .mobile-metric .metric-label { font-size: .6875rem; }
-    .mobile-metric .metric-value { text-align: left; font-size: .875rem; }
-    .instance-toggle { display: block; width: 100%; margin-top: .625rem; padding: .375rem 0 .125rem; border-top: 1px solid #e5e7eb; color: #0f766e; font-size: .75rem; font-weight: 500; text-align: center; }
-    .dark .instance-toggle { border-color: #374151; color: #5eead4; }
-    .instance-details { display: none; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; font-size: .8125rem; gap: .45rem; }
-    .dark .instance-details { border-color: #374151; }
-    .instance-card.is-expanded .instance-details { display: flex; }
-    .query-panel { position: relative; inset: auto; height: auto; max-height: none; margin-top: .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: white; pointer-events: auto; overflow: hidden; }
-    .dark .query-panel { border-color: #374151; background: #111827; }
-    .query-panel-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem .75rem; }
-    .query-panel-title { font-size: .75rem; font-weight: 600; }
-    .query-actions { display: flex; gap: .75rem; }
-    .query-actions button { color: #0f766e; font-size: .75rem; }
-    .dark .query-actions button { color: #5eead4; }
-    #query-pause { display: none; }
-    .query-panel.is-open #query-pause { display: inline; }
-    #background-queries { display: none; position: relative; inset: auto; height: auto; max-height: 30vh; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem .75rem; -webkit-mask-image: none; mask-image: none; pointer-events: auto; font-size: .6875rem; line-height: 1.45; }
-    .query-panel.is-open #background-queries { display: block; }
-    #background-queries li { padding: .125rem 0; text-shadow: none; }
-}
-
-@media (min-width: 640px) and (max-width: 896px) and (orientation: landscape) {
-    .query-panel { height: 35vh; max-height: 35vh; }
-    #background-queries { font-size: 9px; padding: 2px 4px 6px; line-height: 1.2; }
-}
-@media (min-width: 897px) and (max-width: 1024px) and (orientation: landscape) {
-    .query-panel { height: 28vh; max-height: 28vh; }
-    #background-queries { font-size: 9px; padding: 2px 6px 6px; }
-}
-@media (prefers-reduced-motion: reduce) {
-    body { transition: none; }
-}

From a36ba5656bfbee2dc6a5f7788f53c94133fb5642 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:16:01 +0530
Subject: [PATCH 33/45] Load shipped responsive styles and preserve desktop
 query layering

---
 index.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 4c1fbcc..e25ef07 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
     <link rel="manifest" href="manifest.json" />
     <meta name="theme-color" id="theme-color-meta" content="#1f2937" />
     <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/dashboard.css" />
     <script>
       if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
         document.documentElement.classList.add('dark');
@@ -38,17 +39,17 @@ <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summa
         </div>
       </section>
       <main class="w-full grid grid-cols-1 sm:grid-cols-2 gap-4"></main>
-      <section id="query-panel" class="query-panel" hidden aria-label="Recent DNS queries">
-        <div class="query-panel-header">
-          <span class="query-panel-title">Recent queries</span>
-          <div class="query-actions">
-            <button id="query-pause" type="button" aria-pressed="false">Pause</button>
-            <button id="query-toggle" type="button" aria-expanded="false" aria-controls="background-queries">Show queries</button>
-          </div>
-        </div>
-        <ul id="background-queries" aria-label="Recent DNS query activity"></ul>
-      </section>
     </div>
+    <section id="query-panel" class="query-panel" hidden aria-label="Recent DNS queries">
+      <div class="query-panel-header">
+        <span class="query-panel-title">Recent queries</span>
+        <div class="query-actions">
+          <button id="query-pause" type="button" aria-pressed="false">Pause</button>
+          <button id="query-toggle" type="button" aria-expanded="false" aria-controls="background-queries">Show queries</button>
+        </div>
+      </div>
+      <ul id="background-queries" aria-label="Recent DNS query activity"></ul>
+    </section>
     <script src="js/dashboard-core.js"></script>
     <script src="js/app.js"></script>
   </body>

From 29a3f13ae2667bea60f88caaa3a937907cff873c Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:16:46 +0530
Subject: [PATCH 34/45] Refresh PWA cache for the new mobile assets and never
 cache API responses

---
 sw.js | 49 +++++++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/sw.js b/sw.js
index 7111c7b..f8c8921 100644
--- a/sw.js
+++ b/sw.js
@@ -1,7 +1,9 @@
-const CACHE_NAME = 'pi-dashboard-cache-v1';
+const CACHE_NAME = 'pi-dashboard-cache-v2-mobile';
 const APP_SHELL = [
   '{{CACHE_URL}}',
   '{{CACHE_URL}}css/style.css',
+  '{{CACHE_URL}}css/dashboard.css',
+  '{{CACHE_URL}}js/dashboard-core.js',
   '{{CACHE_URL}}js/app.js',
 ];
 
@@ -12,7 +14,7 @@ self.addEventListener('install', event => {
 
 self.addEventListener('activate', event => {
   event.waitUntil(
-    caches.keys().then(names => Promise.all(names.filter(name => name !== CACHE_NAME).map(name => caches.delete(name))))
+    caches.keys().then(names => Promise.all(names.filter(name => name.startsWith('pi-dashboard-cache-') && name !== CACHE_NAME).map(name => caches.delete(name))))
   );
   self.clients.claim();
 });
@@ -20,34 +22,33 @@ self.addEventListener('activate', event => {
 self.addEventListener('fetch', event => {
   if (event.request.method !== 'GET') return;
   const url = new URL(event.request.url);
-  const apiPaths = ['/init', '/data', '/queries', '/health'];
-  if (apiPaths.some(path => url.pathname.endsWith(path))) return;
-
+  if (url.origin !== self.location.origin) return;
+  const base = new URL('{{CACHE_URL}}', self.location.origin).pathname;
+  if (!url.pathname.startsWith(base)) return;
+  const relative = url.pathname.slice(base.length);
+  // API responses contain live DNS information and must never enter CacheStorage.
+  if (['init', 'data', 'queries', 'health'].includes(relative)) return;
   if (event.request.mode === 'navigate') {
     event.respondWith(
-      fetch(event.request)
-        .then(response => {
+      fetch(event.request).then(response => {
+        if (response.ok) {
           const copy = response.clone();
-          caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy));
-          return response;
-        })
-        .catch(() => caches.match(event.request).then(response => response || caches.match('{{CACHE_URL}}')))
+          event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy)));
+        }
+        return response;
+      }).catch(() => caches.match(event.request).then(response => response || caches.match('{{CACHE_URL}}')))
     );
     return;
   }
-
+  // Network-first avoids serving an old JS/CSS bundle after a container upgrade.
+  if (!APP_SHELL.some(asset => new URL(asset, self.location.origin).pathname === url.pathname)) return;
   event.respondWith(
-    caches.match(event.request).then(cached => {
-      const network = fetch(event.request)
-        .then(response => {
-          if (response.ok && url.origin === self.location.origin) {
-            const copy = response.clone();
-            caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy));
-          }
-          return response;
-        })
-        .catch(() => cached);
-      return cached || network;
-    })
+    fetch(event.request).then(response => {
+      if (response.ok) {
+        const copy = response.clone();
+        event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy)));
+      }
+      return response;
+    }).catch(() => caches.match(event.request))
   );
 });

From 12a849c70d57e3b9b71bf28bc4b5c1cf30b6bf63 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:17:45 +0530
Subject: [PATCH 35/45] Run browser regression tests and verify shipped assets
 in CI

---
 .github/workflows/test.yml | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index af7cc71..865d10b 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -23,7 +23,7 @@ jobs:
       - name: Prepare test configuration
         run: cp config-example.json config.json
 
-      - name: Run regression tests
+      - name: Run backend regression tests
         run: python -m unittest discover -s tests -v
 
       - name: Compile-check backend
@@ -31,13 +31,27 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 'lts/*'
+          node-version: '22'
 
       - name: Install frontend dependencies
         run: npm install
 
-      - name: Syntax-check frontend
-        run: node --check js/app.js
+      - name: Syntax-check frontend and service worker
+        run: |
+          node --check js/dashboard-core.js
+          node --check js/app.js
+          node --check sw.js
+
+      - name: Run browser regression tests
+        run: npm run test:js
 
       - name: Verify Tailwind build
         run: npm run build:css
+
+      - name: Verify the shipped HTML, scripts and styles
+        run: |
+          test -s css/style.css
+          test -s css/dashboard.css
+          test -s js/dashboard-core.js
+          test -s js/app.js
+          node -e "const fs=require('fs'); const html=fs.readFileSync('index.html','utf8'); for(const file of ['css/style.css','css/dashboard.css','js/dashboard-core.js','js/app.js']) { if(!html.includes(file)||!fs.existsSync(file)) process.exit(1); }"

From 1de8fc0b483ca15fcf23f485e22179385694c615 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:19:31 +0530
Subject: [PATCH 36/45] Document compact mobile UI, removed latency, grouped
 queries, and all configuration defaults

---
 README.md | 133 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 87 insertions(+), 46 deletions(-)

diff --git a/README.md b/README.md
index 10ba174..e2594ec 100644
--- a/README.md
+++ b/README.md
@@ -12,37 +12,50 @@ Pi-Dash is a lightweight dashboard for monitoring one or more Pi-hole instances.
 ## Features
 
 - Multiple Pi-hole instances on one responsive dashboard
+- Compact mobile view with critical metrics and expandable full details for each instance
+- Desktop cards retain the full metrics layout and optional query-rate sparklines
 - Network-wide aggregate query, blocked, percentage, cache and forward counters
-- Per-instance latency and health state
-- Pi-hole blocking enabled/disabled state
-- Optional live DNS query feed
-- Lightweight in-browser query-rate sparklines with no database or history service
-- Independent stats and query polling intervals
-- Shared server-side cache to avoid duplicate Pi-hole API traffic from multiple browser tabs/devices
+- Clear partial totals when an instance is unavailable
+- Per-instance reachability, authentication and blocking ON/OFF status
+- Optional live DNS query feed with consecutive duplicate grouping, such as `(x2)` or `(x3)`
+- Independent statistics and query polling intervals
+- Foreground-only polling: hidden/offline browser pages stop their timers and abort pending browser requests
+- Shared in-process cache to reduce duplicate Pi-hole API traffic from multiple browser tabs/devices
 - Automatic session re-authentication
 - Optional TLS verification per Pi-hole
 - Environment-variable substitution for passwords and CA paths
-- PWA support with network-fresh application shell updates
-- Dark mode and mobile layout
-- Docker images for amd64 and arm64
-- `/health` endpoint and Docker healthcheck
-- No external font dependency; the dashboard works on an isolated LAN
+- PWA support with network-first application-shell updates
+- Dark mode, Docker amd64/arm64 support, and a `/health` endpoint
+- No external font dependency
 
 ![pi-dash-landscape](https://github.com/user-attachments/assets/a0e1fbef-279a-40df-9424-0cad50c31b50)
 
+## Mobile and desktop layout
+
+Desktop keeps the full metric cards and ambient query feed. On narrow screens, Pi-Dash uses smaller spacing, a compact Network Summary, and a condensed card for each Pi-hole. The condensed card shows its name, query rate, health/blocking state, total queries, blocked queries and blocked percentage. Tap **Show details** to reveal all seven metrics shown on desktop; tap **Hide details** to collapse it again.
+
+The mobile query feed is a collapsible panel below the cards. It no longer shifts the dashboard upward by a percentage of the viewport. There is no requirement to fit every detail on one screen; the goal is to make the critical information visible quickly, with full details available when needed. The desktop query-background layout is preserved.
+
+### Why the latency number was removed
+
+The previous API latency number measured the time required for an authenticated HTTP statistics request, not ICMP ping or DNS resolution time. Connection setup, TLS, authentication and API processing could make a healthy Pi-hole appear slow compared with a 2-3 ms ping. The number and the latency-based slow warning have been removed. Reachability and blocking state remain, without treating API response time as network speed.
+
 ## Backward compatibility
 
-Existing `config.json` files continue to work without adding any of the new options.
+Existing `config.json` files continue to work without adding any new options. Do not replace your working configuration just to upgrade.
 
-- If `refresh_interval` is absent, Pi-Dash keeps the historical 5000 ms code default.
-- If `queries_refresh_interval` is absent, it inherits `refresh_interval`, preserving the old query-feed cadence.
+- `refresh_interval` retains its existing meaning and historical 5000 ms code default.
+- If `queries_refresh_interval` is absent, it inherits the effective `refresh_interval`.
 - `verify_ssl` defaults to `false`, matching the previous behavior.
-- `/data` keeps its original response format unless a caller explicitly requests the richer summary/query payload.
-- All newly introduced configuration keys are optional.
+- `/data` keeps its original response format unless a caller explicitly requests summary/query data.
+- New configuration keys are optional. The example values are recommendations, not mandatory defaults.
+- `python proxy.py` remains available for native use; Docker uses Gunicorn.
 
 ## Configuration
 
-Create `config.json` from `config-example.json`.
+Copy `config-example.json` to `config.json` and edit the values for your network. The example contains descriptive `_comment` fields explaining every setting and its default. Standard JSON does not permit `//` or `/* */` comments, so these explanatory fields keep the file valid JSON. Pi-Dash ignores `_comment` fields and never exposes them, passwords, or TLS settings in the frontend configuration.
+
+You can delete any optional setting to use its code default. Existing installations do not need a migration.
 
 ```json
 {
@@ -68,30 +81,31 @@ Create `config.json` from `config-example.json`.
 
 ### Dashboard options
 
-| Option | Default | Purpose |
+| Option | Code default | Purpose |
 | --- | --- | --- |
-| `base_path` | `/` | Subpath where Pi-Dash is hosted |
+| `base_path` | `/` | Subpath where Pi-Dash is hosted, for example `/pi-dash/` |
 | `refresh_interval` | `5000` | Main statistics refresh interval in milliseconds |
-| `queries_refresh_interval` | `refresh_interval` | Live query-feed refresh interval in milliseconds |
-| `cache_ttl` | derived automatically | Shared backend cache lifetime in milliseconds |
-| `show_queries` | `false` | Show the scrolling recent-query feed |
-| `show_network_summary` | `true` | Show the combined network summary |
+| `queries_refresh_interval` | Effective `refresh_interval` | Independent live-query refresh interval in milliseconds |
+| `cache_ttl` | Derived automatically | Shared backend cache lifetime in milliseconds; `0` disables caching |
+| `show_queries` | `false` | Enable the optional live DNS query feed |
+| `show_network_summary` | `true` | Show combined additive DNS counters |
 | `show_trends` | `true` | Show short in-memory query-rate sparklines |
+| `piholes` | `[]` | List of Pi-hole instances to monitor |
 
-When `cache_ttl` is omitted, Pi-Dash chooses a short value based on the fastest configured polling interval. The automatic value is deliberately shorter than the polling cadence so caching cannot silently slow an explicitly configured refresh rate.
+The example recommends 2000 ms for stats and 3000 ms for queries. If `cache_ttl` is omitted, the code chooses `min(1000, max(100, min(refresh_interval, queries_refresh_interval) // 2))` milliseconds. This is deliberately shorter than the fastest configured polling cadence. An explicitly configured cache lifetime can delay fresh upstream data, so keep it below the fastest interval if you want each refresh to be able to obtain a new snapshot.
 
 ### Pi-hole options
 
-| Option | Default | Purpose |
+| Option | Code default | Purpose |
 | --- | --- | --- |
-| `name` | required | Display name |
-| `address` | required | Pi-hole base URL |
-| `password` | required/empty | API password or `${ENV_NAME}` |
-| `enabled` | `true` | Include the Pi-hole in the dashboard |
+| `name` | Required | Unique display name |
+| `address` | Required | Full Pi-hole base URL, including scheme and optional port; do not include `/admin` or `/api` |
+| `password` | Empty string | API/application password or `${ENV_NAME}` |
+| `enabled` | `true` | Include or exclude an instance without deleting its configuration |
 | `link` | `false` | Make the instance name open Pi-hole Admin |
-| `verify_ssl` | `false` | `true`, `false`, or a CA bundle path |
+| `verify_ssl` | `false` | `true`, `false`, or a path to a trusted CA bundle |
 
-`verify_ssl` remains `false` by default because many LAN Pi-hole installations use self-signed certificates. If your Pi-hole has a valid certificate, set it to `true`. A custom CA bundle can also be supplied as a path.
+`verify_ssl` remains false by default for compatibility with LAN installations that use self-signed certificates. If your Pi-hole uses a trusted HTTPS certificate, set it to true. You may also provide a CA bundle path, including an environment-variable reference.
 
 Passwords can be kept outside `config.json`:
 
@@ -99,20 +113,47 @@ Passwords can be kept outside `config.json`:
 "password": "${PIHOLE_PRIMARY_PASSWORD}"
 ```
 
-Then provide `PIHOLE_PRIMARY_PASSWORD` through your shell or Docker environment.
+Provide the variable through your shell or Docker environment. Literal passwords remain supported for existing installations. Treat your configuration and environment files as secrets; do not commit real passwords to GitHub.
 
-## Polling model
+## Polling and query-feed behavior
 
-Stats and recent queries are fetched separately. This means a typical configuration can update the visible counters every 2 seconds while fetching the query feed every 3 seconds. Pi-Dash also caches Pi-hole responses briefly in the server process, so opening the dashboard on multiple devices does not multiply upstream Pi-hole API traffic unnecessarily.
+Stats and recent queries are fetched separately. Opening the dashboard on multiple devices shares short-lived server-side snapshots through the in-process cache. The cache is demand-driven: Pi-Dash does not run a background polling service of its own.
 
-The blocking enabled/disabled state changes much less frequently than query counters and is cached separately for 30 seconds.
+The browser stops its statistics and query timers when the page becomes hidden or the device goes offline, and resumes when it becomes visible/online again. Pending browser requests are aborted and stale responses are ignored. An upstream HTTP request already started by the server may still finish, but no repeated server-side polling continues after the browser stops requesting data.
+
+The feed fetches the latest 50 queries per Pi-hole on each poll. It tracks IDs separately for each instance and uses timestamps for cross-instance ordering. Actual duplicate DNS requests are legitimate and are not deleted from the API data. For display, only **consecutive** entries with the same Pi-hole, domain and blocked/allowed status are combined into `(xN)`. The last group can continue increasing across refreshes. A different domain or blocking status starts a new row. No rolling-window aggregation or top-domain ranking is used.
+
+The query panel can be paused for reading. New events are held in a bounded browser-memory queue and displayed on resume; the feed does not maintain a permanent history. As with the previous implementation, bursts of more than 50 queries between polls can exceed the latest-query window, so this is an at-a-glance feed rather than a guaranteed complete DNS audit log. Use Pi-hole's query log for complete historical investigation.
+
+The blocking enabled/disabled state is cached separately for 30 seconds. Therefore, a blocking-state change may take up to approximately 30 seconds (plus the next visible refresh) to appear.
 
 ## Network summary semantics
 
-Pi-Dash only aggregates counters that can safely be summed across Pi-hole instances: queries, blocked queries, cached queries and forwarded queries. It deliberately does **not** sum active clients or unique domains because the same client/domain may appear on more than one redundant Pi-hole.
+Pi-Dash sums queries, blocked queries, cached queries and forwarded queries across reporting instances. The blocked percentage is calculated from the combined blocked and total counters. It deliberately does not sum active clients, unique domains or domains on lists, because those values may overlap across redundant Pi-holes.
+
+If an instance is unavailable, the summary is marked partial and displays how many instances are reporting. An instance with blocking disabled is not counted as healthy. If the blocking endpoint is unavailable, the dashboard distinguishes an online Pi-hole with unknown blocking status from one confirmed to be blocking.
+
+These are totals of DNS queries handled by the configured instances, not a deduplicated count of distinct network requests. They should not be interpreted as unique users or unique domains across the network.
 
 ## Installation
 
+### Testing the development branch
+
+To test the changes without merging into `main`:
+
+```bash
+git fetch origin
+git switch feature/dashboard-hardening
+# If the branch does not exist locally yet:
+# git switch --track origin/feature/dashboard-hardening
+```
+
+Keep a backup of your existing `config.json`. Do not overwrite it with the example. For Docker testing, build the branch locally and use a temporary image tag rather than assuming the published `latest` tag contains unmerged changes:
+
+```bash
+docker build -t pi-dash:testing .
+```
+
 ### Docker Compose
 
 ```yaml
@@ -130,7 +171,7 @@ services:
     restart: unless-stopped
 ```
 
-The container runs Pi-Dash through Gunicorn and includes a healthcheck against `/health`.
+For branch testing, replace the image with `pi-dash:testing` after building it locally. The container runs Gunicorn as a non-root user and includes a Docker healthcheck. The root `/health` endpoint remains available even when the dashboard itself is hosted below a configured `base_path`.
 
 ### Docker Run
 
@@ -150,13 +191,11 @@ docker run -d \
 git clone https://github.com/surajverma/pi-dash.git
 cd pi-dash
 cp config-example.json config.json
-pip install -r requirements.txt
+python -m pip install -r requirements.txt
 python proxy.py
 ```
 
-Then open `http://localhost:5001`.
-
-`python proxy.py` remains available for simple native/LAN use. The Docker image uses Gunicorn for a more robust long-running server.
+Then open `http://localhost:5001`. On Windows, use `copy` instead of `cp`. The repository ships the responsive dashboard styles separately in `css/dashboard.css`, so you do not need a Node.js build just to use the new layout. If you are modifying Tailwind classes, run `npm install` followed by `npm run build:css`.
 
 ## Health endpoint
 
@@ -164,22 +203,24 @@ Then open `http://localhost:5001`.
 GET /health
 ```
 
-returns a small Pi-Dash process health response without contacting every Pi-hole. This makes it suitable for Docker, Uptime Kuma, Homepage, Homarr and similar monitoring tools.
+Returns a small Pi-Dash process-health response without contacting every Pi-hole. This makes it suitable for Docker, Uptime Kuma, Homepage, Homarr and similar monitoring tools. It is not a substitute for checking individual DNS availability.
 
 ## Tests
 
-Tests do not require a live Pi-hole:
+The regression suite uses mocked Pi-hole responses and does not require a live Pi-hole:
 
 ```bash
-cp config-example.json config.json
 python -m unittest discover -s tests -v
+npm install
+npm run test:js
+npm run build:css
 ```
 
-They cover old-config fallback behavior, independent query polling, cache behavior, zero enabled Pi-holes, secret resolution, safe network aggregation, the legacy `/data` shape and `/health`.
+Backend tests cover config fallback, cache behavior, zero enabled instances, TLS/secret resolution, blocking states, partial aggregation, legacy API response shapes and process health. Browser tests cover compact-card expansion, all desktop metrics, consecutive grouping, overlapping queries, per-instance IDs, hidden/offline polling, disabled query feeds and safe rendering of instance names. GitHub Actions runs both suites and verifies the frontend build.
 
 ## PWA behavior
 
-Pi-Dash caches its application shell for offline/reload resilience, but API responses are never cached by the service worker. Navigation uses network-first behavior and static assets are refreshed in the background, reducing the chance of an upgraded container continuing to display an old dashboard bundle.
+Pi-Dash caches its application shell for offline/reload resilience. The service worker includes both dashboard scripts and both stylesheets, uses network-first loading for navigation and application assets, and never caches API responses. Live statistics require a working connection to Pi-Dash and its Pi-hole instances. A new cache version is installed for the mobile update; if an older installed PWA continues displaying an old shell after upgrading, close/reopen it or perform a hard refresh.
 
 ## Credits
 

From 0c22a7cd94899f9818c3c214b936ca90fb1c3661 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:20:57 +0530
Subject: [PATCH 37/45] Make foreground resume safe across aborted requests and
 initialization races

---
 js/app.js | 44 ++++++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/js/app.js b/js/app.js
index 1c30b28..152b8dc 100644
--- a/js/app.js
+++ b/js/app.js
@@ -23,8 +23,7 @@ document.addEventListener('DOMContentLoaded', () => {
   let appConfig = null;
   let statsTimer = null, queriesTimer = null, stalenessTimer = null;
   let statsController = null, queriesController = null, initController = null;
-  let statsFetching = false, queriesFetching = false;
-  let lastUpdateTime = null, queryFeedPaused = false;
+  let lastUpdateTime = null, manualPause = false, hoverPause = false;
   let foregroundGeneration = 0;
 
   const main = document.querySelector('main');
@@ -34,7 +33,10 @@ document.addEventListener('DOMContentLoaded', () => {
   const queryToggle = document.getElementById('query-toggle');
   const pauseButton = document.getElementById('query-pause');
   const timestamp = document.getElementById('last-updated');
-  const number = value => core.summaryStats({ queries: { total: value } }).total.toLocaleString();
+  const number = value => {
+    const parsed = Number(value);
+    return (Number.isFinite(parsed) ? parsed : 0).toLocaleString();
+  };
 
   function visible() {
     return !document.hidden && navigator.onLine !== false;
@@ -207,8 +209,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (queryPanel.classList.contains('is-open')) queryContainer.scrollTop = queryContainer.scrollHeight;
   }
 
+  function isQueryPaused() { return manualPause || hoverPause; }
   function flushQueries() {
-    if (queryFeedPaused || !pendingQueries.length) return;
+    if (isQueryPaused() || !pendingQueries.length) return;
     const groups = core.groupConsecutiveQueries(pendingQueries);
     pendingQueries = [];
     const merged = core.mergeConsecutiveGroups(queryRows, groups, MAX_ROWS);
@@ -224,11 +227,10 @@ document.addEventListener('DOMContentLoaded', () => {
     flushQueries();
   }
 
-  function setQueryPaused(paused) {
-    queryFeedPaused = paused;
-    pauseButton.textContent = paused ? 'Resume' : 'Pause';
-    pauseButton.setAttribute('aria-pressed', String(paused));
-    if (!paused) flushQueries();
+  function updatePauseState() {
+    pauseButton.textContent = manualPause ? 'Resume' : 'Pause';
+    pauseButton.setAttribute('aria-pressed', String(manualPause));
+    if (!isQueryPaused()) flushQueries();
   }
 
   function canApply(generation, signal) {
@@ -236,8 +238,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   async function refreshStats() {
-    if (!appConfig || !visible() || statsFetching) return;
-    statsFetching = true;
+    if (!appConfig || !visible() || (statsController && !statsController.signal.aborted)) return;
     const generation = foregroundGeneration;
     const controller = new AbortController();
     statsController = controller;
@@ -250,14 +251,12 @@ document.addEventListener('DOMContentLoaded', () => {
     } catch (error) {
       if (error.name !== 'AbortError') console.error('Failed to refresh stats:', error);
     } finally {
-      statsFetching = false;
       if (statsController === controller) statsController = null;
     }
   }
 
   async function refreshQueries() {
-    if (!appConfig?.show_queries || !visible() || queriesFetching) return;
-    queriesFetching = true;
+    if (!appConfig?.show_queries || !visible() || (queriesController && !queriesController.signal.aborted)) return;
     const generation = foregroundGeneration;
     const controller = new AbortController();
     queriesController = controller;
@@ -267,7 +266,6 @@ document.addEventListener('DOMContentLoaded', () => {
     } catch (error) {
       if (error.name !== 'AbortError') console.error('Failed to refresh queries:', error);
     } finally {
-      queriesFetching = false;
       if (queriesController === controller) queriesController = null;
     }
   }
@@ -277,6 +275,7 @@ document.addEventListener('DOMContentLoaded', () => {
     clearInterval(statsTimer); clearInterval(queriesTimer); clearInterval(stalenessTimer);
     statsTimer = queriesTimer = stalenessTimer = null;
     initController?.abort(); statsController?.abort(); queriesController?.abort();
+    initController = statsController = queriesController = null;
   }
 
   function startTimers() {
@@ -287,7 +286,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   async function init() {
-    if (!visible()) return;
+    if (!visible() || (initController && !initController.signal.aborted)) return;
     const generation = foregroundGeneration;
     const controller = new AbortController();
     initController = controller;
@@ -311,12 +310,15 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     } finally {
       if (initController === controller) initController = null;
+      // A page can become visible before an aborted initialization settles.
+      // Restart only if no newer initialization has already taken ownership.
+      if (!appConfig && visible() && generation !== foregroundGeneration && !initController) init();
     }
   }
 
   function resumeForeground() {
     if (!visible()) return;
-    if (!appConfig) { if (!initController) init(); return; }
+    if (!appConfig) { init(); return; }
     refreshStats(); refreshQueries(); startTimers();
   }
   document.addEventListener('visibilitychange', () => {
@@ -333,9 +335,11 @@ document.addEventListener('DOMContentLoaded', () => {
     queryToggle.textContent = open ? 'Hide queries' : 'Show queries';
     if (open) queryContainer.scrollTop = queryContainer.scrollHeight;
   });
-  pauseButton.addEventListener('click', () => setQueryPaused(!queryFeedPaused));
-  queryContainer.addEventListener('mouseenter', () => setQueryPaused(true));
-  queryContainer.addEventListener('mouseleave', () => setQueryPaused(false));
+  pauseButton.addEventListener('click', () => { manualPause = !manualPause; updatePauseState(); });
+  if (window.matchMedia?.('(hover: hover) and (pointer: fine)').matches) {
+    queryContainer.addEventListener('mouseenter', () => { hoverPause = true; updatePauseState(); });
+    queryContainer.addEventListener('mouseleave', () => { hoverPause = false; updatePauseState(); });
+  }
   if ('serviceWorker' in navigator) window.addEventListener('load', () => {
     navigator.serviceWorker.register('sw.js').catch(error => console.warn('Service worker:', error));
   });

From 360b75008c20546018cf60f8a05b17ee90ccb0a1 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:22:05 +0530
Subject: [PATCH 38/45] Cover hidden-page initialization races and stale
 response rejection

---
 tests/lifecycle.test.cjs | 84 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 tests/lifecycle.test.cjs

diff --git a/tests/lifecycle.test.cjs b/tests/lifecycle.test.cjs
new file mode 100644
index 0000000..f1195de
--- /dev/null
+++ b/tests/lifecycle.test.cjs
@@ -0,0 +1,84 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const { JSDOM } = require('jsdom');
+const read = file => fs.readFileSync(path.join(__dirname, '..', file), 'utf8');
+
+function setup(fetchImpl) {
+  const html = read('index.html').replace(/<script[\s\S]*?<\/script>/g, '').replace('{{ICON_URL}}', '');
+  const dom = new JSDOM(html, { url: 'http://localhost:5001/', runScripts: 'outside-only' });
+  const w = dom.window;
+  let hidden = false;
+  const timers = new Map();
+  let next = 0;
+  Object.defineProperty(w.document, 'hidden', { configurable: true, get: () => hidden });
+  Object.defineProperty(w.navigator, 'onLine', { configurable: true, get: () => true });
+  w.setInterval = (fn, ms) => { const id = ++next; timers.set(id, { fn, ms }); return id; };
+  w.clearInterval = id => timers.delete(id);
+  w.fetch = fetchImpl;
+  w.eval(read('js/dashboard-core.js'));
+  w.eval(read('js/app.js'));
+  const settle = () => new Promise(resolve => w.setTimeout(resolve, 0));
+  return {
+    w, dom, timers, settle,
+    hide(value) { hidden = value; w.document.dispatchEvent(new w.Event('visibilitychange')); },
+    close() { dom.window.close(); },
+  };
+}
+
+const config = { refresh_interval: 2000, queries_refresh_interval: 3000, show_queries: false, show_network_summary: true, show_trends: false, piholes: [] };
+const response = data => ({ ok: true, json: async () => data });
+
+test('a visible page recovers when an aborted initialization settles later', async () => {
+  let resolveFirst;
+  const calls = [];
+  const app = setup((url, options) => {
+    calls.push({ url, signal: options.signal });
+    if (calls.length === 1) return new Promise(resolve => { resolveFirst = resolve; });
+    return Promise.resolve(response({ config, data: {}, summary: { instances: 0, contributing_instances: 0, partial: false } }));
+  });
+  try {
+    await app.settle();
+    assert.equal(calls.length, 1);
+    app.hide(true);
+    assert.equal(calls[0].signal.aborted, true);
+    app.hide(false);
+    await app.settle();
+    assert.ok(calls.length >= 2);
+    resolveFirst(response({ config, data: {}, summary: { instances: 0 } }));
+    await app.settle();
+    assert.equal(app.w.document.querySelectorAll('.empty-message').length, 1);
+    assert.deepEqual([...app.timers.values()].map(t => t.ms).sort((a, b) => a - b), [1000, 2000]);
+  } finally { app.close(); }
+});
+
+test('a stale in-flight stats response cannot overwrite a newer foreground snapshot', async () => {
+  let resolveOld;
+  let statsCalls = 0;
+  const data = total => ({ One: { queries: { total, blocked: 0, frequency: 1 }, clients: { active: 1 }, gravity: { domains_being_blocked: 1 }, _pi_dash: { blocking: true } } });
+  const cfg = { ...config, piholes: [{ name: 'One', enabled: true, link: false }] };
+  const summary = { instances: 1, contributing_instances: 1, total_queries: 1, blocked_queries: 0, partial: false };
+  const app = setup(url => {
+    if (url === 'init') return Promise.resolve(response({ config: cfg, data: data(1), summary }));
+    if (url.startsWith('data?')) {
+      statsCalls++;
+      if (statsCalls === 1) return new Promise(resolve => { resolveOld = resolve; });
+      return Promise.resolve(response({ stats: data(3), summary: { ...summary, total_queries: 3 } }));
+    }
+    throw new Error('Unexpected request');
+  });
+  try {
+    await app.settle();
+    const oldTick = [...app.timers.values()].find(t => t.ms === 2000).fn();
+    await app.settle();
+    app.hide(true);
+    app.hide(false);
+    await app.settle();
+    assert.equal(app.w.document.querySelector('.instance-details [data-value="total"]').textContent, '3');
+    resolveOld(response({ stats: data(2), summary: { ...summary, total_queries: 2 } }));
+    await oldTick;
+    await app.settle();
+    assert.equal(app.w.document.querySelector('.instance-details [data-value="total"]').textContent, '3');
+  } finally { app.close(); }
+});

From c0512daba9a907213f7bb904e9e504221cd87c6a Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:47:55 +0530
Subject: [PATCH 39/45] Fix responsive dashboard flow and validate rendered
 viewport states

---
 .dockerignore              |   5 +-
 .github/workflows/test.yml |  15 +++-
 .gitignore                 |   4 +-
 README.md                  |  30 ++++++--
 config-example.json        |   2 +-
 css/dashboard.css          |  47 ++++++------
 css/style.css              |   2 +-
 index.html                 |  26 +++----
 js/app.js                  |  11 ++-
 package.json               |   9 ++-
 proxy.py                   |  36 ++++-----
 sw.js                      |   2 +-
 tailwind.config.js         |   1 +
 tests/browser/checks.js    | 149 +++++++++++++++++++++++++++++++++++++
 tests/browser/index.html   |  16 ++++
 tests/browser/mock.js      |  56 ++++++++++++++
 tests/browser/run.cjs      |  47 ++++++++++++
 tests/browser/server.cjs   |  26 +++++++
 tests/lifecycle.test.cjs   |  18 +++++
 tests/test_proxy.py        |  17 ++++-
 20 files changed, 448 insertions(+), 71 deletions(-)
 create mode 100644 tests/browser/checks.js
 create mode 100644 tests/browser/index.html
 create mode 100644 tests/browser/mock.js
 create mode 100644 tests/browser/run.cjs
 create mode 100644 tests/browser/server.cjs

diff --git a/.dockerignore b/.dockerignore
index 9ba0125..042b255 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -13,4 +13,7 @@ __pycache__/
 dist/
 src/
 .vscode/
-.DS_Store
\ No newline at end of file
+.DS_Store
+tests/
+test-results/
+.git/
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 865d10b..eba1ce8 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -42,12 +42,25 @@ jobs:
           node --check js/app.js
           node --check sw.js
 
-      - name: Run browser regression tests
+      - name: Run frontend behavior regressions
         run: npm run test:js
 
       - name: Verify Tailwind build
         run: npm run build:css
 
+      - name: Install rendered-test browser
+        run: npx playwright install --with-deps chromium
+
+      - name: Run rendered viewport and lifecycle regressions
+        run: npm run test:browser
+
+      - name: Save rendered test evidence
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: rendered-dashboard
+          path: test-results/
+
       - name: Verify the shipped HTML, scripts and styles
         run: |
           test -s css/style.css
diff --git a/.gitignore b/.gitignore
index 3b9babb..59a8cd8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,6 @@ package-lock.json
 dist/
 .env
 *.log
-css/style.css
\ No newline at end of file
+css/style.css
+__pycache__/
+test-results/
diff --git a/README.md b/README.md
index e2594ec..2349c4d 100644
--- a/README.md
+++ b/README.md
@@ -32,9 +32,11 @@ Pi-Dash is a lightweight dashboard for monitoring one or more Pi-hole instances.
 
 ## Mobile and desktop layout
 
-Desktop keeps the full metric cards and ambient query feed. On narrow screens, Pi-Dash uses smaller spacing, a compact Network Summary, and a condensed card for each Pi-hole. The condensed card shows its name, query rate, health/blocking state, total queries, blocked queries and blocked percentage. Tap **Show details** to reveal all seven metrics shown on desktop; tap **Hide details** to collapse it again.
+Desktop keeps the full metric cards, query rates and sparklines. On narrow screens, Pi-Dash uses smaller spacing, a compact Network Summary, and a condensed card for each Pi-hole. The condensed card shows its name, query rate, health/blocking state, total queries, blocked queries and blocked percentage. Tap **Show details** to reveal all seven metrics shown on desktop; tap **Hide details** to collapse it again.
 
-The mobile query feed is a collapsible panel below the cards. It no longer shifts the dashboard upward by a percentage of the viewport. There is no requirement to fit every detail on one screen; the goal is to make the critical information visible quickly, with full details available when needed. The desktop query-background layout is preserved.
+Compact mode applies below 768 CSS pixels wide, and also at up to 1024 pixels wide when the viewport is 500 pixels high or less (including phone landscape and short resized windows). Below 640 pixels, cards use one column; wider layouts use two. Each details button has an instance-specific accessible name, supports keyboard activation, and preserves its expanded state when resizing.
+
+The query feed always occupies its own space below the cards, so it cannot cover them or become a narrow strip behind them. It is collapsible in compact mode and open on desktop, with a bounded scrolling area and a Pause control. Long values and names wrap instead of overflowing. Short desktop dashboards are centered safely; taller dashboards scroll from the top without clipping the heading or Network Summary. Full details and larger instance lists can require vertical scrolling.
 
 ### Why the latency number was removed
 
@@ -119,7 +121,7 @@ Provide the variable through your shell or Docker environment. Literal passwords
 
 Stats and recent queries are fetched separately. Opening the dashboard on multiple devices shares short-lived server-side snapshots through the in-process cache. The cache is demand-driven: Pi-Dash does not run a background polling service of its own.
 
-The browser stops its statistics and query timers when the page becomes hidden or the device goes offline, and resumes when it becomes visible/online again. Pending browser requests are aborted and stale responses are ignored. An upstream HTTP request already started by the server may still finish, but no repeated server-side polling continues after the browser stops requesting data.
+The browser stops its statistics and query timers when the page becomes hidden or the device goes offline, and resumes when it becomes visible/online again. Pending browser requests are aborted, and stale responses or initialization errors cannot overwrite newer foreground state. Returning to a visible, online page refreshes immediately and starts only one timer for each feed. Going online while the page is still hidden does not resume polling. An upstream HTTP request already started by the server may still finish, but no repeated server-side polling continues after the browser stops requesting data.
 
 The feed fetches the latest 50 queries per Pi-hole on each poll. It tracks IDs separately for each instance and uses timestamps for cross-instance ordering. Actual duplicate DNS requests are legitimate and are not deleted from the API data. For display, only **consecutive** entries with the same Pi-hole, domain and blocked/allowed status are combined into `(xN)`. The last group can continue increasing across refreshes. A different domain or blocking status starts a new row. No rolling-window aggregation or top-domain ranking is used.
 
@@ -144,6 +146,7 @@ To test the changes without merging into `main`:
 ```bash
 git fetch origin
 git switch feature/dashboard-hardening
+git pull --ff-only origin feature/dashboard-hardening
 # If the branch does not exist locally yet:
 # git switch --track origin/feature/dashboard-hardening
 ```
@@ -216,11 +219,28 @@ npm run test:js
 npm run build:css
 ```
 
-Backend tests cover config fallback, cache behavior, zero enabled instances, TLS/secret resolution, blocking states, partial aggregation, legacy API response shapes and process health. Browser tests cover compact-card expansion, all desktop metrics, consecutive grouping, overlapping queries, per-instance IDs, hidden/offline polling, disabled query feeds and safe rendering of instance names. GitHub Actions runs both suites and verifies the frontend build.
+Backend tests cover config fallback, cache behavior, zero enabled instances, TLS/secret resolution, reachability versus authentication errors, blocking states, partial aggregation, legacy API response shapes and process health. Frontend behavior tests use jsdom for grouping, expansion and deterministic request/timer races; **jsdom does not render CSS**.
+
+Run the separate Chromium suite to check the actual rendered page:
+
+```bash
+npx playwright install chromium
+npm run test:browser
+```
+
+The rendered fixture loads the production HTML, CSS and JavaScript with synthetic API responses. It checks 320, 375, 430 and 768 pixel widths, phone landscape, intermediate desktop sizes and desktops up to 1920 pixels, in both themes. It covers compact and expanded cards, long values/names, six Pi-holes, zero Pi-holes, blocking/offline/auth states, feed grouping, card/feed overlap, page overflow, resizing and deterministic visibility/offline races. CI runs these checks and retains screenshots in the `rendered-dashboard` artifact. Playwright is a development-only dependency; Flask and vanilla JavaScript remain the application runtime.
+
+For manual visual and keyboard inspection with the same synthetic data:
+
+```bash
+npm run dev
+```
+
+Open `http://localhost:5011/tests/browser/`, select a viewport/scenario/theme, and use **Inspect viewport** or **Run all rendered checks**. This command is only a test fixture; use `python proxy.py` to run the real dashboard. Inspect your real Pi-holes with your existing configuration before merging. In browser Network tools, confirm `/data` and `/queries` stop when switching tabs or going offline, and resume without duplicate request streams.
 
 ## PWA behavior
 
-Pi-Dash caches its application shell for offline/reload resilience. The service worker includes both dashboard scripts and both stylesheets, uses network-first loading for navigation and application assets, and never caches API responses. Live statistics require a working connection to Pi-Dash and its Pi-hole instances. A new cache version is installed for the mobile update; if an older installed PWA continues displaying an old shell after upgrading, close/reopen it or perform a hard refresh.
+Pi-Dash caches its application shell for offline/reload resilience. The service worker includes both dashboard scripts and both stylesheets, uses network-first loading for navigation and application assets, and never caches API responses. Live statistics require a working connection to Pi-Dash and its Pi-hole instances. A new cache version is installed for the responsive update; if an older installed PWA continues displaying an old shell after upgrading, close/reopen it or perform a hard refresh.
 
 ## Credits
 
diff --git a/config-example.json b/config-example.json
index 5e095a3..f904426 100644
--- a/config-example.json
+++ b/config-example.json
@@ -5,7 +5,7 @@
     "refresh_interval": "Default: 5000 milliseconds. Refreshes the main statistics. The example recommends 2000 ms; existing configurations retain their configured value.",
     "queries_refresh_interval": "Default: the effective refresh_interval. Separately controls the optional live-query feed. The example recommends 3000 ms. Omitting this key preserves the old query cadence.",
     "cache_ttl": "Default: min(1000, max(100, min(refresh_interval, queries_refresh_interval) / 2)) milliseconds, rounded down. The example uses 1000 ms. Set 0 to disable the shared in-process cache. An explicit cache TTL may delay fresh upstream data; keep it below your fastest polling interval.",
-    "show_queries": "Default: false. Enables the optional DNS query feed. Queries are requested only while the browser page is visible and online; hidden/offline pages stop polling. Desktop uses the ambient feed and mobile uses a collapsible panel.",
+    "show_queries": "Default: false. Enables the optional DNS query feed. Queries are requested only while the browser page is visible and online; hidden/offline pages stop polling. The feed stays below the cards: open on desktop, collapsible in compact mobile/landscape layouts.",
     "show_network_summary": "Default: true. Shows additive DNS totals across reporting Pi-holes. If an instance is unavailable, totals are marked partial. Active clients and unique domains are not summed because they can overlap.",
     "show_trends": "Default: true. Shows a short query-rate sparkline kept only in browser memory. It does not create a database or store historical DNS activity.",
     "piholes": "Default: empty list. Add one or more Pi-hole instances below. Names must be unique. Every enabled instance needs a name and address."
diff --git a/css/dashboard.css b/css/dashboard.css
index 7bac2b2..c434ccd 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -1,4 +1,8 @@
 body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
+html { min-height: 100%; }
+/* Auto margins center short dashboards but become zero when content needs scrolling. */
+body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 1rem; }
+#main-wrapper { flex: none; max-width: 48rem; margin-block: auto; }
 html, body { overscroll-behavior-y: contain; }
 [hidden] { display: none !important; }
 .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
@@ -19,7 +23,7 @@ html, body { overscroll-behavior-y: contain; }
 .network-health { text-align: right; }
 .network-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
 .network-metrics > div { min-width: 0; }
-.network-cache { overflow-wrap: anywhere; }
+.network-metrics { overflow-wrap: anywhere; }
 .network-partial { font-size: .75rem; color: #b45309; margin: 0 0 .75rem; }
 .dark .network-partial { color: #fbbf24; }
 #network-summary.is-partial { border-left: 3px solid #f59e0b; }
@@ -30,31 +34,36 @@ html, body { overscroll-behavior-y: contain; }
 .instance-name { font-size: 1.25rem; font-weight: 600; color: #374151; line-height: 1.4; overflow-wrap: anywhere; }
 .dark .instance-name { color: #22d3ee; }
 .instance-name a:hover, .instance-name a:focus { color: #14b8a6; }
-.pihole-rate { font-size: .875rem; font-weight: 400; color: #6b7280; white-space: nowrap; }
+.pihole-rate { font-size: .875rem; font-weight: 400; color: #6b7280; overflow-wrap: anywhere; }
 .dark .pihole-rate { color: #9ca3af; }
 .instance-health { display: flex; align-items: center; gap: .35rem; font-size: .75rem; margin-top: .15rem; }
 .pihole-sparkline { width: 80px; height: 28px; color: #0d9488; flex: none; }
 .dark .pihole-sparkline { color: #2dd4bf; }
 .pihole-sparkline svg { width: 100%; height: 100%; }
 .instance-details { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
-.metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-width: 0; }
-.metric-label { color: #6b7280; }
+.metric-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: .5rem; min-width: 0; }
+.metric-label { color: #6b7280; overflow-wrap: anywhere; }
 .dark .metric-label { color: #9ca3af; }
-.metric-value { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.metric-value { min-width: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .mobile-instance-summary, .instance-toggle { display: none; }
 .instance-toggle:focus-visible, .query-actions button:focus-visible { outline: 2px solid #0d9488; outline-offset: 3px; }
 .empty-message { grid-column: 1 / -1; text-align: center; color: #6b7280; font-size: .875rem; padding: 1rem; }
-/* The original ambient query feed remains behind the desktop dashboard. */
-.query-panel { position: fixed; inset: auto 0 0; height: 60vh; max-height: 60vh; z-index: 0; pointer-events: none; }
-.query-panel-header { display: none; }
-#background-queries { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; list-style: none; margin: 0; padding: 4px 6px 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 1.25; pointer-events: auto; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); }
-#background-queries li { text-shadow: 0 1px 2px rgb(0 0 0 / .15); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The feed occupies its own space after the cards at every viewport size. */
+.query-panel { position: relative; margin-top: 1rem; min-width: 0; }
+.query-panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
+.query-panel-title { font-size: .75rem; font-weight: 600; }
+.query-actions { display: flex; gap: .75rem; }
+.query-actions button { min-height: 2.75rem; color: #0f766e; font-size: .75rem; }
+.dark .query-actions button { color: #5eead4; }
+#query-toggle { display: none; }
+#background-queries { display: block; max-height: 25vh; overflow-y: auto; list-style: none; margin: 0; padding: .25rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .6875rem; line-height: 1.45; }
+#background-queries li { overflow-wrap: anywhere; }
 .query-allowed { color: #16a34a; }
 .query-blocked { color: #dc2626; }
 .dark .query-allowed { color: #4ade80; }
 .dark .query-blocked { color: #f87171; }
-@media (max-width: 639px) {
-    body { display: block; padding: .75rem; min-height: 100%; height: auto; }
+@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) {
+    body { display: block; padding: .75rem; }
     #main-wrapper { max-width: none; width: 100%; margin: 0 auto; transform: none !important; }
     #main-wrapper > header { margin-bottom: .75rem; }
     #main-wrapper > header h1 { font-size: 1.375rem; line-height: 1.75rem; }
@@ -74,14 +83,15 @@ html, body { overscroll-behavior-y: contain; }
     .mobile-metric { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
     .mobile-metric .metric-label { font-size: .6875rem; }
     .mobile-metric .metric-value { text-align: left; font-size: .875rem; }
-    .instance-toggle { display: block; width: 100%; margin-top: .625rem; padding: .375rem 0 .125rem; border-top: 1px solid #e5e7eb; color: #0f766e; font-size: .75rem; font-weight: 500; text-align: center; }
+    .instance-toggle { display: block; width: 100%; margin-top: .625rem; padding: .375rem 0; min-height: 2.75rem; border-top: 1px solid #e5e7eb; color: #0f766e; font-size: .75rem; font-weight: 500; text-align: center; }
     .dark .instance-toggle { border-color: #374151; color: #5eead4; }
     .instance-details { display: none; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; font-size: .8125rem; gap: .45rem; }
     .dark .instance-details { border-color: #374151; }
     .instance-card.is-expanded .instance-details { display: flex; }
     .query-panel { position: relative; inset: auto; height: auto; max-height: none; margin-top: .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: white; pointer-events: auto; overflow: hidden; }
     .dark .query-panel { border-color: #374151; background: #111827; }
-    .query-panel-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem .75rem; }
+    .query-panel-header { padding: .25rem .75rem; }
+    #query-toggle { display: inline; }
     .query-panel-title { font-size: .75rem; font-weight: 600; }
     .query-actions { display: flex; gap: .75rem; }
     .query-actions button { color: #0f766e; font-size: .75rem; }
@@ -92,12 +102,7 @@ html, body { overscroll-behavior-y: contain; }
     .query-panel.is-open #background-queries { display: block; }
     #background-queries li { padding: .125rem 0; text-shadow: none; }
 }
-@media (min-width: 640px) and (max-width: 896px) and (orientation: landscape) {
-    .query-panel { height: 35vh; max-height: 35vh; }
-    #background-queries { font-size: 9px; padding: 2px 4px 6px; line-height: 1.2; }
-}
-@media (min-width: 897px) and (max-width: 1024px) and (orientation: landscape) {
-    .query-panel { height: 28vh; max-height: 28vh; }
-    #background-queries { font-size: 9px; padding: 2px 6px 6px; }
+@media (max-width: 639px) {
+    #main-wrapper > main { grid-template-columns: minmax(0, 1fr); }
 }
 @media (prefers-reduced-motion: reduce) { body { transition: none; } }
diff --git a/css/style.css b/css/style.css
index d8f66f7..302e668 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:.75rem}.mb-6{margin-bottom:1.5rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-full{width:100%}.max-w-sm{max-width:24rem}.translate-y-1{--tw-translate-y:0.25rem}.transform,.translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.whitespace-nowrap{white-space:nowrap}.rounded-lg{border-radius:.5rem}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[10px\]{font-size:10px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-tight{line-height:1.25}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}body{font-family:Inter,sans-serif;-webkit-tap-highlight-color:transparent}body,html{overscroll-behavior-y:contain}.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}#background-queries{position:fixed;bottom:0;left:0;right:0;top:auto;height:60vh;max-height:60vh;display:flex;flex-direction:column;justify-content:flex-end;list-style:none;margin:0;padding:4px 6px 8px;font-family:Inter,monospace;font-size:10px;line-height:1.25;pointer-events:none;overflow:hidden;z-index:0;-webkit-mask-image:linear-gradient(0deg,#000 0,#000 50%,rgba(0,0,0,.5) 80%,transparent);mask-image:linear-gradient(0deg,#000 0,#000 50%,rgba(0,0,0,.5) 80%,transparent);backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}#background-queries li{text-shadow:0 1px 2px rgba(0,0,0,.15);letter-spacing:.01em}@keyframes bqFadeIn{to{opacity:.9;transform:translateY(0)}}@media (max-width:640px) and (orientation:portrait){#background-queries{height:42vh;max-height:42vh}body:has(#background-queries:not(:empty)) #main-wrapper{transform:translateY(-8vh);transition:transform .3s ease}}@media (max-width:896px) and (orientation:landscape){#background-queries{height:35vh;max-height:35vh;font-size:9px;padding:2px 4px 6px;line-height:1.2}body:has(#background-queries:not(:empty)) #main-wrapper{transform:translateY(-4vh);transition:transform .3s ease}}@media (min-width:897px) and (max-width:1024px) and (orientation:landscape){#background-queries{height:28vh;max-height:28vh;font-size:9px;padding:2px 6px 6px}}.focus\:text-teal-500:focus,.hover\:text-teal-500:hover{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:max-w-xl{max-width:36rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\:text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.dark\:text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.dark\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.dark\:text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity,1))}.dark\:text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60/var(--tw-text-opacity,1))}.dark\:text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.dark\:text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.dark\:text-teal-400{--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity,1))}.dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}}
\ No newline at end of file
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-6{margin-bottom:1.5rem}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.gap-4{gap:1rem}.rounded-lg{border-radius:.5rem}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\:text-cyan-400:is(.dark *){--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-green-500:is(.dark *){--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-yellow-500:is(.dark *){--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
\ No newline at end of file
diff --git a/index.html b/index.html
index e25ef07..93909fe 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -19,8 +19,8 @@
       }
     </script>
   </head>
-  <body class="h-full flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
-    <div id="main-wrapper" class="w-full max-w-sm sm:max-w-xl mx-auto relative z-10">
+  <body class="bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
+    <div id="main-wrapper" class="w-full mx-auto relative z-10">
       <header class="text-center mb-6">
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Pi-Dash</h1>
         <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400" role="status">Last updated: Never</p>
@@ -39,17 +39,17 @@ <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summa
         </div>
       </section>
       <main class="w-full grid grid-cols-1 sm:grid-cols-2 gap-4"></main>
-    </div>
-    <section id="query-panel" class="query-panel" hidden aria-label="Recent DNS queries">
-      <div class="query-panel-header">
-        <span class="query-panel-title">Recent queries</span>
-        <div class="query-actions">
-          <button id="query-pause" type="button" aria-pressed="false">Pause</button>
-          <button id="query-toggle" type="button" aria-expanded="false" aria-controls="background-queries">Show queries</button>
+      <section id="query-panel" class="query-panel" hidden aria-label="Recent DNS queries">
+        <div class="query-panel-header">
+          <span class="query-panel-title">Recent queries</span>
+          <div class="query-actions">
+            <button id="query-pause" type="button" aria-pressed="false">Pause</button>
+            <button id="query-toggle" type="button" aria-expanded="false" aria-controls="background-queries">Show queries</button>
+          </div>
         </div>
-      </div>
-      <ul id="background-queries" aria-label="Recent DNS query activity"></ul>
-    </section>
+        <ul id="background-queries" aria-label="Recent DNS query activity"></ul>
+      </section>
+    </div>
     <script src="js/dashboard-core.js"></script>
     <script src="js/app.js"></script>
   </body>
diff --git a/js/app.js b/js/app.js
index 152b8dc..c73da18 100644
--- a/js/app.js
+++ b/js/app.js
@@ -116,10 +116,12 @@ document.addEventListener('DOMContentLoaded', () => {
     toggle.type = 'button';
     toggle.setAttribute('aria-expanded', 'false');
     toggle.setAttribute('aria-controls', details.id);
+    toggle.setAttribute('aria-label', `Show details for ${pihole.name}`);
     toggle.addEventListener('click', () => {
       const expanded = section.classList.toggle('is-expanded');
       toggle.setAttribute('aria-expanded', String(expanded));
       toggle.textContent = expanded ? 'Hide details' : 'Show details';
+      toggle.setAttribute('aria-label', `${toggle.textContent} for ${pihole.name}`);
     });
     section.append(toggle);
     cards.set(pihole.name, section);
@@ -128,6 +130,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   function renderSparkline(name, section, rate) {
     const target = section.querySelector('.pihole-sparkline');
+    target.hidden = !appConfig.show_trends;
     if (!appConfig.show_trends) { target.replaceChildren(); return; }
     const history = trendHistory.get(name) || [];
     history.push(rate);
@@ -206,7 +209,7 @@ document.addEventListener('DOMContentLoaded', () => {
       fragment.append(row);
     }
     queryContainer.replaceChildren(fragment);
-    if (queryPanel.classList.contains('is-open')) queryContainer.scrollTop = queryContainer.scrollHeight;
+    queryContainer.scrollTop = queryContainer.scrollHeight;
   }
 
   function isQueryPaused() { return manualPause || hoverPause; }
@@ -249,7 +252,7 @@ document.addEventListener('DOMContentLoaded', () => {
       updateNetworkSummary(payload.summary);
       updateTimestamp();
     } catch (error) {
-      if (error.name !== 'AbortError') console.error('Failed to refresh stats:', error);
+      if (canApply(generation, controller.signal) && error.name !== 'AbortError') console.error('Failed to refresh stats:', error);
     } finally {
       if (statsController === controller) statsController = null;
     }
@@ -264,7 +267,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const data = await fetchData('queries?length=50', controller.signal);
       if (canApply(generation, controller.signal)) renderQueries(data);
     } catch (error) {
-      if (error.name !== 'AbortError') console.error('Failed to refresh queries:', error);
+      if (canApply(generation, controller.signal) && error.name !== 'AbortError') console.error('Failed to refresh queries:', error);
     } finally {
       if (queriesController === controller) queriesController = null;
     }
@@ -304,7 +307,7 @@ document.addEventListener('DOMContentLoaded', () => {
       updateTimestamp();
       startTimers();
     } catch (error) {
-      if (error.name !== 'AbortError') {
+      if (canApply(generation, controller.signal) && error.name !== 'AbortError') {
         console.error('Failed to initialize dashboard:', error);
         timestamp.textContent = 'Unable to initialize dashboard';
       }
diff --git a/package.json b/package.json
index 1ab0b4f..479d3c8 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,14 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "tailwindcss": "^3.3.0",
-    "jsdom": "^26.1.0"
+    "jsdom": "^26.1.0",
+    "playwright": "^1.63.0",
+    "tailwindcss": "^3.3.0"
   },
   "scripts": {
     "build:css": "tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./css/style.css --minify",
-    "test:js": "node --test tests/*.test.cjs"
+    "test:js": "node --test tests/*.test.cjs",
+    "dev": "node tests/browser/server.cjs",
+    "test:browser": "node tests/browser/run.cjs"
   }
 }
diff --git a/proxy.py b/proxy.py
index 838414c..e463557 100644
--- a/proxy.py
+++ b/proxy.py
@@ -97,23 +97,21 @@ def headers(sid):
 
 def authenticate_and_get_sid(pihole):
     address = pihole['address'].rstrip('/')
-    try:
-        response = requests.post(
-            address + '/api/auth',
-            json={'password': resolve_secret(pihole.get('password', ''))},
-            timeout=DEFAULT_REQUEST_TIMEOUT,
-            verify=get_verify_setting(pihole),
-        )
-        if response.status_code == 200:
-            data = response.json()
-            sid = data.get('session', {}).get('sid')
-            if sid:
-                return sid
-            if data.get('session', {}).get('message') == 'no password set':
-                return NO_PASSWORD
-        return None
-    except requests.exceptions.RequestException:
-        return None
+    response = requests.post(
+        address + '/api/auth',
+        json={'password': resolve_secret(pihole.get('password', ''))},
+        timeout=DEFAULT_REQUEST_TIMEOUT,
+        verify=get_verify_setting(pihole),
+    )
+    if response.status_code == 200:
+        data = response.json()
+        sid = data.get('session', {}).get('sid')
+        if sid:
+            return sid
+        if data.get('session', {}).get('message') == 'no password set':
+            return NO_PASSWORD
+    response.raise_for_status()
+    return None
 
 
 def get_sid(pihole, force=False):
@@ -256,7 +254,9 @@ def fetch_one(pihole):
     except RuntimeError as exc:
         return name, {'error': str(exc), '_pi_dash': {'health': 'auth_error'}}
     except (requests.exceptions.RequestException, ValueError) as exc:
-        return name, {'error': str(exc), '_pi_dash': {'health': 'unreachable'}}
+        status = getattr(getattr(exc, 'response', None), 'status_code', None)
+        health = 'auth_error' if status in (401, 403) else 'unreachable'
+        return name, {'error': str(exc), '_pi_dash': {'health': health}}
 
 
 def _stats_uncached():
diff --git a/sw.js b/sw.js
index f8c8921..ad97b3b 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'pi-dashboard-cache-v2-mobile';
+const CACHE_NAME = 'pi-dashboard-cache-v3-responsive';
 const APP_SHELL = [
   '{{CACHE_URL}}',
   '{{CACHE_URL}}css/style.css',
diff --git a/tailwind.config.js b/tailwind.config.js
index 9d298ee..44edfd5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./js/**/*.js"
diff --git a/tests/browser/checks.js b/tests/browser/checks.js
new file mode 100644
index 0000000..4d5bb54
--- /dev/null
+++ b/tests/browser/checks.js
@@ -0,0 +1,149 @@
+/* Run in a real browser: jsdom cannot validate these geometry assertions. */
+const result = document.querySelector('#result');
+const settle = () => new Promise(resolve => setTimeout(resolve, 35));
+const assert = (condition, message) => { if (!condition) throw new Error(message); };
+const shown = e => e.getClientRects().length > 0;
+const bounds = e => e.getBoundingClientRect();
+const overlap = (a, b) => a.left < b.right - 1 && a.right > b.left + 1 && a.top < b.bottom - 1 && a.bottom > b.top + 1;
+function geometry(d, stage) {
+  const width = d.documentElement.clientWidth;
+  assert(d.documentElement.scrollWidth <= width, `${stage}: page overflows horizontally`);
+  assert(bounds(d.querySelector('header')).top >= -1, `${stage}: header is clipped at top`);
+  assert(bounds(d.querySelector('#network-summary')).top >= -1, `${stage}: summary is clipped at top`);
+  const cards = [...d.querySelectorAll('.instance-card')];
+  const panel = bounds(d.querySelector('#query-panel'));
+  for (const card of cards) {
+    const r = bounds(card);
+    assert(r.left >= -1 && r.right <= width + 1, `${stage}: card exceeds viewport`);
+    assert(!overlap(r, panel), `${stage}: query feed overlaps card`);
+    for (const e of card.querySelectorAll('.metric-label,.metric-value,.pihole-rate,.pihole-health,.instance-toggle')) {
+      if (!shown(e)) continue;
+      const rects = [...e.getClientRects()];
+      assert(rects.every(b => b.left >= r.left - 1 && b.right <= r.right + 1), `${stage}: ${e.className} exceeds card`);
+      assert(e.scrollWidth <= e.clientWidth + 1 || e.tagName === 'SPAN', `${stage}: text is clipped`);
+    }
+    for (const row of card.querySelectorAll('.metric-row')) {
+      if (shown(row)) assert(!overlap(bounds(row.firstElementChild), bounds(row.lastElementChild)), `${stage}: metric label overlaps value`);
+    }
+  }
+  for (let i = 0; i < cards.length; i++) for (let j = i + 1; j < cards.length; j++) assert(!overlap(bounds(cards[i]), bounds(cards[j])), `${stage}: cards overlap`);
+  for (const e of d.querySelectorAll('.network-metrics > div')) assert(e.scrollWidth <= e.clientWidth + 1, `${stage}: network metric overflow`);
+  const list = d.querySelector('#background-queries');
+  if (shown(list)) assert(list.scrollWidth <= list.clientWidth + 1, `${stage}: query text overflow`);
+}
+async function loadViewport(width, height, scenario, dark) {
+  frame.width = width;
+  frame.height = height;
+  await new Promise(resolve => {
+    frame.onload = resolve;
+    frame.src = `/fixture/?scenario=${scenario}&dark=${dark}&run=${Date.now()}`;
+  });
+  await settle();
+  const d = frame.contentDocument;
+  assert(d.querySelector('.instance-card,.empty-message'), 'dashboard did not initialize');
+  return d;
+}
+async function checkLayout(width, height, scenario, dark) {
+  const d = await loadViewport(width, height, scenario, dark);
+  const compact = width <= 767 || width <= 1024 && height <= 500;
+  geometry(d, 'default');
+  assert(frame.contentWindow.getComputedStyle(d.body).backgroundColor === (dark ? 'rgb(31, 41, 55)' : 'rgb(243, 244, 246)'), 'theme does not match saved preference');
+  const toggles = [...d.querySelectorAll('.instance-toggle')];
+  for (const toggle of toggles) {
+    assert(shown(toggle) === compact, 'wrong compact/desktop mode');
+    assert(toggle.getAttribute('aria-expanded') === 'false', 'initial expanded state');
+    const details = d.getElementById(toggle.getAttribute('aria-controls'));
+    assert(shown(details) === !compact, 'wrong metric visibility');
+    assert(details.children.length === 7, 'missing desktop metrics');
+    assert(toggle.getAttribute('aria-label').includes('details for '), 'missing per-instance accessible name');
+    if (compact) {
+      toggle.click();
+      assert(shown(details) && toggle.getAttribute('aria-expanded') === 'true', 'details did not expand');
+    }
+  }
+  geometry(d, 'expanded');
+  const queryToggle = d.querySelector('#query-toggle');
+  if (compact) queryToggle.click();
+  assert(shown(d.querySelector('#background-queries')), 'query feed did not open');
+  geometry(d, 'queries open');
+  if (scenario !== 'zero') assert(d.querySelector('#background-queries').textContent.includes('(x3)'), 'consecutive grouping missing');
+  if (scenario === 'states') {
+    for (const state of ['Blocking ON', 'Blocking OFF', 'Offline', 'Auth failed', 'blocking unknown']) assert(d.querySelector('main').textContent.includes(state), `missing ${state}`);
+    assert(shown(d.querySelector('.network-partial')), 'missing partial summary');
+  }
+  if (scenario === 'zero') assert(d.querySelector('.empty-message') && !toggles.length, 'zero instances failed');
+  if (compact) {
+    for (const toggle of toggles) toggle.click();
+    queryToggle.click();
+    geometry(d, 'collapsed again');
+  }
+  // Resize the same live document across the breakpoint with details expanded.
+  if (toggles.length && compact) {
+    toggles[0].click();
+    frame.width = 1280; frame.height = 900;
+    await settle();
+    assert([...d.querySelectorAll('.instance-details')].every(shown), 'desktop lost full metrics after resize');
+    frame.width = width; frame.height = height;
+    await settle();
+    assert(shown(d.querySelector('.instance-details')), 'expanded state lost after resize');
+    toggles[0].click();
+  }
+}
+async function checkLifecycle() {
+  const d = await loadViewport(375, 667, 'normal', false);
+  const w = frame.contentWindow, f = w.fixture;
+  const expectedTimers = () => assert(JSON.stringify([...f.timers.values()].map(t => t.ms).sort((a,b)=>a-b)) === '[1000,2000,3000]', 'duplicate or missing polling timers');
+  expectedTimers();
+  // Keep requests pending even after abort, like a late response/body or ignored abort.
+  const oldStats = f.defer('data'), oldQueries = f.defer('queries');
+  const statsTick = f.tick(2000), queryTick = f.tick(3000);
+  await settle();
+  f.hide(true);
+  assert(f.timers.size === 0, 'hidden page retains timers');
+  assert(f.calls.slice(-2).every(c => c.signal.aborted), 'hidden page does not abort both requests');
+  const hiddenCalls = f.calls.length;
+  await f.tick(2000); await f.tick(3000);
+  assert(f.calls.length === hiddenCalls, 'hidden page polls');
+  f.release('data'); f.release('queries');
+  f.data.Primary.queries.total = 999;
+  f.queries.Primary = [{ id: 100, time: 100, domain: 'fresh.test', blocked: false }];
+  f.hide(false); await settle(); expectedTimers();
+  const value = () => d.querySelector('.instance-details [data-value="total"]').textContent;
+  assert(value() === '999', 'resume did not refresh stats');
+  oldStats.resolve({ ok: true, json: async () => ({ stats: { Primary: { queries: { total: 111 } } } }) });
+  oldQueries.resolve({ ok: true, json: async () => ({ Primary: [{ id: 999, time: 999, domain: 'stale.test' }] }) });
+  await Promise.all([statsTick, queryTick]);
+  assert(value() === '999' && !d.querySelector('#background-queries').textContent.includes('stale.test'), 'late response overwrote foreground state');
+  for (let i=0; i<3; i++) {
+    f.online(false); assert(f.timers.size === 0, 'offline page retains timers');
+    const count = f.calls.length; await f.tick(2000); await f.tick(3000);
+    assert(f.calls.length === count, 'offline page polls');
+    f.hide(true); f.online(true); assert(f.timers.size === 0, 'online event resumes hidden page');
+    f.hide(false); await settle(); expectedTimers();
+  }
+  f.hide(true);
+  const held = f.defer('data');
+  f.hide(false); await settle();
+  const count = f.calls.length;
+  await f.tick(2000);
+  assert(f.calls.length === count, 'overlapping stats request');
+  f.release('data'); held.resolve({ ok: true, json: async () => ({ stats: f.data, summary: f.summary }) });
+  await settle();
+  w.dispatchEvent(new Event('pagehide')); assert(f.timers.size === 0, 'pagehide retains timers');
+  w.dispatchEvent(new Event('pageshow')); await settle(); expectedTimers();
+}
+document.querySelector('#run').addEventListener('click', async () => {
+  const button = document.querySelector('#run'); button.disabled = true;
+  result.dataset.status = 'running'; result.textContent = 'Running rendered checks...';
+  const sizes = [[320,568],[568,320],[375,667],[667,375],[430,932],[932,430],[768,1024],[1024,768],[768,375],[800,600],[1024,500],[1280,720],[1440,900],[1920,1080]];
+  const failures = []; let passed = 0;
+  for (const [width,height] of sizes) for (const scenario of ['normal','long','many','zero','states']) for (const dark of [false,true]) {
+    const name = `${width}×${height} ${scenario} ${dark ? 'dark' : 'light'}`;
+    try { await checkLayout(width,height,scenario,dark); passed++; }
+    catch(error) { failures.push(`${name}: ${error.message}`); }
+    result.textContent = `${passed} passed; ${failures.length} failed. Checking ${name}\n${failures.join('\n')}`;
+  }
+  try { await checkLifecycle(); passed++; } catch(error) { failures.push(`Polling lifecycle: ${error.message}`); }
+  result.textContent = `${passed} passed; ${failures.length} failed.\n${failures.join('\n')}`;
+  result.dataset.status = failures.length ? 'failed' : 'passed'; button.disabled = false;
+});
diff --git a/tests/browser/index.html b/tests/browser/index.html
new file mode 100644
index 0000000..dc4ec9c
--- /dev/null
+++ b/tests/browser/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><title>Pi-Dash rendered regressions</title>
+<style>body{font:14px system-ui;margin:16px;background:#e5e7eb}iframe{border:0;display:block;background:white}label{margin-right:12px}#result{white-space:pre-wrap}#viewport{width:max-content}h1{font-size:20px}</style></head>
+<body><h1>Pi-Dash rendered regressions</h1>
+<form><label>Width <input name="width" type="number" value="768"></label><label>Height <input name="height" type="number" value="375"></label><label>Scenario <select name="scenario"><option>normal</option><option>long</option><option>many</option><option>zero</option><option>states</option></select></label><label>Theme <select name="dark"><option value="false">Light</option><option value="true">Dark</option></select></label><button>Inspect viewport</button></form>
+<p><button id="run" type="button">Run all rendered checks</button></p><pre id="result">Ready</pre><div id="viewport"></div>
+<script>
+const params = new URLSearchParams(location.search);
+const frame = document.createElement('iframe');
+frame.title = 'Dashboard viewport';
+frame.width = params.get('width') || 768;
+frame.height = params.get('height') || 375;
+frame.src = '/fixture/?scenario=' + (params.get('scenario') || 'normal') + '&dark=' + (params.get('dark') || 'false');
+document.querySelector('#viewport').append(frame);
+for (const name of ['width', 'height', 'scenario', 'dark']) if (params.has(name)) document.querySelector(`[name="${name}"]`).value = params.get(name);
+</script><script src="/tests/browser/checks.js"></script></body></html>
diff --git a/tests/browser/mock.js b/tests/browser/mock.js
new file mode 100644
index 0000000..50046d2
--- /dev/null
+++ b/tests/browser/mock.js
@@ -0,0 +1,56 @@
+/* Synthetic data only. Loaded before the unmodified production scripts. */
+(() => {
+  const params = new URLSearchParams(location.search);
+  const scenario = params.get('scenario') || 'normal';
+  localStorage.theme = params.get('dark') === 'true' ? 'dark' : 'light';
+  const count = scenario === 'zero' ? 0 : scenario === 'many' ? 6 : scenario === 'states' ? 5 : 2;
+  const names = Array.from({ length: count }, (_, i) => scenario === 'long' ? `Pi-hole-${i}-with-a-very-long-unbroken-instance-name` : ['Primary', 'Secondary', 'Unreachable', 'Authentication', 'Unknown', 'Spare'][i]);
+  const sample = () => ({ queries: { total: scenario === 'long' ? 987654321098765 : 89151, blocked: 23808, percent_blocked: 26.7, frequency: scenario === 'long' ? 123456789.1 : 5.6, cached: scenario === 'long' ? 123456789012345 : 45402, forwarded: scenario === 'long' ? 987654321098765 : 42939, unique_domains: 4281 }, clients: { active: 18 }, gravity: { domains_being_blocked: scenario === 'long' ? 987654321098765 : 1284390 }, _pi_dash: { blocking: true } });
+  const data = Object.fromEntries(names.map(name => [name, sample()]));
+  if (scenario === 'states') {
+    data.Secondary._pi_dash.blocking = false;
+    data.Unreachable = { error: 'unreachable', _pi_dash: { health: 'unreachable' } };
+    data.Authentication = { error: 'authentication failed', _pi_dash: { health: 'auth_error' } };
+    data.Unknown._pi_dash.blocking = null;
+  }
+  const queries = count ? { [names[0]]: Array.from({ length: 36 }, (_, i) => ({ id: i + 1, time: i + 1, domain: i > 32 ? 'repeat.example.org' : `query-${i}.example.org`, blocked: i < 10 })) } : {};
+  const cfg = { refresh_interval: 2000, queries_refresh_interval: 3000, show_queries: true, show_network_summary: true, show_trends: true, piholes: names.map(name => ({ name, link: false, enabled: true })) };
+  const summary = { total_queries: count * sample().queries.total, blocked_queries: count * 23808, percent_blocked: 26.7, cached_queries: count * sample().queries.cached, forwarded_queries: count * sample().queries.forwarded, instances: count, contributing_instances: scenario === 'states' ? 3 : count, offline_instances: scenario === 'states' ? 2 : 0, blocking_disabled_instances: scenario === 'states' ? 1 : 0, blocking_unknown_instances: scenario === 'states' ? 1 : 0, partial: scenario === 'states' };
+  const native = params.get('native') === 'true';
+  const realSetInterval = window.setInterval.bind(window), realClearInterval = window.clearInterval.bind(window);
+  let hidden = false, online = true, nextTimer = 0;
+  const timers = new Map(), calls = [], deferred = new Map();
+  if (!native) {
+    Object.defineProperty(document, 'hidden', { configurable: true, get: () => hidden });
+    Object.defineProperty(navigator, 'onLine', { configurable: true, get: () => online });
+  }
+  Object.defineProperty(navigator, 'serviceWorker', { value: { register: async () => ({}) } });
+  window.setInterval = (fn, ms) => { const id = native ? realSetInterval(fn, ms) : ++nextTimer; timers.set(id, { fn, ms }); return id; };
+  window.clearInterval = id => { if (native) realClearInterval(id); timers.delete(id); };
+  window.fetch = async (url, options) => {
+    const type = url.split('?')[0];
+    calls.push({ type, signal: options.signal });
+    if (deferred.has(type)) return new Promise((resolve, reject) => Object.assign(deferred.get(type), { resolve, reject }));
+    return { ok: true, json: async () => type === 'init' ? { config: cfg, data, summary, queries } : type === 'data' ? { stats: data, summary } : queries };
+  };
+  if (native) document.addEventListener('DOMContentLoaded', () => {
+    const output = document.createElement('output');
+    output.id = 'native-polling';
+    output.style.cssText = 'display:block;overflow-wrap:anywhere;font:12px monospace';
+    document.body.append(output);
+    const transitions = [];
+    const report = () => { output.textContent = JSON.stringify({ hidden: document.hidden, online: navigator.onLine, calls: calls.length, timers: timers.size, transitions }); };
+    document.addEventListener('visibilitychange', () => {
+      setTimeout(() => { transitions.push({ hidden: document.hidden, calls: calls.length, timers: timers.size }); report(); }, 0);
+    });
+    realSetInterval(report, 250);
+  });
+  window.fixture = {
+    timers, calls, data, queries, summary,
+    hide(value) { hidden = value; document.dispatchEvent(new Event('visibilitychange')); },
+    online(value) { online = value; window.dispatchEvent(new Event(value ? 'online' : 'offline')); },
+    defer(type) { const request = {}; deferred.set(type, request); return request; },
+    release(type) { deferred.delete(type); },
+    async tick(ms) { await Promise.all([...timers.values()].filter(t => t.ms === ms).map(t => t.fn())); },
+  };
+})();
diff --git a/tests/browser/run.cjs b/tests/browser/run.cjs
new file mode 100644
index 0000000..40dfe40
--- /dev/null
+++ b/tests/browser/run.cjs
@@ -0,0 +1,47 @@
+/* CI/local automation for the same visible, inspectable browser fixture. */
+const { chromium } = require('playwright');
+const { spawn } = require('node:child_process');
+const fs = require('node:fs');
+const path = require('node:path');
+const root = path.resolve(__dirname, '../..');
+(async () => {
+  const server = spawn(process.execPath, [path.join(__dirname, 'server.cjs'), '--port', '5011'], { cwd: root, stdio: ['ignore', 'pipe', 'inherit'] });
+  let browser;
+  try {
+    await new Promise((resolve, reject) => {
+      server.stdout.once('data', resolve);
+      server.once('exit', code => reject(new Error(`Fixture server exited: ${code}`)));
+      server.once('error', reject);
+    });
+    browser = await chromium.launch();
+    const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
+    await page.goto('http://localhost:5011/tests/browser/');
+    await page.getByRole('button', { name: 'Run all rendered checks' }).click();
+    await page.locator('#result[data-status="passed"], #result[data-status="failed"]').waitFor({ timeout: 120000 });
+    console.log(await page.locator('#result').innerText());
+    fs.mkdirSync(path.join(root, 'test-results'), { recursive: true });
+    await page.screenshot({ path: path.join(root, 'test-results/rendered-results.png'), fullPage: true });
+    if (await page.locator('#result').getAttribute('data-status') !== 'passed') process.exitCode = 1;
+    // Actual navigator offline/online events, with real browser timers.
+    await page.goto('http://localhost:5011/fixture/?native=true');
+    await page.waitForFunction(() => document.querySelector('#native-polling')?.textContent.includes('"timers":3'));
+    await page.context().setOffline(true);
+    await page.waitForFunction(() => document.querySelector('#native-polling')?.textContent.includes('"timers":0'));
+    const offlineCalls = JSON.parse(await page.locator('#native-polling').innerText()).calls;
+    await page.waitForTimeout(3200);
+    if (JSON.parse(await page.locator('#native-polling').innerText()).calls !== offlineCalls) throw new Error('Browser offline state still polls');
+    await page.context().setOffline(false);
+    await page.waitForFunction(() => document.querySelector('#native-polling')?.textContent.includes('"timers":3'));
+    console.log('Real browser offline/online polling: passed');
+    // Keep reviewable screenshots of production markup at actual top-level viewport sizes.
+    for (const [width, height] of [[320,568],[375,667],[430,932],[768,375],[768,1024],[1440,900]]) {
+      await page.setViewportSize({ width, height });
+      await page.goto('http://localhost:5011/fixture/');
+      await page.locator('.instance-card').first().waitFor();
+      await page.screenshot({ path: path.join(root, `test-results/${width}x${height}.png`), fullPage: true });
+    }
+  } finally {
+    if (browser) await browser.close();
+    server.kill();
+  }
+})().catch(error => { console.error(error); process.exitCode = 1; });
diff --git a/tests/browser/server.cjs b/tests/browser/server.cjs
new file mode 100644
index 0000000..e0854fd
--- /dev/null
+++ b/tests/browser/server.cjs
@@ -0,0 +1,26 @@
+/* Local-only fixture: real production assets, synthetic Pi-hole API responses. */
+const http = require('node:http');
+const fs = require('node:fs');
+const path = require('node:path');
+const root = path.resolve(__dirname, '../..');
+const arg = process.argv.indexOf('--port');
+const port = arg < 0 ? 5011 : Number(process.argv[arg + 1]);
+http.createServer((req, res) => {
+  const pathname = new URL(req.url, 'http://localhost').pathname;
+  res.setHeader('Cache-Control', 'no-store');
+  if (pathname.startsWith('/fixture/')) {
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    res.end(fs.readFileSync(path.join(root, 'index.html'), 'utf8').replace('{{ICON_URL}}', '/favicon.ico').replace('<head>', '<head><base href="/"><script src="tests/browser/mock.js"></script>'));
+    return;
+  }
+  if (pathname === '/favicon.ico') { res.writeHead(204); res.end(); return; }
+  const relative = pathname === '/' ? '/tests/browser/index.html' : pathname.endsWith('/') ? pathname + 'index.html' : pathname;
+  const file = path.resolve(root, '.' + relative);
+  // Only public assets and this synthetic test harness may be served.
+  if (!file.startsWith(root + path.sep) || !/^\/(css|js|tests\/browser)\//.test(relative)) { res.writeHead(404); res.end(); return; }
+  fs.readFile(file, (error, data) => {
+    if (error) { res.writeHead(404); res.end(); return; }
+    res.setHeader('Content-Type', { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css' }[path.extname(file)] || 'text/plain');
+    res.end(data);
+  });
+}).listen(port, '0.0.0.0', () => console.log(`Rendered regression suite: http://localhost:${port}/tests/browser/`));
diff --git a/tests/lifecycle.test.cjs b/tests/lifecycle.test.cjs
index f1195de..f77025e 100644
--- a/tests/lifecycle.test.cjs
+++ b/tests/lifecycle.test.cjs
@@ -82,3 +82,21 @@ test('a stale in-flight stats response cannot overwrite a newer foreground snaps
     assert.equal(app.w.document.querySelector('.instance-details [data-value="total"]').textContent, '3');
   } finally { app.close(); }
 });
+
+test('a late initialization error cannot overwrite successful recovery', async () => {
+  let rejectOld;
+  let requests = 0;
+  const app = setup(() => {
+    if (++requests === 1) return new Promise((_, reject) => { rejectOld = reject; });
+    return Promise.resolve(response({ config, data: {}, summary: { instances: 0 } }));
+  });
+  try {
+    await app.settle();
+    app.hide(true); app.hide(false); await app.settle();
+    const current = app.w.document.getElementById('last-updated').textContent;
+    rejectOld(new Error('late network failure'));
+    await app.settle();
+    assert.equal(app.w.document.getElementById('last-updated').textContent, current);
+    assert.equal(app.timers.size, 2);
+  } finally { app.close(); }
+});
diff --git a/tests/test_proxy.py b/tests/test_proxy.py
index 5984033..e04fa9e 100644
--- a/tests/test_proxy.py
+++ b/tests/test_proxy.py
@@ -56,7 +56,8 @@ def test_example_is_valid_json_and_comments_are_ignored(self):
         with open(os.path.join(proxy.APP_ROOT, 'config-example.json'), encoding='utf-8') as handle:
             example = json.load(handle)
         self.assertIn('_comment', example)
-        self.assertIn('refresh_interval', example['_comment'])
+        self.assertEqual(set(example) - {'_comment'}, set(example['_comment']) - {'about'})
+        self.assertEqual(set(example['piholes'][0]) - {'_comment'}, set(example['piholes'][0]['_comment']))
         proxy.config = example
         filtered = proxy.filtered_config()
         self.assertNotIn('_comment', filtered)
@@ -100,6 +101,20 @@ def test_unknown_blocking_is_not_reported_healthy(self):
         self.assertEqual(result['blocking_unknown_instances'], 1)
         self.assertFalse(result['partial'])
 
+    def test_unreachable_during_initial_auth_is_not_bad_credentials(self):
+        with patch.object(proxy.requests, 'post', side_effect=proxy.requests.exceptions.ConnectionError('connection refused')):
+            data = proxy.fetch_one({'name': 'Unreachable', 'address': 'http://localhost'})[1]
+        self.assertEqual(data['_pi_dash']['health'], 'unreachable')
+
+    def test_http_auth_errors_remain_auth_errors(self):
+        for status in (401, 403):
+            response = proxy.requests.Response()
+            response.status_code = status
+            error = proxy.requests.exceptions.HTTPError(response=response)
+            with patch.object(proxy, 'pihole_get', side_effect=error):
+                data = proxy.fetch_one({'name': 'Auth', 'address': 'http://localhost'})[1]
+            self.assertEqual(data['_pi_dash']['health'], 'auth_error')
+
     def test_fetch_one_has_no_latency_metric(self):
         class Response:
             def json(self):

From 97af1e40ca135c1914389dd54e61234598225976 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Wed, 9 Sep 2026 06:56:10 +0530
Subject: [PATCH 40/45] Restore original desktop background queries and
 dashboard width

---
 README.md               |  6 +++---
 config-example.json     |  2 +-
 css/dashboard.css       | 25 ++++++++++---------------
 index.html              | 20 ++++++++++----------
 sw.js                   |  2 +-
 tests/browser/checks.js | 16 ++++++++++++++--
 6 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 2349c4d..31584ff 100644
--- a/README.md
+++ b/README.md
@@ -32,11 +32,11 @@ Pi-Dash is a lightweight dashboard for monitoring one or more Pi-hole instances.
 
 ## Mobile and desktop layout
 
-Desktop keeps the full metric cards, query rates and sparklines. On narrow screens, Pi-Dash uses smaller spacing, a compact Network Summary, and a condensed card for each Pi-hole. The condensed card shows its name, query rate, health/blocking state, total queries, blocked queries and blocked percentage. Tap **Show details** to reveal all seven metrics shown on desktop; tap **Hide details** to collapse it again.
+Desktop keeps the original 576-pixel-wide dashboard, full metric cards, query rates, sparklines and viewport-wide ambient query feed behind the cards. On narrow screens, Pi-Dash uses smaller spacing, a compact Network Summary, and a condensed card for each Pi-hole. The condensed card shows its name, query rate, health/blocking state, total queries, blocked queries and blocked percentage. Tap **Show details** to reveal all seven metrics shown on desktop; tap **Hide details** to collapse it again.
 
 Compact mode applies below 768 CSS pixels wide, and also at up to 1024 pixels wide when the viewport is 500 pixels high or less (including phone landscape and short resized windows). Below 640 pixels, cards use one column; wider layouts use two. Each details button has an instance-specific accessible name, supports keyboard activation, and preserves its expanded state when resizing.
 
-The query feed always occupies its own space below the cards, so it cannot cover them or become a narrow strip behind them. It is collapsible in compact mode and open on desktop, with a bounded scrolling area and a Pause control. Long values and names wrap instead of overflowing. Short desktop dashboards are centered safely; taller dashboards scroll from the top without clipping the heading or Network Summary. Full details and larger instance lists can require vertical scrolling.
+In compact mode, the query feed occupies its own space below the cards in a collapsible panel with a bounded scrolling area and a Pause control. Desktop retains the original fixed background feed, bottom alignment and fade; it stays behind the opaque cards and pauses on hover. Long values and names wrap instead of overflowing. Short desktop dashboards are centered safely; taller dashboards scroll from the top without clipping the heading or Network Summary. Full details and larger instance lists can require vertical scrolling.
 
 ### Why the latency number was removed
 
@@ -228,7 +228,7 @@ npx playwright install chromium
 npm run test:browser
 ```
 
-The rendered fixture loads the production HTML, CSS and JavaScript with synthetic API responses. It checks 320, 375, 430 and 768 pixel widths, phone landscape, intermediate desktop sizes and desktops up to 1920 pixels, in both themes. It covers compact and expanded cards, long values/names, six Pi-holes, zero Pi-holes, blocking/offline/auth states, feed grouping, card/feed overlap, page overflow, resizing and deterministic visibility/offline races. CI runs these checks and retains screenshots in the `rendered-dashboard` artifact. Playwright is a development-only dependency; Flask and vanilla JavaScript remain the application runtime.
+The rendered fixture loads the production HTML, CSS and JavaScript with synthetic API responses. It checks 320, 375, 430 and 768 pixel widths, phone landscape, intermediate desktop sizes and desktops up to 1920 pixels, in both themes. It covers compact and expanded cards, long values/names, six Pi-holes, zero Pi-holes, blocking/offline/auth states, feed grouping, original desktop width and background stacking, compact card/feed separation, page overflow, resizing and deterministic visibility/offline races. CI runs these checks and retains screenshots in the `rendered-dashboard` artifact. Playwright is a development-only dependency; Flask and vanilla JavaScript remain the application runtime.
 
 For manual visual and keyboard inspection with the same synthetic data:
 
diff --git a/config-example.json b/config-example.json
index f904426..0e81c21 100644
--- a/config-example.json
+++ b/config-example.json
@@ -5,7 +5,7 @@
     "refresh_interval": "Default: 5000 milliseconds. Refreshes the main statistics. The example recommends 2000 ms; existing configurations retain their configured value.",
     "queries_refresh_interval": "Default: the effective refresh_interval. Separately controls the optional live-query feed. The example recommends 3000 ms. Omitting this key preserves the old query cadence.",
     "cache_ttl": "Default: min(1000, max(100, min(refresh_interval, queries_refresh_interval) / 2)) milliseconds, rounded down. The example uses 1000 ms. Set 0 to disable the shared in-process cache. An explicit cache TTL may delay fresh upstream data; keep it below your fastest polling interval.",
-    "show_queries": "Default: false. Enables the optional DNS query feed. Queries are requested only while the browser page is visible and online; hidden/offline pages stop polling. The feed stays below the cards: open on desktop, collapsible in compact mobile/landscape layouts.",
+    "show_queries": "Default: false. Enables the optional DNS query feed. Queries are requested only while the browser page is visible and online; hidden/offline pages stop polling. Desktop uses the original ambient background feed; compact mobile/landscape layouts use a collapsible panel below the cards.",
     "show_network_summary": "Default: true. Shows additive DNS totals across reporting Pi-holes. If an instance is unavailable, totals are marked partial. Active clients and unique domains are not summed because they can overlap.",
     "show_trends": "Default: true. Shows a short query-rate sparkline kept only in browser memory. It does not create a database or store historical DNS activity.",
     "piholes": "Default: empty list. Add one or more Pi-hole instances below. Names must be unique. Every enabled instance needs a name and address."
diff --git a/css/dashboard.css b/css/dashboard.css
index c434ccd..2fef5f7 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -2,7 +2,7 @@ body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
 html { min-height: 100%; }
 /* Auto margins center short dashboards but become zero when content needs scrolling. */
 body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 1rem; }
-#main-wrapper { flex: none; max-width: 48rem; margin-block: auto; }
+#main-wrapper { flex: none; max-width: 36rem; margin-block: auto; }
 html, body { overscroll-behavior-y: contain; }
 [hidden] { display: none !important; }
 .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
@@ -41,23 +41,18 @@ html, body { overscroll-behavior-y: contain; }
 .dark .pihole-sparkline { color: #2dd4bf; }
 .pihole-sparkline svg { width: 100%; height: 100%; }
 .instance-details { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
-.metric-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: .5rem; min-width: 0; }
+.metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-width: 0; }
 .metric-label { color: #6b7280; overflow-wrap: anywhere; }
 .dark .metric-label { color: #9ca3af; }
 .metric-value { min-width: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .mobile-instance-summary, .instance-toggle { display: none; }
 .instance-toggle:focus-visible, .query-actions button:focus-visible { outline: 2px solid #0d9488; outline-offset: 3px; }
 .empty-message { grid-column: 1 / -1; text-align: center; color: #6b7280; font-size: .875rem; padding: 1rem; }
-/* The feed occupies its own space after the cards at every viewport size. */
-.query-panel { position: relative; margin-top: 1rem; min-width: 0; }
-.query-panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
-.query-panel-title { font-size: .75rem; font-weight: 600; }
-.query-actions { display: flex; gap: .75rem; }
-.query-actions button { min-height: 2.75rem; color: #0f766e; font-size: .75rem; }
-.dark .query-actions button { color: #5eead4; }
-#query-toggle { display: none; }
-#background-queries { display: block; max-height: 25vh; overflow-y: auto; list-style: none; margin: 0; padding: .25rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .6875rem; line-height: 1.45; }
-#background-queries li { overflow-wrap: anywhere; }
+/* The original ambient query feed remains behind the desktop dashboard. */
+.query-panel { position: fixed; inset: auto 0 0; height: 60vh; max-height: 60vh; z-index: 0; pointer-events: none; }
+.query-panel-header { display: none; }
+#background-queries { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; list-style: none; margin: 0; padding: 4px 6px 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 1.25; pointer-events: auto; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); }
+#background-queries li { text-shadow: 0 1px 2px rgb(0 0 0 / .15); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .query-allowed { color: #16a34a; }
 .query-blocked { color: #dc2626; }
 .dark .query-allowed { color: #4ade80; }
@@ -90,17 +85,17 @@ html, body { overscroll-behavior-y: contain; }
     .instance-card.is-expanded .instance-details { display: flex; }
     .query-panel { position: relative; inset: auto; height: auto; max-height: none; margin-top: .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: white; pointer-events: auto; overflow: hidden; }
     .dark .query-panel { border-color: #374151; background: #111827; }
-    .query-panel-header { padding: .25rem .75rem; }
+    .query-panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .25rem .75rem; }
     #query-toggle { display: inline; }
     .query-panel-title { font-size: .75rem; font-weight: 600; }
     .query-actions { display: flex; gap: .75rem; }
-    .query-actions button { color: #0f766e; font-size: .75rem; }
+    .query-actions button { min-height: 2.75rem; color: #0f766e; font-size: .75rem; }
     .dark .query-actions button { color: #5eead4; }
     #query-pause { display: none; }
     .query-panel.is-open #query-pause { display: inline; }
     #background-queries { display: none; position: relative; inset: auto; height: auto; max-height: 30vh; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem .75rem; -webkit-mask-image: none; mask-image: none; pointer-events: auto; font-size: .6875rem; line-height: 1.45; }
     .query-panel.is-open #background-queries { display: block; }
-    #background-queries li { padding: .125rem 0; text-shadow: none; }
+    #background-queries li { padding: .125rem 0; text-shadow: none; white-space: normal; overflow-wrap: anywhere; }
 }
 @media (max-width: 639px) {
     #main-wrapper > main { grid-template-columns: minmax(0, 1fr); }
diff --git a/index.html b/index.html
index 93909fe..e92c724 100644
--- a/index.html
+++ b/index.html
@@ -39,17 +39,17 @@ <h2 class="text-sm font-semibold text-gray-700 dark:text-cyan-400">Network Summa
         </div>
       </section>
       <main class="w-full grid grid-cols-1 sm:grid-cols-2 gap-4"></main>
-      <section id="query-panel" class="query-panel" hidden aria-label="Recent DNS queries">
-        <div class="query-panel-header">
-          <span class="query-panel-title">Recent queries</span>
-          <div class="query-actions">
-            <button id="query-pause" type="button" aria-pressed="false">Pause</button>
-            <button id="query-toggle" type="button" aria-expanded="false" aria-controls="background-queries">Show queries</button>
-          </div>
-        </div>
-        <ul id="background-queries" aria-label="Recent DNS query activity"></ul>
-      </section>
     </div>
+    <section id="query-panel" class="query-panel" hidden aria-label="Recent DNS queries">
+      <div class="query-panel-header">
+        <span class="query-panel-title">Recent queries</span>
+        <div class="query-actions">
+          <button id="query-pause" type="button" aria-pressed="false">Pause</button>
+          <button id="query-toggle" type="button" aria-expanded="false" aria-controls="background-queries">Show queries</button>
+        </div>
+      </div>
+      <ul id="background-queries" aria-label="Recent DNS query activity"></ul>
+    </section>
     <script src="js/dashboard-core.js"></script>
     <script src="js/app.js"></script>
   </body>
diff --git a/sw.js b/sw.js
index ad97b3b..5faef4d 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'pi-dashboard-cache-v3-responsive';
+const CACHE_NAME = 'pi-dashboard-cache-v4-desktop-background';
 const APP_SHELL = [
   '{{CACHE_URL}}',
   '{{CACHE_URL}}css/style.css',
diff --git a/tests/browser/checks.js b/tests/browser/checks.js
index 4d5bb54..838580a 100644
--- a/tests/browser/checks.js
+++ b/tests/browser/checks.js
@@ -11,11 +11,22 @@ function geometry(d, stage) {
   assert(bounds(d.querySelector('header')).top >= -1, `${stage}: header is clipped at top`);
   assert(bounds(d.querySelector('#network-summary')).top >= -1, `${stage}: summary is clipped at top`);
   const cards = [...d.querySelectorAll('.instance-card')];
-  const panel = bounds(d.querySelector('#query-panel'));
+  const panelElement = d.querySelector('#query-panel');
+  const panel = bounds(panelElement);
+  const ambient = d.defaultView.getComputedStyle(panelElement).position === 'fixed';
+  if (ambient) {
+    assert(Math.abs(bounds(d.querySelector('#main-wrapper')).width - 576) < 1, `${stage}: original desktop width changed`);
+    assert(Math.abs(panel.left) < 1 && Math.abs(panel.width - width) < 1, `${stage}: background feed is not viewport-wide`);
+    assert(!shown(d.querySelector('.query-panel-header')), `${stage}: desktop feed became a foreground panel`);
+  }
   for (const card of cards) {
     const r = bounds(card);
     assert(r.left >= -1 && r.right <= width + 1, `${stage}: card exceeds viewport`);
-    assert(!overlap(r, panel), `${stage}: query feed overlaps card`);
+    if (!ambient) assert(!overlap(r, panel), `${stage}: query feed overlaps compact card`);
+    else if (r.top < d.documentElement.clientHeight) {
+      const hit = d.elementFromPoint(r.left + 5, Math.max(0, r.top) + 5);
+      assert(hit && card.contains(hit), `${stage}: background queries obscure desktop card`);
+    }
     for (const e of card.querySelectorAll('.metric-label,.metric-value,.pihole-rate,.pihole-health,.instance-toggle')) {
       if (!shown(e)) continue;
       const rects = [...e.getClientRects()];
@@ -46,6 +57,7 @@ async function loadViewport(width, height, scenario, dark) {
 async function checkLayout(width, height, scenario, dark) {
   const d = await loadViewport(width, height, scenario, dark);
   const compact = width <= 767 || width <= 1024 && height <= 500;
+  assert((d.defaultView.getComputedStyle(d.querySelector('#query-panel')).position === 'fixed') === !compact, 'wrong background/panel presentation');
   geometry(d, 'default');
   assert(frame.contentWindow.getComputedStyle(d.body).backgroundColor === (dark ? 'rgb(31, 41, 55)' : 'rgb(243, 244, 246)'), 'theme does not match saved preference');
   const toggles = [...d.querySelectorAll('.instance-toggle')];

From 53d1ce22bade94d0b572d616d00c34389c55fd7c Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Wed, 9 Sep 2026 10:13:09 +0530
Subject: [PATCH 41/45] Prevent full desktop query feeds from compressing text
 rows

---
 README.md                |  2 +-
 css/dashboard.css        |  3 ++-
 sw.js                    |  2 +-
 tests/browser/checks.js  | 22 ++++++++++++++++++++++
 tests/browser/index.html |  2 +-
 tests/browser/mock.js    |  6 ++++++
 6 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 31584ff..cbc1e87 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ Desktop keeps the original 576-pixel-wide dashboard, full metric cards, query ra
 
 Compact mode applies below 768 CSS pixels wide, and also at up to 1024 pixels wide when the viewport is 500 pixels high or less (including phone landscape and short resized windows). Below 640 pixels, cards use one column; wider layouts use two. Each details button has an instance-specific accessible name, supports keyboard activation, and preserves its expanded state when resizing.
 
-In compact mode, the query feed occupies its own space below the cards in a collapsible panel with a bounded scrolling area and a Pause control. Desktop retains the original fixed background feed, bottom alignment and fade; it stays behind the opaque cards and pauses on hover. Long values and names wrap instead of overflowing. Short desktop dashboards are centered safely; taller dashboards scroll from the top without clipping the heading or Network Summary. Full details and larger instance lists can require vertical scrolling.
+In compact mode, the query feed occupies its own space below the cards in a collapsible panel with a bounded scrolling area and a Pause control. Desktop retains the original fixed background feed, bottom alignment and fade. Query rows keep their full line height as the feed fills, with older rows leaving the top instead of every row being compressed; it stays behind the opaque cards and pauses on hover. Long values and names wrap instead of overflowing. Short desktop dashboards are centered safely; taller dashboards scroll from the top without clipping the heading or Network Summary. Full details and larger instance lists can require vertical scrolling.
 
 ### Why the latency number was removed
 
diff --git a/css/dashboard.css b/css/dashboard.css
index 2fef5f7..2ab017c 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -52,7 +52,8 @@ html, body { overscroll-behavior-y: contain; }
 .query-panel { position: fixed; inset: auto 0 0; height: 60vh; max-height: 60vh; z-index: 0; pointer-events: none; }
 .query-panel-header { display: none; }
 #background-queries { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; list-style: none; margin: 0; padding: 4px 6px 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 1.25; pointer-events: auto; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 50%, #0008 80%, transparent 100%); }
-#background-queries li { text-shadow: 0 1px 2px rgb(0 0 0 / .15); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Keep full line boxes when the bounded feed fills; older rows leave the top. */
+#background-queries li { flex-shrink: 0; text-shadow: 0 1px 2px rgb(0 0 0 / .15); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .query-allowed { color: #16a34a; }
 .query-blocked { color: #dc2626; }
 .dark .query-allowed { color: #4ade80; }
diff --git a/sw.js b/sw.js
index 5faef4d..a283db7 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'pi-dashboard-cache-v4-desktop-background';
+const CACHE_NAME = 'pi-dashboard-cache-v5-query-row-height';
 const APP_SHELL = [
   '{{CACHE_URL}}',
   '{{CACHE_URL}}css/style.css',
diff --git a/tests/browser/checks.js b/tests/browser/checks.js
index 838580a..bea8444 100644
--- a/tests/browser/checks.js
+++ b/tests/browser/checks.js
@@ -79,6 +79,28 @@ async function checkLayout(width, height, scenario, dark) {
   assert(shown(d.querySelector('#background-queries')), 'query feed did not open');
   geometry(d, 'queries open');
   if (scenario !== 'zero') assert(d.querySelector('#background-queries').textContent.includes('(x3)'), 'consecutive grouping missing');
+  if (scenario !== 'zero') {
+    // A short initial feed fits; reproduce a full feed after repeated 50-query polls.
+    const fixture = frame.contentWindow.fixture;
+    const name = Object.keys(fixture.queries)[0];
+    for (const start of [100, 150]) {
+      fixture.queries[name] = Array.from({length: 50}, (_, i) => ({
+        id: start + i, time: start + i, domain: `busy-${start + i}.example.org`, blocked: i % 3 === 0,
+      }));
+      await fixture.tick(3000);
+    }
+    const rows = [...d.querySelectorAll('#background-queries li')];
+    assert(rows.length === 100, 'full feed did not retain its bounded 100 rows');
+    for (const row of rows) {
+      const lineHeight = parseFloat(d.defaultView.getComputedStyle(row).lineHeight);
+      assert(bounds(row).height >= lineHeight - .1, `full feed shrinks rows below line height: ${bounds(row).height} < ${lineHeight}`);
+    }
+    if (!compact) {
+      const list = bounds(d.querySelector('#background-queries'));
+      assert(bounds(rows.at(-1)).bottom <= list.bottom + 1 && bounds(rows.at(-1)).top >= list.top, 'newest query is not visible');
+    }
+    geometry(d, 'full query feed');
+  }
   if (scenario === 'states') {
     for (const state of ['Blocking ON', 'Blocking OFF', 'Offline', 'Auth failed', 'blocking unknown']) assert(d.querySelector('main').textContent.includes(state), `missing ${state}`);
     assert(shown(d.querySelector('.network-partial')), 'missing partial summary');
diff --git a/tests/browser/index.html b/tests/browser/index.html
index dc4ec9c..fb39a96 100644
--- a/tests/browser/index.html
+++ b/tests/browser/index.html
@@ -2,7 +2,7 @@
 <html lang="en"><head><meta charset="utf-8"><title>Pi-Dash rendered regressions</title>
 <style>body{font:14px system-ui;margin:16px;background:#e5e7eb}iframe{border:0;display:block;background:white}label{margin-right:12px}#result{white-space:pre-wrap}#viewport{width:max-content}h1{font-size:20px}</style></head>
 <body><h1>Pi-Dash rendered regressions</h1>
-<form><label>Width <input name="width" type="number" value="768"></label><label>Height <input name="height" type="number" value="375"></label><label>Scenario <select name="scenario"><option>normal</option><option>long</option><option>many</option><option>zero</option><option>states</option></select></label><label>Theme <select name="dark"><option value="false">Light</option><option value="true">Dark</option></select></label><button>Inspect viewport</button></form>
+<form><label>Width <input name="width" type="number" value="768"></label><label>Height <input name="height" type="number" value="375"></label><label>Scenario <select name="scenario"><option>normal</option><option>busy</option><option>long</option><option>many</option><option>zero</option><option>states</option></select></label><label>Theme <select name="dark"><option value="false">Light</option><option value="true">Dark</option></select></label><button>Inspect viewport</button></form>
 <p><button id="run" type="button">Run all rendered checks</button></p><pre id="result">Ready</pre><div id="viewport"></div>
 <script>
 const params = new URLSearchParams(location.search);
diff --git a/tests/browser/mock.js b/tests/browser/mock.js
index 50046d2..585cafb 100644
--- a/tests/browser/mock.js
+++ b/tests/browser/mock.js
@@ -45,6 +45,12 @@
     });
     realSetInterval(report, 250);
   });
+  if (scenario === 'busy') document.addEventListener('DOMContentLoaded', () => setTimeout(async () => {
+    for (const start of [100, 150]) {
+      queries[names[0]] = Array.from({length: 50}, (_, i) => ({id: start + i, time: start + i, domain: `busy-${start + i}.example.org`, blocked: i % 3 === 0}));
+      await window.fixture.tick(3000);
+    }
+  }, 50));
   window.fixture = {
     timers, calls, data, queries, summary,
     hide(value) { hidden = value; document.dispatchEvent(new Event('visibilitychange')); },

From e38d505ebce1a5212b9d36941d3fe816fb76e111 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Wed, 9 Sep 2026 10:25:25 +0530
Subject: [PATCH 42/45] Keep configuration example concise and document options
 in README

---
 README.md           |  4 ++--
 config-example.json | 27 ---------------------------
 tests/test_proxy.py |  8 +++++---
 3 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index cbc1e87..96913ec 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ Existing `config.json` files continue to work without adding any new options. Do
 
 ## Configuration
 
-Copy `config-example.json` to `config.json` and edit the values for your network. The example contains descriptive `_comment` fields explaining every setting and its default. Standard JSON does not permit `//` or `/* */` comments, so these explanatory fields keep the file valid JSON. Pi-Dash ignores `_comment` fields and never exposes them, passwords, or TLS settings in the frontend configuration.
+Copy `config-example.json` to `config.json` and edit the values for your network. The example is plain JSON without comments and matches the example below. The tables in this section explain every option and its code default. Passwords and TLS settings are never exposed in the frontend configuration.
 
 You can delete any optional setting to use its code default. Existing installations do not need a migration.
 
@@ -115,7 +115,7 @@ Passwords can be kept outside `config.json`:
 "password": "${PIHOLE_PRIMARY_PASSWORD}"
 ```
 
-Provide the variable through your shell or Docker environment. Literal passwords remain supported for existing installations. Treat your configuration and environment files as secrets; do not commit real passwords to GitHub.
+Provide the variable through your shell or Docker environment. An unset environment variable is left as its literal reference, not silently replaced with an empty password. Literal passwords remain supported for existing installations. Treat your configuration and environment files as secrets; do not commit real passwords to GitHub.
 
 ## Polling and query-feed behavior
 
diff --git a/config-example.json b/config-example.json
index 0e81c21..47cea25 100644
--- a/config-example.json
+++ b/config-example.json
@@ -1,15 +1,4 @@
 {
-  "_comment": {
-    "about": "Copy this file to config.json and edit it. Standard JSON does not support // comments, so these _comment fields provide explanations and are ignored by Pi-Dash. All optional settings have code defaults; deleting a setting does not require replacing it with another one.",
-    "base_path": "Default: /. Set a URL path such as /pi-dash/ when hosting behind a reverse proxy. The proxy must forward this prefix consistently.",
-    "refresh_interval": "Default: 5000 milliseconds. Refreshes the main statistics. The example recommends 2000 ms; existing configurations retain their configured value.",
-    "queries_refresh_interval": "Default: the effective refresh_interval. Separately controls the optional live-query feed. The example recommends 3000 ms. Omitting this key preserves the old query cadence.",
-    "cache_ttl": "Default: min(1000, max(100, min(refresh_interval, queries_refresh_interval) / 2)) milliseconds, rounded down. The example uses 1000 ms. Set 0 to disable the shared in-process cache. An explicit cache TTL may delay fresh upstream data; keep it below your fastest polling interval.",
-    "show_queries": "Default: false. Enables the optional DNS query feed. Queries are requested only while the browser page is visible and online; hidden/offline pages stop polling. Desktop uses the original ambient background feed; compact mobile/landscape layouts use a collapsible panel below the cards.",
-    "show_network_summary": "Default: true. Shows additive DNS totals across reporting Pi-holes. If an instance is unavailable, totals are marked partial. Active clients and unique domains are not summed because they can overlap.",
-    "show_trends": "Default: true. Shows a short query-rate sparkline kept only in browser memory. It does not create a database or store historical DNS activity.",
-    "piholes": "Default: empty list. Add one or more Pi-hole instances below. Names must be unique. Every enabled instance needs a name and address."
-  },
   "base_path": "/",
   "refresh_interval": 2000,
   "queries_refresh_interval": 3000,
@@ -19,28 +8,12 @@
   "show_trends": true,
   "piholes": [
     {
-      "_comment": {
-        "name": "Required. Unique display name for this Pi-hole.",
-        "address": "Required. Full Pi-hole base URL, including http:// or https:// and any port. Do not include /admin or /api. Example: http://192.168.1.50:80.",
-        "password": "Default: empty string. Use an API/application password or ${ENVIRONMENT_VARIABLE}. A literal password is supported for existing installations. An unset environment variable is not silently replaced with an empty password.",
-        "enabled": "Default: true. Set false to exclude this Pi-hole without deleting its configuration.",
-        "link": "Default: false. If true, the instance name opens its Pi-hole administration page in a new tab.",
-        "verify_ssl": "Default: false for compatibility with existing self-signed LAN installations. Set true for a trusted HTTPS certificate, or provide a path to a CA bundle, including ${ENVIRONMENT_VARIABLE}. This controls the Pi-Dash-to-Pi-hole connection."
-      },
       "name": "Primary",
       "address": "https://pi.hole",
       "password": "${PIHOLE_PRIMARY_PASSWORD}",
       "enabled": true,
       "link": true,
       "verify_ssl": false
-    },
-    {
-      "name": "Secondary",
-      "address": "http://192.168.1.51",
-      "password": "your_app_password_here",
-      "enabled": false,
-      "link": false,
-      "verify_ssl": false
     }
   ]
 }
diff --git a/tests/test_proxy.py b/tests/test_proxy.py
index e04fa9e..9784f02 100644
--- a/tests/test_proxy.py
+++ b/tests/test_proxy.py
@@ -55,9 +55,11 @@ def test_environment_secret_and_tls_compatibility(self):
     def test_example_is_valid_json_and_comments_are_ignored(self):
         with open(os.path.join(proxy.APP_ROOT, 'config-example.json'), encoding='utf-8') as handle:
             example = json.load(handle)
-        self.assertIn('_comment', example)
-        self.assertEqual(set(example) - {'_comment'}, set(example['_comment']) - {'about'})
-        self.assertEqual(set(example['piholes'][0]) - {'_comment'}, set(example['piholes'][0]['_comment']))
+        self.assertNotIn('_comment', example)
+        self.assertNotIn('_comment', example['piholes'][0])
+        # Older configurations may still contain explanatory fields.
+        example['_comment'] = 'legacy documentation'
+        example['piholes'][0]['_comment'] = 'legacy instance documentation'
         proxy.config = example
         filtered = proxy.filtered_config()
         self.assertNotIn('_comment', filtered)

From e4613494510dcb6e0e30a47c7b6ce14b56fa918e Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Wed, 9 Sep 2026 15:42:20 +0530
Subject: [PATCH 43/45] Streamline README for project documentation

---
 README.md | 227 +++++++++++++++++++++---------------------------------
 1 file changed, 89 insertions(+), 138 deletions(-)

diff --git a/README.md b/README.md
index 96913ec..df3a42f 100644
--- a/README.md
+++ b/README.md
@@ -4,60 +4,33 @@
 [![GitHub last commit](https://img.shields.io/github/last-commit/surajverma/pi-dash)](https://github.com/surajverma/pi-dash/commits/main)
 [![GitHub issues](https://img.shields.io/github/issues/surajverma/pi-dash)](https://github.com/surajverma/pi-dash/issues)
 [![GitHub Stars](https://img.shields.io/github/stars/surajverma/pi-dash?style=social)](https://github.com/surajverma/pi-dash/stargazers)
+[![Downloads](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fghcr-badge.elias.eu.org%2Fapi%2Fsurajverma%2Fpi-dash&query=downloadCount&style=social&logo=github&label=Docker%20Pulls)](https://github.com/surajverma/pi-dash/pkgs/container/pi-dash)
 
 # Pi-Dash: A Minimalist Pi-hole Dashboard
 
-Pi-Dash is a lightweight dashboard for monitoring one or more Pi-hole instances. It intentionally stays focused on at-a-glance health and DNS activity instead of replacing the Pi-hole administration interface.
+Pi-Dash is a simple, lightweight dashboard for monitoring multiple Pi-hole instances. It provides a clean, at-a-glance, responsive view of your Pi-hole statistics.
 
 ## Features
 
-- Multiple Pi-hole instances on one responsive dashboard
-- Compact mobile view with critical metrics and expandable full details for each instance
-- Desktop cards retain the full metrics layout and optional query-rate sparklines
-- Network-wide aggregate query, blocked, percentage, cache and forward counters
-- Clear partial totals when an instance is unavailable
-- Per-instance reachability, authentication and blocking ON/OFF status
-- Optional live DNS query feed with consecutive duplicate grouping, such as `(x2)` or `(x3)`
-- Independent statistics and query polling intervals
-- Foreground-only polling: hidden/offline browser pages stop their timers and abort pending browser requests
-- Shared in-process cache to reduce duplicate Pi-hole API traffic from multiple browser tabs/devices
-- Automatic session re-authentication
-- Optional TLS verification per Pi-hole
-- Environment-variable substitution for passwords and CA paths
-- PWA support with network-first application-shell updates
-- Dark mode, Docker amd64/arm64 support, and a `/health` endpoint
-- No external font dependency
+- **Multiple Pi-hole Support:** Monitor all your Pi-hole instances from a single dashboard.
+- **Network Summary:** View combined query, blocked, cached, and forwarded totals across reporting Pi-holes.
+- **Pi-hole Status:** See reachability, authentication errors, and blocking ON/OFF state for each instance.
+- **Responsive Design:** Desktop shows the full dashboard and ambient query feed. Mobile shows critical metrics in compact cards, with an accessible control to expand all available metrics.
+- **Live Query Feed:** Optionally show recent allowed and blocked domains. Consecutive duplicate queries are grouped with `(x2)`, `(x3)`, and similar counts.
+- **Configurable Refresh:** Set separate refresh intervals for statistics and queries. If the query interval is omitted, it uses the statistics interval.
+- **Efficient Polling:** Polling stops while the page is hidden or the browser is offline, then resumes safely when it becomes active again. A short shared cache reduces duplicate Pi-hole API requests.
+- **Lightweight and Fast:** Built with Flask and vanilla JavaScript, with no database or frontend framework.
+- **Dark Mode and PWA Support:** Works with your preferred color scheme and can be installed as a Progressive Web App.
 
 ![pi-dash-landscape](https://github.com/user-attachments/assets/a0e1fbef-279a-40df-9424-0cad50c31b50)
 
-## Mobile and desktop layout
-
-Desktop keeps the original 576-pixel-wide dashboard, full metric cards, query rates, sparklines and viewport-wide ambient query feed behind the cards. On narrow screens, Pi-Dash uses smaller spacing, a compact Network Summary, and a condensed card for each Pi-hole. The condensed card shows its name, query rate, health/blocking state, total queries, blocked queries and blocked percentage. Tap **Show details** to reveal all seven metrics shown on desktop; tap **Hide details** to collapse it again.
-
-Compact mode applies below 768 CSS pixels wide, and also at up to 1024 pixels wide when the viewport is 500 pixels high or less (including phone landscape and short resized windows). Below 640 pixels, cards use one column; wider layouts use two. Each details button has an instance-specific accessible name, supports keyboard activation, and preserves its expanded state when resizing.
-
-In compact mode, the query feed occupies its own space below the cards in a collapsible panel with a bounded scrolling area and a Pause control. Desktop retains the original fixed background feed, bottom alignment and fade. Query rows keep their full line height as the feed fills, with older rows leaving the top instead of every row being compressed; it stays behind the opaque cards and pauses on hover. Long values and names wrap instead of overflowing. Short desktop dashboards are centered safely; taller dashboards scroll from the top without clipping the heading or Network Summary. Full details and larger instance lists can require vertical scrolling.
-
-### Why the latency number was removed
-
-The previous API latency number measured the time required for an authenticated HTTP statistics request, not ICMP ping or DNS resolution time. Connection setup, TLS, authentication and API processing could make a healthy Pi-hole appear slow compared with a 2-3 ms ping. The number and the latency-based slow warning have been removed. Reachability and blocking state remain, without treating API response time as network speed.
-
-## Backward compatibility
-
-Existing `config.json` files continue to work without adding any new options. Do not replace your working configuration just to upgrade.
-
-- `refresh_interval` retains its existing meaning and historical 5000 ms code default.
-- If `queries_refresh_interval` is absent, it inherits the effective `refresh_interval`.
-- `verify_ssl` defaults to `false`, matching the previous behavior.
-- `/data` keeps its original response format unless a caller explicitly requests summary/query data.
-- New configuration keys are optional. The example values are recommendations, not mandatory defaults.
-- `python proxy.py` remains available for native use; Docker uses Gunicorn.
+<img width="2481" height="1477" alt="Pi-Dash dashboard" src="https://github.com/user-attachments/assets/e160cb8d-8dd9-49ac-801a-a95a34c254f7" />
 
 ## Configuration
 
-Copy `config-example.json` to `config.json` and edit the values for your network. The example is plain JSON without comments and matches the example below. The tables in this section explain every option and its code default. Passwords and TLS settings are never exposed in the frontend configuration.
+Copy `config-example.json` to `config.json` and edit it for your network. The example is valid JSON without comments; all options and their defaults are described below.
 
-You can delete any optional setting to use its code default. Existing installations do not need a migration.
+### 1. `config.json`
 
 ```json
 {
@@ -81,82 +54,73 @@ You can delete any optional setting to use its code default. Existing installati
 }
 ```
 
-### Dashboard options
+#### Dashboard options
 
-| Option | Code default | Purpose |
+| Option | Default | Description |
 | --- | --- | --- |
-| `base_path` | `/` | Subpath where Pi-Dash is hosted, for example `/pi-dash/` |
-| `refresh_interval` | `5000` | Main statistics refresh interval in milliseconds |
-| `queries_refresh_interval` | Effective `refresh_interval` | Independent live-query refresh interval in milliseconds |
-| `cache_ttl` | Derived automatically | Shared backend cache lifetime in milliseconds; `0` disables caching |
-| `show_queries` | `false` | Enable the optional live DNS query feed |
-| `show_network_summary` | `true` | Show combined additive DNS counters |
-| `show_trends` | `true` | Show short in-memory query-rate sparklines |
-| `piholes` | `[]` | List of Pi-hole instances to monitor |
+| `base_path` | `/` | Subpath where Pi-Dash is hosted, for example `/pi-dash/`. |
+| `refresh_interval` | `5000` | Statistics refresh interval in milliseconds. |
+| `queries_refresh_interval` | `refresh_interval` | Query-feed refresh interval in milliseconds. |
+| `cache_ttl` | Automatic | Shared backend cache lifetime in milliseconds. Set to `0` to disable caching. |
+| `show_queries` | `false` | Show the live DNS query feed. Allowed queries are green and blocked queries are red. |
+| `show_network_summary` | `true` | Show combined statistics from all reporting Pi-holes. |
+| `show_trends` | `true` | Show short, in-memory query-rate sparklines. |
+| `piholes` | `[]` | List of Pi-hole instances to monitor. |
 
-The example recommends 2000 ms for stats and 3000 ms for queries. If `cache_ttl` is omitted, the code chooses `min(1000, max(100, min(refresh_interval, queries_refresh_interval) // 2))` milliseconds. This is deliberately shorter than the fastest configured polling cadence. An explicitly configured cache lifetime can delay fresh upstream data, so keep it below the fastest interval if you want each refresh to be able to obtain a new snapshot.
+When `cache_ttl` is omitted, Pi-Dash calculates it as half of the shortest refresh interval, with a minimum of 100 ms and a maximum of 1000 ms. The values in `config-example.json` are recommended example settings; omitted options use the defaults above.
 
-### Pi-hole options
+#### Pi-hole options
 
-| Option | Code default | Purpose |
+| Option | Default | Description |
 | --- | --- | --- |
-| `name` | Required | Unique display name |
-| `address` | Required | Full Pi-hole base URL, including scheme and optional port; do not include `/admin` or `/api` |
-| `password` | Empty string | API/application password or `${ENV_NAME}` |
-| `enabled` | `true` | Include or exclude an instance without deleting its configuration |
-| `link` | `false` | Make the instance name open Pi-hole Admin |
-| `verify_ssl` | `false` | `true`, `false`, or a path to a trusted CA bundle |
-
-`verify_ssl` remains false by default for compatibility with LAN installations that use self-signed certificates. If your Pi-hole uses a trusted HTTPS certificate, set it to true. You may also provide a CA bundle path, including an environment-variable reference.
+| `name` | Required | Display name for the Pi-hole. Names must be unique. |
+| `address` | Required | Full Pi-hole base URL, including the scheme and optional port. Do not include `/admin` or `/api`. |
+| `password` | Empty string | Pi-hole API/application password. Literal values and `${ENV_NAME}` references are supported. |
+| `enabled` | `true` | Set to `false` to hide and stop monitoring an instance without deleting it from the configuration. |
+| `link` | `false` | Make the Pi-hole name a link to its admin interface. |
+| `verify_ssl` | `false` | Set to `true` to verify trusted HTTPS certificates, or provide a CA bundle path. |
 
-Passwords can be kept outside `config.json`:
+Settings omitted from `config.json` use the defaults above, so existing configurations continue to work. Passwords and CA bundle paths can reference environment variables:
 
 ```json
 "password": "${PIHOLE_PRIMARY_PASSWORD}"
 ```
 
-Provide the variable through your shell or Docker environment. An unset environment variable is left as its literal reference, not silently replaced with an empty password. Literal passwords remain supported for existing installations. Treat your configuration and environment files as secrets; do not commit real passwords to GitHub.
-
-## Polling and query-feed behavior
+Provide referenced variables through your shell or Docker environment. Literal passwords remain supported. Do not commit real passwords to GitHub.
 
-Stats and recent queries are fetched separately. Opening the dashboard on multiple devices shares short-lived server-side snapshots through the in-process cache. The cache is demand-driven: Pi-Dash does not run a background polling service of its own.
+The Network Summary includes only additive DNS counters: total queries, blocked queries, cached queries, and forwarded queries. It does not combine active clients, unique domains, or domains on lists because those values can overlap between Pi-holes. If an instance is unavailable, the summary is marked as partial.
 
-The browser stops its statistics and query timers when the page becomes hidden or the device goes offline, and resumes when it becomes visible/online again. Pending browser requests are aborted, and stale responses or initialization errors cannot overwrite newer foreground state. Returning to a visible, online page refreshes immediately and starts only one timer for each feed. Going online while the page is still hidden does not resume polling. An upstream HTTP request already started by the server may still finish, but no repeated server-side polling continues after the browser stops requesting data.
+When the query feed is enabled, it displays recent queries while the dashboard is visible and online. Only consecutive entries with the same Pi-hole, domain, and blocked/allowed state are grouped. The feed is intended as a live overview; use Pi-hole's query log for complete history.
 
-The feed fetches the latest 50 queries per Pi-hole on each poll. It tracks IDs separately for each instance and uses timestamps for cross-instance ordering. Actual duplicate DNS requests are legitimate and are not deleted from the API data. For display, only **consecutive** entries with the same Pi-hole, domain and blocked/allowed status are combined into `(xN)`. The last group can continue increasing across refreshes. A different domain or blocking status starts a new row. No rolling-window aggregation or top-domain ranking is used.
+### 2. `manifest.json` (Optional)
 
-The query panel can be paused for reading. New events are held in a bounded browser-memory queue and displayed on resume; the feed does not maintain a permanent history. As with the previous implementation, bursts of more than 50 queries between polls can exceed the latest-query window, so this is an at-a-glance feed rather than a guaranteed complete DNS audit log. Use Pi-hole's query log for complete historical investigation.
+This file contains the Progressive Web App name, colors, and icon:
 
-The blocking enabled/disabled state is cached separately for 30 seconds. Therefore, a blocking-state change may take up to approximately 30 seconds (plus the next visible refresh) to appear.
-
-## Network summary semantics
-
-Pi-Dash sums queries, blocked queries, cached queries and forwarded queries across reporting instances. The blocked percentage is calculated from the combined blocked and total counters. It deliberately does not sum active clients, unique domains or domains on lists, because those values may overlap across redundant Pi-holes.
+```json
+{
+  "name": "Pi-Dash",
+  "short_name": "Pi-Dash",
+  "description": "A simple dashboard to monitor Pi-hole status.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#111827",
+  "theme_color": "#06b6d4",
+  "icons": [
+    {
+      "src": "https://pi.hole/admin/img/logo.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml"
+    }
+  ]
+}
+```
 
-If an instance is unavailable, the summary is marked partial and displays how many instances are reporting. An instance with blocking disabled is not counted as healthy. If the blocking endpoint is unavailable, the dashboard distinguishes an online Pi-hole with unknown blocking status from one confirmed to be blocking.
+Replace `icons.src` with a direct link to your Pi-hole logo or preferred icon.
 
-These are totals of DNS queries handled by the configured instances, not a deduplicated count of distinct network requests. They should not be interpreted as unique users or unique domains across the network.
+---
 
 ## Installation
 
-### Testing the development branch
-
-To test the changes without merging into `main`:
-
-```bash
-git fetch origin
-git switch feature/dashboard-hardening
-git pull --ff-only origin feature/dashboard-hardening
-# If the branch does not exist locally yet:
-# git switch --track origin/feature/dashboard-hardening
-```
-
-Keep a backup of your existing `config.json`. Do not overwrite it with the example. For Docker testing, build the branch locally and use a temporary image tag rather than assuming the published `latest` tag contains unmerged changes:
-
-```bash
-docker build -t pi-dash:testing .
-```
-
 ### Docker Compose
 
 ```yaml
@@ -174,8 +138,6 @@ services:
     restart: unless-stopped
 ```
 
-For branch testing, replace the image with `pi-dash:testing` after building it locally. The container runs Gunicorn as a non-root user and includes a Docker healthcheck. The root `/health` endpoint remains available even when the dashboard itself is hosted below a configured `base_path`.
-
 ### Docker Run
 
 ```bash
@@ -183,65 +145,54 @@ docker run -d \
   --name pi-dash \
   -p 5001:5001 \
   -e PIHOLE_PRIMARY_PASSWORD='your_app_password_here' \
-  -v /path/to/config.json:/app/config.json:ro \
-  -v /path/to/manifest.json:/app/manifest.json:ro \
+  -v /path/to/pi-dash/config.json:/app/config.json:ro \
+  -v /path/to/pi-dash/manifest.json:/app/manifest.json:ro \
   ghcr.io/surajverma/pi-dash:latest
 ```
 
-### Native install
+### Native Install
 
-```bash
-git clone https://github.com/surajverma/pi-dash.git
-cd pi-dash
-cp config-example.json config.json
-python -m pip install -r requirements.txt
-python proxy.py
-```
+1. Clone the repository:
 
-Then open `http://localhost:5001`. On Windows, use `copy` instead of `cp`. The repository ships the responsive dashboard styles separately in `css/dashboard.css`, so you do not need a Node.js build just to use the new layout. If you are modifying Tailwind classes, run `npm install` followed by `npm run build:css`.
+   ```bash
+   git clone https://github.com/surajverma/pi-dash.git
+   cd pi-dash
+   ```
 
-## Health endpoint
+2. Create your configuration and install the dependencies:
 
-```text
-GET /health
-```
+   ```bash
+   cp config-example.json config.json
+   python -m pip install -r requirements.txt
+   ```
 
-Returns a small Pi-Dash process-health response without contacting every Pi-hole. This makes it suitable for Docker, Uptime Kuma, Homepage, Homarr and similar monitoring tools. It is not a substitute for checking individual DNS availability.
+   On Windows, use `copy config-example.json config.json` instead.
 
-## Tests
+3. Start Pi-Dash:
 
-The regression suite uses mocked Pi-hole responses and does not require a live Pi-hole:
+   ```bash
+   python proxy.py
+   ```
+
+Open `http://localhost:5001` in your browser.
+
+## Health Check
+
+`GET /health` reports whether the Pi-Dash application is running. It does not contact the configured Pi-hole instances.
+
+## Development
+
+The automated tests use mocked Pi-hole responses and do not require a live Pi-hole:
 
 ```bash
 python -m unittest discover -s tests -v
 npm install
 npm run test:js
 npm run build:css
-```
-
-Backend tests cover config fallback, cache behavior, zero enabled instances, TLS/secret resolution, reachability versus authentication errors, blocking states, partial aggregation, legacy API response shapes and process health. Frontend behavior tests use jsdom for grouping, expansion and deterministic request/timer races; **jsdom does not render CSS**.
-
-Run the separate Chromium suite to check the actual rendered page:
-
-```bash
 npx playwright install chromium
 npm run test:browser
 ```
 
-The rendered fixture loads the production HTML, CSS and JavaScript with synthetic API responses. It checks 320, 375, 430 and 768 pixel widths, phone landscape, intermediate desktop sizes and desktops up to 1920 pixels, in both themes. It covers compact and expanded cards, long values/names, six Pi-holes, zero Pi-holes, blocking/offline/auth states, feed grouping, original desktop width and background stacking, compact card/feed separation, page overflow, resizing and deterministic visibility/offline races. CI runs these checks and retains screenshots in the `rendered-dashboard` artifact. Playwright is a development-only dependency; Flask and vanilla JavaScript remain the application runtime.
-
-For manual visual and keyboard inspection with the same synthetic data:
-
-```bash
-npm run dev
-```
-
-Open `http://localhost:5011/tests/browser/`, select a viewport/scenario/theme, and use **Inspect viewport** or **Run all rendered checks**. This command is only a test fixture; use `python proxy.py` to run the real dashboard. Inspect your real Pi-holes with your existing configuration before merging. In browser Network tools, confirm `/data` and `/queries` stop when switching tabs or going offline, and resume without duplicate request streams.
-
-## PWA behavior
-
-Pi-Dash caches its application shell for offline/reload resilience. The service worker includes both dashboard scripts and both stylesheets, uses network-first loading for navigation and application assets, and never caches API responses. Live statistics require a working connection to Pi-Dash and its Pi-hole instances. A new cache version is installed for the responsive update; if an older installed PWA continues displaying an old shell after upgrading, close/reopen it or perform a hard refresh.
-
 ## Credits
 
 Initial development of Pi-Dash was done by [Codeloaf](https://github.com/codeloaf). It has since been transferred to this repository for ongoing maintenance, as the original author is not active on GitHub.
@@ -252,11 +203,11 @@ This project is not associated with the official [Pi-hole](https://pi-hole.net/)
 
 ## License
 
-MIT. See [LICENSE](LICENSE).
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
 
 ## Contributing
 
-Contributions, suggestions and bug reports are welcome through GitHub issues and pull requests.
+Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.
 
 ## Thank You
 

From 206ab08793978e0fd6626809c161175a34d4b82d Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Wed, 9 Sep 2026 18:56:11 +0530
Subject: [PATCH 44/45] Document optional environment-file passwords

---
 README.md | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index df3a42f..7f32f00 100644
--- a/README.md
+++ b/README.md
@@ -80,13 +80,25 @@ When `cache_ttl` is omitted, Pi-Dash calculates it as half of the shortest refre
 | `link` | `false` | Make the Pi-hole name a link to its admin interface. |
 | `verify_ssl` | `false` | Set to `true` to verify trusted HTTPS certificates, or provide a CA bundle path. |
 
-Settings omitted from `config.json` use the defaults above, so existing configurations continue to work. Passwords and CA bundle paths can reference environment variables:
+Settings omitted from `config.json` use the defaults above, so existing configurations continue to work. Existing installations may also continue storing the password directly in `config.json`:
+
+```json
+"password": "your_app_password_here"
+```
+
+For new installations, the password can instead be kept outside `config.json` by referencing an environment variable:
 
 ```json
 "password": "${PIHOLE_PRIMARY_PASSWORD}"
 ```
 
-Provide referenced variables through your shell or Docker environment. Literal passwords remain supported. Do not commit real passwords to GitHub.
+With Docker Compose, add the corresponding value to a `.env` file beside `compose.yaml`:
+
+```dotenv
+PIHOLE_PRIMARY_PASSWORD=your_app_password_here
+```
+
+The Compose example below passes this variable to Pi-Dash. For Docker Run, use `--env-file .env`; for a native installation, export the variable in your shell before starting Pi-Dash. The same `${ENV_NAME}` syntax can be used for a CA bundle path. The `.env` file is ignored by this repository and should not be committed to GitHub.
 
 The Network Summary includes only additive DNS counters: total queries, blocked queries, cached queries, and forwarded queries. It does not combine active clients, unique domains, or domains on lists because those values can overlap between Pi-holes. If an instance is unavailable, the summary is marked as partial.
 
@@ -131,7 +143,7 @@ services:
     ports:
       - 5001:5001
     environment:
-      PIHOLE_PRIMARY_PASSWORD: "your_app_password_here"
+      PIHOLE_PRIMARY_PASSWORD: "${PIHOLE_PRIMARY_PASSWORD}"
     volumes:
       - ./config.json:/app/config.json:ro
       - ./manifest.json:/app/manifest.json:ro
@@ -144,7 +156,7 @@ services:
 docker run -d \
   --name pi-dash \
   -p 5001:5001 \
-  -e PIHOLE_PRIMARY_PASSWORD='your_app_password_here' \
+  --env-file .env \
   -v /path/to/pi-dash/config.json:/app/config.json:ro \
   -v /path/to/pi-dash/manifest.json:/app/manifest.json:ro \
   ghcr.io/surajverma/pi-dash:latest

From a0d0aed14fc5aaee107a000707ee4183d7c5b697 Mon Sep 17 00:00:00 2001
From: Suraj Verma <5441349+surajverma@users.noreply.github.com>
Date: Wed, 9 Sep 2026 19:42:58 +0530
Subject: [PATCH 45/45] Address PR review and harden merge checks

---
 .dockerignore              |    1 +
 .github/workflows/main.yml |    3 +-
 .github/workflows/test.yml |   29 +-
 .gitignore                 |    2 -
 README.md                  |    2 +-
 index.html                 |    2 +-
 js/dashboard-core.js       |    5 +-
 package-lock.json          | 1576 ++++++++++++++++++++++++++++++++++++
 proxy.py                   |   31 +-
 tests/browser/checks.js    |    2 +
 tests/browser/mock.js      |    2 +-
 tests/browser/server.cjs   |    2 +-
 tests/dashboard.test.cjs   |    9 +
 tests/test_proxy.py        |   81 ++
 14 files changed, 1729 insertions(+), 18 deletions(-)
 create mode 100644 package-lock.json

diff --git a/.dockerignore b/.dockerignore
index 042b255..d57e381 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -9,6 +9,7 @@ __pycache__/
 *.pyo
 *.pyd
 .env
+config.json
 *.log
 dist/
 src/
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 611203f..6cb8386 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -27,9 +27,10 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
+          cache: 'npm'
 
       - name: Install npm dependencies
-        run: npm install
+        run: npm ci
 
       - name: Build Tailwind CSS
         run: npm run build:css
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index eba1ce8..2961526 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -32,9 +32,10 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '22'
+          cache: 'npm'
 
       - name: Install frontend dependencies
-        run: npm install
+        run: npm ci
 
       - name: Syntax-check frontend and service worker
         run: |
@@ -46,7 +47,9 @@ jobs:
         run: npm run test:js
 
       - name: Verify Tailwind build
-        run: npm run build:css
+        run: |
+          npm run build:css
+          git diff --exit-code -- css/style.css
 
       - name: Install rendered-test browser
         run: npx playwright install --with-deps chromium
@@ -68,3 +71,25 @@ jobs:
           test -s js/dashboard-core.js
           test -s js/app.js
           node -e "const fs=require('fs'); const html=fs.readFileSync('index.html','utf8'); for(const file of ['css/style.css','css/dashboard.css','js/dashboard-core.js','js/app.js']) { if(!html.includes(file)||!fs.existsSync(file)) process.exit(1); }"
+
+      - name: Build Docker image
+        run: docker build --tag pi-dash:test .
+
+      - name: Smoke-test Docker image
+        run: |
+          docker run --detach --name pi-dash-test \
+            --publish 127.0.0.1:5001:5001 \
+            --volume "$PWD/config-example.json:/app/config.json:ro" \
+            pi-dash:test
+          for attempt in {1..20}; do
+            if curl --fail --silent http://127.0.0.1:5001/health; then
+              exit 0
+            fi
+            sleep 1
+          done
+          docker logs pi-dash-test
+          exit 1
+
+      - name: Stop Docker smoke-test container
+        if: always()
+        run: docker rm --force pi-dash-test || true
diff --git a/.gitignore b/.gitignore
index 59a8cd8..2fdbbb5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,8 @@
 venv/
 config.json
 node_modules/
-package-lock.json
 dist/
 .env
 *.log
-css/style.css
 __pycache__/
 test-results/
diff --git a/README.md b/README.md
index 7f32f00..03c89d1 100644
--- a/README.md
+++ b/README.md
@@ -198,7 +198,7 @@ The automated tests use mocked Pi-hole responses and do not require a live Pi-ho
 
 ```bash
 python -m unittest discover -s tests -v
-npm install
+npm ci
 npm run test:js
 npm run build:css
 npx playwright install chromium
diff --git a/index.html b/index.html
index e92c724..8f0aa68 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
     <div id="main-wrapper" class="w-full mx-auto relative z-10">
       <header class="text-center mb-6">
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Pi-Dash</h1>
-        <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400" role="status">Last updated: Never</p>
+        <p id="last-updated" class="text-xs text-gray-500 dark:text-gray-400">Last updated: Never</p>
       </header>
       <section id="network-summary" hidden class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg w-full mb-6" aria-label="Network summary">
         <div class="network-heading">
diff --git a/js/dashboard-core.js b/js/dashboard-core.js
index 69afac4..9df7efa 100644
--- a/js/dashboard-core.js
+++ b/js/dashboard-core.js
@@ -47,9 +47,10 @@
     if (!total) return 'No active Pi-holes';
     const parts = [`${reporting} of ${total} reporting`];
     if (summary?.blocking_disabled_instances) parts.push(`${summary.blocking_disabled_instances} blocking off`);
+    if (summary?.auth_error_instances) parts.push(`${summary.auth_error_instances} auth failed`);
     if (summary?.offline_instances) parts.push(`${summary.offline_instances} offline`);
     if (summary?.blocking_unknown_instances) parts.push(`${summary.blocking_unknown_instances} blocking unknown`);
-    if (!summary?.partial && !summary?.blocking_disabled_instances && !summary?.offline_instances && !summary?.blocking_unknown_instances) {
+    if (!summary?.partial && !summary?.blocking_disabled_instances && !summary?.auth_error_instances && !summary?.offline_instances && !summary?.blocking_unknown_instances) {
       return `${total} healthy`;
     }
     return parts.join(' · ');
@@ -147,4 +148,4 @@
     groupConsecutiveQueries, mergeConsecutiveGroups,
     createQueryTracker, collectNewQueries,
   };
-});
\ No newline at end of file
+});
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e358ef2
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1576 @@
+{
+  "name": "pi-dash",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "pi-dash",
+      "version": "1.0.0",
+      "devDependencies": {
+        "jsdom": "^26.1.0",
+        "playwright": "^1.63.0",
+        "tailwindcss": "^3.3.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.3.0.tgz",
+      "integrity": "sha512-U4+70Pc5ZS9osnCBCE5Jha/ciHM+Yp+CNMNC/7HvYbNRk1Ldd+f7qO65W5qfhu/TCv+/ozljlXXe9Nj8419DMA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz",
+      "integrity": "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.27",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.27.tgz",
+      "integrity": "sha512-gQPNF78qebCQ6tvVFBYrvJdBNOrYZm90ZlXgpIFm06p6qHDHq/XC4TnJftN6OMbxVE0UTBAoRgcsDeJBBooITw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
+      "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.63.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
+      "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.18",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz",
+      "integrity": "sha512-/peqiBB/n07gQGLsWaHho3WfvUyRscw0gYTsEFMhrIe/nWLkYaf5SbKYjGYqtRV3aPwykJgF2VEMo1ac4bnsGA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/proxy.py b/proxy.py
index e463557..bd14a91 100644
--- a/proxy.py
+++ b/proxy.py
@@ -45,7 +45,8 @@ def _load_json(name):
 _cache_lock = threading.Lock()
 _stats_refresh_lock = threading.Lock()
 _queries_refresh_lock = threading.Lock()
-_blocking_lock = threading.Lock()
+_blocking_locks_lock = threading.Lock()
+_blocking_locks = {}
 _stats_cache = {'time': 0.0, 'data': None}
 _queries_cache = {}
 _blocking_cache = {}
@@ -59,6 +60,13 @@ def _int(value, default, minimum=100):
         return default
 
 
+def _bounded_int(value, default, minimum, maximum):
+    try:
+        return max(minimum, min(int(value), maximum))
+    except (TypeError, ValueError):
+        return default
+
+
 def get_refresh_interval():
     return _int(config.get('refresh_interval'), DEFAULT_REFRESH_INTERVAL)
 
@@ -218,6 +226,11 @@ def normalize_blocking(value):
     return None
 
 
+def _blocking_lock_for(name):
+    with _blocking_locks_lock:
+        return _blocking_locks.setdefault(name, threading.Lock())
+
+
 def get_blocking(pihole):
     name = pihole['name']
     now = time.monotonic()
@@ -225,8 +238,8 @@ def get_blocking(pihole):
         cached = _blocking_cache.get(name)
         if cached and now - cached['time'] < DEFAULT_BLOCKING_TTL / 1000:
             return cached['value']
-    with _blocking_lock:
-        # Coalesce simultaneous misses, as with the statistics cache.
+    with _blocking_lock_for(name):
+        # Coalesce misses for the same Pi-hole without delaying other instances.
         now = time.monotonic()
         with _cache_lock:
             cached = _blocking_cache.get(name)
@@ -345,11 +358,14 @@ def fetch_queries(length=50, force=False):
 
 
 def network_summary(data):
-    total = blocked = cached = forwarded = healthy = offline = disabled = unknown = 0
+    total = blocked = cached = forwarded = healthy = offline = auth_errors = disabled = unknown = 0
     contributing = 0
     for item in data.values():
         if item.get('error') or not isinstance(item.get('queries'), dict):
-            offline += 1
+            if item.get('_pi_dash', {}).get('health') == 'auth_error':
+                auth_errors += 1
+            else:
+                offline += 1
             continue
         contributing += 1
         queries = item['queries']
@@ -375,6 +391,7 @@ def network_summary(data):
         'healthy_instances': healthy,
         'blocking_disabled_instances': disabled,
         'blocking_unknown_instances': unknown,
+        'auth_error_instances': auth_errors,
         'offline_instances': offline,
         'partial': contributing != len(data),
     }
@@ -405,7 +422,7 @@ def data():
         if include_summary:
             result['summary'] = network_summary(stats)
         if include_queries:
-            length = max(1, min(int(request.args.get('length', 50)), 200))
+            length = _bounded_int(request.args.get('length'), 50, 1, 200)
             result['queries'] = fetch_queries(length)
         return jsonify(result)
     except Exception as exc:
@@ -415,7 +432,7 @@ def data():
 @bp.route('/queries')
 def queries():
     try:
-        length = max(1, min(int(request.args.get('length', 50)), 200))
+        length = _bounded_int(request.args.get('length'), 50, 1, 200)
         return jsonify(fetch_queries(length))
     except Exception as exc:
         return jsonify({'error': str(exc)}), 500
diff --git a/tests/browser/checks.js b/tests/browser/checks.js
index bea8444..f1871e4 100644
--- a/tests/browser/checks.js
+++ b/tests/browser/checks.js
@@ -103,6 +103,8 @@ async function checkLayout(width, height, scenario, dark) {
   }
   if (scenario === 'states') {
     for (const state of ['Blocking ON', 'Blocking OFF', 'Offline', 'Auth failed', 'blocking unknown']) assert(d.querySelector('main').textContent.includes(state), `missing ${state}`);
+    const networkHealth = d.querySelector('.network-health').textContent;
+    assert(networkHealth.includes('1 offline') && networkHealth.includes('1 auth failed'), 'network summary merges offline and authentication failures');
     assert(shown(d.querySelector('.network-partial')), 'missing partial summary');
   }
   if (scenario === 'zero') assert(d.querySelector('.empty-message') && !toggles.length, 'zero instances failed');
diff --git a/tests/browser/mock.js b/tests/browser/mock.js
index 585cafb..4e1e132 100644
--- a/tests/browser/mock.js
+++ b/tests/browser/mock.js
@@ -15,7 +15,7 @@
   }
   const queries = count ? { [names[0]]: Array.from({ length: 36 }, (_, i) => ({ id: i + 1, time: i + 1, domain: i > 32 ? 'repeat.example.org' : `query-${i}.example.org`, blocked: i < 10 })) } : {};
   const cfg = { refresh_interval: 2000, queries_refresh_interval: 3000, show_queries: true, show_network_summary: true, show_trends: true, piholes: names.map(name => ({ name, link: false, enabled: true })) };
-  const summary = { total_queries: count * sample().queries.total, blocked_queries: count * 23808, percent_blocked: 26.7, cached_queries: count * sample().queries.cached, forwarded_queries: count * sample().queries.forwarded, instances: count, contributing_instances: scenario === 'states' ? 3 : count, offline_instances: scenario === 'states' ? 2 : 0, blocking_disabled_instances: scenario === 'states' ? 1 : 0, blocking_unknown_instances: scenario === 'states' ? 1 : 0, partial: scenario === 'states' };
+  const summary = { total_queries: count * sample().queries.total, blocked_queries: count * 23808, percent_blocked: 26.7, cached_queries: count * sample().queries.cached, forwarded_queries: count * sample().queries.forwarded, instances: count, contributing_instances: scenario === 'states' ? 3 : count, offline_instances: scenario === 'states' ? 1 : 0, auth_error_instances: scenario === 'states' ? 1 : 0, blocking_disabled_instances: scenario === 'states' ? 1 : 0, blocking_unknown_instances: scenario === 'states' ? 1 : 0, partial: scenario === 'states' };
   const native = params.get('native') === 'true';
   const realSetInterval = window.setInterval.bind(window), realClearInterval = window.clearInterval.bind(window);
   let hidden = false, online = true, nextTimer = 0;
diff --git a/tests/browser/server.cjs b/tests/browser/server.cjs
index e0854fd..57e532b 100644
--- a/tests/browser/server.cjs
+++ b/tests/browser/server.cjs
@@ -23,4 +23,4 @@ http.createServer((req, res) => {
     res.setHeader('Content-Type', { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css' }[path.extname(file)] || 'text/plain');
     res.end(data);
   });
-}).listen(port, '0.0.0.0', () => console.log(`Rendered regression suite: http://localhost:${port}/tests/browser/`));
+}).listen(port, '127.0.0.1', () => console.log(`Rendered regression suite: http://localhost:${port}/tests/browser/`));
diff --git a/tests/dashboard.test.cjs b/tests/dashboard.test.cjs
index 93d3a62..0f4a0df 100644
--- a/tests/dashboard.test.cjs
+++ b/tests/dashboard.test.cjs
@@ -81,6 +81,15 @@ test('health presentation does not infer network speed from API latency', () =>
   assert.equal(core.healthPresentation({ blocking: false }).text, 'Blocking OFF');
   assert.equal(core.healthPresentation({ health: 'auth_error' }, true).text, 'Auth failed');
   assert.match(core.networkStatus({ instances: 2, contributing_instances: 1, offline_instances: 1, partial: true }), /1 of 2 reporting/);
+  assert.match(core.networkStatus({ instances: 2, contributing_instances: 0, offline_instances: 1, auth_error_instances: 1, partial: true }), /1 auth failed/);
+});
+
+test('frequently updated timestamp is not an ARIA live region', async () => {
+  const app = makeBrowser();
+  try {
+    await app.settle();
+    assert.equal(app.window.document.getElementById('last-updated').hasAttribute('role'), false);
+  } finally { app.close(); }
 });
 
 test('mobile card starts compact and expands all desktop metrics', async () => {
diff --git a/tests/test_proxy.py b/tests/test_proxy.py
index 9784f02..c16a9f0 100644
--- a/tests/test_proxy.py
+++ b/tests/test_proxy.py
@@ -81,6 +81,7 @@ def test_summary_is_partial_and_does_not_sum_unique_values(self):
             'one': {'queries': {'total': 100, 'blocked': 10, 'cached': 60, 'forwarded': 40}, '_pi_dash': {'blocking': True}},
             'two': {'queries': {'total': 50, 'blocked': 15, 'cached': 20, 'forwarded': 30}, '_pi_dash': {'blocking': False}},
             'three': {'error': 'offline', '_pi_dash': {'health': 'unreachable'}},
+            'four': {'error': 'authentication failed', '_pi_dash': {'health': 'auth_error'}},
         }
         result = proxy.network_summary(data)
         self.assertEqual(result['total_queries'], 150)
@@ -91,6 +92,7 @@ def test_summary_is_partial_and_does_not_sum_unique_values(self):
         self.assertEqual(result['contributing_instances'], 2)
         self.assertEqual(result['healthy_instances'], 1)
         self.assertEqual(result['blocking_disabled_instances'], 1)
+        self.assertEqual(result['auth_error_instances'], 1)
         self.assertEqual(result['offline_instances'], 1)
         self.assertTrue(result['partial'])
         self.assertNotIn('clients', result)
@@ -127,6 +129,64 @@ def json(self):
         self.assertNotIn('latency_ms', data['_pi_dash'])
 
 
+class BlockingCacheTests(unittest.TestCase):
+    class Response:
+        def json(self):
+            return {'blocking': 'enabled'}
+
+    def setUp(self):
+        proxy._blocking_cache.clear()
+        proxy._blocking_locks.clear()
+
+    def tearDown(self):
+        proxy._blocking_cache.clear()
+        proxy._blocking_locks.clear()
+
+    def test_distinct_piholes_check_blocking_in_parallel(self):
+        entered = {'One': Event(), 'Two': Event()}
+        release = Event()
+
+        def slow_get(pihole, path):
+            self.assertEqual(path, '/api/dns/blocking')
+            entered[pihole['name']].set()
+            release.wait(3)
+            return self.Response()
+
+        with patch.object(proxy, 'pihole_get', side_effect=slow_get):
+            with ThreadPoolExecutor(max_workers=2) as pool:
+                futures = [
+                    pool.submit(proxy.get_blocking, {'name': name, 'address': 'http://localhost'})
+                    for name in ('One', 'Two')
+                ]
+                both_entered = entered['One'].wait(2) and entered['Two'].wait(2)
+                release.set()
+                values = [future.result(timeout=3) for future in futures]
+
+        self.assertTrue(both_entered)
+        self.assertEqual(values, [True, True])
+
+    def test_same_pihole_coalesces_simultaneous_blocking_checks(self):
+        entered = Event()
+        release = Event()
+
+        def slow_get(_pihole, _path):
+            entered.set()
+            release.wait(3)
+            return self.Response()
+
+        pihole = {'name': 'One', 'address': 'http://localhost'}
+        with patch.object(proxy, 'pihole_get', side_effect=slow_get) as fetch:
+            with ThreadPoolExecutor(max_workers=2) as pool:
+                first = pool.submit(proxy.get_blocking, pihole)
+                self.assertTrue(entered.wait(2))
+                second = pool.submit(proxy.get_blocking, pihole)
+                release.set()
+                self.assertTrue(first.result(timeout=3))
+                self.assertTrue(second.result(timeout=3))
+
+        self.assertEqual(fetch.call_count, 1)
+
+
 class CacheTests(unittest.TestCase):
     def setUp(self):
         self.original = proxy.config
@@ -181,6 +241,27 @@ def test_rich_data_shape_is_opt_in(self):
             self.assertEqual(payload['stats'], sample)
             self.assertIn('summary', payload)
 
+    def test_query_length_defaults_on_invalid_input(self):
+        with proxy.app.test_client() as client, \
+                patch.object(proxy, 'fetch_stats', return_value={}), \
+                patch.object(proxy, 'fetch_queries', return_value={}) as fetch:
+            self.assertEqual(client.get('/queries?length=invalid').status_code, 200)
+            fetch.assert_called_once_with(50)
+
+        with proxy.app.test_client() as client, \
+                patch.object(proxy, 'fetch_stats', return_value={}), \
+                patch.object(proxy, 'fetch_queries', return_value={}) as fetch:
+            self.assertEqual(client.get('/data?include_queries=true&length=invalid').status_code, 200)
+            fetch.assert_called_once_with(50)
+
+    def test_query_length_is_clamped(self):
+        cases = (('/queries?length=0', 1), ('/queries?length=999', 200))
+        for url, expected in cases:
+            with self.subTest(url=url), proxy.app.test_client() as client, \
+                    patch.object(proxy, 'fetch_queries', return_value={}) as fetch:
+                self.assertEqual(client.get(url).status_code, 200)
+                fetch.assert_called_once_with(expected)
+
     def test_health_does_not_contact_piholes(self):
         with proxy.app.test_client() as client, patch.object(proxy, 'fetch_stats') as fetch:
             self.assertEqual(client.get('/health').status_code, 200)