diff --git a/src/contexts/room-context.tsx b/src/contexts/room-context.tsx
index 31d2c19..98875e4 100644
--- a/src/contexts/room-context.tsx
+++ b/src/contexts/room-context.tsx
@@ -1146,12 +1146,16 @@ export function RoomProvider({
     }
     setAiConfigsLoading(true);
     try {
+      // Load model list fresh so we have names even if availableModels is empty
+      const { modelList } = await import('@/client');
+      const modelsResp = await modelList({});
+      const models = (modelsResp.data as { data?: { data?: { id: string; name: string }[] } } | undefined)
+        ?.data?.data ?? [];
       const configs = await client.aiList(activeRoomId);
-      // Look up model names from the available models list
       setRoomAiConfigs(
         configs.map((cfg) => ({
           model: cfg.model,
-          modelName: availableModels.find((m) => m.id === cfg.model)?.name,
+          modelName: models.find((m) => m.id === cfg.model)?.name,
         })),
       );
     } catch {
@@ -1159,7 +1163,7 @@ export function RoomProvider({
     } finally {
       setAiConfigsLoading(false);
     }
-  }, [activeRoomId, availableModels]);
+  }, [activeRoomId]);
 
   // Fetch available models (for AI model name lookup)
   const fetchAvailableModels = useCallback(async () => {
@@ -1176,14 +1180,14 @@ export function RoomProvider({
     fetchProjectRepos();
   }, [fetchProjectRepos]);
 
-  useEffect(() => {
-    fetchRoomAiConfigs();
-  }, [fetchRoomAiConfigs]);
-
   useEffect(() => {
     fetchAvailableModels();
   }, [fetchAvailableModels]);
 
+  useEffect(() => {
+    fetchRoomAiConfigs();
+  }, [fetchRoomAiConfigs]);
+
   const createRoom = useCallback(
     async (name: string, isPublic: boolean, categoryId?: string) => {
       const client = wsClientRef.current;