fix htmx refactor route mismatches and remaining TODO items

- wireguard: POST /peers with JSON encoding (was /add-peer)
- rules: delete by rule_id in URL path (was JSON body); pass rule objects with id from server; add hx-disable to initial render
- nat: port forward delete uses URL path params to match blueprint
- nat: masquerade toggle uses native hx-post/hx-vals (was inline fetch)
- app.js renderers updated to use URL path deletes for rules and forwards
- remove TODO.md

webui/templates/base.html

@@ -592,57 +592,6 @@
     <div class="toast-container" id="toast-container"></div>
 
     <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <script>
-        function showToast(message, type, duration) {
-            duration = duration || 4000;
-            var container = document.getElementById('toast-container');
-            if (!container) return;
-            var toast = document.createElement('div');
-            toast.className = 'toast toast-' + type;
-            toast.textContent = message;
-            container.appendChild(toast);
-            requestAnimationFrame(function() { toast.classList.add('show'); });
-            setTimeout(function() {
-                toast.classList.remove('show');
-                setTimeout(function() { toast.remove(); }, 300);
-            }, duration);
-        }
-
-        function openModal(id) {
-            var el = document.getElementById(id);
-            if (el) el.classList.add('active');
-        }
-
-        function closeModal(id) {
-            var el = document.getElementById(id);
-            if (el) el.classList.remove('active');
-        }
-
-        function switchTab(tabName) {
-            document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.remove('active'); });
-            document.querySelectorAll('.tab').forEach(function(el) { el.classList.remove('active'); });
-            document.getElementById('tab-' + tabName).classList.add('active');
-            var clickedTab = document.querySelector('.tab[data-tab="' + tabName + '"]');
-            if (clickedTab) clickedTab.classList.add('active');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.querySelectorAll('.htmx-on-success').forEach(function(el) {
-                var msg = el.getAttribute('data-success') || 'Operation successful';
-                var type = el.getAttribute('data-type') || 'success';
-                el.addEventListener('htmx:afterRequest', function(evt) {
-                    if (evt.detail && evt.detail.successful) {
-                        showToast(msg, type);
-                    }
-                });
-            });
-        });
-
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape') {
-                document.querySelectorAll('.modal-overlay.active').forEach(function(el) { el.classList.remove('active'); });
-            }
-        });
-    </script>
+    <script src="/static/app.js"></script>
 </body>
 </html>

webui/templates/certs.html

@@ -21,7 +21,7 @@
                 <th style="width:120px;">Actions</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="cert-rows">
             {% for cert in (certs or []) %}
             <tr>
                 <td><strong>{{ cert.get('domain', 'unknown') }}</strong></td>
@@ -38,7 +38,7 @@
                     {% endif %}
                 </td>
                 <td>
-                    <form hx-post="/api/certs/renew/{{ cert.get('domain', '') }}" hx-swap="none" class="htmx-on-success" data-success="Renewal started for {{ cert.domain }}" onsuccess="setTimeout(function(){ location.reload(); }, 2000);">
+                    <form hx-post="/api/certs/{{ cert.get('domain', '') }}/renew" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/certs/list', document.getElementById('cert-rows'), renderCerts); showSuccessToast('Renewal started for {{ cert.domain }}'); }">
                         <button type="submit" class="btn btn-sm btn-outline">Renew</button>
                     </form>
                 </td>
@@ -57,7 +57,7 @@
 <div class="modal-overlay" id="issue-cert-modal" onclick="if(event.target===this) closeModal('issue-cert-modal')">
     <div class="modal">
         <h2>Issue New Certificate</h2>
-        <form hx-post="/api/certs/issue" hx-swap="none" class="htmx-on-success" data-success="Certificate issuance started" onsuccess="setTimeout(function(){closeModal('issue-cert-modal'); location.reload();}, 500);">
+                <form hx-post="/api/certs/issue" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ closeModal('issue-cert-modal'); refreshTable('/api/certs/list', document.getElementById('cert-rows'), renderCerts); showSuccessToast('Certificate issuance started'); }">
             <div class="form-group">
                 <label for="cert-domain">Domain</label>
                 <input type="text" id="cert-domain" name="domain" placeholder="example.com" required>

webui/templates/dhcp.html

@@ -13,7 +13,7 @@
 <div class="section-title">DHCP Ranges</div>
 
 <div class="card mb-4">
-    <form hx-post="/api/dhcp/ranges" hx-swap="none" class="htmx-on-success" data-success="DHCP range added" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
+    <form hx-post="/api/dhcp/ranges" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/dhcp/config', document.getElementById('range-rows'), renderRanges); showSuccessToast('DHCP range added'); }">
         <div class="inline-form">
             <div class="form-group">
                 <label for="range-interface">Interface</label>
