From 0ae2fa06a4ff63ab59b01b81917a7f021772806c Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Thu, 24 Sep 2026 23:25:13 +0200
Subject: [PATCH 1/9] fix(control-pane): report a failed live refresh instead
 of discarding it

The 15-second refresh caught every error with `load().catch(() => {})`,
so a control pane that had lost its server kept showing the last
snapshot as if it were current. A failed refresh now shows the error box
with "Live refresh failed. The data below is from <time>." and the
error, and the next successful refresh clears it, as load() already
clears the box.

The new test runs the served page script in a vm with a stand-in for the
browser APIs it uses, fails a refresh, and checks both transitions.

Fixes #3176
---
 scripts/lib/control-pane/ui.js    |  12 +++-
 tests/lib/control-pane-ui.test.js | 110 ++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 tests/lib/control-pane-ui.test.js

diff --git a/scripts/lib/control-pane/ui.js b/scripts/lib/control-pane/ui.js
index f7b0e069d..eb4b0ec0c 100644
--- a/scripts/lib/control-pane/ui.js
+++ b/scripts/lib/control-pane/ui.js
@@ -436,6 +436,15 @@ function renderControlPaneHtml() {
       target.textContent = '';
     }
 
+    // The board keeps the last snapshot on screen, so a failed refresh has to
+    // say that the data is no longer live, and since when.
+    function showRefreshFailure(error) {
+      const since = state.loadedAt
+        ? ' The data below is from ' + state.loadedAt.toLocaleTimeString() + '.'
+        : '';
+      showError('#app', 'Live refresh failed.' + since + '\\n' + formatError(error));
+    }
+
     async function readJsonResponse(response) {
       let payload;
       try {
@@ -642,6 +651,7 @@ function renderControlPaneHtml() {
         ...action,
         executable: snapshot.execution.allowActions && action.executable
       })));
+      state.loadedAt = new Date();
       clearError('#app');
     }
 
@@ -682,7 +692,7 @@ function renderControlPaneHtml() {
     // Live board: refresh on a gentle interval; pause while a prompt/tab is hidden.
     setInterval(() => {
       if (document.hidden) return;
-      load().catch(() => {});
+      load().catch(showRefreshFailure);
     }, 15000);
 
     load().catch(error => showError('#app', error));
diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
new file mode 100644
index 000000000..747228988
--- /dev/null
+++ b/tests/lib/control-pane-ui.test.js
@@ -0,0 +1,110 @@
+/**
+ * Tests for the browser script the local ECC2 control pane serves.
+ */
+
+const assert = require('assert');
+const path = require('path');
+const vm = require('vm');
+
+const { buildControlPaneSnapshot } = require('../../scripts/lib/control-pane/state');
+const { renderControlPaneHtml } = require('../../scripts/lib/control-pane/ui');
+
+async function test(name, fn) {
+  try {
+    await fn();
+    console.log(`  PASS ${name}`);
+    return true;
+  } catch (error) {
+    console.log(`  FAIL ${name}`);
+    console.log(`    Error: ${error.message}`);
+    return false;
+  }
+}
+
+function inlineScript(html) {
+  const start = html.indexOf('<script>') + '<script>'.length;
+  return html.slice(start, html.lastIndexOf('</script>'));
+}
+
+// Runs the page script against a stand-in for the few browser APIs it uses:
+// elements looked up by selector, fetch, and a setInterval whose callback the
+// test fires itself.
+function openPage(snapshot) {
+  const elements = new Map();
+  const element = selector => {
+    if (!elements.has(selector)) {
+      elements.set(selector, {
+        hidden: selector === '#app',
+        textContent: '',
+        innerHTML: '',
+        value: '',
+        dataset: {},
+        addEventListener() {}
+      });
+    }
+    return elements.get(selector);
+  };
+  const page = { online: true, refresh: null, element };
+  vm.runInNewContext(inlineScript(renderControlPaneHtml()), {
+    document: { hidden: false, querySelector: element, querySelectorAll: () => [] },
+    window: { location: { href: 'http://127.0.0.1:8765/' } },
+    URL,
+    Intl,
+    console,
+    fetch: async () => {
+      if (!page.online) throw new TypeError('Failed to fetch');
+      return { ok: true, status: 200, statusText: 'OK', json: async () => snapshot };
+    },
+    setInterval: callback => {
+      page.refresh = callback;
+    }
+  });
+  return page;
+}
+
+const settle = () => new Promise(resolve => setImmediate(resolve));
+
+async function runTests() {
+  console.log('\n=== Testing control-pane UI ===\n');
+
+  let passed = 0;
+  let failed = 0;
+
+  const snapshot = JSON.parse(
+    JSON.stringify(
+      await buildControlPaneSnapshot({
+        dbPath: path.join(__dirname, 'no-such-ecc2.db'),
+        repoRoot: path.join(__dirname, '..', '..'),
+        query: ''
+      })
+    )
+  );
+
+  if (
+    await test('a failed live refresh is reported, and cleared by the next one that succeeds', async () => {
+      const page = openPage(snapshot);
+      await settle();
+      assert.strictEqual(page.element('#app').hidden, true, 'the first load succeeds');
+
+      page.online = false;
+      page.refresh();
+      await settle();
+      const box = page.element('#app');
+      assert.strictEqual(box.hidden, false, 'the failure is shown');
+      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
+      assert.match(box.textContent, /Failed to fetch/);
+
+      page.online = true;
+      page.refresh();
+      await settle();
+      assert.strictEqual(page.element('#app').hidden, true, 'a successful refresh clears it');
+    })
+  )
+    passed++;
+  else failed++;
+
+  console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
+  process.exit(failed > 0 ? 1 : 0);
+}
+
+runTests();

From 10969f587be6f5cf4f67147985899f5e07fb9991 Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 00:07:08 +0200
Subject: [PATCH 2/9] fix(control-pane): keep a superseded refresh failure off
 the board

A live refresh that fails after a newer load has already replaced the
board no longer describes what is shown, so it is only reported while
the data it was meant to replace is still on screen. The time of that
data now includes its date, for a pane left open overnight, and it is
kept in its own binding instead of on the shared state object.
---
 scripts/lib/control-pane/ui.js    | 14 ++++++++----
 tests/lib/control-pane-ui.test.js | 38 ++++++++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/scripts/lib/control-pane/ui.js b/scripts/lib/control-pane/ui.js
index eb4b0ec0c..2d7db4ae2 100644
--- a/scripts/lib/control-pane/ui.js
+++ b/scripts/lib/control-pane/ui.js
@@ -438,9 +438,10 @@ function renderControlPaneHtml() {
 
     // The board keeps the last snapshot on screen, so a failed refresh has to
     // say that the data is no longer live, and since when.
+    let loadedAt = null;
     function showRefreshFailure(error) {
-      const since = state.loadedAt
-        ? ' The data below is from ' + state.loadedAt.toLocaleTimeString() + '.'
+      const since = loadedAt
+        ? ' The data below is from ' + loadedAt.toLocaleString() + '.'
         : '';
       showError('#app', 'Live refresh failed.' + since + '\\n' + formatError(error));
     }
@@ -651,7 +652,7 @@ function renderControlPaneHtml() {
         ...action,
         executable: snapshot.execution.allowActions && action.executable
       })));
