From e631c5268c2a056dbcbbd6fc602ce0ac22ffbd40 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 2 Mar 2026 22:32:59 +1300
Subject: [PATCH] feat(46-03): remove header props from 8 node components
 (batch 2)

- PromptConstructorNode: removed title, customTitle, comment, header callbacks, onExpand
- PromptNode: removed title, customTitle, comment, header callbacks, onExpand, headerButtons
- RouterNode: removed title, customTitle, comment, header callbacks
- SplitGridNode: removed title, customTitle, comment, header callbacks
- SwitchNode: removed title, customTitle, comment, header callbacks
- VideoFrameGrabNode: removed title, customTitle, comment, header callbacks, onRun
- VideoTrimNode: removed title, customTitle, comment, header callbacks, onRun (all 3 variants)
- VideoStitchNode: removed title, customTitle, comment, header callbacks, onRun (all 3 variants)
---
 .../nodes/PromptConstructorNode.tsx           |  9 ------
 src/components/nodes/PromptNode.tsx           | 29 -------------------
 src/components/nodes/RouterNode.tsx           |  5 ----
 src/components/nodes/SplitGridNode.tsx        |  8 -----
 src/components/nodes/SwitchNode.tsx           |  5 ----
 src/components/nodes/VideoFrameGrabNode.tsx   |  9 ------
 src/components/nodes/VideoStitchNode.tsx      | 21 --------------
 src/components/nodes/VideoTrimNode.tsx        | 15 ----------
 8 files changed, 101 deletions(-)