@@ -50,7 +50,7 @@
                     <th style="width:80px;">Action</th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody id="range-rows">
                 {% for rng in ((config or {}).get('dhcp_ranges', []) or []) %}
                 <tr>
                     <td>{{ rng.get('interface', '(global)') }}</td>
@@ -58,8 +58,8 @@
                     <td>{{ rng.get('end', '') }}</td>
                     <td>{{ rng.get('lease_time', '1h') }}</td>
                     <td>
-                        <form hx-delete="/api/dhcp/ranges/{{ rng.get('start', '') }}/{{ rng.get('end', '') }}" hx-swap="none" class="htmx-on-success" data-success="Range removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove this range?')">Remove</button>
+                         <form hx-delete="/api/dhcp/ranges" hx-encoding="json" hx-vals='{"interface": "{{ rng.get("interface", "") }}", "start": "{{ rng.get("start", "") }}", "end": "{{ rng.get("end", "") }}" }' hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/dhcp/config', document.getElementById('range-rows'), renderRanges); showSuccessToast('Range removed'); }">
+                            <button type="submit" class="btn btn-sm btn-danger" hx-confirm="Remove DHCP range {{ rng.get('start', '') }} - {{ rng.get('end', '') }}?">Remove</button>
                         </form>
                     </td>
                 </tr>
@@ -78,7 +78,7 @@
 <div class="section-title">Static Leases</div>
 
 <div class="card mb-4">
-    <form hx-post="/api/dhcp/leases/static" hx-swap="none" class="htmx-on-success" data-success="Static lease added" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
+    <form hx-post="/api/dhcp/static-lease" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/dhcp/config', document.getElementById('lease-rows'), renderStaticLeases); showSuccessToast('Static lease added'); }">
         <div class="inline-form">
             <div class="form-group">
                 <label for="lease-mac">MAC Address</label>
@@ -105,15 +105,15 @@
                     <th style="width:80px;">Action</th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody id="lease-rows">
                 {% for lease in ((config or {}).get('static_leases', []) or []) %}
                 <tr>
                     <td>{{ lease.get('mac', '') }}</td>
                     <td>{{ lease.get('ip', '') }}</td>
                     <td>{{ lease.get('hostname', '-') }}</td>
                     <td>
-                        <form hx-delete="/api/dhcp/leases/static/{{ lease.get('mac', '') }}" hx-swap="none" class="htmx-on-success" data-success="Lease removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove this lease?')">Remove</button>
+                          <form hx-delete="/api/dhcp/static-lease/{{ lease.get('mac', '') }}" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/dhcp/config', document.getElementById('lease-rows'), renderStaticLeases); showSuccessToast('Lease removed'); }">
+                            <button type="submit" class="btn btn-sm btn-danger" hx-confirm="Remove lease {{ lease.get('mac', '') }}?">Remove</button>
                         </form>
                     </td>
                 </tr>
@@ -132,15 +132,15 @@
 <div class="section-title">Custom DNS Records</div>
 
 <div class="card mb-4">
-    <form hx-post="/api/dhcp/dns/records" hx-swap="none" class="htmx-on-success" data-success="DNS record added" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
+    <form hx-post="/api/dhcp/dns-record" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/dhcp/config', document.getElementById('dns-rows'), renderDnsRecords); showSuccessToast('DNS record added'); }">
         <div class="inline-form">
             <div class="form-group">
                 <label for="dns-ip">IP Address</label>
-                <input type="text" id="dns-ip" name="ip" placeholder="192.168.1.10" required style="width:160px;">
+                <input type="text" id="dns-ip" name="address" placeholder="192.168.1.10" required style="width:160px;">
             </div>
             <div class="form-group">
                 <label for="dns-hostname">Hostname / Domain</label>
-                <input type="text" id="dns-hostname" name="hostname" placeholder="host.local" required style="width:200px;">
+                <input type="text" id="dns-hostname" name="name" placeholder="host.local" required style="width:200px;">
             </div>
             <button type="submit" class="btn btn-primary">Add Record</button>
         </div>
@@ -149,19 +149,19 @@
         <table>
             <thead>
                 <tr>
-                    <th>IP</th>
-                    <th>Hostname</th>
+                    <th>Name</th>
+                    <th>Address</th>
                     <th style="width:80px;">Action</th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody id="dns-rows">
                 {% for rec in ((config or {}).get('dns_records', []) or []) %}
                 <tr>
