feat(models): expose refreshClaudeModels to bust cache and re-fetch from 9router

src/components/chat/hooks/useChatProviderState.ts

@@ -90,18 +90,14 @@ export function useChatProviderState({ selectedSession }: UseChatProviderStateAr
     load('gemini', setGeminiModelState, GEMINI_MODELS.DEFAULT);
   }, [selectedSession?.id]);
 
-  // Fetch live Claude model list and validate the current claude model
+  // Fetch and apply live Claude model list, validating the current selection.
-  useEffect(() => {
+  const fetchAndSetClaudeModels = useCallback(async () => {
-    authenticatedFetch('/api/models')
+    const res = await authenticatedFetch('/api/models');
-      .then((res) => {
     if (!res.ok) return;
-        return res.json();
+    const data = await res.json();
-      })
-      .then((data) => {
     if (!Array.isArray(data?.claude) || data.claude.length === 0) return;
     const options: ModelOption[] = data.claude;
     setClaudeModelOptions(options);
-
     setClaudeModelState((current) => {
       const valid = options.some((o) => o.value === current);
       if (valid) return current;
@@ -112,8 +108,17 @@ export function useChatProviderState({ selectedSession }: UseChatProviderStateAr
       }
       return fallback;
     });
-      })
+  }, [selectedSession?.id]);
-      .catch(() => {
+
+  // Bust the server-side cache then re-fetch the model list.
+  const refreshClaudeModels = useCallback(async () => {
+    await authenticatedFetch('/api/models/refresh', { method: 'POST' });
+    await fetchAndSetClaudeModels();
+  }, [fetchAndSetClaudeModels]);
+
+  // Fetch live Claude model list on mount
+  useEffect(() => {
+    fetchAndSetClaudeModels().catch(() => {
       // Static fallback already in place
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -209,5 +214,6 @@ export function useChatProviderState({ selectedSession }: UseChatProviderStateAr
     pendingPermissionRequests,
     setPendingPermissionRequests,
     cyclePermissionMode,
+    refreshClaudeModels,
   };
 }