From c5f379ba01b16df390e7297b8ce14579f74aef0b Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Thu, 25 Dec 2025 17:18:23 +0800
Subject: [PATCH] fix: Force refresh ccw-litellm status on first page load
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add isFirstApiSettingsRender flag to track first load
- Force refresh ccw-litellm status on first page load
- Add ?refresh=true query param support to backend API
- Frontend passes refresh param to bypass backend cache
- Subsequent tab switches still use cache for performance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ccw/src/core/routes/litellm-api-routes.ts        |  7 +++++--
 .../templates/dashboard-js/views/api-settings.js | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/ccw/src/core/routes/litellm-api-routes.ts b/ccw/src/core/routes/litellm-api-routes.ts
index 9a73ec76..4eae14ed 100644
--- a/ccw/src/core/routes/litellm-api-routes.ts
+++ b/ccw/src/core/routes/litellm-api-routes.ts
@@ -554,9 +554,12 @@ export async function handleLiteLLMApiRoutes(ctx: RouteContext): Promise<boolean
   // ===========================
 
   // GET /api/litellm-api/ccw-litellm/status - Check ccw-litellm installation status
+  // Supports ?refresh=true to bypass cache
   if (pathname === '/api/litellm-api/ccw-litellm/status' && req.method === 'GET') {
-    // Check cache first
-    if (ccwLitellmStatusCache.data &&
+    const forceRefresh = url.searchParams.get('refresh') === 'true';
+
+    // Check cache first (unless force refresh)
+    if (!forceRefresh && ccwLitellmStatusCache.data &&
         Date.now() - ccwLitellmStatusCache.timestamp < ccwLitellmStatusCache.ttl) {
       res.writeHead(200, { 'Content-Type': 'application/json' });
       res.end(JSON.stringify(ccwLitellmStatusCache.data));
diff --git a/ccw/src/templates/dashboard-js/views/api-settings.js b/ccw/src/templates/dashboard-js/views/api-settings.js
index e8cb615a..7e9c6f21 100644
--- a/ccw/src/templates/dashboard-js/views/api-settings.js
+++ b/ccw/src/templates/dashboard-js/views/api-settings.js
@@ -23,6 +23,9 @@ let ccwLitellmStatusCache = null;
 let ccwLitellmStatusCacheTime = 0;
 const CCW_LITELLM_STATUS_CACHE_TTL = 60000; // 60 seconds
 
+// Track if this is the first render (force refresh on first load)
+let isFirstApiSettingsRender = true;
+
 // ========== Data Loading ==========
 
 /**
@@ -1036,8 +1039,13 @@ async function renderApiSettings() {
     renderCacheMainPanel();
   }
 
-  // Check and render ccw-litellm status (use cache by default)
-  checkCcwLitellmStatus(false).then(renderCcwLitellmStatusCard);
+  // Check and render ccw-litellm status
+  // Force refresh on first load, use cache on subsequent renders
+  const forceStatusRefresh = isFirstApiSettingsRender;
+  if (isFirstApiSettingsRender) {
+    isFirstApiSettingsRender = false;
+  }
+  checkCcwLitellmStatus(forceStatusRefresh).then(renderCcwLitellmStatusCard);
 
   if (window.lucide) lucide.createIcons();
 }
@@ -3082,7 +3090,9 @@ async function checkCcwLitellmStatus(forceRefresh = false) {
 
   try {
     console.log('[API Settings] Checking ccw-litellm status from server...');
-    var response = await fetch('/api/litellm-api/ccw-litellm/status');
+    // Add refresh=true to bypass backend cache when forceRefresh is true
+    var statusUrl = '/api/litellm-api/ccw-litellm/status' + (forceRefresh ? '?refresh=true' : '');
+    var response = await fetch(statusUrl);
     console.log('[API Settings] Status response:', response.status);
     var status = await response.json();
     console.log('[API Settings] ccw-litellm status:', status);