-                    <td>{{ rec.get('ip', '') }}</td>
-                    <td>{{ rec.get('hostname', '') }}</td>
-                    <td>
-                        <form hx-delete="/api/dhcp/dns/records/{{ rec.get('ip', '') }}/{{ rec.get('hostname', '') }}" hx-swap="none" class="htmx-on-success" data-success="Record removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove this record?')">Remove</button>
+                    <td><strong>{{ rec.get('name', 'unnamed') }}</strong></td>
+                <td class="text-sm">{{ rec.get('address', '-') }}</td>
+                <td>
+                          <form hx-delete="/api/dhcp/dns-record/{{ rec.get('name', '') }}" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/dhcp/config', document.getElementById('dns-rows'), renderDnsRecords); showSuccessToast('Record removed'); }">
+                            <button type="submit" class="btn btn-sm btn-danger" hx-confirm="Remove DNS record {{ rec.get('name', '') }}?">Remove</button>
                         </form>
                     </td>
                 </tr>
@@ -208,7 +208,7 @@
         </tbody>
     </table>
     <div class="mt-2 text-right">
-        <button class="btn btn-sm btn-outline" hx-post="/api/dhcp/reload" hx-swap="none" class="htmx-on-success" data-success="Dnsmasq configuration reloaded">Apply &amp; Restart Dnsmasq</button>
+        <button class="btn btn-sm btn-outline" hx-post="/api/dhcp/apply" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ showSuccessToast('Dnsmasq configuration reloaded'); }">Apply &amp; Restart Dnsmasq</button>
     </div>
 </div>
 {% endblock %}

webui/templates/interfaces.html

@@ -18,10 +18,9 @@
                 <th>IP Address</th>
                 <th>State</th>
                 <th>Zone</th>
-                <th>Action</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="interface-list">
             {% for iface in (interfaces or []) %}
             <tr>
                 <td><strong>{{ iface.get('name', 'unknown') }}</strong></td>
@@ -39,12 +38,7 @@
                 <td>
                     {% if zones %}
                     <select
-                        class="htmx-on-success"
-                        data-success="Zone updated for {{ iface.name }}"
-                        hx-post="/api/firewall/zones/__ZONE__/interfaces/{{ iface.name }}"
-                        hx-swap="none"
-                        hx-select-oob="#toast-container *"
-                        onchange="assignInterfaceToZone(this, '{{ iface.name }}', '{{ iface.get('zone', '') }}')"
+                        hx-on::change="fetch('/api/firewall/zones/'+encodeURIComponent(this.value)+'/interfaces',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({interfaces:['{{ iface.name }}']})}).then(r=>{if(!r.ok)throw r}).then(r=>r.ok?(showSuccessToast('{{ iface.name }} assigned to '+this.value),refreshTable('/api/firewall/interfaces',document.getElementById('interface-list'),renderInterfaces)):r.json().then(j=>{throw new Error(j.error||r.statusText)})).catch(e=>{showErrorToast(e.message);this.selectedIndex=0})"
                     >
                         {% for zone in zones %}
                         <option value="{{ zone.get('name', '') }}" {% if zone.get('name') == iface.get('zone') %}selected{% endif %}>{{ zone.get('name', '') }}</option>
@@ -54,9 +48,6 @@
                     <span class="text-muted">No zones configured</span>
                     {% endif %}
                 </td>
-                <td>
-                    <button class="btn btn-sm btn-outline" onclick="assignInterfaceToZone(this.previousElementSibling, '{{ iface.name }}', null)">Apply</button>
-                </td>
             </tr>
             {% endfor %}
             {% if not (interfaces or []) %}
@@ -67,22 +58,4 @@
         </tbody>
     </table>
 </div>
-
-<script>
-function assignInterfaceToZone(selectEl, ifaceName, currentZone) {
-    var zoneName = selectEl.value;
-    var url = '/api/firewall/zones/' + encodeURIComponent(zoneName) + '/interfaces/' + encodeURIComponent(ifaceName);
-    fetch(url, { method: 'POST' })
-        .then(function(res) {
-            if (res.ok) {
-                showToast('Assigned ' + ifaceName + ' to zone ' + zoneName, 'success');
-            } else {
-                return res.text().then(function(txt) { throw new Error(txt); });
-            }
-        })
-        .catch(function(err) {
-            showToast('Failed to assign: ' + err.message, 'error');
-        });
-}
-</script>
 {% endblock %}

webui/templates/logs.html

@@ -13,9 +13,7 @@
             <input type="checkbox" id="auto-refresh-toggle" onchange="toggleAutoRefresh()">
             <span class="slider"></span>
         </label>
-        <span class="htmx-indicator text-sm" style="color:var(--accent);">
-            <span id="refresh-indicator" style="display:none;">Refreshing...</span>
-        </span>
+        <span class="htmx-indicator text-sm" style="color:var(--accent);">Refreshing...</span>
     </div>
 </div>
 
