diff --git a/.gitignore b/.gitignore
index fe26a87..e6b49eb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ __pycache__/
# Local AI tool config (contains internal hostnames)
opencode.json
opencode.json.pwenv
+PLAN.md
# Playwright MCP artifacts
.playwright-mcp/
diff --git a/restart-services.sh b/restart-services.sh
index f296481..6cb1e6b 100755
--- a/restart-services.sh
+++ b/restart-services.sh
@@ -4,6 +4,7 @@ systemctl restart nginx
systemctl restart vacuum-wall
systemctl restart vacuum-walld
+systemctl status nginx
systemctl status vacuum-wall
systemctl status vacuum-walld
diff --git a/webui/server.py b/webui/server.py
index 4b6fb33..617aefd 100644
--- a/webui/server.py
+++ b/webui/server.py
@@ -197,7 +197,7 @@ def spa_page(path=""):
scheme = "wss" if request.is_secure else "ws"
ws_url = f"{scheme}://{request.host}/ws"
html = (SPA_DIR / "index.html").read_text()
- return html.replace("__WS_URL__", ws_url)
+ return html.replace("__WS_URL_PLACEHOLDER__", ws_url)
if __name__ == "__main__":
diff --git a/webui/static/app.js b/webui/static/app.js
index f426c9e..fdd34a3 100644
--- a/webui/static/app.js
+++ b/webui/static/app.js
@@ -55,7 +55,7 @@ window.addEventListener('hashchange', () => {
router.state.path = location.hash.slice(1) || '/dashboard';
});
-/* ── Sidebar component ─────────────────────────────────────── */
+/* ── Sidebar render root ───────────────────────────────────── */
function Sidebar() {
const current = router.state.path;
return h('div', { class: 'sidebar' },
@@ -72,29 +72,21 @@ function Sidebar() {
);
}
-/* ── Route component wrapper ───────────────────────────────── */
-function RouteComponent() {
- return router.component();
-}
-
-/* ── App layout ────────────────────────────────────────────── */
-function AppLayout() {
+/* ── Main content render root ──────────────────────────────── */
+function MainContent() {
return [
- h('div', { class: 'layout' },
- Sidebar(),
- h('div', { class: 'main' },
- RouteComponent(),
- ),
- ),
+ router.component(),
ToastContainer(),
];
}
/* ── Init ──────────────────────────────────────────────────── */
export function initApp() {
- const appEl = document.getElementById('app');
- if (appEl) {
- render(appEl, AppLayout);
+ const sidebarEl = document.getElementById('sidebar');
+ const mainEl = document.getElementById('main');
+ if (sidebarEl && mainEl) {
+ render(sidebarEl, Sidebar);
+ render(mainEl, MainContent);
}
// Defer connect() after the first render microtask settles to prevent
// the initial requestUpdate() from triggering a second commit while
diff --git a/webui/static/hoover/api.js b/webui/static/hoover/api.js
index 32b4f6e..5cd06d1 100644
--- a/webui/static/hoover/api.js
+++ b/webui/static/hoover/api.js
@@ -29,6 +29,9 @@ export async function apiFetch(url, options = {}) {
try {
const res = await fetch(url, { method, headers, body: options.body, credentials: 'same-origin', ...opts });
+ if (opts.signal?.aborted) {
+ return { ok: false, data: null, error: 'Aborted', status: 0 };
+ }
if (res.status === 401) {
window.location.reload();
return { ok: false, data: null, error: 'Session expired', status: 401 };
diff --git a/webui/static/hoover/component.js b/webui/static/hoover/component.js
index 056b1ed..073e257 100644
--- a/webui/static/hoover/component.js
+++ b/webui/static/hoover/component.js
@@ -20,13 +20,19 @@ import { reactive } from './reactivity.js';
import { h } from './vdom.js';
import { _compExpandedCache } from './render.js';
-/**
- * Registry of mounted components: key → { state, subscriptions, loadAbort, entry }
- */
+/** Registry of mounted components: key → { state, subscriptions, loadAbort, entry, isLoading } */
const _mounted = new Map();
-/**
- * External subscribe function from websocket.js.
+/** Check whether a state object belongs to a currently mounted component.
+ * Used by websocket.js to skip auto-refresh for unmounted pages. */
+export function isComponentStateMounted(state) {
+ for (const entry of _mounted.values()) {
+ if (entry.state === state) return true;
+ }
+ return false;
+}
+
+/** External subscribe function from websocket.js.
* Set via setSubscribeFn() when the websocket module initializes.
*/
let _subscribeFn = null;
@@ -67,29 +73,45 @@ export function definePage(def) {
* enters the tree for the first time.
*/
export function mountComponent(key, renderer) {
- // Prevent duplicate mounts when normalization loses #comp tracking
- if (_mounted.has(key)) return;
-
const pd = renderer._pageDef;
if (!pd) return;
- const entry = {
- state: pd.state,
- subscriptions: [],
- loadAbort: null,
- };
+ let entry = _mounted.get(key);
- _mounted.set(key, entry);
+ if (entry) {
+ // Re-mount of an already-mounted page: restart load with fresh AbortController
+ if (entry.loadAbort) {
+ entry.loadAbort.abort();
+ }
+ entry.requestId++;
+ entry.loadAbort = null;
+ } else {
+ // Fresh mount
+ entry = {
+ state: pd.state,
+ subscriptions: [],
+ loadAbort: null,
+ requestId: 0,
+ };
+ _mounted.set(key, entry);
+ }
- // Fire load
+ // Clear error on re-mount; load() decides loading vs refreshing
+ pd.state.error = null;
+
+ // Fire load with fresh AbortController
if (pd.load) {
const abortController = new AbortController();
entry.loadAbort = abortController;
- pd.load(pd.state, abortController);
+ entry.requestId++;
+ entry.isLoading = true;
+ Promise.resolve()
+ .then(() => pd.load(pd.state, abortController, entry))
+ .finally(() => { entry.isLoading = false; });
}
- // Register WS subscriptions
- if (_subscribeFn && pd.subscribe.length) {
+ // Register WS subscriptions (only on fresh mount)
+ if (!entry.subscriptions.length && _subscribeFn && pd.subscribe.length) {
for (const topic of pd.subscribe) {
const unsub = _subscribeFn(renderer, topic, pd.load, pd.state);
if (unsub) entry.subscriptions.push(unsub);
@@ -111,6 +133,8 @@ export function unmountComponent(key, renderer) {
if (entry.loadAbort) {
entry.loadAbort.abort();
}
+ // Invalidate any in-flight callbacks
+ entry.requestId++;
// Unsubscribe from WS
for (const unsub of entry.subscriptions) {
diff --git a/webui/static/hoover/render.js b/webui/static/hoover/render.js
index 8bb0cf4..22839b2 100644
--- a/webui/static/hoover/render.js
+++ b/webui/static/hoover/render.js
@@ -218,7 +218,11 @@ function diffContainer(container, prev, vnodes) {
if (oldDom?.nodeType === Node.ELEMENT_NODE) sweepDom(oldDom);
const nd = createDom(newV);
_vnodeDom.set(newV, nd);
- if (oldDom?.parentNode) oldDom.parentNode.replaceChild(nd, oldDom);
+ if (oldDom?.parentNode) {
+ oldDom.parentNode.replaceChild(nd, oldDom);
+ } else if (nd.parentNode !== container) {
+ container.insertBefore(nd, lastDom ? lastDom.nextSibling : null);
+ }
lastDom = nd;
}
}
diff --git a/webui/static/hoover/websocket.js b/webui/static/hoover/websocket.js
index 7049109..eb8b518 100644
--- a/webui/static/hoover/websocket.js
+++ b/webui/static/hoover/websocket.js
@@ -8,7 +8,7 @@
* auto-refresh messages from the backend can trigger page reloads.
*/
-import { setSubscribeFn } from './component.js';
+import { setSubscribeFn, isComponentStateMounted } from './component.js';
const _wsSubs = new Map();
let _wsConn = null;
@@ -74,7 +74,7 @@ function handleMessage(msg) {
}
for (const s of _wsSubs.values()) {
- if (s.unsubscribed) continue;
+ if (s.unsubscribed || !isComponentStateMounted(s.state)) continue;
if (s.topic === '*') {
s.loadFn(s.state);
} else if (topics.some(t => t === s.topic || t === '*')) {
diff --git a/webui/static/index.html b/webui/static/index.html
index 8f766db..1c755dc 100644
--- a/webui/static/index.html
+++ b/webui/static/index.html
@@ -7,8 +7,13 @@
-
-
+
+