fix: reactively update SplitGrid sourceImage when connection is made

The Split button was permanently disabled because sourceImage was only
set during execution, not when an edge was connected. Added a reactive
effect that watches for connected images and updates sourceImage.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/__tests__/SplitGridNode.test.tsx

@@ -51,6 +51,8 @@ describe("SplitGridNode", () => {
         currentNodeIds: [],
         groups: {},
         nodes: [],
+        edges: [],
+        getConnectedInputs: vi.fn(() => ({ images: [], videos: [], audio: [], model3d: null, text: null, dynamicInputs: {}, easeCurve: null })),
         getNodesWithComments: vi.fn(() => []),
         markCommentViewed: vi.fn(),
         setNavigationTarget: vi.fn(),
@@ -273,6 +275,8 @@ describe("SplitGridNode", () => {
           currentNodeIds: [],
           groups: {},
           nodes: [],
+          edges: [],
+          getConnectedInputs: vi.fn(() => ({ images: [], videos: [], audio: [], model3d: null, text: null, dynamicInputs: {}, easeCurve: null })),
           getNodesWithComments: vi.fn(() => []),
           markCommentViewed: vi.fn(),
           setNavigationTarget: vi.fn(),

src/components/nodes/SplitGridNode.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState, useEffect } from "react";
+import { useCallback, useState, useEffect, useMemo } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
 import { useWorkflowStore } from "@/store/workflowStore";
@@ -14,8 +14,29 @@ export function SplitGridNode({ id, data, selected }: NodeProps<SplitGridNodeTyp
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
   const isRunning = useWorkflowStore((state) => state.isRunning);
+  const getConnectedInputs = useWorkflowStore((state) => state.getConnectedInputs);
+  const edges = useWorkflowStore((state) => state.edges);
+  const nodes = useWorkflowStore((state) => state.nodes);
   const [showSettings, setShowSettings] = useState(false);
 
+  // Reactively track the connected source image
+  const hasIncomingImageConnection = useMemo(() => {
+    return edges.some((edge) => edge.target === id && edge.targetHandle === "image");
+  }, [edges, id]);
+
+  const connectedSourceImage = useMemo(() => {
+    if (!hasIncomingImageConnection) return null;
+    const { images } = getConnectedInputs(id);
+    return images[0] || null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasIncomingImageConnection, id, getConnectedInputs, nodes]);
+
+  useEffect(() => {
+    if (connectedSourceImage !== nodeData.sourceImage) {
+      updateNodeData(id, { sourceImage: connectedSourceImage });
+    }
+  }, [connectedSourceImage, id, updateNodeData, nodeData.sourceImage]);
+
   // Show settings modal on first creation (when not configured)
   useEffect(() => {
     if (!nodeData.isConfigured && (!nodeData.childNodeIds || nodeData.childNodeIds.length === 0)) {

src/store/execution/splitGridExecutor.ts

@@ -11,8 +11,8 @@ import type { NodeExecutionContext } from "./types";
 export async function executeSplitGrid(ctx: NodeExecutionContext): Promise<void> {
   const { node, getConnectedInputs, updateNodeData } = ctx;
 
-  const { images } = getConnectedInputs(node.id);
+  const connectedInputs = getConnectedInputs(node.id);
-  const sourceImage = images[0] || null;
+  const sourceImage = connectedInputs.images[0] || null;
 
   if (!sourceImage) {
     updateNodeData(node.id, {