Fix engines local container refresh race

CHANGELOG.md

@@ -9,6 +9,14 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 
 ---
 
+## [1.12.56] — 2026-06-30
+
+### Fixed
+- **Engines local-card fetch race** — overlapping Docker container refreshes can no longer let an older failed request overwrite a newer successful render with `Could not reach server: Failed to fetch`.
+- **Engines refresh resilience** — local engine cards retry once, keep the last good container list on transient network changes, and show an inline Retry button only when no cached data exists.
+
+---
+
 ## [1.12.55] — 2026-06-30
 
 ### Added

VERSION

@@ -1 +1 @@
-1.12.55
+1.12.56

static/index.html

@@ -10,7 +10,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#2563EB">
-  <meta name="app-version" content="1.12.55">
+  <meta name="app-version" content="1.12.56">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/static/icon.svg">
@@ -27,7 +27,7 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.12.55">
+  <link rel="stylesheet" href="/static/style.css?v=1.12.56">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
@@ -362,7 +362,7 @@ window.toggleNavTree = function(treeId, chevronId) {
 </script>
 
 <!-- loader.js: fetches sections → loads JS modules → removes skeleton -->
-<script src="/static/loader.js?v=1.12.55"></script>
+<script src="/static/loader.js?v=1.12.56"></script>
 
 </body>
 </html>

static/js/engines.js

@@ -307,6 +307,9 @@ function editCustomEngineCard(card) {
 
 // ── Local Docker container management ─────────────────────────────────────
 
+let _localContainersLoadSeq = 0;
+let _lastLocalContainers = null;
+
 function cardType(card) {
   const page = card?.closest('[data-page]');
   return page ? page.dataset.page : '';
@@ -325,27 +328,58 @@ function _dcSkel(n = 2) {
   return Array.from({ length: n }, card).join('');
 }
 
+async function fetchLocalContainersWithRetry() {
+  let lastErr = null;
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      const r = await fetch('/api/local-containers', { cache: 'no-store' });
+      if (!r.ok) {
+        const e = await r.json().catch(() => ({}));
+        throw new Error(e.detail || r.statusText || `HTTP ${r.status}`);
+      }
+      return await r.json();
+    } catch (e) {
+      lastErr = e;
+      if (attempt === 0) await new Promise(resolve => setTimeout(resolve, 450));
+    }
+  }
+  throw lastErr || new Error('Failed to fetch');
+}
+
 async function loadLocalContainers() {
+  const seq = ++_localContainersLoadSeq;
   const gridTts = $('dc-grid-tts');
   const gridStt = $('dc-grid-stt');
   const gridLlm = $('dc-grid-llm');
   if (!gridTts && !gridStt && !gridLlm) return;
   const skel = _dcSkel(2);
-  if (gridTts) gridTts.innerHTML = skel;
+  if (gridTts && !gridTts.querySelector('.llm-local-card')) gridTts.innerHTML = skel;
-  if (gridStt) gridStt.innerHTML = skel;
+  if (gridStt && !gridStt.querySelector('.llm-local-card')) gridStt.innerHTML = skel;
-  if (gridLlm) gridLlm.innerHTML = skel;
+  if (gridLlm && !gridLlm.querySelector('.llm-local-card')) gridLlm.innerHTML = skel;
   const custom = loadCustomEngineCards();
   try {
-    const r = await fetch('/api/local-containers');
+    const d = await fetchLocalContainersWithRetry();
-    const d = await r.json();
+    if (seq !== _localContainersLoadSeq) return;
+    _lastLocalContainers = d;
     renderLocalContainers([...(d.containers || []), ...custom]);
   } catch (e) {
-    const err = `<div class="dc-loading dc-load-err">Could not reach server: ${escHtml(e.message)}</div>`;
+    if (seq !== _localContainersLoadSeq) return;
+    if (_lastLocalContainers) {
+      renderLocalContainers([...(_lastLocalContainers.containers || []), ...custom]);
+      return;
+    }
+    if (custom.length) {
+      renderLocalContainers(custom);
+      return;
+    }
+    const err = `<div class="dc-loading dc-load-err">Could not reach server: ${escHtml(e.message)} <button class="btn-secondary btn-sm dc-retry-inline" type="button">Retry</button></div>`;
     if (gridTts) gridTts.innerHTML = err;
     if (gridStt) gridStt.innerHTML = err;
-    if (custom.length) renderLocalContainers(custom);
+    if (gridLlm) gridLlm.innerHTML = err;
+    document.querySelectorAll('.dc-retry-inline').forEach(btn => btn.addEventListener('click', loadLocalContainers));
   }
 }
+window.loadLocalContainers = loadLocalContainers;
 
 function renderLocalContainers(containers) {
   const gridTts = $('dc-grid-tts');