fix(ui): improve AIConfigPopup heuristics

[madhav758]

Closes #<#739>

Changes

• Reordered inputs: Moved the "API Key" input field above the "Model Name" to logically indicate that the key is required first.
• Improved visibility of system status: Added an eye/eye-slash toggle button inside the API Key input to allow users to reveal and verify their API key, preventing typos.
• Added immediate error prevention/feedback: Implemented a real-time validation check for the Model Name field against a known list of models (for Anthropic, Google, Mistral, and OpenAI). It now displays a green "Recognized model" confirmation or a yellow "Unrecognized model" warning right below the input.
• Fixed linter warnings: Extracted the KNOWN_MODELS constant out of the React component scope to resolve react-hooks/exhaustive-deps warnings.

Flags

• Added a KNOWN_MODELS record directly in AIConfigPopup.tsx. As new models are released, this dictionary will need to be occasionally updated. However, the UI handles unrecognized models gracefully with a warning rather than blocking the user.

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	c2cf81d
🔍 Latest deploy log	https://app.netlify.com/projects/ap-template-playground/deploys/699d9b7038ec7e00084ee006
😎 Deploy Preview	https://deploy-preview-743--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Improves the AI configuration modal UX in the Template Playground by reordering key inputs and adding inline heuristics/feedback to reduce user configuration errors.

Changes:

• Moved the API key input above the model name and added an in-field show/hide API key toggle.
• Added provider-specific model “recognized/unrecognized” feedback based on a KNOWN_MODELS list.
• Hoisted KNOWN_MODELS outside the component to avoid hook dependency lint warnings.

Comments suppressed due to low confidence (1)

src/components/AIConfigPopup.tsx:134

• showApiKey state can persist across modal close/reopen because the component returns null when closed (state is retained). If a user toggles to show the key, closing and reopening could unexpectedly render the key in plain text. Consider resetting showApiKey to false when isOpen becomes true (or on close/reset).

  useEffect(() => {
    if (isOpen) {
      const savedProvider = localStorage.getItem('aiProvider');
      const savedModel = localStorage.getItem('aiModel');
      const savedApiKey = localStorage.getItem('aiApiKey');
      const savedCustomEndpoint = localStorage.getItem('aiCustomEndpoint');
      const savedMaxTokens = localStorage.getItem('aiResMaxTokens');

      const savedShowFullPrompt = localStorage.getItem('aiShowFullPrompt') === 'true';
      const savedEnableCodeSelection = localStorage.getItem('aiEnableCodeSelectionMenu') !== 'false';
      const savedEnableInlineSuggestions = localStorage.getItem('aiEnableInlineSuggestions') !== 'false';

      if (savedProvider) setProvider(savedProvider);
      if (savedModel) setModel(savedModel);
      if (savedApiKey) setApiKey(savedApiKey);
      if (savedCustomEndpoint) setCustomEndpoint(savedCustomEndpoint);
      if (savedMaxTokens) setMaxTokens(savedMaxTokens);

      setShowFullPrompt(savedShowFullPrompt);
      setEnableCodeSelectionMenu(savedEnableCodeSelection);
      setEnableInlineSuggestions(savedEnableInlineSuggestions);
    }
  }, [isOpen]);

[Copilot]

The toggle button uses a hard-coded hover:text-gray-700, which will likely reduce contrast in dark mode (gray-700 on a dark background). Consider using a theme-aware hover color or conditional classes based on isDarkMode to maintain readable contrast.

Suggested change

	className={`absolute inset-y-0 right-0 pr-3 flex items-center ${theme.helpText} hover:text-gray-700`}
	className={`absolute inset-y-0 right-0 pr-3 flex items-center ${theme.helpText} hover:opacity-80`}

[Copilot]

This PR adds new user-facing behavior (API key reveal toggle and real-time model recognition/warning), but there are no unit tests covering it. Please add tests (e.g., in src/tests/components/) asserting the toggle changes the API key input type and that recognized vs unrecognized models render the correct status message for a given provider.

[Copilot]

The API-key visibility toggle button is not keyboard accessible (tabIndex={-1}) and has no accessible name. This prevents keyboard/screen-reader users from discovering or using the control; consider removing the negative tabIndex and adding an aria-label (and optionally aria-pressed) describing "Show/Hide API key".

[Copilot]

The model-name validation is strict string equality against KNOWN_MODELS. Trailing/leading whitespace (common when copy/pasting) will always show as "Unrecognized". Consider normalizing the input for comparison (e.g., trimming) and using the normalized value for includes().