Cache model catalog responses

Author: chrysb

lib/public/js/components/models-tab/use-models.js

@@ -8,16 +8,35 @@ import {
 } from "../../lib/api.js";
 import { showToast } from "../toast.js";
 import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
+import { usePolling } from "../../hooks/usePolling.js";
+import { invalidateCache } from "../../lib/api-cache.js";
+import {
+  getModelCatalogModels,
+  isModelCatalogRefreshing,
+  kModelCatalogCacheKey,
+  kModelCatalogPollIntervalMs,
+} from "../../lib/model-catalog.js";
 
 let kModelsTabCache = null;
 const getCredentialValue = (value) =>
   String(value?.key || value?.token || value?.access || "").trim();
+const kNoModelsFoundError = "No models found";
+const kModelSettingsLoadError = "Failed to load model settings";
 
 export const useModels = (agentId) => {
   const isScoped = !!agentId;
   const normalizedAgentId = String(agentId || "").trim();
   const useCache = !isScoped;
   const [catalog, setCatalog] = useState(() => (useCache && kModelsTabCache?.catalog) || []);
+  const [catalogStatus, setCatalogStatus] = useState(
+    () =>
+      (useCache && kModelsTabCache?.catalogStatus) || {
+        source: "",
+        fetchedAt: null,
+        stale: false,
+        refreshing: false,
+      },
+  );
   const [primary, setPrimary] = useState(() => (useCache && kModelsTabCache?.primary) || "");
   const [configuredModels, setConfiguredModels] = useState(
     () => (useCache && kModelsTabCache?.configuredModels) || {},
@@ -48,7 +67,7 @@ export const useModels = (agentId) => {
   const modelsConfigCacheKey = normalizedAgentId
     ? `/api/models/config?agentId=${encodeURIComponent(normalizedAgentId)}`
     : "/api/models/config";
-  const catalogFetchState = useCachedFetch("/api/models", fetchModels, {
+  const catalogFetchState = useCachedFetch(kModelCatalogCacheKey, fetchModels, {
     maxAgeMs: 30000,
   });
   const configFetchState = useCachedFetch(
@@ -59,6 +78,41 @@ export const useModels = (agentId) => {
   const codexFetchState = useCachedFetch("/api/codex/status", fetchCodexStatus, {
     maxAgeMs: 15000,
   });
+  const catalogPoll = usePolling(fetchModels, kModelCatalogPollIntervalMs, {
+    enabled: ready && isModelCatalogRefreshing(catalogStatus),
+    pauseWhenHidden: true,
+    cacheKey: kModelCatalogCacheKey,
+  });
+
+  const syncCatalogError = useCallback((catalogModels) => {
+    setError((current) => {
+      if (catalogModels.length > 0) {
+        return current === kNoModelsFoundError ? "" : current;
+      }
+      return current || kNoModelsFoundError;
+    });
+  }, []);
+
+  const applyCatalogResult = useCallback(
+    (catalogResult) => {
+      const catalogModels = getModelCatalogModels(catalogResult);
+      const nextCatalogStatus = {
+        source: String(catalogResult?.source || ""),
+        fetchedAt: Number(catalogResult?.fetchedAt || 0) || null,
+        stale: Boolean(catalogResult?.stale),
+        refreshing: Boolean(catalogResult?.refreshing),
+      };
+      setCatalog(catalogModels);
+      setCatalogStatus(nextCatalogStatus);
+      updateCache({
+        catalog: catalogModels,
+        catalogStatus: nextCatalogStatus,
+      });
+      syncCatalogError(catalogModels);
+      return catalogModels;
+    },
+    [syncCatalogError, updateCache],
+  );
 
   const refresh = useCallback(async () => {
     if (!ready) setLoading(true);
@@ -69,10 +123,7 @@ export const useModels = (agentId) => {
         configFetchState.refresh({ force: true }),
         codexFetchState.refresh({ force: true }),
       ]);
-      const catalogModels = Array.isArray(catalogResult.models)
-        ? catalogResult.models
-        : [];
-      setCatalog(catalogModels);
+      const catalogModels = applyCatalogResult(catalogResult);
       const p = configResult.primary || "";
       const cm = configResult.configuredModels || {};
       const ap = configResult.authProfiles || [];
@@ -94,20 +145,31 @@ export const useModels = (agentId) => {
         authOrder: ao,
         codexStatus: codex || { connected: false },
       });
-      if (!catalogModels.length) setError("No models found");
     } catch (err) {
-      setError("Failed to load model settings");
-      showToast(`Failed to load model settings: ${err.message}`, "error");
+      setError(kModelSettingsLoadError);
+      showToast(`${kModelSettingsLoadError}: ${err.message}`, "error");
     } finally {
       setReady(true);
       setLoading(false);
     }
-  }, [catalogFetchState, codexFetchState, configFetchState, ready, updateCache, agentId, isScoped]);
+  }, [
+    applyCatalogResult,
+    catalogFetchState,
+    codexFetchState,
+    configFetchState,
+    ready,
+    updateCache,
+  ]);
 
   useEffect(() => {
     refresh();
   }, [agentId]);
 
+  useEffect(() => {
+    if (!catalogPoll.data) return;
+    applyCatalogResult(catalogPoll.data);
+  }, [applyCatalogResult, catalogPoll.data]);
+
   const stableStringify = (obj) =>
     JSON.stringify(Object.keys(obj).sort().reduce((acc, k) => { acc[k] = obj[k]; return acc; }, {}));
 
@@ -261,6 +323,7 @@ export const useModels = (agentId) => {
       if (result.syncWarning) {
         showToast(`Saved, but git-sync failed: ${result.syncWarning}`, "warning");
       }
+      invalidateCache(kModelCatalogCacheKey);
       await refresh();
     } catch (err) {
       showToast(err.message || "Failed to save changes", "error");
@@ -274,6 +337,8 @@ export const useModels = (agentId) => {
     profileEdits,
     orderEdits,
     authProfiles,
+    isScoped,
+    agentId,
     refresh,
   ]);
 

lib/public/js/lib/model-catalog.js

@@ -0,0 +1,20 @@
+import { getFeaturedModels } from "./model-config.js";
+
+export const kModelCatalogCacheKey = "/api/models";
+export const kModelCatalogPollIntervalMs = 3000;
+
+export const getModelCatalogModels = (payload) =>
+  Array.isArray(payload?.models) ? payload.models : [];
+
+export const isModelCatalogRefreshing = (payload) =>
+  Boolean(payload?.refreshing);
+
+export const getInitialOnboardingModelKey = ({
+  catalog = [],
+  currentModelKey = "",
+} = {}) => {
+  const normalizedCurrent = String(currentModelKey || "").trim();
+  if (normalizedCurrent) return normalizedCurrent;
+  const featuredModels = getFeaturedModels(catalog);
+  return String(featuredModels[0]?.key || catalog[0]?.key || "");
+};