Upload 2 files

app.py

@@ -0,0 +1,307 @@
+from flask import Flask, request, jsonify, send_from_directory
+import requests
+import threading
+import time
+import uuid
+import json
+import os
+from urllib.parse import urlparse
+import socket
+
+app = Flask(__name__, static_folder='.', static_url_path='')
+
+# --- Configuration ---
+DATA_FILE = "data.json"
+PING_INTERVAL_SECONDS = 60  # Backend pings every 60 seconds
+HISTORY_DURATION_SECONDS = 60 * 60  # Store history for 1 hour
+
+# --- Data Store ---
+# Structure: { "id": "uuid", "url": "string", "status": "pending/ok/error/checking",
+#              "ip": "string", "responseTime": float_ms, "lastChecked": "iso_string_utc",
+#              "history": [{"timestamp": float_unix_ts_seconds, "status": "ok/error"}],
+#              "_thread": threading.Thread_object, "_stop_event": threading.Event_object }
+monitored_urls_store = {}  # In-memory store: id -> url_data
+lock = threading.Lock() # To protect access to monitored_urls_store
+
+# --- Helper Functions ---
+def save_data_to_json():
+    # This function must be called with 'lock' acquired
+    serializable_data = {}
+    for url_id, data in monitored_urls_store.items():
+        s_data = data.copy()
+        s_data.pop("_thread", None)
+        s_data.pop("_stop_event", None)
+        serializable_data[url_id] = s_data
+    try:
+        with open(DATA_FILE, 'w') as f:
+            json.dump(serializable_data, f, indent=2)
+    except IOError as e:
+        print(f"Error saving data to {DATA_FILE}: {e}")
+
+def load_data_from_json():
+    global monitored_urls_store
+    if os.path.exists(DATA_FILE):
+        try:
+            with open(DATA_FILE, 'r') as f:
+                loaded_json_data = json.load(f)
+            
+            temp_store = {}
+            for url_id_key, data_item in loaded_json_data.items():
+                # Ensure essential fields and use 'id' from data if present, else key
+                data_item.setdefault('id', url_id_key)
+                current_id = data_item['id']
+                data_item.setdefault('status', 'pending')
+                data_item.setdefault('ip', data_item.get('ip', 'N/A'))
+                data_item.setdefault('responseTime', None)
+                data_item.setdefault('lastChecked', None)
+                data_item.setdefault('history', data_item.get('history', []))
+                temp_store[current_id] = data_item
+            
+            with lock: # Lock before modifying global monitored_urls_store
+                monitored_urls_store = temp_store
+
+        except json.JSONDecodeError:
+            print(f"Warning: Could not decode {DATA_FILE}. Starting with an empty list.")
+            with lock: monitored_urls_store = {}
+        except Exception as e:
+            print(f"Error loading data from {DATA_FILE}: {e}. Starting fresh.")
+            with lock: monitored_urls_store = {}
+    else:
+        with lock: monitored_urls_store = {}
+    
+    url_ids_to_start_monitoring = []
+    with lock:
+        url_ids_to_start_monitoring = list(monitored_urls_store.keys())
+
+    for url_id in url_ids_to_start_monitoring:
+        start_url_monitoring_thread(url_id)
+
+def get_host_ip_address(hostname_str):
+    try:
+        # Check if hostname_str is already a valid IP address
+        socket.inet_aton(hostname_str) # Throws an OSError if not a valid IPv4 string
+        return hostname_str 
+    except OSError:
+        # It's not an IP, so try to resolve it as a hostname
+        try:
+            ip_address = socket.gethostbyname(hostname_str)
+            return ip_address
+        except socket.gaierror:
+            print(f"Could not resolve hostname: {hostname_str}")
+            return 'N/A'
+    except Exception as e:
+        print(f"Error processing hostname/IP for {hostname_str}: {e}")
+        return 'N/A'
+
+def prune_url_history(url_data_entry):
+    # Assumes 'lock' is acquired or called from the thread managing this entry
+    cutoff_time = time.time() - HISTORY_DURATION_SECONDS
+    url_data_entry['history'] = [
+        entry for entry in url_data_entry.get('history', []) if entry['timestamp'] >= cutoff_time
+    ]
+
+def execute_url_check(url_id_to_check):
+    url_config_snapshot = None
+    with lock:
+        if url_id_to_check not in monitored_urls_store: return
+        
+        current_url_data = monitored_urls_store[url_id_to_check]
+        if current_url_data.get('_stop_event') and current_url_data['_stop_event'].is_set(): return
+        
+        print(f"Checking {current_url_data['url']} (ID: {url_id_to_check})...")
+        current_url_data['status'] = 'checking'
+        url_config_snapshot = current_url_data.copy() # Snapshot for use outside lock
+
+    if not url_config_snapshot: return
+
+    check_start_time = time.perf_counter()
+    final_check_status = 'error'
+    http_response_time_ms = None
+    # Identify your bot to website owners
+    http_headers = {'User-Agent': 'URLPinger/1.0 (HuggingFace Space Bot)'} 
+    
+    try:
+        # Attempt HEAD request first
+        try:
+            head_response = requests.head(url_config_snapshot['url'], timeout=10, allow_redirects=True, headers=http_headers)
+            if 200 <= head_response.status_code < 400: # OK or Redirect
+                 final_check_status = 'ok'
+            else:
+                print(f"HEAD for {url_config_snapshot['url']} returned {head_response.status_code}. Trying GET.")
+        except requests.exceptions.Timeout:
+            print(f"HEAD timeout for {url_config_snapshot['url']}. Trying GET...")
+        except requests.RequestException as e_head:
+            print(f"HEAD failed for {url_config_snapshot['url']}: {e_head}. Trying GET...")
+
+        # If HEAD was not conclusive, try GET
+        if final_check_status != 'ok':
+            try:
+                get_response = requests.get(url_config_snapshot['url'], timeout=15, allow_redirects=True, headers=http_headers)
+                if get_response.ok: # Only 2xx status codes
+                    final_check_status = 'ok'
+                else:
+                    print(f"GET for {url_config_snapshot['url']} status: {get_response.status_code}")
+                    final_check_status = 'error' 
+            except requests.exceptions.Timeout:
+                print(f"GET timeout for {url_config_snapshot['url']}")
+                final_check_status = 'error'
+            except requests.RequestException as e_get:
+                print(f"GET failed for {url_config_snapshot['url']}: {e_get}")
+                final_check_status = 'error'
+        
+        if final_check_status == 'ok':
+            http_response_time_ms = (time.perf_counter() - check_start_time) * 1000
+
+    except Exception as e: 
+        print(f"Outer check exception for {url_config_snapshot['url']}: {e}")
+        final_check_status = 'error'
+
+    with lock:
+        if url_id_to_check not in monitored_urls_store: return # URL might have been removed during check
+        
+        live_url_data = monitored_urls_store[url_id_to_check] 
+        live_url_data['status'] = final_check_status
+        live_url_data['responseTime'] = round(http_response_time_ms) if http_response_time_ms is not None else None
+        live_url_data['lastChecked'] = time.strftime("%Y-%m-%dT%H:%M:%SZ", time.gmtime()) # ISO 8601 UTC
+        
+        current_history_list = live_url_data.get('history', [])
+        current_history_list.append({'timestamp': time.time(), 'status': final_check_status}) # timestamp in seconds
+        live_url_data['history'] = current_history_list
+        prune_url_history(live_url_data)
+        
+        save_data_to_json()
+        print(f"Finished check for {live_url_data['url']}: {final_check_status}, {http_response_time_ms} ms")
+
+def pinger_thread_function(url_id_param, stop_event_param):
+    while not stop_event_param.is_set():
+        execute_url_check(url_id_param)
+        # Sleep for PING_INTERVAL_SECONDS, but check stop_event periodically
+        for _ in range(PING_INTERVAL_SECONDS): 
+            if stop_event_param.is_set(): break
+            time.sleep(1)
+    print(f"PingerThread for {url_id_param} stopped.")
+
+def start_url_monitoring_thread(target_url_id):
+    with lock:
+        if target_url_id not in monitored_urls_store:
+            print(f"Cannot start monitoring: URL ID {target_url_id} not found.")
+            return
+
+        url_data_entry = monitored_urls_store[target_url_id]
+
+        # Stop existing thread if it's alive
+        if "_thread" in url_data_entry and url_data_entry["_thread"].is_alive():
+            print(f"Monitor for URL ID {target_url_id} already running. Attempting to restart.")
+            url_data_entry["_stop_event"].set()
+            url_data_entry["_thread"].join(timeout=3) # Wait for thread to stop
+
+        new_stop_event = threading.Event()
+        # daemon=True allows main program to exit even if threads are running
+        new_thread = threading.Thread(target=pinger_thread_function, args=(target_url_id, new_stop_event), daemon=True)
+        
+        url_data_entry["_thread"] = new_thread
+        url_data_entry["_stop_event"] = new_stop_event
+        
+        new_thread.start()
+        print(f"Started/Restarted monitoring for URL ID {target_url_id}: {url_data_entry['url']}")
+
+def stop_url_monitoring_thread(target_url_id):
+    # This function must be called with 'lock' acquired
+    if target_url_id in monitored_urls_store:
+        url_data_entry = monitored_urls_store[target_url_id]
+        if "_thread" in url_data_entry and url_data_entry["_thread"].is_alive():
+            print(f"Signaling stop for monitor thread of URL ID {target_url_id}")
+            url_data_entry["_stop_event"].set()
+            # Not joining here to keep API responsive, daemon thread will exit.
+        url_data_entry.pop("_thread", None)
+        url_data_entry.pop("_stop_event", None)
+
+# --- API Endpoints ---
+@app.route('/')
+def serve_index():
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.route('/api/urls', methods=['GET'])
+def get_all_urls():
+    with lock:
+        # Prepare data for sending: list of url data, no thread objects
+        response_list = []
+        for data_item in monitored_urls_store.values():
+            display_item = data_item.copy()
+            display_item.pop("_thread", None)
+            display_item.pop("_stop_event", None)
+            response_list.append(display_item)
+    return jsonify(response_list)
+
+@app.route('/api/urls', methods=['POST'])
+def add_new_url():
+    request_data = request.get_json()
+    if not request_data or 'url' not in request_data:
+        return jsonify({"error": "URL is required"}), 400
+    
+    input_url = request_data['url'].strip()
+
+    if not input_url.startswith('http://') and not input_url.startswith('https://'):
+        input_url = 'https://' + input_url # Default to https
+    
+    try:
+        parsed_input_url = urlparse(input_url)
+        if not parsed_input_url.scheme or not parsed_input_url.netloc:
+            raise ValueError("Invalid URL structure")
+        url_hostname = parsed_input_url.hostname
+    except ValueError:
+        return jsonify({"error": "Invalid URL format"}), 400
+
+    with lock:
+        # Check for duplicates (case-insensitive, ignoring trailing slashes)
+        normalized_new_url = input_url.rstrip('/').lower()
+        for existing_url in monitored_urls_store.values():
+            if existing_url['url'].rstrip('/').lower() == normalized_new_url:
+                return jsonify({"error": "URL already monitored"}), 409 # Conflict
+
+        new_url_id = str(uuid.uuid4())
+        resolved_ip = get_host_ip_address(url_hostname) if url_hostname else 'N/A'
+
+        url_entry_to_add = {
+            "id": new_url_id, "url": input_url, "status": 'pending', 
+            "ip": resolved_ip, "responseTime": None, "lastChecked": None, "history": []
+        }
+        monitored_urls_store[new_url_id] = url_entry_to_add
+        save_data_to_json() 
+    
+    start_url_monitoring_thread(new_url_id) 
+
+    # Return the newly created URL entry (without thread objects)
+    return jsonify(url_entry_to_add), 201
+
+
+@app.route('/api/urls/<string:target_url_id>', methods=['DELETE'])
+def delete_existing_url(target_url_id):
+    with lock:
+        if target_url_id in monitored_urls_store:
+            stop_url_monitoring_thread(target_url_id) 
+            removed_url_entry = monitored_urls_store.pop(target_url_id)
+            save_data_to_json()
+            
+            # Prepare data for response (without thread objects)
+            response_data = removed_url_entry.copy()
+            response_data.pop("_thread", None)
+            response_data.pop("_stop_event", None)
+            print(f"Deleted URL ID {target_url_id}")
+            return jsonify({"message": "URL removed", "url": response_data}), 200
+        else:
+            return jsonify({"error": "URL not found"}), 404
+
+# --- Main Execution / Gunicorn Entry Point ---
+# Load data once when the application module is initialized
+# This handles both `flask run` and gunicorn scenarios.
+if os.environ.get('WERKZEUG_RUN_MAIN') != 'true': # Avoids double load in Flask debug mode
+    load_data_from_json() 
+
+if __name__ == '__main__':
+    # This block is for local development (e.g., `python app.py`)
+    # `load_data_from_json()` is called above unless Werkzeug reloader is active.
+    app.run(debug=True, host='0.0.0.0', port=7860)
+
+# When run with Gunicorn, Gunicorn imports `app` from this `app.py` file.
+# `load_data_from_json()` will have been called during that import.

