From a876dfe2622b0206c2cc2d788924424736d2c450 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 23 Mar 2026 22:14:30 +1300
Subject: [PATCH] feat: add "NBP Input" toggle to group context menu

Allow marking groups as NBP inputs for workflow export. Adds isNbpInput
flag to NodeGroup, a toggle row in the group context menu with checkmark
indicator, and a dashed border on marked group backgrounds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/GroupsOverlay.tsx | 18 +++++++++++++++++-
 src/types/workflow.ts            |  1 +
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/GroupsOverlay.tsx b/src/components/GroupsOverlay.tsx
index 65946afa..1374701c 100644
--- a/src/components/GroupsOverlay.tsx
+++ b/src/components/GroupsOverlay.tsx
@@ -46,7 +46,7 @@ function GroupBackground({ groupId }: GroupBackgroundProps) {
         width: group.size.width,
         height: group.size.height,
         backgroundColor: `${bgColor}60`,
-        border: `1px solid ${bgColor}`,
+        border: group.isNbpInput ? `2px dashed ${bgColor}` : `1px solid ${bgColor}`,
         pointerEvents: "none",
       }}
     />
@@ -439,6 +439,22 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
                     <span>{group.locked ? "Unlock" : "Lock"}</span>
                   </button>
 
+                  {/* NBP Input toggle row */}
+                  <button
+                    onClick={(e) => { e.stopPropagation(); updateGroup(groupId, { isNbpInput: !group.isNbpInput }); setShowMenu(false); }}
+                    className="flex items-center gap-2 px-3 py-1.5 w-full hover:bg-white/10 text-xs text-white/80 transition-colors"
+                  >
+                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+                    </svg>
+                    <span>NBP Input</span>
+                    {group.isNbpInput && (
+                      <svg className="w-3 h-3 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                    )}
+                  </button>
+
                   {/* Delete row */}
                   <button
                     onClick={(e) => { e.stopPropagation(); handleDelete(); }}
diff --git a/src/types/workflow.ts b/src/types/workflow.ts
index 4d4d1b5c..8662c062 100644
--- a/src/types/workflow.ts
+++ b/src/types/workflow.ts
@@ -50,4 +50,5 @@ export interface NodeGroup {
   position: { x: number; y: number };
   size: { width: number; height: number };
   locked?: boolean;
+  isNbpInput?: boolean;
 }