-      state.loadedAt = new Date();
+      loadedAt = new Date();
       clearError('#app');
     }
 
@@ -692,7 +693,12 @@ function renderControlPaneHtml() {
     // Live board: refresh on a gentle interval; pause while a prompt/tab is hidden.
     setInterval(() => {
       if (document.hidden) return;
-      load().catch(showRefreshFailure);
+      const shownSince = loadedAt;
+      load().catch(error => {
+        // A load that finished in the meantime already replaced the data this
+        // refresh was for, so its failure no longer describes the board.
+        if (loadedAt === shownSince) showRefreshFailure(error);
+      });
     }, 15000);
 
     load().catch(error => showError('#app', error));
diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index 747228988..6e883c3ad 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -28,7 +28,8 @@ function inlineScript(html) {
 
 // Runs the page script against a stand-in for the few browser APIs it uses:
 // elements looked up by selector, fetch, and a setInterval whose callback the
-// test fires itself.
+// test fires itself. While `hold` is set, a fetch waits in `pending` until the
+// test settles it.
 function openPage(snapshot) {
   const elements = new Map();
   const element = selector => {
@@ -44,17 +45,23 @@ function openPage(snapshot) {
     }
     return elements.get(selector);
   };
-  const page = { online: true, refresh: null, element };
+  const page = { online: true, hold: false, pending: [], refresh: null, element };
   vm.runInNewContext(inlineScript(renderControlPaneHtml()), {
     document: { hidden: false, querySelector: element, querySelectorAll: () => [] },
     window: { location: { href: 'http://127.0.0.1:8765/' } },
     URL,
     Intl,
     console,
-    fetch: async () => {
-      if (!page.online) throw new TypeError('Failed to fetch');
-      return { ok: true, status: 200, statusText: 'OK', json: async () => snapshot };
-    },
+    fetch: () =>
+      new Promise((resolve, reject) => {
+        const reply = {
+          succeed: () => resolve({ ok: true, status: 200, statusText: 'OK', json: async () => snapshot }),
+          fail: () => reject(new TypeError('Failed to fetch'))
+        };
+        if (page.hold) page.pending.push(reply);
+        else if (page.online) reply.succeed();
+        else reply.fail();
+      }),
     setInterval: callback => {
       page.refresh = callback;
     }
@@ -92,6 +99,7 @@ async function runTests() {
       const box = page.element('#app');
       assert.strictEqual(box.hidden, false, 'the failure is shown');
       assert.match(box.textContent, /Live refresh failed\. The data below is from /);
+      assert.ok(box.textContent.includes(String(new Date().getFullYear())), 'the time of the data includes its date');
       assert.match(box.textContent, /Failed to fetch/);
 
       page.online = true;
@@ -103,6 +111,24 @@ async function runTests() {
     passed++;
   else failed++;
 
+  if (
+    await test('a refresh that fails after a newer load succeeded is not reported', async () => {
+      const page = openPage(snapshot);
+      await settle();
+
+      page.hold = true;
+      page.refresh();
+      page.hold = false;
+      page.refresh();
+      await settle();
+      page.pending[0].fail();
+      await settle();
+      assert.strictEqual(page.element('#app').hidden, true, 'the newer data is not marked as stale');
+    })
+  )
+    passed++;
+  else failed++;
+
   console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
   process.exit(failed > 0 ? 1 : 0);
 }

From 9848380309cf8f99f74c2c80b0411e66afee2cb5 Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 02:55:35 +0200
Subject: [PATCH 3/9] fix(control-pane): judge a failed refresh by the loads
 that started after it

A failed refresh was dropped whenever any load finished while it ran.
When two interval refreshes overlapped and the older one succeeded, the
newer one's failure was dropped too, so the board looked live although
its latest refresh had failed.

Loads are now numbered as they start. A failure is dropped only when
the board shows data from a load that started after it.
---
 scripts/lib/control-pane/ui.js    | 19 ++++++++++++++-----
 tests/lib/control-pane-ui.test.js | 20 ++++++++++++++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/scripts/lib/control-pane/ui.js b/scripts/lib/control-pane/ui.js
index 2d7db4ae2..93d608371 100644
--- a/scripts/lib/control-pane/ui.js
+++ b/scripts/lib/control-pane/ui.js
@@ -439,6 +439,10 @@ function renderControlPaneHtml() {
     // The board keeps the last snapshot on screen, so a failed refresh has to
     // say that the data is no longer live, and since when.
     let loadedAt = null;
+    // Loads are numbered as they start, so a failed refresh can tell whether
+    // the board already shows data from a load that started after it.
+    let loadsStarted = 0;
+    let shownLoad = 0;
     function showRefreshFailure(error) {
       const since = loadedAt
         ? ' The data below is from ' + loadedAt.toLocaleString() + '.'
@@ -635,6 +639,7 @@ function renderControlPaneHtml() {
     }
 
     async function load() {
+      const id = ++loadsStarted;
       const url = new URL('/api/snapshot', window.location.href);
       if (state.query) url.searchParams.set('query', state.query);
       const response = await fetch(url);
@@ -653,6 +658,7 @@ function renderControlPaneHtml() {
         executable: snapshot.execution.allowActions && action.executable
       })));
       loadedAt = new Date();
+      shownLoad = id;
       clearError('#app');
     }
 
@@ -693,11 +699,14 @@ function renderControlPaneHtml() {
     // Live board: refresh on a gentle interval; pause while a prompt/tab is hidden.
     setInterval(() => {
       if (document.hidden) return;
-      const shownSince = loadedAt;
-      load().catch(error => {
-        // A load that finished in the meantime already replaced the data this
-        // refresh was for, so its failure no longer describes the board.
-        if (loadedAt === shownSince) showRefreshFailure(error);
+      const refresh = load();
+      // load() numbers itself before its first await.
+      const id = loadsStarted;
+      refresh.catch(error => {
+        // Data from a load that started later is already on the board, so
+        // this failure no longer describes it. An older load that succeeded
+        // in the meantime does not make the board live.
+        if (shownLoad < id) showRefreshFailure(error);
       });
     }, 15000);
 
diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index 6e883c3ad..315c168c7 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -129,6 +129,26 @@ async function runTests() {
     passed++;
   else failed++;
 
+  if (
+    await test('a refresh that fails after an older one succeeded is reported', async () => {
+      const page = openPage(snapshot);
+      await settle();
+
+      page.hold = true;
+      page.refresh();
+      page.refresh();
+      page.pending[0].succeed();
+      await settle();
+      page.pending[1].fail();
+      await settle();
+      const box = page.element('#app');
+      assert.strictEqual(box.hidden, false, 'the latest refresh failed, so the board is not live');
+      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
+    })
+  )
+    passed++;
+  else failed++;
+
   console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
   process.exit(failed > 0 ? 1 : 0);
 }

From 96516aa2474e092b0218f1833c9abe953eac2f99 Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 02:55:35 +0200
Subject: [PATCH 4/9] test(control-pane): give the page a fixed clock

The refresh-failure test looked for the current Gregorian year in a time
the page formats with toLocaleString. A locale with another calendar
shows another year: under th_TH the page prints 2569 and the test
failed. The page now runs on a fixed instant, and the test compares
against toLocaleString of that instant.
---
 tests/lib/control-pane-ui.test.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index 315c168c7..fd6766562 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -26,10 +26,21 @@ function inlineScript(html) {
   return html.slice(start, html.lastIndexOf('</script>'));
 }
 
+// The page's clock. The page shows times with toLocaleString, which follows
+// the locale's calendar (a Thai locale counts Buddhist years), so a test
+// compares against the same call on this instant.
+const NOW = new Date(2026, 8, 25, 10, 30);
+
+class PageDate extends Date {
+  constructor(...args) {
+    super(...(args.length > 0 ? args : [NOW.getTime()]));
+  }
+}
+
 // Runs the page script against a stand-in for the few browser APIs it uses:
-// elements looked up by selector, fetch, and a setInterval whose callback the
-// test fires itself. While `hold` is set, a fetch waits in `pending` until the
-// test settles it.
+// elements looked up by selector, fetch, a fixed clock, and a setInterval
+// whose callback the test fires itself. While `hold` is set, a fetch waits in
+// `pending` until the test settles it.
 function openPage(snapshot) {
   const elements = new Map();
   const element = selector => {
@@ -51,6 +62,7 @@ function openPage(snapshot) {
     window: { location: { href: 'http://127.0.0.1:8765/' } },
     URL,
     Intl,
+    Date: PageDate,
     console,
     fetch: () =>
       new Promise((resolve, reject) => {
@@ -99,7 +111,7 @@ async function runTests() {
       const box = page.element('#app');
       assert.strictEqual(box.hidden, false, 'the failure is shown');
       assert.match(box.textContent, /Live refresh failed\. The data below is from /);
-      assert.ok(box.textContent.includes(String(new Date().getFullYear())), 'the time of the data includes its date');
+      assert.ok(box.textContent.includes(NOW.toLocaleString()), 'the time of the data includes its date');
       assert.match(box.textContent, /Failed to fetch/);
 
       page.online = true;

From 029f850bd0fe89e46253896ad65ce6c737b07970 Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 02:56:33 +0200
Subject: [PATCH 5/9] test(control-pane): pin which load decides a failed
 refresh

With three refreshes in flight, the second succeeds and the first
fails while the third still runs. The board shows data from a load that
started after the failed one, so the failure stays off it. Comparing
against every load started so far would report it.
---
 tests/lib/control-pane-ui.test.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index fd6766562..d7f8a50b3 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -141,6 +141,25 @@ async function runTests() {
     passed++;
   else failed++;
 
+  if (
+    await test('a failed refresh stays off the board while newer data is shown and another refresh runs', async () => {
+      const page = openPage(snapshot);
+      await settle();
+
+      page.hold = true;
+      page.refresh();
+      page.refresh();
+      page.refresh();
+      page.pending[1].succeed();
+      await settle();
+      page.pending[0].fail();
+      await settle();
+      assert.strictEqual(page.element('#app').hidden, true, 'the board shows data from a load that started after the failed one');
+    })
+  )
+    passed++;
+  else failed++;
+
   if (
     await test('a refresh that fails after an older one succeeded is reported', async () => {
       const page = openPage(snapshot);

From 928a29524757e91607b5eb7668e78f3ff512b3e5 Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 03:12:40 +0200
Subject: [PATCH 6/9] fix(control-pane): let the newest finished load decide
 the board

A newer refresh that failed was shown, and then an older one that
succeeded cleared the message, so the board looked live although no
load that started after the failed one had succeeded.

The board now follows the newest load that has finished, with its data
or with its failure. A load that finishes after a newer one leaves the
board alone: its data is not rendered and its failure is not reported.
This also keeps a late response from replacing newer data.
---
 scripts/lib/control-pane/ui.js    | 17 +++++++++--------
 tests/lib/control-pane-ui.test.js | 20 ++++++++++++++++++++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/scripts/lib/control-pane/ui.js b/scripts/lib/control-pane/ui.js
index 93d608371..690c8d981 100644
--- a/scripts/lib/control-pane/ui.js
+++ b/scripts/lib/control-pane/ui.js
@@ -439,10 +439,11 @@ function renderControlPaneHtml() {
     // The board keeps the last snapshot on screen, so a failed refresh has to
     // say that the data is no longer live, and since when.
     let loadedAt = null;
-    // Loads are numbered as they start, so a failed refresh can tell whether
-    // the board already shows data from a load that started after it.
+    // Loads are numbered as they start. The board follows the newest load that
+    // has finished, with its data or with its failure, so a load that finishes
+    // after a newer one leaves the board alone.
     let loadsStarted = 0;
-    let shownLoad = 0;
+    let newestFinished = 0;
     function showRefreshFailure(error) {
       const since = loadedAt
         ? ' The data below is from ' + loadedAt.toLocaleString() + '.'
@@ -644,6 +645,8 @@ function renderControlPaneHtml() {
       if (state.query) url.searchParams.set('query', state.query);
       const response = await fetch(url);
       const snapshot = await readJsonResponse(response);
+      if (id < newestFinished) return;
+      newestFinished = id;
       $('#query').value = snapshot.knowledge.query || state.query;
       $('#db-path').textContent = snapshot.database.exists ? snapshot.dbPath : 'database missing';
       state.allowActions = Boolean(snapshot.execution.allowActions);
@@ -658,7 +661,6 @@ function renderControlPaneHtml() {
         executable: snapshot.execution.allowActions && action.executable
       })));
       loadedAt = new Date();
-      shownLoad = id;
       clearError('#app');
     }
 
@@ -703,10 +705,9 @@ function renderControlPaneHtml() {
       // load() numbers itself before its first await.
       const id = loadsStarted;
       refresh.catch(error => {
-        // Data from a load that started later is already on the board, so
-        // this failure no longer describes it. An older load that succeeded
-        // in the meantime does not make the board live.
-        if (shownLoad < id) showRefreshFailure(error);
+        if (id < newestFinished) return;
+        newestFinished = id;
+        showRefreshFailure(error);
       });
     }, 15000);
 
diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index d7f8a50b3..14809b96b 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -180,6 +180,26 @@ async function runTests() {
     passed++;
   else failed++;
 
+  if (
+    await test('an older refresh that succeeds after a newer one failed leaves the failure up', async () => {
+      const page = openPage(snapshot);
+      await settle();
+
+      page.hold = true;
+      page.refresh();
+      page.refresh();
+      page.pending[1].fail();
+      await settle();
+      page.pending[0].succeed();
+      await settle();
+      const box = page.element('#app');
+      assert.strictEqual(box.hidden, false, 'no load that started after the failed one has succeeded');
+      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
+    })
+  )
+    passed++;
+  else failed++;
+
   console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
   process.exit(failed > 0 ? 1 : 0);
 }

From 36460824ee8c4b8164f3526c45e292c856e5db7f Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 03:13:18 +0200
Subject: [PATCH 7/9] test(control-pane): pin that a late response keeps its
 hands off newer data

Two held refreshes complete in reverse order with different data. The
older response arrives last and must not replace what the newer one
put on the board. It did before the previous commit.
---
 tests/lib/control-pane-ui.test.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index 14809b96b..7e8f73e63 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -40,7 +40,7 @@ class PageDate extends Date {
 // Runs the page script against a stand-in for the few browser APIs it uses:
 // elements looked up by selector, fetch, a fixed clock, and a setInterval
 // whose callback the test fires itself. While `hold` is set, a fetch waits in
-// `pending` until the test settles it.
+// `pending` until the test settles it, with the page's snapshot or another one.
 function openPage(snapshot) {
   const elements = new Map();
   const element = selector => {
@@ -67,7 +67,7 @@ function openPage(snapshot) {
     fetch: () =>
       new Promise((resolve, reject) => {
         const reply = {
-          succeed: () => resolve({ ok: true, status: 200, statusText: 'OK', json: async () => snapshot }),
+          succeed: (data = snapshot) => resolve({ ok: true, status: 200, statusText: 'OK', json: async () => data }),
           fail: () => reject(new TypeError('Failed to fetch'))
         };
         if (page.hold) page.pending.push(reply);
@@ -200,6 +200,25 @@ async function runTests() {
     passed++;
   else failed++;
 
+  if (
+    await test('an older response that arrives after a newer one does not replace its data', async () => {
+      const page = openPage(snapshot);
+      await settle();
+      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });
+
+      page.hold = true;
+      page.refresh();
+      page.refresh();
+      page.pending[1].succeed(answer('newer'));
+      await settle();
+      page.pending[0].succeed(answer('older'));
+      await settle();
+      assert.strictEqual(page.element('#query').value, 'newer');
+    })
+  )
+    passed++;
+  else failed++;
+
   console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
   process.exit(failed > 0 ? 1 : 0);
 }

From a82d587e3f990b430b83bd0cd8e7b7e7787ab1d2 Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 04:59:07 +0200
Subject: [PATCH 8/9] fix(control-pane): order data and outcomes of every load
 separately

Two cases the finished-load rule got wrong. When the first snapshot was
still loading and a live refresh failed, the first snapshot arrived
late and was dropped, leaving the pane empty. And manual loads, the
Refresh button and a query, reported their failures outside the
ordering, so a late manual failure could cover newer data and an older
success could clear a newer manual failure.

The board now shows the newest data any load brought, and the error
box the outcome of the newest load that has finished. load() reports
its own fetch failures, as a live-refresh failure when the interval
started it and as a plain error otherwise, so every load is ordered the
same way. Data that arrives after a newer failure still shows, and the
failure stays, dated by that data.
---
 scripts/lib/control-pane/ui.js    | 58 ++++++++++++++++++--------
 tests/lib/control-pane-ui.test.js | 68 +++++++++++++++++++++++++++++--
 2 files changed, 105 insertions(+), 21 deletions(-)

diff --git a/scripts/lib/control-pane/ui.js b/scripts/lib/control-pane/ui.js
index 690c8d981..8168a448e 100644
--- a/scripts/lib/control-pane/ui.js
+++ b/scripts/lib/control-pane/ui.js
@@ -439,17 +439,24 @@ function renderControlPaneHtml() {
     // The board keeps the last snapshot on screen, so a failed refresh has to
     // say that the data is no longer live, and since when.
     let loadedAt = null;
-    // Loads are numbered as they start. The board follows the newest load that
-    // has finished, with its data or with its failure, so a load that finishes
-    // after a newer one leaves the board alone.
+    // Loads are numbered as they start and finish in any order. The board shows
+    // the newest data any load brought, and the error box the outcome of the
+    // newest load that has finished, so a load that finishes late can neither
+    // replace newer data nor overrule a newer outcome.
     let loadsStarted = 0;
     let newestFinished = 0;
+    let shownLoad = 0;
+    let failure = null;
     function showRefreshFailure(error) {
       const since = loadedAt
         ? ' The data below is from ' + loadedAt.toLocaleString() + '.'
         : '';
       showError('#app', 'Live refresh failed.' + since + '\\n' + formatError(error));
     }
+    function showFailure() {
+      if (failure.live) showRefreshFailure(failure.error);
+      else showError('#app', failure.error);
+    }
 
     async function readJsonResponse(response) {
       let payload;
@@ -639,14 +646,37 @@ function renderControlPaneHtml() {
       }
     }
 
-    async function load() {
+    async function load(live = false) {
       const id = ++loadsStarted;
-      const url = new URL('/api/snapshot', window.location.href);
-      if (state.query) url.searchParams.set('query', state.query);
-      const response = await fetch(url);
-      const snapshot = await readJsonResponse(response);
-      if (id < newestFinished) return;
+      let snapshot;
+      try {
+        const url = new URL('/api/snapshot', window.location.href);
+        if (state.query) url.searchParams.set('query', state.query);
+        const response = await fetch(url);
+        snapshot = await readJsonResponse(response);
+      } catch (error) {
+        if (id < newestFinished) return;
+        newestFinished = id;
+        failure = { error, live };
+        showFailure();
+        return;
+      }
+      if (id > shownLoad) {
+        shownLoad = id;
+        render(snapshot);
+      }
+      if (id < newestFinished) {
+        // A newer load failed first. This data is still the newest on the
+        // board, so the failure stays, dated by it.
+        if (failure && id === shownLoad) showFailure();
+        return;
+      }
       newestFinished = id;
+      failure = null;
+      clearError('#app');
+    }
+
+    function render(snapshot) {
       $('#query').value = snapshot.knowledge.query || state.query;
       $('#db-path').textContent = snapshot.database.exists ? snapshot.dbPath : 'database missing';
       state.allowActions = Boolean(snapshot.execution.allowActions);
@@ -661,7 +691,6 @@ function renderControlPaneHtml() {
         executable: snapshot.execution.allowActions && action.executable
       })));
       loadedAt = new Date();
-      clearError('#app');
     }
 
     $('#query-form').addEventListener('submit', event => {
@@ -701,14 +730,7 @@ function renderControlPaneHtml() {
     // Live board: refresh on a gentle interval; pause while a prompt/tab is hidden.
     setInterval(() => {
       if (document.hidden) return;
-      const refresh = load();
-      // load() numbers itself before its first await.
-      const id = loadsStarted;
-      refresh.catch(error => {
-        if (id < newestFinished) return;
-        newestFinished = id;
-        showRefreshFailure(error);
-      });
+      load(true).catch(error => showError('#app', error));
     }, 15000);
 
     load().catch(error => showError('#app', error));
diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index 7e8f73e63..92a0622a5 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -41,7 +41,9 @@ class PageDate extends Date {
 // elements looked up by selector, fetch, a fixed clock, and a setInterval
 // whose callback the test fires itself. While `hold` is set, a fetch waits in
 // `pending` until the test settles it, with the page's snapshot or another one.
-function openPage(snapshot) {
+// With `hold`, the first load is held too. Listeners are kept per element, so a
+// test can press a button.
+function openPage(snapshot, { hold = false } = {}) {
   const elements = new Map();
   const element = selector => {
     if (!elements.has(selector)) {
@@ -51,12 +53,15 @@ function openPage(snapshot) {
         innerHTML: '',
         value: '',
         dataset: {},
-        addEventListener() {}
+        listeners: {},
+        addEventListener(type, listener) {
+          this.listeners[type] = listener;
+        }
       });
     }
     return elements.get(selector);
   };
-  const page = { online: true, hold: false, pending: [], refresh: null, element };
+  const page = { online: true, hold, pending: [], refresh: null, element };
   vm.runInNewContext(inlineScript(renderControlPaneHtml()), {
     document: { hidden: false, querySelector: element, querySelectorAll: () => [] },
     window: { location: { href: 'http://127.0.0.1:8765/' } },
@@ -219,6 +224,63 @@ async function runTests() {
     passed++;
   else failed++;
 
+  if (
+    await test('the first snapshot still shows when a live refresh fails before it arrives', async () => {
+      const page = openPage(snapshot, { hold: true });
+      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });
+
+      page.refresh();
+      page.pending[1].fail();
+      await settle();
+      page.pending[0].succeed(answer('first'));
+      await settle();
+      assert.strictEqual(page.element('#query').value, 'first', 'the pane is not left empty');
+      const box = page.element('#app');
+      assert.strictEqual(box.hidden, false, 'the newer failure stays up');
+      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
+    })
+  )
+    passed++;
+  else failed++;
+
+  if (
+    await test('a manual refresh that fails after a newer load succeeded is not shown', async () => {
+      const page = openPage(snapshot);
+      await settle();
+
+      page.hold = true;
+      page.element('#refresh').listeners.click();
+      page.refresh();
+      page.pending[1].succeed();
+      await settle();
+      page.pending[0].fail();
+      await settle();
+      assert.strictEqual(page.element('#app').hidden, true, 'the newer success decides the board');
+    })
+  )
+    passed++;
+  else failed++;
+
+  if (
+    await test('an older load that succeeds after a newer manual refresh failed leaves the failure up', async () => {
+      const page = openPage(snapshot);
+      await settle();
+
+      page.hold = true;
+      page.refresh();
+      page.element('#refresh').listeners.click();
+      page.pending[1].fail();
+      await settle();
+      page.pending[0].succeed();
+      await settle();
+      const box = page.element('#app');
+      assert.strictEqual(box.hidden, false, 'the newer failure decides the board');
+      assert.match(box.textContent, /Failed to fetch/);
+    })
+  )
+    passed++;
+  else failed++;
+
   console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
   process.exit(failed > 0 ? 1 : 0);
 }

From 217f30371324a660834e8a954c8a809db7035ed6 Mon Sep 17 00:00:00 2001
From: L4XB <lukas.buck@e-mail.de>
Date: Fri, 25 Sep 2026 06:45:11 +0200
Subject: [PATCH 9/9] fix(control-pane): fail a load whose snapshot cannot be
 shown, and run the shown query

render() ran after load()'s ordered failure path and after shownLoad
had moved on. A snapshot the board could not show (a session whose
detectedHarnesses is stored as an object) threw past the ordering, and
an older valid snapshot could no longer take the board. render() now
runs inside that path, and shownLoad moves only once it returns.

Run posted state.query, the query typed last. When an older load
succeeds after a newer one failed, the board shows the older query's
results and recall command while Run acted on the newer query. Each
load now keeps its query, render() records it for the board, and Run
posts that.

The test harness assigns new arrays instead of pushing onto
page.pending, and records requests the same way.
---
 scripts/lib/control-pane/ui.js    | 25 ++++++-----
 tests/lib/control-pane-ui.test.js | 70 ++++++++++++++++++++++++++++---
 2 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/scripts/lib/control-pane/ui.js b/scripts/lib/control-pane/ui.js
index 8168a448e..c49c0a421 100644
--- a/scripts/lib/control-pane/ui.js
+++ b/scripts/lib/control-pane/ui.js
@@ -410,7 +410,7 @@ function renderControlPaneHtml() {
   </div>
   <div id="app" hidden></div>
   <script>
-    const state = { query: '' };
+    const state = { query: '', shownQuery: '' };
     const $ = selector => document.querySelector(selector);
     const escapeHtml = value => String(value ?? '').replace(/[&<>"']/g, char => ({
       '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
@@ -633,10 +633,12 @@ function renderControlPaneHtml() {
       output.textContent = 'Running ' + actionId + '...';
 
       try {
+        // An action runs for the query its card on the board was built for.
+        // After a failed load that is not always the query typed last.
         const response = await fetch('/api/actions/' + encodeURIComponent(actionId), {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ query: state.query })
+          body: JSON.stringify({ query: state.shownQuery })
         });
         const payload = await readJsonResponse(response);
         output.textContent = JSON.stringify(payload, null, 2);
@@ -648,12 +650,18 @@ function renderControlPaneHtml() {
 
     async function load(live = false) {
       const id = ++loadsStarted;
-      let snapshot;
+      const query = state.query;
       try {
         const url = new URL('/api/snapshot', window.location.href);
-        if (state.query) url.searchParams.set('query', state.query);
+        if (query) url.searchParams.set('query', query);
         const response = await fetch(url);
-        snapshot = await readJsonResponse(response);
+        const snapshot = await readJsonResponse(response);
+        // A snapshot that cannot be shown fails its load like one that could
+        // not be fetched, and older data may still take the board.
+        if (id > shownLoad) {
+          render(snapshot, query);
+          shownLoad = id;
+        }
       } catch (error) {
         if (id < newestFinished) return;
         newestFinished = id;
@@ -661,10 +669,6 @@ function renderControlPaneHtml() {
         showFailure();
         return;
       }
-      if (id > shownLoad) {
-        shownLoad = id;
-        render(snapshot);
-      }
       if (id < newestFinished) {
         // A newer load failed first. This data is still the newest on the
         // board, so the failure stays, dated by it.
@@ -676,7 +680,7 @@ function renderControlPaneHtml() {
       clearError('#app');
     }
 
-    function render(snapshot) {
+    function render(snapshot, query) {
       $('#query').value = snapshot.knowledge.query || state.query;
       $('#db-path').textContent = snapshot.database.exists ? snapshot.dbPath : 'database missing';
       state.allowActions = Boolean(snapshot.execution.allowActions);
@@ -690,6 +694,7 @@ function renderControlPaneHtml() {
         ...action,
         executable: snapshot.execution.allowActions && action.executable
       })));
+      state.shownQuery = query;
       loadedAt = new Date();
     }
 
diff --git a/tests/lib/control-pane-ui.test.js b/tests/lib/control-pane-ui.test.js
index 92a0622a5..eabfe147b 100644
--- a/tests/lib/control-pane-ui.test.js
+++ b/tests/lib/control-pane-ui.test.js
@@ -42,7 +42,8 @@ class PageDate extends Date {
 // whose callback the test fires itself. While `hold` is set, a fetch waits in
 // `pending` until the test settles it, with the page's snapshot or another one.
 // With `hold`, the first load is held too. Listeners are kept per element, so a
-// test can press a button.
+// test can press a button. Every request is recorded, and `page.script` holds
+// the page's own functions, such as the runAction a Run button calls.
 function openPage(snapshot, { hold = false } = {}) {
   const elements = new Map();
   const element = selector => {
@@ -61,28 +62,30 @@ function openPage(snapshot, { hold = false } = {}) {
     }
     return elements.get(selector);
   };
-  const page = { online: true, hold, pending: [], refresh: null, element };
-  vm.runInNewContext(inlineScript(renderControlPaneHtml()), {
+  const page = { online: true, hold, pending: [], requests: [], refresh: null, element };
+  page.script = {
     document: { hidden: false, querySelector: element, querySelectorAll: () => [] },
     window: { location: { href: 'http://127.0.0.1:8765/' } },
     URL,
     Intl,
     Date: PageDate,
     console,
-    fetch: () =>
+    fetch: (url, options = {}) =>
       new Promise((resolve, reject) => {
+        page.requests = [...page.requests, { url: String(url), options }];
         const reply = {
           succeed: (data = snapshot) => resolve({ ok: true, status: 200, statusText: 'OK', json: async () => data }),
           fail: () => reject(new TypeError('Failed to fetch'))
         };
-        if (page.hold) page.pending.push(reply);
+        if (page.hold) page.pending = [...page.pending, reply];
         else if (page.online) reply.succeed();
         else reply.fail();
       }),
     setInterval: callback => {
       page.refresh = callback;
     }
-  });
+  };
+  vm.runInNewContext(inlineScript(renderControlPaneHtml()), page.script);
   return page;
 }
 
@@ -281,6 +284,61 @@ async function runTests() {
     passed++;
   else failed++;
 
+  if (
+    await test('a snapshot that cannot be shown fails its load, and older data can still take the board', async () => {
+      const page = openPage(snapshot);
+      await settle();
+      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });
+      // The session table cannot list harnesses stored as an object.
+      const unshowable = {
+        ...answer('newer'),
+        sessions: [{ id: 'session-1', state: 'running', detectedHarnesses: { claude: true } }]
+      };
+
+      page.hold = true;
+      page.refresh();
+      page.refresh();
+      page.pending[1].succeed(unshowable);
+      await settle();
+      const box = page.element('#app');
+      assert.strictEqual(box.hidden, false, 'the newer load failed');
+      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
+      page.pending[0].succeed(answer('older'));
+      await settle();
+      assert.strictEqual(page.element('#query').value, 'older', 'the older snapshot is shown');
+      assert.strictEqual(box.hidden, false, 'the newer failure stays up');
+    })
+  )
+    passed++;
+  else failed++;
+
+  if (
+    await test('Run acts on the query whose results are on the board', async () => {
+      const page = openPage(snapshot);
+      await settle();
+      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });
+      const search = query => {
+        page.element('#query').value = query;
+        page.element('#query-form').listeners.submit({ preventDefault() {} });
+      };
+
+      page.hold = true;
+      search('older');
+      search('newer');
+      page.pending[1].fail();
+      await settle();
+      page.pending[0].succeed(answer('older'));
+      await settle();
+      page.hold = false;
+      await page.script.runAction('recall-knowledge');
+      const run = page.requests.find(request => request.options.method === 'POST');
+      assert.strictEqual(run.url, '/api/actions/recall-knowledge');
+      assert.deepStrictEqual(JSON.parse(run.options.body), { query: 'older' }, 'the recall shown on the board');
+    })
+  )
+    passed++;
+  else failed++;
+
   console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
   process.exit(failed > 0 ? 1 : 0);
 }