refactor: introduce model layer for centralized data synchronization

Add hoover model.js as a central reactive store per subsystem, replacing
per-component data fetching with a single source of truth.

- Add hoover/model.js with modelRegister, modelFetch, and WS invalidation
- Refactor websocket.js to route messages to model refresh (drop per-component
  subscribe/unsubscribe)
- Simplify component.js by removing WS subscription management
- Add refresh option to apiSubmit, deprecate refactorLoad and checkAbort
- Rewrite all pages to use getModel() instead of inline data fetching
- Bootstrap model registrations in app.js
- Add GET /api/firewall/state endpoint
- Fix restart-services.sh restart order and add service health verification
- Update hoover.md docs with model layer architecture

webui/static/hoover/components/data.js

@@ -4,9 +4,10 @@
  * Data display components: Badge, StatusDot, Empty, Card.
  */
 
-import { h } from '../vdom.js?v=6';
-import { esc } from '../helpers.js?v=6';
-import { apiFetch, toast } from '../api.js?v=6';
+import { h } from '../vdom.js?v=7';
+import { esc } from '../helpers.js?v=7';
+import { apiFetch, toast } from '../api.js?v=7';
+import { modelFetch } from '../model.js?v=7';
 
 /**
  * Colored badge/span.
@@ -62,13 +63,13 @@ export function Card(props = {}) {
 }
 
 /**
- * A Remove button that confirms, deletes via API, toasts, and reloads.
+ * A Remove button that confirms, deletes via API, toasts, and refreshes models.
  *
  * @param {object} props
  * @param {string} props.url       - API DELETE URL
  * @param {string} props.message   - Confirmation prompt text
  * @param {string} [props.success] - Success toast message (default: 'Removed')
- * @param {function} [props.reload] - Function to call on success (e.g., load)
+ * @param {string|string[]} [props.refresh] - Model name(s) to refresh via modelFetch
  * @param {string} [props.label]   - Button text (default: 'Remove')
  * @param {object} [props.body]    - Optional JSON body to send with DELETE
  */
@@ -81,7 +82,10 @@ export function ConfirmDelete(props = {}) {
             const r = await apiFetch(props.url, opts);
             if (r.ok) {
                 toast(props.success || 'Removed', 'success');
-                if (props.reload) await props.reload();
+                if (props.refresh) {
+                    const names = Array.isArray(props.refresh) ? props.refresh : [props.refresh];
+                    names.forEach(n => modelFetch(n));
+                }
             } else {
                 toast(r.error || 'Failed', 'error');
             }
@@ -90,7 +94,7 @@ export function ConfirmDelete(props = {}) {
 
 /**
  * An action button that POSTs to an API endpoint, toasts on result,
- * and optionally reloads state. Supports toggle labels for on/off buttons.
+ * and optionally refreshes models. Supports toggle labels for on/off buttons.
  *
  * @param {object} props
  * @param {string} props.url            - API URL
@@ -102,7 +106,7 @@ export function ConfirmDelete(props = {}) {
  * @param {boolean} [props.condition]   - Toggle condition for labelOn/labelOff
  * @param {string} [props.successMsg]   - Success toast message
  * @param {string} [props.errorType]    - Toast type for errors (default: 'error')
- * @param {function} [props.reload]     - () => Promise, called on success
+ * @param {string|string[]} [props.refresh] - Model name(s) to refresh via modelFetch
  * @param {string} [props.cls]          - Button CSS classes (default: 'btn btn-outline')
  * @param {boolean} [props.disabled]    - Disabled state
  */
@@ -122,7 +126,10 @@ export function ActionButton(props = {}) {
             const resp = await apiFetch(props.url, opts);
             if (resp.ok) {
                 if (props.successMsg) toast(props.successMsg, 'success');
-                if (props.reload) await props.reload();
+                if (props.refresh) {
+                    const names = Array.isArray(props.refresh) ? props.refresh : [props.refresh];
+                    names.forEach(n => modelFetch(n));
+                }
             } else {
                 toast(resp.error || 'Failed', props.errorType || 'error');
             }
@@ -249,7 +256,7 @@ export function ServiceStatus(props = {}) {
  * @param {string} props.removeUrl         - API DELETE URL
  * @param {string} props.removeMessage     - Confirmation prompt text
  * @param {string} [props.removeSuccess]   - Success toast message
- * @param {function} [props.removeReload]  - Reload function
+ * @param {string|string[]} [props.removeRefresh] - Model name(s) to refresh
  * @param {string} [props.removeLabel]     - Delete button label (default: 'Remove')
  * @param {object} [props.removeBody]      - Optional JSON body to send with DELETE
  * @param {string} [props.editCls]         - Override classes for edit button (default: 'btn btn-sm btn-outline')
@@ -265,7 +272,7 @@ export function ActionCell(props = {}) {
             url: props.removeUrl,
             message: props.removeMessage,
             success: props.removeSuccess,
-            reload: props.removeReload,
+            refresh: props.removeRefresh,
             label: props.removeLabel || 'Remove',
             body: props.removeBody,
         }),