From 6381c1d7f746358e8e5964d04c22b9ea1649c703 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 24 Mar 2026 22:22:47 +1300
Subject: [PATCH] feat: add Optional/Required toggle button to input node
 headers

Shows a toggle in the FloatingNodeHeader for imageInput, audioInput,
and prompt nodes. When toggled on, the button turns amber and shows
"Optional"; when off, it shows "Required" in the default style.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/WorkflowCanvas.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/WorkflowCanvas.tsx b/src/components/WorkflowCanvas.tsx
index 209485de..ff3e53c3 100644
--- a/src/components/WorkflowCanvas.tsx
+++ b/src/components/WorkflowCanvas.tsx
@@ -2107,6 +2107,23 @@ export function WorkflowCanvas() {
               </button>
             ) : undefined;
 
+            // Optional toggle for input nodes
+            const isInputNode = node.type === "imageInput" || node.type === "audioInput" || node.type === "prompt";
+            const isOptional = !!(node.data as any)?.isOptional;
+            const optionalToggle = isInputNode ? (
+              <button
+                onClick={() => updateNodeData(node.id, { isOptional: !isOptional })}
+                className={`nodrag nopan text-[10px] py-0.5 px-1.5 rounded transition-colors ${
+                  isOptional
+                    ? "bg-amber-600/80 hover:bg-amber-500/80 text-white border border-amber-500/50"
+                    : "bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 text-neutral-400"
+                }`}
+                title={isOptional ? "This input is optional — empty inputs will be skipped" : "Mark as optional — empty inputs will skip this branch"}
+              >
+                {isOptional ? "Optional" : "Required"}
+              </button>
+            ) : undefined;
+
             return (
               <FloatingNodeHeader
                 key={`header-${node.id}`}
@@ -2123,6 +2140,7 @@ export function WorkflowCanvas() {
                 comment={node.data?.comment}
                 provider={(node.data as any)?.selectedModel?.provider}
                 headerAction={browseAction}
+                headerButtons={optionalToggle}
                 onCustomTitleChange={handleCustomTitleChange}
                 onCommentChange={handleCommentChange}
                 onRunNode={handleRunNode}