From 1c76515d8c92f7253e6717fd3d8ad950496db1c1 Mon Sep 17 00:00:00 2001
From: Luca Sacchi Ricciardi <luca.sacchi@gmail.com>
Date: Sat, 25 Apr 2026 16:13:41 +0200
Subject: [PATCH] feat: show deferred details cache mode

---
 app/web/static/js/app.js           | 36 ++++++++++++++++++++++++++----
 app/web/static/js/server-config.js |  4 ++++
 app/web/templates/index.html       |  1 +
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/app/web/static/js/app.js b/app/web/static/js/app.js
index 9f4fdef..82e306c 100644
--- a/app/web/static/js/app.js
+++ b/app/web/static/js/app.js
@@ -91,6 +91,8 @@ class LLMMonitorApp {
             this.lastData.models = models;
             this.renderModels(this.lastData.models);
         }
+
+        this.updateCacheModeIndicator(models);
     }
 
     // Gestire messaggi dal Worker
@@ -115,11 +117,15 @@ class LLMMonitorApp {
             if (modelsData && JSON.stringify(this.lastData.models) !== JSON.stringify(modelsData)) {
                 this.lastData.models = modelsData;
                 try {
-                    writeServerCache(this.activeServer.id, "models", modelsData);
+                    const persistedModels = writeServerCache(this.activeServer.id, "models", modelsData);
+                    if (persistedModels) {
+                        this.lastData.models = persistedModels;
+                    }
                 } catch (error) {
                     console.warn("Cannot persist models in localStorage:", error);
                 }
-                this.renderModels(modelsData);
+                this.updateCacheModeIndicator(this.lastData.models);
+                this.renderModels(this.lastData.models);
                 if (this.selectedModelName) {
                     this.showModelDetails(this.selectedModelName);
                 }
@@ -432,8 +438,12 @@ class LLMMonitorApp {
                     timestamp: new Date().toISOString()
                 };
                 this.lastData.models = modelsData;
-                writeServerCache(this.activeServer.id, "models", modelsData);
-                this.renderModels(modelsData);
+                const persistedModels = writeServerCache(this.activeServer.id, "models", modelsData);
+                if (persistedModels) {
+                    this.lastData.models = persistedModels;
+                }
+                this.updateCacheModeIndicator(this.lastData.models);
+                this.renderModels(this.lastData.models);
                 if (this.selectedModelName) {
                     this.showModelDetails(this.selectedModelName);
                 }
@@ -493,6 +503,7 @@ class LLMMonitorApp {
         const statusIndicator = document.getElementById("status-indicator");
         const statusText = document.getElementById("status-text");
         const ollamaStatus = document.getElementById("ollama-status");
+        const cacheModeIndicator = document.getElementById("cache-mode-indicator");
 
         if (count) count.textContent = "0";
         if (totalSize) totalSize.textContent = "0 B";
@@ -504,6 +515,9 @@ class LLMMonitorApp {
         if (ollamaStatus) {
             ollamaStatus.innerHTML = "🟡 Not configured";
         }
+        if (cacheModeIndicator) {
+            cacheModeIndicator.classList.add("hidden");
+        }
         if (container) {
             container.innerHTML = `
                 <div class="text-center py-10 text-gray-300">
@@ -515,6 +529,20 @@ class LLMMonitorApp {
         }
     }
 
+    updateCacheModeIndicator(modelsData) {
+        const cacheModeIndicator = document.getElementById("cache-mode-indicator");
+        if (!cacheModeIndicator) {
+            return;
+        }
+
+        if (hasDeferredShowDetails(modelsData)) {
+            cacheModeIndicator.classList.remove("hidden");
+            return;
+        }
+
+        cacheModeIndicator.classList.add("hidden");
+    }
+
     renderLoadingState() {
         if (this.lastData.models) {
             return;
diff --git a/app/web/static/js/server-config.js b/app/web/static/js/server-config.js
index 068d79b..fe95927 100644
--- a/app/web/static/js/server-config.js
+++ b/app/web/static/js/server-config.js
@@ -250,3 +250,7 @@ function isCacheStale(timestamp, maxAgeMs = DATA_REFRESH_INTERVAL_MS) {
 
   return (Date.now() - timestamp) >= maxAgeMs;
 }
+
+function hasDeferredShowDetails(cacheValue) {
+  return Boolean(cacheValue && cacheValue.showDetailsDeferred);
+}
diff --git a/app/web/templates/index.html b/app/web/templates/index.html
index cf39735..4402524 100644
--- a/app/web/templates/index.html
+++ b/app/web/templates/index.html
@@ -88,6 +88,7 @@
                         <div>
                             <h2 class="text-xl font-bold">Available Models</h2>
                             <p class="text-xs text-gray-400 mt-1">Hover or click a card to open the details modal.</p>
+                            <p id="cache-mode-indicator" class="hidden text-xs text-amber-300 mt-2">Model details are loaded on demand to keep device storage usage low.</p>
                         </div>
                         <button id="refresh-btn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-sm font-medium transition">
                             Refresh