From f8cfa26e5b958fd6c9414e0884cc181dcd7339b9 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sun, 8 Mar 2026 23:10:26 +1300
Subject: [PATCH] feat(47-01): add ControlPanel conditional hiding and
 ProjectSetupModal toggle

- Import useInlineParameters hook in ControlPanel and ProjectSetupModal
- Define GENERATION_NODE_TYPES constant for conditional hiding logic
- Hide ControlPanel for generation nodes when inline parameters enabled
- ControlPanel still shows for easeCurve and conditionalSwitch regardless of setting
- Add inline parameters toggle to ProjectSetupModal Project tab
- Toggle labeled 'Inline Parameters' with descriptive help text
- Setting persists to localStorage and applies immediately
---
 src/components/ProjectSetupModal.tsx  | 21 +++++++++++++++++++++
 src/components/nodes/ControlPanel.tsx | 20 ++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/src/components/ProjectSetupModal.tsx b/src/components/ProjectSetupModal.tsx
index bf081d99..0b278316 100644
--- a/src/components/ProjectSetupModal.tsx
+++ b/src/components/ProjectSetupModal.tsx
@@ -8,6 +8,7 @@ import { EnvStatusResponse } from "@/app/api/env-status/route";
 import { loadNodeDefaults, saveNodeDefaults } from "@/store/utils/localStorage";
 import { ProviderModel } from "@/lib/providers/types";
 import { ModelSearchDialog } from "@/components/modals/ModelSearchDialog";
+import { useInlineParameters } from "@/hooks/useInlineParameters";
 
 // LLM provider and model options (mirrored from LLMGenerateNode)
 const LLM_PROVIDERS: { value: LLMProvider; label: string }[] = [
@@ -140,6 +141,9 @@ export function ProjectSetupModal({
     updateCanvasNavigationSettings,
   } = useWorkflowStore();
 
+  // Inline parameters hook
+  const { inlineParametersEnabled, setInlineParameters } = useInlineParameters();
+
   // Tab state
   const [activeTab, setActiveTab] = useState<"project" | "providers" | "nodeDefaults" | "canvas">("project");
 
@@ -479,6 +483,23 @@ export function ProjectSetupModal({
               </label>
             </div>
 
+            <div className="pt-2 border-t border-neutral-700">
+              <label className="flex items-center gap-3 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={inlineParametersEnabled}
+                  onChange={(e) => setInlineParameters(e.target.checked)}
+                  className="w-4 h-4 rounded border-neutral-600 bg-neutral-900 text-blue-500 focus:ring-blue-500 focus:ring-offset-neutral-800"
+                />
+                <div>
+                  <span className="text-sm text-neutral-200">Inline Parameters</span>
+                  <p className="text-xs text-neutral-500">
+                    Show model parameters inside generation nodes instead of the side panel
+                  </p>
+                </div>
+              </label>
+            </div>
+
             {error && <p className="text-sm text-red-400">{error}</p>}
           </div>
         )}
diff --git a/src/components/nodes/ControlPanel.tsx b/src/components/nodes/ControlPanel.tsx
index a5176ed8..4a51fd83 100644
--- a/src/components/nodes/ControlPanel.tsx
+++ b/src/components/nodes/ControlPanel.tsx
@@ -14,6 +14,7 @@ import { evaluateRule } from "@/store/utils/ruleEvaluation";
 import { EASING_PRESETS, getPresetBezier, getEasingBezier } from "@/lib/easing-presets";
 import { getAllEasingNames, getEasingFunction } from "@/lib/easing-functions";
 import { getModelPageUrl, getProviderDisplayName } from "@/utils/providerUrls";
+import { useInlineParameters } from "@/hooks/useInlineParameters";
 
 // List of node types that have configurable parameters
 const CONFIGURABLE_NODE_TYPES: NodeType[] = [
@@ -26,6 +27,15 @@ const CONFIGURABLE_NODE_TYPES: NodeType[] = [
   "conditionalSwitch",
 ];
 
+// Generation node types that can use inline parameters
+const GENERATION_NODE_TYPES: NodeType[] = [
+  "nanoBanana",
+  "generateVideo",
+  "generate3d",
+  "generateAudio",
+  "llmGenerate",
+];
+
 // Base 10 aspect ratios (all Gemini image models)
 const BASE_ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"];
 
@@ -99,6 +109,7 @@ function generateEasingPolyline(
  */
 export function ControlPanel() {
   const nodes = useWorkflowStore((state) => state.nodes);
+  const { inlineParametersEnabled } = useInlineParameters();
 
   // Get the single selected node
   const selectedNode = useMemo(() => {
@@ -115,6 +126,15 @@ export function ControlPanel() {
     return null;
   }
 
+  // Check if this is a generation node
+  const isGenerationNode = selectedNode &&
+    GENERATION_NODE_TYPES.includes(selectedNode.type as NodeType);
+
+  // Hide for generation nodes when inline parameters enabled
+  if (isGenerationNode && inlineParametersEnabled) {
+    return null;
+  }
+
   return (
     <div className="fixed top-0 right-6 h-screen z-[90] flex items-center pointer-events-none">
       <div