From 64b02159e09e9fedb0895492a27f70c0fbf0cac0 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 13 Mar 2026 02:47:23 -0400
Subject: [PATCH] fix: wire error prop to Input/Textarea components and
 eliminate duplicate loadTemplates on mount

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/scripts/ScriptFilterBar.tsx    |  8 ++-
 .../scripts/ScriptParameterField.tsx          | 52 ++++++++++++-------
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/scripts/ScriptFilterBar.tsx b/frontend/src/components/scripts/ScriptFilterBar.tsx
index c8dd579e..aadd6798 100644
--- a/frontend/src/components/scripts/ScriptFilterBar.tsx
+++ b/frontend/src/components/scripts/ScriptFilterBar.tsx
@@ -15,9 +15,15 @@ export function ScriptFilterBar({ inputValue, setInputValue }: Props) {
   const setCategory = useScriptGeneratorStore(s => s.setCategory)
   const setSearch = useScriptGeneratorStore(s => s.setSearch)
 
-  // Debounce: 300ms after the input value settles, push to store
+  // Debounce: 300ms after the input value settles, push to store.
+  // Skip on initial mount (store.searchQuery is already '' and page already called loadTemplates).
+  const isFirstRender = useRef(true)
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
+    }
     if (debounceRef.current) clearTimeout(debounceRef.current)
     debounceRef.current = setTimeout(() => {
       setSearch(inputValue)
diff --git a/frontend/src/components/scripts/ScriptParameterField.tsx b/frontend/src/components/scripts/ScriptParameterField.tsx
index d3c62f6e..5781ecf6 100644
--- a/frontend/src/components/scripts/ScriptParameterField.tsx
+++ b/frontend/src/components/scripts/ScriptParameterField.tsx
@@ -28,7 +28,12 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
 
   let input: React.ReactNode
 
+  // Track whether the shared Input/Textarea component renders the error internally
+  // (so we skip the manual <p> at the bottom for these types)
+  let errorRenderedByComponent = false
+
   if (param.type === 'text' || param.type === 'multi_text' || param.type === 'number') {
+    errorRenderedByComponent = true
     input = (
       <Input
         id={id}
@@ -41,31 +46,37 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
             : (param.placeholder ?? undefined)
         }
         disabled={disabled}
+        error={error}
       />
     )
   } else if (param.type === 'password') {
+    errorRenderedByComponent = true
     input = (
-      <div className="relative">
-        <Input
-          id={id}
-          type={showPassword ? 'text' : 'password'}
-          value={value}
-          onChange={handleChange}
-          placeholder={param.placeholder ?? undefined}
-          disabled={disabled}
-        />
-        <button
-          type="button"
-          onClick={() => setShowPassword(v => !v)}
-          className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-          tabIndex={-1}
-          aria-label={showPassword ? 'Hide password' : 'Show password'}
-        >
-          {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
-        </button>
+      <div className="flex flex-col gap-1">
+        <div className="relative">
+          <Input
+            id={id}
+            type={showPassword ? 'text' : 'password'}
+            value={value}
+            onChange={handleChange}
+            placeholder={param.placeholder ?? undefined}
+            disabled={disabled}
+            error={error}
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(v => !v)}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            tabIndex={-1}
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
+          >
+            {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
+          </button>
+        </div>
       </div>
     )
   } else if (param.type === 'textarea') {
+    errorRenderedByComponent = true
     input = (
       <Textarea
         id={id}
@@ -74,6 +85,7 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
         placeholder={param.placeholder ?? undefined}
         disabled={disabled}
         rows={4}
+        error={error}
       />
     )
   } else if (param.type === 'select') {
@@ -111,12 +123,14 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
     )
   } else {
     // Fallback for unknown types
+    errorRenderedByComponent = true
     input = (
       <Input
         id={id}
         value={value}
         onChange={handleChange}
         disabled={disabled}
+        error={error}
       />
     )
   }
@@ -136,7 +150,7 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
       {param.help_text && (
         <p className="text-xs text-muted-foreground mt-1">{param.help_text}</p>
       )}
-      {error && (
+      {!errorRenderedByComponent && error && (
         <p className="mt-1.5 text-xs text-red-400">{error}</p>
       )}
     </div>