diff --git a/src/components/nodes/PromptConstructorNode.tsx b/src/components/nodes/PromptConstructorNode.tsx
index b0a4a271..6f881ab8 100644
--- a/src/components/nodes/PromptConstructorNode.tsx
+++ b/src/components/nodes/PromptConstructorNode.tsx
@@ -4,7 +4,6 @@ import { useCallback, useState, useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { usePromptAutocomplete } from "@/hooks/usePromptAutocomplete";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { PromptConstructorNodeData, PromptNodeData, LLMGenerateNodeData, AvailableVariable } from "@/types";
@@ -15,7 +14,6 @@ type PromptConstructorNodeType = Node<PromptConstructorNodeData, "promptConstruc
 
 export function PromptConstructorNode({ id, data, selected }: NodeProps<PromptConstructorNodeType>) {
   const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const edges = useWorkflowStore((state) => state.edges);
   const nodes = useWorkflowStore((state) => state.nodes);
@@ -181,14 +179,7 @@ export function PromptConstructorNode({ id, data, selected }: NodeProps<PromptCo
     <>
       <BaseNode
         id={id}
-        title="Prompt Constructor"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-        onExpand={handleOpenModal}
         selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
       >
         {/* Text input handle */}
         <Handle
diff --git a/src/components/nodes/PromptNode.tsx b/src/components/nodes/PromptNode.tsx
index c967e0de..39d8acd6 100644
--- a/src/components/nodes/PromptNode.tsx
+++ b/src/components/nodes/PromptNode.tsx
@@ -4,7 +4,6 @@ import { useCallback, useState, useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { PromptNodeData } from "@/types";
 import { PromptEditorModal } from "@/components/modals/PromptEditorModal";
@@ -13,7 +12,6 @@ type PromptNodeType = Node<PromptNodeData, "prompt">;
 
 export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
   const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const incrementModalCount = useWorkflowStore((state) => state.incrementModalCount);
   const decrementModalCount = useWorkflowStore((state) => state.decrementModalCount);
@@ -115,34 +113,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
     <>
       <BaseNode
         id={id}
-        title="Prompt"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-        onExpand={handleOpenModal}
         selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
-        headerButtons={
-          <div className="relative ml-2 shrink-0 group">
-            <button
-              onClick={() => setShowVarDialog(true)}
-              className={`nodrag nopan p-0.5 rounded transition-all duration-200 ease-in-out flex items-center overflow-hidden group-hover:pr-2 ${
-                nodeData.variableName
-                  ? "text-blue-400 hover:text-blue-200 border border-blue-500/50"
-                  : "text-neutral-500 group-hover:text-neutral-200 border border-neutral-600"
-              }`}
-              title={nodeData.variableName ? `Variable: @${nodeData.variableName}` : "Set variable name"}
-            >
-              <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M16 12h4m0 0l-4-4m4 4l-4 4m-8-4H4m0 0l4 4m-4-4l4-4" />
-              </svg>
-              <span className="max-w-0 opacity-0 whitespace-nowrap text-[10px] transition-all duration-200 ease-in-out overflow-hidden group-hover:max-w-[60px] group-hover:opacity-100 group-hover:ml-1">
-                {nodeData.variableName ? `@${nodeData.variableName}` : "Variable"}
-              </span>
-            </button>
-          </div>
-        }
       >
         {/* Text input handle - for receiving text from LLM nodes */}
         <Handle
diff --git a/src/components/nodes/RouterNode.tsx b/src/components/nodes/RouterNode.tsx
index e3fb8c4b..0dc87616 100644
--- a/src/components/nodes/RouterNode.tsx
+++ b/src/components/nodes/RouterNode.tsx
@@ -71,11 +71,6 @@ export const RouterNode = memo(({ id, data, selected }: NodeProps<WorkflowNode>)
   return (
     <BaseNode
       id={id}
-      title="Router"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(customTitle) => updateNodeData(id, { customTitle })}
-      onCommentChange={(comment) => updateNodeData(id, { comment })}
       selected={selected}
       minWidth={200}
       minHeight={minHeight}
diff --git a/src/components/nodes/SplitGridNode.tsx b/src/components/nodes/SplitGridNode.tsx
index 635f20ca..c1d75251 100644
--- a/src/components/nodes/SplitGridNode.tsx
+++ b/src/components/nodes/SplitGridNode.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useState, useEffect } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { SplitGridNodeData } from "@/types";
 import { SplitGridSettingsModal } from "../SplitGridSettingsModal";
@@ -12,7 +11,6 @@ type SplitGridNodeType = Node<SplitGridNodeData, "splitGrid">;
 
 export function SplitGridNode({ id, data, selected }: NodeProps<SplitGridNodeType>) {
   const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
   const isRunning = useWorkflowStore((state) => state.isRunning);
@@ -40,14 +38,8 @@ export function SplitGridNode({ id, data, selected }: NodeProps<SplitGridNodeTyp
   return (
     <BaseNode
       id={id}
-      title="Split Grid"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
       selected={selected}
       hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
     >
       {/* Image input handle */}
       <Handle
diff --git a/src/components/nodes/SwitchNode.tsx b/src/components/nodes/SwitchNode.tsx
index a7a143a6..ca9bc709 100644
--- a/src/components/nodes/SwitchNode.tsx
+++ b/src/components/nodes/SwitchNode.tsx
@@ -115,11 +115,6 @@ export const SwitchNode = memo(({ id, data, selected }: NodeProps<WorkflowNode>)
   return (
     <BaseNode
       id={id}
-      title="Switch"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(customTitle) => updateNodeData(id, { customTitle })}
-      onCommentChange={(comment) => updateNodeData(id, { comment })}
       selected={selected}
       minWidth={220}
       minHeight={minHeight}
diff --git a/src/components/nodes/VideoFrameGrabNode.tsx b/src/components/nodes/VideoFrameGrabNode.tsx
index aa6509e5..9fac6551 100644
--- a/src/components/nodes/VideoFrameGrabNode.tsx
+++ b/src/components/nodes/VideoFrameGrabNode.tsx
@@ -3,7 +3,6 @@
 import React, { useMemo } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { VideoFrameGrabNodeData } from "@/types";
 
@@ -11,7 +10,6 @@ type VideoFrameGrabNodeType = Node<VideoFrameGrabNodeData, "videoFrameGrab">;
 
 export function VideoFrameGrabNode({ id, data, selected }: NodeProps<VideoFrameGrabNodeType>) {
   const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
   const isRunning = useWorkflowStore((state) => state.isRunning);
@@ -40,16 +38,9 @@ export function VideoFrameGrabNode({ id, data, selected }: NodeProps<VideoFrameG
   return (
     <BaseNode
       id={id}
-      title="Frame Grab"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-      onRun={canExtract ? handleExtract : undefined}
       selected={selected}
       isExecuting={isRunning}
       hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
       minWidth={320}
       minHeight={320}
     >
diff --git a/src/components/nodes/VideoStitchNode.tsx b/src/components/nodes/VideoStitchNode.tsx
index c39a86d0..aac0ebd5 100644
--- a/src/components/nodes/VideoStitchNode.tsx
+++ b/src/components/nodes/VideoStitchNode.tsx
@@ -3,7 +3,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { VideoStitchNodeData } from "@/types";
 import { checkEncoderSupport } from "@/hooks/useStitchVideos";
@@ -13,7 +12,6 @@ type VideoStitchNodeType = Node<VideoStitchNodeData, "videoStitch">;
 
 export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNodeType>) {
   const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const edges = useWorkflowStore((state) => state.edges);
   const nodes = useWorkflowStore((state) => state.nodes);
@@ -367,13 +365,7 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
     return (
       <BaseNode
         id={id}
-        title="Video Stitch"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
         selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
         minWidth={500}
         minHeight={280}
       >
@@ -403,13 +395,7 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
     return (
       <BaseNode
         id={id}
-        title="Video Stitch"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
         selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
         minWidth={500}
         minHeight={280}
       >
@@ -445,16 +431,9 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
   return (
     <BaseNode
       id={id}
-      title="Video Stitch"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-      onRun={handleStitch}
       selected={selected}
       isExecuting={isRunning}
       hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
       minWidth={500}
       minHeight={280}
     >
diff --git a/src/components/nodes/VideoTrimNode.tsx b/src/components/nodes/VideoTrimNode.tsx
index 19fe3ec4..e23599f0 100644
--- a/src/components/nodes/VideoTrimNode.tsx
+++ b/src/components/nodes/VideoTrimNode.tsx
@@ -3,7 +3,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { VideoTrimNodeData } from "@/types";
 import { checkEncoderSupport } from "@/hooks/useStitchVideos";
@@ -22,7 +21,6 @@ function formatTime(seconds: number): string {
 
 export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeType>) {
   const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
   const isRunning = useWorkflowStore((state) => state.isRunning);
@@ -234,13 +232,7 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
     return (
       <BaseNode
         id={id}
-        title="Video Trim"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
         selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
         minWidth={360}
         minHeight={360}
       >
@@ -261,16 +253,9 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
   return (
     <BaseNode
       id={id}
-      title="Video Trim"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-      onRun={canTrim ? handleTrim : undefined}
       selected={selected}
       isExecuting={isRunning}
       hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
       minWidth={360}
       minHeight={360}
     >