From 01d2d5a7dc0b02d8fb48f46cab6fb6c3ad5d4f64 Mon Sep 17 00:00:00 2001
From: Zane <75694352+zanesq@users.noreply.github.com>
Date: Fri, 10 Oct 2025 11:25:12 -0700
Subject: [PATCH] force re-render fields to pick up custom params usage in
 instructions (#5112)

---
 .../src/components/recipes/shared/RecipeFormFields.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx b/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx
index 553c04f7..dc168748 100644
--- a/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx
+++ b/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx
@@ -38,6 +38,16 @@ export function RecipeFormFields({
   const [newParameterName, setNewParameterName] = useState('');
   const [expandedParameters, setExpandedParameters] = useState<Set<string>>(new Set());
 
+  // Force re-render when instructions, prompt, or activities change
+  const [_forceRender, setForceRender] = useState(0);
+
+  React.useEffect(() => {
+    return form.store.subscribe(() => {
+      // Force re-render when any form field changes to update parameter usage indicators
+      setForceRender((prev) => prev + 1);
+    });
+  }, [form.store]);
+
   const parseParametersFromInstructions = React.useCallback(
     (instructions: string, prompt?: string, activities?: string[]): Parameter[] => {
       const instructionVars = extractTemplateVariables(instructions);