@@ -24,15 +22,16 @@
     <button class="tab" data-tab="nginx-access" onclick="switchTab('nginx-access')">Nginx Access</button>
     <button class="tab" data-tab="nginx-error" onclick="switchTab('nginx-error')">Nginx Error</button>
     <button class="tab" data-tab="dnsmasq" onclick="switchTab('dnsmasq')">Dnsmasq</button>
+    <button class="tab" data-tab="app" onclick="switchTab('app')">App</button>
 </div>
 
 <div id="tab-journal" class="tab-content active">
     <div class="card" style="padding:0;overflow:hidden;">
         <div class="log-viewer" id="log-journal"
-             hx-get="/api/logs/journal"
-             hx-trigger="every {{ (refresh_interval | default(15)) }}s"
-             hx-swap="innerHTML"
-             hx-indicator="#refresh-indicator">
+              hx-get="/api/logs/journal"
+              hx-trigger="none"
+              hx-swap="innerHTML"
+              hx-indicator=".page-header .htmx-indicator">
             Loading journal entries...
         </div>
     </div>
@@ -41,10 +40,10 @@
 <div id="tab-nginx-access" class="tab-content">
     <div class="card" style="padding:0;overflow:hidden;">
         <div class="log-viewer" id="log-nginx-access"
-             hx-get="/api/logs/nginx/access"
-             hx-trigger="every {{ (refresh_interval | default(15)) }}s"
-             hx-swap="innerHTML"
-             hx-indicator="#refresh-indicator">
+              hx-get="/api/logs/nginx/access"
+              hx-trigger="none"
+              hx-swap="innerHTML"
+              hx-indicator=".page-header .htmx-indicator">
             Loading Nginx access log...
         </div>
     </div>
@@ -53,10 +52,10 @@
 <div id="tab-nginx-error" class="tab-content">
     <div class="card" style="padding:0;overflow:hidden;">
         <div class="log-viewer" id="log-nginx-error"
-             hx-get="/api/logs/nginx/error"
-             hx-trigger="every {{ (refresh_interval | default(15)) }}s"
-             hx-swap="innerHTML"
-             hx-indicator="#refresh-indicator">
+              hx-get="/api/logs/nginx/error"
+              hx-trigger="none"
+              hx-swap="innerHTML"
+              hx-indicator=".page-header .htmx-indicator">
             Loading Nginx error log...
         </div>
     </div>
@@ -65,42 +64,76 @@
 <div id="tab-dnsmasq" class="tab-content">
     <div class="card" style="padding:0;overflow:hidden;">
         <div class="log-viewer" id="log-dnsmasq"
-             hx-get="/api/logs/dnsmasq"
-             hx-trigger="every {{ (refresh_interval | default(15)) }}s"
-             hx-swap="innerHTML"
-             hx-indicator="#refresh-indicator">
+              hx-get="/api/logs/dnsmasq"
+              hx-trigger="none"
+              hx-swap="innerHTML"
+              hx-indicator=".page-header .htmx-indicator">
             Loading dnsmasq log...
         </div>
     </div>
 </div>
 
+<div id="tab-app" class="tab-content">
+    <div class="card" style="padding:0;overflow:hidden;">
+        <div class="log-viewer" id="log-app"
+              hx-get="/api/logs/app"
+              hx-trigger="none"
+              hx-swap="innerHTML"
+              hx-indicator=".page-header .htmx-indicator">
+            Loading app log...
+        </div>
+    </div>
+</div>
+
 <script>
