Merge branch 'main' of https://github.com/accordproject/template-playground into feat/performance-resource-hints

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

Author: 23harshitkumar

package-lock.json

@@ -59,6 +59,7 @@
     "shepherd.js": "^13.0.3",
     "styled-components": "^6.1.12",
     "ts-debounce": "^4.0.0",
+    "use-debounce": "^10.1.0",
     "uuid": "^11.1.0",
     "zustand": "^4.3.9"
   },

package.json

@@ -1,12 +1,14 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { AIConfig, AIConfigPopupProps, KeyProtectionLevel } from '../types/components/AIAssistant.types';
+import { useDebounce } from 'use-debounce';
 import useAppStore from '../store/store';
 import {
   isWebAuthnPRFSupported,
   encryptAndStoreApiKey,
   loadAndDecryptApiKey,
   clearStoredKey,
 } from '../utils/secureKeyStorage';
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
 
 const AIConfigPopup = ({ isOpen, onClose }: AIConfigPopupProps) => {
   const { backgroundColor, keyProtectionLevel, setKeyProtectionLevel } = useAppStore((state) => ({
@@ -115,18 +117,150 @@ const AIConfigPopup = ({ isOpen, onClose }: AIConfigPopupProps) => {
     }
   }, [setKeyProtectionLevel]);
 
+  const [availableModels, setAvailableModels] = useState<string[]>([]);
+  const [showApiKey, setShowApiKey] = useState<boolean>(false);
+  const [debouncedApiKey] = useDebounce(apiKey, 1000);
+
   useEffect(() => {
     if (isOpen) {
       setSecurityMessage('');
       loadConfig().catch(console.warn);
     }
   }, [isOpen, loadConfig]);
 
-  const handleSave = async () => {
-    setIsEncrypting(true);
-    setSecurityMessage('');
+  useEffect(() => {
+	setAvailableModels([]);
+	setModel('');
+    if (!provider || !debouncedApiKey) return;
+
+    const controller = new AbortController();
+    const signal = controller.signal;
 
-    // Save non-sensitive settings to localStorage (no encryption needed)
+    const fetchModels = async () => {
+      try {
+        switch (provider) {
+          case 'openai':
+		  case 'openai-compatible':
+			if (!apiKey) return;
+
+			let endpoint = provider === 'openai-compatible' ? customEndpoint : 'https://api.openai.com/v1';
+			if (!endpoint) return;
+			endpoint = endpoint.replace(/\/$/, '');
+			const url = `${endpoint}/models`;
+
+			const res = await fetch(url, {
+			  headers: { Authorization: `Bearer ${apiKey}` },
+		  	  signal,
+			});
+
+			if (!res.ok) {
+			  console.error(`Fetch error (${res.status}): ${res.statusText}`);
+			  return;
+			}
+
+			const data = await res.json();
+			if (!signal.aborted) setAvailableModels(data.data?.map((m: any) => m.id) || []);
+			break;
+
+          case 'anthropic':
+            if (!apiKey) return;
+            {
+              const res = await fetch('https://api.anthropic.com/v1/models', {
+                headers: {
+                  'x-api-key': apiKey,
+                  'anthropic-version': '2023-06-01',
+                  'content-type': 'application/json',
+                },
+                signal,
+              });
+			  if (!res.ok) {
+				console.error(`Fetch error (${res.status}): ${res.statusText}`);
+				return;
+			  }
+              const data = await res.json();
+              if (!signal.aborted) setAvailableModels(data.models?.map((m: any) => m.name) || []);
+            }
+            break;
+
+          case 'google':
+            if (!apiKey) return;
+            {
+              const res = await fetch('https://generativelanguage.googleapis.com/v1beta2/models', {
+                headers: { 'x-goog-api-key': apiKey },
+                signal,
+              });
+			  if (!res.ok) {
+				console.error(`Fetch error (${res.status}): ${res.statusText}`);
+				return;
+			  }
+              const data = await res.json();
+              if (!signal.aborted) setAvailableModels(data.models?.map((m: any) => m.name) || []);
+            }
+            break;
+
+          case 'mistral':
+            if (!apiKey) return;
+            {
+              const res = await fetch('https://api.mistral.ai/v1/models', {
+                headers: { Authorization: `Bearer ${apiKey}` },
+                signal,
+              });
+			  if (!res.ok) {
+				console.error(`Fetch error (${res.status}): ${res.statusText}`);
+				return;
+			  }
+              const data = await res.json();
+              if (!signal.aborted) setAvailableModels(data.models?.map((m: any) => m.name) || []);
+            }
+            break;
+
+          case 'ollama':
+			{
+			  const res = await fetch('http://localhost:11434/api/tags', { signal });
+			  if (!res.ok) {
+				console.error(`Ollama fetch failed: ${res.statusText}`);
+				return;
+			  }
+			  const data = await res.json();
+			  if (!signal.aborted) setAvailableModels(data.models?.map((m: any) => m.name || m.model) || []);
+			}
+			break;
+
+          case 'openrouter':
+            if (!apiKey) return;
+            {
+              const res = await fetch('https://openrouter.ai/api/v1/models', {
+                headers: { Authorization: `Bearer ${apiKey}` },
+                signal,
+              });
+			  if (!res.ok) {
+				console.error(`Fetch error (${res.status}): ${res.statusText}`);
+				return;
+			  }
+              const data = await res.json();
+              if (!signal.aborted) setAvailableModels(data.models?.map((m: any) => m.name) || []);
+            }
+            break;
+
+          default:
+            setAvailableModels([]);
+        }
+      } catch (err: any) {
+        if (err.name !== 'AbortError') {
+          console.error('Failed to fetch models:', err);
+          setAvailableModels([]);
+        }
+      }
+    };
+
+    void fetchModels();
+
+    return () => {
+      controller.abort();
+    };
+  }, [provider, debouncedApiKey, customEndpoint]);
+
+  const handleSave = async () => {
     localStorage.setItem('aiProvider', provider);
     localStorage.setItem('aiModel', model);
 
@@ -298,17 +432,72 @@ const AIConfigPopup = ({ isOpen, onClose }: AIConfigPopupProps) => {
             </div>
           )}
 
+		  <div className="relative">
+		    <label className={`block text-sm font-medium ${theme.label} mb-1`}>
+				API Key
+			</label>
+			<div className="flex items-center">
+			  <input
+				type={showApiKey ? "text" : "password"}
+				value={apiKey}
+				onChange={(e) => setApiKey(e.target.value)}
+				placeholder="Enter API key"
+				className={`flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.input}`}
+			  />
+			  <button
+				type="button"
+				onClick={() => setShowApiKey(!showApiKey)}
+				className={`ml-2 p-2 rounded ${theme.closeButton}`}
+			  >
+				{showApiKey ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
+			  </button>
+			</div>
+
+			{/* Security status indicators */}
+			{keyProtectionLevel === 'webauthn' && (
+				<div className="mt-1 text-xs text-green-500 flex items-center gap-1">
+				  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+				    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+				  </svg>
+				  Protected with Passkey (WebAuthn)
+				</div>
+			)}
+			{keyProtectionLevel === 'memory-only' && (
+				<div className="mt-1 text-xs text-yellow-500 flex items-center gap-1">
+				  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+				    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+				  </svg>
+				  Stored in memory only (cleared on refresh)
+				</div>
+			)}
+			{!webauthnAvailable && apiKey && provider !== 'ollama' && !keyProtectionLevel && (
+			  <div className="mt-1 text-xs text-yellow-500">
+				⚠️ WebAuthn not available. Key will be stored in memory only.
+			  </div>
+			)}
+			{securityMessage && (
+			  <div className="mt-1 text-xs text-orange-400">
+				{securityMessage}
+			  </div>
+			)}
+		  </div>
+
           <div>
             <label className={`block text-sm font-medium ${theme.label} mb-1`}>
               Model Name
             </label>
-            <input
-              type="text"
-              value={model}
-              onChange={(e) => setModel(e.target.value)}
-              placeholder="Enter model name"
-              className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.input}`}
-            />
+            <select
+			  value={model}
+			  onChange={(e) => setModel(e.target.value)}
+			  className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.select}`}
+			>
+			<option value="">Select a model</option>
+			{availableModels.length > 0
+				? availableModels.map((m) => (
+					<option key={m} value={m}>{m}</option>
+				)) : <option disabled>No models available</option>
+			}
+			</select>
             {provider && (
               <div className={`mt-1 text-xs ${theme.helpText}`}>
                 {provider === 'openai' && 'Example: gpt-5, gpt-5-mini'}
@@ -319,50 +508,10 @@ const AIConfigPopup = ({ isOpen, onClose }: AIConfigPopupProps) => {
                 {provider === 'ollama' && (
                   <span className="text-orange-500 font-bold">
                     ⚠️ Must run: <code>OLLAMA_ORIGINS="*" ollama serve</code>
-                    <br />Example models: tinyllama, qwen2.5:0.5b, llama3
+                    <br/>Example models: tinyllama, qwen2.5:0.5b, llama3
                   </span>
                 )}
-
-              </div>
-            )}
-          </div>
-
-          <div>
-            <label className={`block text-sm font-medium ${theme.label} mb-1`}>
-              API Key
-            </label>
-            <input
-              type="password"
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-              placeholder="Enter API key"
-              className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.input}`}
-            />
-            {/* Security status indicators */}
-            {keyProtectionLevel === 'webauthn' && (
-              <div className="mt-1 text-xs text-green-500 flex items-center gap-1">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
-                </svg>
-                Protected with Passkey (WebAuthn)
-              </div>
-            )}
-            {keyProtectionLevel === 'memory-only' && (
-              <div className="mt-1 text-xs text-yellow-500 flex items-center gap-1">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                </svg>
-                Stored in memory only (cleared on refresh)
-              </div>
-            )}
-            {!webauthnAvailable && apiKey && provider !== 'ollama' && !keyProtectionLevel && (
-              <div className="mt-1 text-xs text-yellow-500">
-                ⚠️ WebAuthn not available. Key will be stored in memory only.
-              </div>
-            )}
-            {securityMessage && (
-              <div className="mt-1 text-xs text-orange-400">
-                {securityMessage}
+                
               </div>
             )}
           </div>
@@ -465,7 +614,7 @@ const AIConfigPopup = ({ isOpen, onClose }: AIConfigPopupProps) => {
 
           <button
             onClick={() => { handleSave().catch(console.warn); }}
-            disabled={isEncrypting || !provider || !model || (provider !== 'ollama' && !apiKey) || (provider === 'openai-compatible' && !customEndpoint)}
+            disabled={isEncrypting || !provider || !model || (availableModels.length > 0 && !availableModels.includes(model)) || (provider !== 'ollama' && !apiKey) || (provider === 'openai-compatible' && !customEndpoint)}
             className={`w-full py-2 rounded-lg transition-colors disabled:cursor-not-allowed ${isEncrypting || !provider || !model || (provider !== 'ollama' && !apiKey) || (provider === 'openai-compatible' && !customEndpoint)
               ? theme.saveButton.disabled
               : theme.saveButton.enabled