index.html

@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>URL Pinger (Backend Mode)</title>
+    <meta name="theme-color" content="#e0e5ec">
+    <meta name="theme-color" content="#2c303a" media="(prefers-color-scheme: dark)">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom styles (UNCHANGED from your original - Retained for brevity) */
+        :root {
+            --light-bg: #e0e5ec; --dark-bg: #2c303a; --light-shadow-outer-1: #a3b1c6;
+            --light-shadow-outer-2: #ffffff; --dark-shadow-outer-1: #22252e; --dark-shadow-outer-2: #363a46;
+            --light-shadow-inner-1: #a3b1c6; --light-shadow-inner-2: #ffffff; --dark-shadow-inner-1: #22252e;
+            --dark-shadow-inner-2: #363a46; --text-light: #4a5568; --text-dark: #e2e8f0;
+            --text-light-muted: #718096; --text-dark-muted: #a0aec0; --dot-ok: #22c55e;
+            --dot-error: #ef4444; --dot-pending: #9ca3af; --dot-checking: #3b82f6;
+        }
+        html.dark {
+             --light-bg: #2c303a; --light-shadow-outer-1: #22252e; --light-shadow-outer-2: #363a46;
+             --light-shadow-inner-1: #22252e; --light-shadow-inner-2: #363a46;
+             --text-light: #e2e8f0; --text-light-muted: #a0aec0;
+        }
+        body {
+            background-color: var(--light-bg); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            min-height: 100vh; transition: background-color 0.3s ease; color: var(--text-light);
+        }
+        .neumorphic-outset {
+            border-radius: 12px; background: var(--light-bg);
+            box-shadow: 6px 6px 12px var(--light-shadow-outer-1), -6px -6px 12px var(--light-shadow-outer-2);
+            transition: box-shadow 0.2s ease-out, background-color 0.3s ease;
+        }
+        .neumorphic-outset-sm {
+            border-radius: 8px; background: var(--light-bg);
+            box-shadow: 4px 4px 8px var(--light-shadow-outer-1), -4px -4px 8px var(--light-shadow-outer-2);
+            transition: box-shadow 0.2s ease-out, background-color 0.3s ease;
+        }
+         .neumorphic-outset-hover:hover { box-shadow: 4px 4px 8px var(--light-shadow-outer-1), -4px -4px 8px var(--light-shadow-outer-2); }
+         .neumorphic-outset-active:active, .neumorphic-outset-active:focus { box-shadow: inset 3px 3px 6px var(--light-shadow-inner-1), inset -3px -3px 6px var(--light-shadow-inner-2); }
+        .neumorphic-inset {
+            border-radius: 12px; background: var(--light-bg);
+            box-shadow: inset 6px 6px 12px var(--light-shadow-inner-1), inset -6px -6px 12px var(--light-shadow-inner-2);
+            transition: box-shadow 0.2s ease-out, background-color 0.3s ease;
+        }
+        .neumorphic-inset-sm {
+            border-radius: 8px; background: var(--light-bg);
+            box-shadow: inset 4px 4px 8px var(--light-shadow-inner-1), inset -4px -4px 8px var(--light-shadow-inner-2);
+            transition: box-shadow 0.2s ease-out, background-color 0.3s ease;
+        }
+        .status-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-top: 4px; }
+        .status-ok { background-color: var(--dot-ok); } .status-error { background-color: var(--dot-error); }
+        .status-pending { background-color: var(--dot-pending); } .status-checking { background-color: var(--dot-checking); }
+        .loader {
+            border: 2px solid var(--light-shadow-outer-1); border-top: 2px solid var(--dot-checking);
+            border-radius: 50%; width: 12px; height: 12px; animation: spin 1s linear infinite;
+            display: inline-block; flex-shrink: 0; margin-top: 4px;
+        }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .history-bar {
+            display: flex; height: 10px; overflow: hidden; flex-direction: row-reverse;
+            width: 100%; margin-top: 8px; border-radius: 3px; background-color: var(--light-shadow-outer-2);
+        }
+        .history-point { width: 3px; height: 100%; margin-right: 1px; flex-shrink: 0; flex-grow: 0; }
+        .history-bar .history-point:first-child { margin-right: 0; }
+        .history-ok { background-color: var(--dot-ok); } .history-error { background-color: var(--dot-error); }
+        #urlList { max-height: calc(100vh - 350px); overflow-y: auto; padding-right: 8px; }
+        #urlList::-webkit-scrollbar { width: 6px; }
+        #urlList::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
+        #urlList::-webkit-scrollbar-thumb { background: var(--light-shadow-outer-1); border-radius: 3px; }
+        #urlList::-webkit-scrollbar-thumb:hover { background: var(--text-light-muted); }
+        input::placeholder { color: var(--text-light-muted); opacity: 0.8; }
+         .removeUrlBtn svg { width: 0.875rem; height: 0.875rem; pointer-events: none; color: var(--text-light-muted); }
+         .removeUrlBtn:hover svg { color: #ef4444; }
+         html.dark .removeUrlBtn:hover svg { color: #f87171; }
+    </style>
+    <script>
+        tailwind.config = { darkMode: 'class', theme: { extend: {} } }
+    </script>
+</head>
+<body class="pt-10 pb-10 px-4">
+
+    <div id="app" class="max-w-md mx-auto neumorphic-outset p-6 md:p-8">
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-semibold text-center flex-grow">URL Pinger (Backend Mode)</h1>
+            <button id="theme-toggle" class="neumorphic-outset-sm neumorphic-outset-hover neumorphic-outset-active p-2 focus:outline-none">
+                <svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+                <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+            </button>
+        </div>
+
+        <div class="mb-6">
+            <label for="urlInput" class="block text-sm font-medium mb-2" style="color: var(--text-light-muted);">Add URL to Monitor:</label>
+            <div class="flex space-x-3">
+                <input type="url" id="urlInput" placeholder="https://example.com" class="flex-grow p-3 neumorphic-inset border-none focus:outline-none text-sm" style="color: var(--text-light);" required>
+                <button id="addUrlBtn" class="neumorphic-outset-sm neumorphic-outset-hover neumorphic-outset-active font-semibold py-2 px-5 transition duration-150 ease-in-out focus:outline-none">
+                    Add
+                </button>
+            </div>
+            <p id="errorMsg" class="text-red-500 text-xs mt-2 h-4"></p>
+        </div>
+
+        <div class="mt-8">
+            <h2 class="text-lg font-semibold mb-3">Monitored URLs</h2>
+            <div id="urlList" class="space-y-4">
+                 <p class="italic" style="color: var(--text-light-muted);">Loading URLs from server...</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const urlInput = document.getElementById('urlInput');
+        const addUrlBtn = document.getElementById('addUrlBtn');
+        const urlList = document.getElementById('urlList');
+        const errorMsg = document.getElementById('errorMsg');
+        const themeToggleBtn = document.getElementById('theme-toggle');
+        const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+        const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+        let monitoredUrlsCache = []; // Client-side cache of URL data from backend
+
+        const UI_REFRESH_INTERVAL_MS = 5000; // Refresh UI data from backend every 5 seconds
+        const HISTORY_DURATION_MS_FOR_DISPLAY = 60 * 60 * 1000; // For uptime % and history bar visualization
+        const MAX_HISTORY_POINTS_FOR_DISPLAY = 90;
+
+        // --- Theme Toggle (UNCHANGED logic) ---
+        function applyTheme(isDark) {
+            if (isDark) {
+                document.documentElement.classList.add('dark');
+                themeToggleLightIcon.classList.remove('hidden');
+                themeToggleDarkIcon.classList.add('hidden');
+                requestAnimationFrame(() => {
+                    const darkBg = getComputedStyle(document.documentElement).getPropertyValue('--dark-bg').trim();
+                    document.querySelector('meta[name="theme-color"][media="(prefers-color-scheme: dark)"]').setAttribute('content', darkBg);
+                });
+            } else {
+                document.documentElement.classList.remove('dark');
+                themeToggleLightIcon.classList.add('hidden');
+                themeToggleDarkIcon.classList.remove('hidden');
+                requestAnimationFrame(() => {
+                     const lightBg = getComputedStyle(document.documentElement).getPropertyValue('--light-bg').trim();
+                    document.querySelector('meta[name="theme-color"]:not([media])').setAttribute('content', lightBg);
+                });
+            }
+            requestAnimationFrame(() => {
+                 document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--light-bg').trim();
+            });
+        }
+        function toggleTheme() {
+            const isDark = document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            applyTheme(isDark);
+        }
+        function initializeTheme() {
+            const storedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            applyTheme(storedTheme === 'dark' || (!storedTheme && prefersDark));
+        }
+        initializeTheme();
+        themeToggleBtn.addEventListener('click', toggleTheme);
+        // --- End Theme Toggle ---
+
+        // --- API Communication Wrapper ---
+        async function apiRequest(endpoint, options = {}) {
+            try {
+                const response = await fetch(endpoint, options);
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ message: response.statusText }));
+                    throw new Error(errorData.error || errorData.message || `HTTP Error ${response.status}`);
+                }
+                if (response.status === 204 || response.headers.get("content-length") === "0") {
+                    return null; // Handle No Content responses
+                }
+                return await response.json();
+            } catch (error) {
+                console.error(`API Request Error for ${endpoint}:`, error);
+                errorMsg.textContent = `Error: ${error.message}`; // Display error to user
+                throw error; // Re-throw for calling function to handle if needed
+            }
+        }
+
+        async function fetchAndRenderUrls() {
+            try {
+                const dataFromServer = await apiRequest('/api/urls');
+                monitoredUrlsCache = dataFromServer || []; // API might return empty list or null
+                renderUrlListUI();
+            } catch (e) {
+                // Error already logged by apiRequest and potentially shown in errorMsg
+                // Optionally, render a more specific error state for the list
+                urlList.innerHTML = `<p class="italic" style="color: var(--text-light-muted);">Could not load URLs. Server may be down.</p>`;
+            }
+        }
+        
+        // --- Uptime and History Bar Calculation (for UI) ---
+        function getDisplayMetrics(backendHistoryArray) {
+            const historyForDisplay = (backendHistoryArray || []).map(h => ({ ...h, timestamp: h.timestamp * 1000 })); // Convert backend sec to ms
+            
+            const cutoffTimeMs = Date.now() - HISTORY_DURATION_MS_FOR_DISPLAY;
+            const relevantHistory = historyForDisplay.filter(entry => entry.timestamp >= cutoffTimeMs);
+
+            if (relevantHistory.length === 0) return { percentage: 'N/A', points: [] };
+
+            const okCount = relevantHistory.filter(entry => entry.status === 'ok').length;
+            const uptimePercent = Math.round((okCount / relevantHistory.length) * 100);
+            // Newest history points first for the bar rendering logic (flex-direction: row-reverse)
+            const historyBarPoints = relevantHistory.slice(-MAX_HISTORY_POINTS_FOR_DISPLAY).map(entry => entry.status).reverse();
+
+            return { percentage: `${uptimePercent}%`, points: historyBarPoints };
+        }
+
+        // --- UI Rendering Logic ---
+        function createUrlItemDOM(urlData) {
+             const itemDiv = document.createElement('div');
+             itemDiv.className = 'neumorphic-outset-sm p-4 mb-4 last:mb-0 url-item';
+             itemDiv.dataset.id = urlData.id;
+
+             let statusIndicatorDOM;
+             if (urlData.status === 'checking') {
+                 statusIndicatorDOM = '<span class="loader" title="Checking..."></span>';
+             } else {
+                 const statusClass = urlData.status === 'ok' ? 'status-ok' : (urlData.status === 'error' ? 'status-error' : 'status-pending');
+                 const statusTitle = urlData.status === 'ok' ? 'Reachable' : (urlData.status === 'error' ? 'Error/Unreachable' : 'Pending');
+                 statusIndicatorDOM = `<span class="status-dot ${statusClass}" title="${statusTitle}"></span>`;
+             }
+
+             const respTimeStr = urlData.responseTime !== null ? `${urlData.responseTime} ms` : 'N/A';
+             const lastCheckStr = urlData.lastChecked ? `Last check: ${new Date(urlData.lastChecked).toLocaleString()}` : 'Not checked';
+             const { percentage: uptimeStr, points: historyBarData } = getDisplayMetrics(urlData.history);
+
+             let historyBarDOM = `<div class="history-bar" title="Recent History (Newest Left)">`;
+              historyBarData.forEach(status => {
+                 const historyClass = status === 'ok' ? 'history-ok' : 'history-error';
+                 historyBarDOM += `<div class="history-point ${historyClass}"></div>`;
+             });
+              historyBarDOM += '</div>';
+
+             const trashIcon = `
+                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                   <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                 </svg>`;
+
+             itemDiv.innerHTML = `
+                 <div class="flex items-start justify-between space-x-3">
+                     <div class="flex items-start space-x-3 flex-grow min-w-0">
+                         ${statusIndicatorDOM}
+                         <div class="min-w-0">
+                             <p class="font-medium truncate text-sm" title="${urlData.url}" style="color: var(--text-light);">${urlData.url}</p>
+                             <p class="text-xs mt-1" style="color: var(--text-light-muted);">
+                                 IP: ${urlData.ip || 'N/A'} | Resp: ${respTimeStr} | Uptime (1h): ${uptimeStr}
+                             </p>
+                              <p class="text-xs mt-0.5" style="color: var(--text-light-muted);">${lastCheckStr}</p>
+                         </div>
+                     </div>
+                     <button class="removeUrlBtn flex-shrink-0 neumorphic-outset-sm neumorphic-outset-hover neumorphic-outset-active p-1.5 focus:outline-none" title="Stop Monitoring">
+                        ${trashIcon}
+                     </button>
+                 </div>
+                 ${historyBarDOM}`;
+
+             itemDiv.querySelector('.removeUrlBtn').addEventListener('click', (e) => {
+                 e.stopPropagation();
+                 handleRemoveUrl(urlData.id);
+             });
+             return itemDiv;
+        }
+
+        function renderUrlListUI() {
+            urlList.innerHTML = ''; // Clear current list
+            if (monitoredUrlsCache.length === 0) {
+                urlList.innerHTML = `<p class="italic" style="color: var(--text-light-muted);">No URLs being monitored. Add one to begin.</p>`;
+                return;
+            }
+            monitoredUrlsCache.forEach(urlData => {
+                const urlItemElement = createUrlItemDOM(urlData);
+                urlList.appendChild(urlItemElement);
+            });
+        }
+
+        // --- Event Handlers ---
+        async function handleAddUrl() {
+            let urlToAdd = urlInput.value.trim();
+            errorMsg.textContent = ''; // Clear previous errors
+
+            if (!urlToAdd) {
+                errorMsg.textContent = 'Please enter a URL.'; return;
+            }
+            if (!urlToAdd.startsWith('http://') && !urlToAdd.startsWith('https://')) {
+                urlToAdd = 'https://' + urlToAdd; // Default to https
+            }
+            try {
+                new URL(urlToAdd); // Basic client-side format validation
+            } catch (_) {
+                errorMsg.textContent = 'Invalid URL format.'; return;
+            }
+
+            // Optimistic client-side duplicate check (backend does final validation)
+            const normalizedUrl = urlToAdd.replace(/\/+$/, '').toLowerCase();
+            if (monitoredUrlsCache.some(u => u.url.replace(/\/+$/, '').toLowerCase() === normalizedUrl)) {
+                errorMsg.textContent = 'This URL appears to be already monitored.'; return;
+            }
+
+            addUrlBtn.disabled = true; addUrlBtn.textContent = '...'; urlInput.disabled = true;
+
+            try {
+                await apiRequest('/api/urls', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ url: urlToAdd })
+                });
+                urlInput.value = ''; // Clear input on success
+                await fetchAndRenderUrls(); // Refresh list to show the newly added URL
+            } catch (e) {
+                // apiRequest already displayed the error in errorMsg
+            } finally {
+                addUrlBtn.disabled = false; addUrlBtn.textContent = 'Add'; urlInput.disabled = false;
+            }
+        }
+
+        async function handleRemoveUrl(urlIdToRemove) {
+            // Optional: add a confirm() dialog here
+            // if (!confirm(`Are you sure you want to remove this URL?`)) return;
+            try {
+                await apiRequest(`/api/urls/${urlIdToRemove}`, { method: 'DELETE' });
+                // Remove from local cache and re-render for immediate UI update
+                monitoredUrlsCache = monitoredUrlsCache.filter(url => url.id !== urlIdToRemove);
+                renderUrlListUI();
+            } catch (e) {
+                // apiRequest already displayed the error
+            }
+        }
+
+        function setupPeriodicDataRefresh() {
+            setInterval(fetchAndRenderUrls, UI_REFRESH_INTERVAL_MS);
+        }
+
+        // --- Initialization ---
+        addUrlBtn.addEventListener('click', handleAddUrl);
+        urlInput.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') { event.preventDefault(); handleAddUrl(); }
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            fetchAndRenderUrls();    // Initial data load
+            setupPeriodicDataRefresh(); // Start refreshing data from backend
+        });
+    </script>
+</body>
+</html>