UI recipes filter invalid, duplicate and unused params (#4615)

ui/desktop/src/components/BaseChat.tsx

@@ -205,6 +205,7 @@ function BaseChatContent({
   // Use shared recipe manager
   const {
     recipeConfig,
+    filteredParameters,
     initialPrompt,
     isGeneratingRecipe,
     isParameterModalOpen,
@@ -546,9 +547,9 @@ function BaseChatContent({
       />
 
       {/* Recipe Parameter Modal */}
-      {isParameterModalOpen && recipeConfig?.parameters && (
+      {isParameterModalOpen && filteredParameters.length > 0 && (
         <ParameterInputModal
-          parameters={recipeConfig.parameters}
+          parameters={filteredParameters}
           onSubmit={handleParameterSubmit}
           onClose={() => setIsParameterModalOpen(false)}
         />

ui/desktop/src/components/recipes/RecipesView.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { listSavedRecipes, convertToLocaleDateString } from '../../recipe/recipeStorage';
 import { FileText, Trash2, Bot, Calendar, AlertCircle } from 'lucide-react';
 import { ScrollArea } from '../ui/scroll-area';
@@ -12,6 +12,7 @@ import { useEscapeKey } from '../../hooks/useEscapeKey';
 import { deleteRecipe, RecipeManifestResponse } from '../../api';
 import CreateRecipeForm, { CreateRecipeButton } from './CreateRecipeForm';
 import ImportRecipeForm, { ImportRecipeButton } from './ImportRecipeForm';
+import { filterValidUsedParameters } from '../../utils/providerUtils';
 
 export default function RecipesView() {
   const [savedRecipes, setSavedRecipes] = useState<RecipeManifestResponse[]>([]);
@@ -134,6 +135,21 @@ export default function RecipesView() {
     }
   };
 
+  const filteredPreviewParameters = useMemo(() => {
+    if (!selectedRecipe?.recipe.parameters) {
+      return [];
+    }
+
+    return filterValidUsedParameters(selectedRecipe.recipe.parameters, {
+      instructions: selectedRecipe.recipe.instructions || undefined,
+      prompt: selectedRecipe.recipe.prompt || undefined,
+    });
+  }, [
+    selectedRecipe?.recipe.parameters,
+    selectedRecipe?.recipe.instructions,
+    selectedRecipe?.recipe.prompt,
+  ]);
+
   // Render a recipe item
   const RecipeItem = ({
     recipeManifestResponse,
@@ -410,11 +426,11 @@ export default function RecipesView() {
                 </div>
               )}
 
-              {selectedRecipe.recipe.parameters && selectedRecipe.recipe.parameters.length > 0 && (
+              {filteredPreviewParameters && filteredPreviewParameters.length > 0 && (
                 <div>
                   <h4 className="text-sm font-medium text-text-standard mb-2">Parameters</h4>
                   <div className="space-y-3">
-                    {selectedRecipe.recipe.parameters.map((param, index) => (
+                    {filteredPreviewParameters.map((param, index) => (
                       <div
                         key={index}
                         className="bg-background-muted border border-border-subtle p-3 rounded-lg"

ui/desktop/src/components/recipes/ViewRecipeModal.tsx

@@ -14,6 +14,7 @@ import ParameterInput from '../parameter/ParameterInput';
 import { saveRecipe, generateRecipeFilename } from '../../recipe/recipeStorage';
 import { toastSuccess, toastError } from '../../toasts';
 import { Button } from '../ui/button';
+import { filterValidUsedParameters } from '../../utils/providerUtils';
 
 interface ViewRecipeModalProps {
   isOpen: boolean;
@@ -124,6 +125,8 @@ export default function ViewRecipeModal({ isOpen, onClose, config }: ViewRecipeM
     }
   }, [instructions, prompt, parameters]);
 
+  // Filter parameters to only show valid ones that are actually used
+  const filteredParameters = filterValidUsedParameters(parameters, { instructions, prompt });
   const getCurrentConfig = useCallback((): Recipe => {
     // Transform the internal parameters state into the desired output format.
     const formattedParameters = parameters.map((param) => {
@@ -459,7 +462,7 @@ export default function ViewRecipeModal({ isOpen, onClose, config }: ViewRecipeM
               )}
             </div>
 
-            {parameters.map((parameter: Parameter) => (
+            {filteredParameters.map((parameter: Parameter) => (
               <ParameterInput
                 key={parameter.key}
                 parameter={parameter}