-var autoRefreshTimer = null;
+var refreshInterval = {{ (refresh_interval | default(15)) }};
+var currentTab = 'journal';
+
+function setActivePolling() {
+    document.querySelectorAll('.log-viewer').forEach(function(el) {
+        htmx.abort(el);
+        el.setAttribute('hx-trigger', 'none');
+    });
+    var activeEl = document.getElementById('log-' + currentTab);
+    if (activeEl) {
+        activeEl.setAttribute('hx-trigger', 'every ' + refreshInterval + 's');
+    }
+}
+
+function loadActiveTab() {
+    var activeEl = document.getElementById('log-' + currentTab);
+    if (activeEl) {
+        htmx.ajax('GET', activeEl);
+    }
+}
+
+var origSwitchTab = switchTab;
+switchTab = function(tabName) {
+    currentTab = tabName;
+    if (typeof origSwitchTab === 'function') {
+        origSwitchTab(tabName);
+    }
+    if (document.getElementById('auto-refresh-toggle').checked) {
+        setActivePolling();
+    }
+    loadActiveTab();
+};
 
 function toggleAutoRefresh() {
     var toggle = document.getElementById('auto-refresh-toggle');
-    var indicators = document.querySelectorAll('.log-viewer');
-
     if (toggle.checked) {
-        indicators.forEach(function(el) {
-            el.setAttribute('hx-trigger', 'every 15s');
-            hx.trigger(el, 'htmx:refresh');
-        });
+        setActivePolling();
+        loadActiveTab();
     } else {
-        indicators.forEach(function(el) {
-            el.setAttribute('hx-trigger', 'never');
+        document.querySelectorAll('.log-viewer').forEach(function(el) {
+            htmx.abort(el);
+            el.setAttribute('hx-trigger', 'none');
         });
     }
 }
 
-document.addEventListener('htmx:beforeRequest', function(evt) {
-    if (evt.detail && evt.detail.path && evt.detail.path.startsWith('/api/logs')) {
-        document.getElementById('refresh-indicator').style.display = 'inline';
-    }
-});
-
-document.addEventListener('htmx:afterRequest', function(evt) {
-    document.getElementById('refresh-indicator').style.display = 'none';
+document.addEventListener('DOMContentLoaded', function() {
+    loadActiveTab();
 });
 </script>
 {% endblock %}

webui/templates/nat.html

@@ -17,7 +17,6 @@
             <tr>
                 <th>Zone</th>
                 <th style="width:120px;">Masquerade</th>
-                <th style="width:80px;">Action</th>
             </tr>
         </thead>
         <tbody>
@@ -25,21 +24,23 @@
             <tr>
                 <td><strong>{{ zone.get('name', 'unnamed') }}</strong></td>
                 <td>
-                    <label class="switch">
-                        <input type="checkbox"
-                            {% if zone.get('masquerade') %}checked{% endif %}
-                            onchange="toggleMasquerade('{{ zone.get('name', '') }}', this.checked)">
-                        <span class="slider"></span>
-                    </label>
-                </td>
-                <td>
-                    <button class="btn btn-sm btn-primary" onclick="toggleMasquerade('{{ zone.get('name', '') }}', this.previousElementSibling.querySelector('input').checked)">Apply</button>
+                    <form hx-post="/api/firewall/masquerade" hx-encoding="json" hx-vals='{"zone": "{{ zone.get('name', '') }}", "enable": JSON.stringify(this.checked)}' hx-swap="none" hx-on::after-request="if(evt.detail.successful){ showSuccessToast('Masquerade '+(this.checked?'enabled':'disabled')+' for {{ zone.get('name', '') }}') } else { this.checked=!this.checked; }">
+                        <label class="switch">
+                            <input type="checkbox"
+                                {% if zone.get('masquerade') %}checked{% endif %}
+                                id="masq-{{ zone.get('name', '') }}"
+                                hx-trigger="change from:#masq-{{ zone.get('name', '') }}"
+                                disabled>
+                            <span class="slider"></span>
+                        </label>
+                        <button type="submit" style="display:none"></button>
+                    </form>
                 </td>
             </tr>
             {% endfor %}
             {% if not (zones or []) %}
             <tr>
-                <td colspan="3" class="text-muted text-sm">No zones configured</td>
+                <td colspan="2" class="text-muted text-sm">No zones configured</td>
             </tr>
             {% endif %}
         </tbody>
@@ -50,7 +51,7 @@
 
 <div class="card mb-4">
     <h3>Add Forward Rule</h3>
-    <form hx-post="/api/firewall/nat/forward" hx-swap="none" class="htmx-on-success" data-success="Forward rule added" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
+    <form hx-post="/api/firewall/forward-port" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/config', document.getElementById('forward-rows'), renderForwardsFromConfig); showSuccessToast('Forward rule added'); }">
         <div class="inline-form">
             <div class="form-group">
                 <label for="fw-zone">Zone</label>
@@ -63,7 +64,7 @@
             </div>
             <div class="form-group">
                 <label for="fw-protocol">Protocol</label>
-                <select id="fw-protocol" name="protocol">
+                <select id="fw-protocol" name="proto">
                     <option value="tcp">TCP</option>
                     <option value="udp">UDP</option>
                 </select>
@@ -74,11 +75,11 @@
             </div>
             <div class="form-group">
                 <label for="fw-target">Target Address</label>
-                <input type="text" id="fw-target" name="target" placeholder="192.168.1.100" required style="width:160px;">
+                <input type="text" id="fw-target" name="toaddr" placeholder="192.168.1.100" required style="width:160px;">
             </div>
             <div class="form-group">
                 <label for="fw-target-port">Target Port</label>
-                <input type="number" id="fw-target-port" name="target_port" placeholder="80" min="1" max="65535" style="width:90px;">
+                <input type="number" id="fw-target-port" name="toport" placeholder="80" min="1" max="65535" style="width:90px;">
             </div>
             <button type="submit" class="btn btn-primary">Add</button>
         </div>
@@ -97,7 +98,7 @@
                 <th style="width:80px;">Action</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="forward-rows">
             {% set all_forwards = [] %}
             {% for zone in (zones or []) %}
                 {% for fwd in zone.get('forward_ports', []) %}
@@ -112,8 +113,8 @@
                 <td>{{ fwd['to-addr'] }}</td>
                 <td>{{ fwd['to-port'] }}</td>
                 <td>
-                    <form hx-delete="/api/firewall/nat/forward/{{ fwd.zone | urlencode }}/{{ fwd['proxy-protocol'] }}/{{ fwd['to-addr'] }}/{{ fwd['to-port'] }}" hx-swap="none" class="htmx-on-success" data-success="Rule removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove this forward rule?')">Remove</button>
+                    <form hx-delete="/api/firewall/forward-port/{{ fwd.zone }}/{{ fwd.port }}/{{ fwd['proxy-protocol'] }}" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/config', document.getElementById('forward-rows'), renderForwardsFromConfig); showSuccessToast('Rule removed'); }">
+                         <button type="submit" class="btn btn-sm btn-danger" hx-confirm="Remove forward rule {{ fwd.port }}/{{ fwd['proxy-protocol'] }} → {{ fwd['to-addr'] }}:{{ fwd['to-port'] }}?">Remove</button>
                     </form>
                 </td>
             </tr>
@@ -127,25 +128,4 @@
     </table>
 </div>
 
-<script>
-function toggleMasquerade(zoneName, enabled) {
-    var url = '/api/firewall/nat/masquerade/' + encodeURIComponent(zoneName);
-    var body = JSON.stringify({ enable: enabled });
-    fetch(url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: body
-    })
-    .then(function(res) {
-        if (res.ok) {
-            showToast('Masquerade ' + (enabled ? 'enabled' : 'disabled') + ' for ' + zoneName, 'success');
-        } else {
-            return res.text().then(function(t) { throw new Error(t); });
-        }
-    })
-    .catch(function(err) {
-        showToast('Failed: ' + err.message, 'error');
-    });
-}
-</script>
 {% endblock %}

webui/templates/proxy.html

@@ -9,7 +9,7 @@
     </div>
     <div class="flex gap-2">
         <button class="btn btn-primary" onclick="openModal('add-domain-modal')">+ Add Domain</button>
-        <button class="btn btn-outline" hx-post="/api/proxy/reload" hx-swap="none" class="htmx-on-success" data-success="Nginx reloaded">Apply Changes (Reload Nginx)</button>
+        <button class="btn btn-outline" hx-post="/api/proxy/apply" hx-swap="none" hx-on::after-request="if(evt.detail.successful) showSuccessToast('Nginx reloaded')">Apply Changes (Reload Nginx)</button>
     </div>
 </div>
 
@@ -25,7 +25,7 @@
                 <th style="width:140px;">Actions</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="domain-rows">
             {% for domain in (domains or []) %}
             <tr>
                 <td><strong>{{ domain.get('domain', 'unknown') }}</strong></td>
@@ -56,8 +56,8 @@
                 <td>
                     <div class="flex gap-2">
                         <button class="btn btn-sm btn-outline" onclick='openEditDomainModal('{{ domain.get("domain", "") }}', {{ domain | tojson | safe }})'>Edit</button>
-                        <form hx-delete="/api/proxy/domains/{{ domain.get('domain', '') }}" hx-swap="none" class="htmx-on-success" data-success="Domain removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove proxy for {{ domain.domain }}?')">Delete</button>
+                        <form hx-delete="/api/proxy/domains/{{ domain.get('domain', '') }}" hx-swap="none" hx-confirm="Remove proxy for {{ domain.domain }}?" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/proxy/domains', document.getElementById('domain-rows'), renderDomains); showSuccessToast('Domain removed'); }">
+                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                         </form>
                     </div>
                 </td>
@@ -76,7 +76,7 @@
 <div class="modal-overlay" id="add-domain-modal" onclick="if(event.target===this) closeModal('add-domain-modal')">
     <div class="modal">
         <h2>Add Proxy Domain</h2>
-        <form hx-post="/api/proxy/domains" hx-swap="none" class="htmx-on-success" data-success="Domain added" onsuccess="setTimeout(function(){closeModal('add-domain-modal'); location.reload();}, 300);">
+        <form hx-post="/api/proxy/domains" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ closeModal('add-domain-modal'); refreshTable('/api/proxy/domains', document.getElementById('domain-rows'), renderDomains); showSuccessToast('Domain added'); }">
             <div class="form-group">
                 <label for="new-domain">Domain</label>
                 <input type="text" id="new-domain" name="domain" placeholder="example.com" required>
@@ -108,7 +108,7 @@
 <div class="modal-overlay" id="edit-domain-modal" onclick="if(event.target===this) closeModal('edit-domain-modal')">
     <div class="modal">
         <h2>Edit Proxy Domain</h2>
-        <form id="edit-domain-form" hx-swap="none" class="htmx-on-success" data-success="Domain updated" onsuccess="setTimeout(function(){closeModal('edit-domain-modal'); location.reload();}, 300);">
+        <form id="edit-domain-form" hx-post="/api/proxy/domains" hx-swap="none" hx-encoding="json" hx-on::after-request="if(evt.detail.successful){ closeModal('edit-domain-modal'); refreshTable('/api/proxy/domains', document.getElementById('domain-rows'), renderDomains); showSuccessToast('Domain updated'); }">
             <input type="hidden" id="edit-original-domain" name="original_domain">
             <div class="form-group">
                 <label for="edit-domain">Domain</label>
@@ -144,9 +144,6 @@ function openEditDomainModal(domainName, d) {
     document.getElementById('edit-backend-host').value = d.backend_host || '';
     document.getElementById('edit-backend-port').value = d.backend_port || '';
     document.getElementById('edit-protocol').value = d.protocol || 'http';
-    var form = document.getElementById('edit-domain-form');
-    var target = '/api/proxy/domains/' + encodeURIComponent(d.domain);
-    form.setAttribute('hx-put', target);
     openModal('edit-domain-modal');
 }
 </script>

webui/templates/rules.html

@@ -11,7 +11,7 @@
 
 <div class="card mb-4">
     <h3>Add Rule</h3>
-    <form hx-post="/api/firewall/rules" hx-swap="none" class="htmx-on-success" data-success="Rule added" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
+    <form hx-post="/api/firewall/rich-rules" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/config', document.getElementById('rules-container'), renderRules); showSuccessToast('Rule added'); }">
         <div class="inline-form">
             <div class="form-group">
                 <label for="rule-zone">Zone</label>
@@ -34,6 +34,7 @@
     </div>
 </div>
 
+<div id="rules-container">
 {% if rules or False %}
 {% for zone_name, zone_rules in rules.items() %}
 <div class="card">
@@ -49,12 +50,13 @@
         </thead>
         <tbody>
             {% for rule in zone_rules %}
+            {% set rule_obj = rule if rule is mapping else {'id': None, 'rule': rule} %}
             <tr>
                 <td class="text-muted">{{ loop.index }}</td>
-                <td style="font-family:monospace;font-size:12px;word-break:break-all;">{{ rule }}</td>
+                <td hx-disable style="font-family:monospace;font-size:12px;word-break:break-all;">{{ rule_obj.rule }}</td>
                 <td>
-                    <form hx-delete="/api/firewall/rules/{{ zone_name | urlencode }}/{{ loop.index0 }}" hx-swap="none" class="htmx-on-success" data-success="Rule removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove this rule?')">Remove</button>
+                    <form hx-delete="/api/firewall/rich-rules/{{ zone_name | urlencode }}/{{ rule_obj.id }}" hx-swap="none" hx-confirm="Remove rule {{ rule_obj.rule[:50] }}?" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/config', document.getElementById('rules-container'), renderRules); showSuccessToast('Rule removed'); }">
+                        <button type="submit" class="btn btn-sm btn-danger">Remove</button>
                     </form>
                 </td>
             </tr>
@@ -71,6 +73,7 @@
     <div class="text-muted text-sm">No rules loaded. Add rules using the form above, or ensure the zones API is providing rule data.</div>
 </div>
 {% endif %}
+</div>
 
 {% if not (zones or []) %}
 <div class="card" style="border-color:var(--warning);">

webui/templates/wireguard.html

@@ -11,17 +11,13 @@
         <button class="btn {{ 'btn-outline' if (wg_status is defined and wg_status.get('state') == 'up') else 'btn-primary' }}"
                 hx-post="/api/wireguard/down"
                 hx-swap="none"
-                class="htmx-on-success"
-                data-success="Tunnel stopped"
-                onsuccess="setTimeout(function(){ location.reload(); }, 500);">
+                hx-on::after-request="if(evt.detail.successful){ showSuccessToast('Tunnel stopped'); }">
             Stop Tunnel
         </button>
         <button class="btn {{ 'btn-outline' if (wg_status is not defined or wg_status.get('state') != 'up') else 'btn-primary' }}"
-                hx-post="/api/wireguard/up"
+                hx-post="/api/wireguard/apply"
                 hx-swap="none"
-                class="htmx-on-success"
-                data-success="Tunnel started"
-                onsuccess="setTimeout(function(){ location.reload(); }, 500);">
+                hx-on::after-request="if(evt.detail.successful){ showSuccessToast('Tunnel started'); }">
             Start Tunnel
         </button>
     </div>
@@ -51,7 +47,7 @@
 
 <div class="card mb-4">
     <h3>Add Peer</h3>
-    <form hx-post="/api/wireguard/peers" hx-swap="none" class="htmx-on-success" data-success="Peer added" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
+    <form hx-post="/api/wireguard/peers" hx-encoding="json" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/wireguard/peers', document.getElementById('peer-rows'), renderPeers); showSuccessToast('Peer added'); }">
         <div class="inline-form">
             <div class="form-group">
                 <label for="peer-name">Name</label>
@@ -63,7 +59,7 @@
             </div>
             <div class="form-group">
                 <label for="peer-allowed">Allowed IPs</label>
-                <input type="text" id="peer-allowed" name="allowed_ips" placeholder="10.8.0.2/32" value="10.8.0.{% set next = (peers|length + 2) %}{{ next }}/32" required style="width:160px;">
+                <input type="text" id="peer-allowed" name="allowed_ips" placeholder="10.8.0.2/32" value="10.8.0.{% set next = (peers or []|length + 2) %}{{ next }}/32" required style="width:160px;">
             </div>
             <button type="submit" class="btn btn-primary">Add Peer</button>
         </div>
@@ -84,7 +80,7 @@
                 <th style="width:160px;">Actions</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="peer-rows">
             {% for peer in (peers or []) %}
             <tr>
                 <td>
@@ -102,8 +98,8 @@
                 <td>
                     <div class="flex gap-2">
                         <button class="btn btn-sm btn-outline" onclick="downloadPeerConfig('{{ peer.get('name', '') }}')">Config</button>
-                        <form hx-delete="/api/wireguard/peers/{{ peer.get('name', '') | urlencode }}" hx-swap="none" class="htmx-on-success" data-success="Peer removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove peer {{ peer.name }}?')">Remove</button>
+                        <form hx-delete="/api/wireguard/peers/{{ peer.get('name', '') }}" hx-swap="none" hx-confirm="Remove peer {{ peer.get('name', '') }}?" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/wireguard/peers', document.getElementById('peer-rows'), renderPeers); showSuccessToast('Peer removed'); }">
+                            <button type="submit" class="btn btn-sm btn-danger">Remove</button>
                         </form>
                     </div>
                 </td>

webui/templates/zones.html

@@ -10,7 +10,7 @@
     <button class="btn btn-primary" onclick="openModal('create-zone-modal')">+ Create Zone</button>
 </div>
 
-<div class="card-grid">
+<div id="zone-grid" class="card-grid">
     {% for zone in (zones or []) %}
     <div class="card" style="position:relative;">
         <div style="display:flex;justify-content:space-between;align-items:flex-start;">
@@ -45,7 +45,7 @@
         </div>
 
         <div style="display:flex;justify-content:flex-end;gap:6px;margin-top:12px;">
-            <form method="POST" action="/api/firewall/zones/{{ zone.get('name', '') }}/delete" hx-post="/api/firewall/zones/{{ zone.get('name', '') }}/delete" hx-swap="none" onsubmit="return confirm('Delete zone {{ zone.name }}? This will affect traffic to its interfaces.');" class="htmx-on-success" data-success="Zone deleted">
+            <form hx-delete="/api/firewall/zones/{{ zone.get('name', '') }}" hx-swap="none" hx-confirm="Delete zone {{ zone.name }}? This will affect traffic to its interfaces." hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/zones', document.getElementById('zone-grid'), renderZones); showSuccessToast('Zone deleted'); }">
                 <button type="submit" class="btn btn-sm btn-danger">Delete</button>
             </form>
         </div>
@@ -62,7 +62,7 @@
 <div class="modal-overlay" id="create-zone-modal" onclick="if(event.target===this) closeModal('create-zone-modal')">
     <div class="modal">
         <h2>Create Zone</h2>
-        <form hx-post="/api/firewall/zones" hx-swap="none" class="htmx-on-success" data-success="Zone created" onsuccess="setTimeout(function(){closeModal('create-zone-modal');},500); location.reload();">
+        <form hx-post="/api/firewall/zones" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ closeModal('create-zone-modal'); refreshTable('/api/firewall/zones', document.getElementById('zone-grid'), renderZones); showSuccessToast('Zone created'); }">
             <div class="form-group">
                 <label for="zone-name">Zone Name</label>
                 <input type="text" id="zone-name" name="name" placeholder="e.g., trusted, dmz, external" required>