From 9acbedf4b75c6314f659e94f9d0721a40595201d Mon Sep 17 00:00:00 2001
From: Siddharth Kumar Sah <siddharth123sk@gmail.com>
Date: Sat, 28 Mar 2026 16:17:39 +0800
Subject: [PATCH] fix: prevent pipeline step settings from resetting on
 collapse

The settings panel used conditional rendering ({isExpanded && ...})
which unmounted the Controls component on collapse, losing all state.
Switch to CSS hidden class so the component stays mounted and settings
persist when the panel is collapsed and re-expanded.
---
 .../src/components/tools/pipeline-builder.tsx | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/tools/pipeline-builder.tsx b/apps/web/src/components/tools/pipeline-builder.tsx
index d2b2b059..d6f9456d 100644
--- a/apps/web/src/components/tools/pipeline-builder.tsx
+++ b/apps/web/src/components/tools/pipeline-builder.tsx
@@ -284,17 +284,19 @@ export function PipelineBuilder({
                   </div>
                 </div>
 
-                {/* Expanded settings */}
-                {isExpanded && (
-                  <div className="border-t border-border p-3 bg-muted/10 space-y-3">
-                    <p className="text-xs text-muted-foreground">{tool.description}</p>
-                    <PipelineStepSettings
-                      toolId={step.toolId}
-                      settings={step.settings}
-                      onChange={(s) => updateStepSettings(step.id, s)}
-                    />
-                  </div>
-                )}
+                {/* Settings panel - hidden when collapsed, never unmounted so state persists */}
+                <div
+                  className={
+                    isExpanded ? "border-t border-border p-3 bg-muted/10 space-y-3" : "hidden"
+                  }
+                >
+                  <p className="text-xs text-muted-foreground">{tool.description}</p>
+                  <PipelineStepSettings
+                    toolId={step.toolId}
+                    settings={step.settings}
+                    onChange={(s) => updateStepSettings(step.id, s)}
+                  />
+                </div>
               </div>
             );
           })