fix: handle indexed handles and cursor jumping in prompt nodes

- Update getHandleType() to recognize indexed handles (text-0, image-0)
  used by external providers like Replicate and fal.ai
- Fix validateWorkflow() to accept indexed text handles for nanoBanana nodes
- Add validation for generateVideo nodes requiring text input
- Use local state pattern in PromptNode to prevent cursor jumping during typing

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

src/components/WorkflowCanvas.tsx

@@ -65,10 +65,10 @@ const getHandleType = (handleId: string | null | undefined): "image" | "text" |
   // Standard handles
   if (handleId === "video") return "video";
   if (handleId === "image" || handleId === "text") return handleId;
-  // Dynamic handles - check naming patterns
+  // Dynamic handles - check naming patterns (including indexed: text-0, image-0)
   if (handleId.includes("video")) return "video";
-  if (handleId.includes("image") || handleId.includes("frame")) return "image";
-  if (handleId === "prompt" || handleId === "negative_prompt" || handleId.includes("prompt")) return "text";
+  if (handleId.startsWith("image-") || handleId.includes("image") || handleId.includes("frame")) return "image";
+  if (handleId.startsWith("text-") || handleId === "prompt" || handleId === "negative_prompt" || handleId.includes("prompt")) return "text";
   return null;
 };
 

src/components/nodes/PromptNode.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
@@ -19,13 +19,35 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
   const decrementModalCount = useWorkflowStore((state) => state.decrementModalCount);
   const [isModalOpenLocal, setIsModalOpenLocal] = useState(false);
 
+  // Local state for prompt to prevent cursor jumping during typing
+  const [localPrompt, setLocalPrompt] = useState(nodeData.prompt);
+  const [isEditing, setIsEditing] = useState(false);
+
+  // Sync from props when not actively editing
+  useEffect(() => {
+    if (!isEditing) {
+      setLocalPrompt(nodeData.prompt);
+    }
+  }, [nodeData.prompt, isEditing]);
+
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      updateNodeData(id, { prompt: e.target.value });
+      setLocalPrompt(e.target.value);
     },
-    [id, updateNodeData]
+    []
   );
 
+  const handleFocus = useCallback(() => {
+    setIsEditing(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    setIsEditing(false);
+    if (localPrompt !== nodeData.prompt) {
+      updateNodeData(id, { prompt: localPrompt });
+    }
+  }, [id, localPrompt, nodeData.prompt, updateNodeData]);
+
   const handleOpenModal = useCallback(() => {
     setIsModalOpenLocal(true);
     incrementModalCount();
@@ -57,8 +79,10 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
         commentNavigation={commentNavigation ?? undefined}
       >
         <textarea
-          value={nodeData.prompt}
+          value={localPrompt}
           onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           placeholder="Describe what to generate..."
           className="nodrag nopan nowheel w-full flex-1 min-h-[70px] p-2 text-xs leading-relaxed text-neutral-100 border border-neutral-700 rounded bg-neutral-900/50 resize-none focus:outline-none focus:ring-1 focus:ring-neutral-600 focus:border-neutral-600 placeholder:text-neutral-500"
         />

src/store/workflowStore.ts

@@ -819,7 +819,8 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
       .filter((n) => n.type === "nanoBanana")
       .forEach((node) => {
         const textConnected = edges.some(
-          (e) => e.target === node.id && e.targetHandle === "text"
+          (e) => e.target === node.id &&
+                 (e.targetHandle === "text" || e.targetHandle?.startsWith("text-"))
         );
 
         if (!textConnected) {
@@ -827,6 +828,20 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
         }
       });
 
+    // Check generateVideo nodes have required text input
+    nodes
+      .filter((n) => n.type === "generateVideo")
+      .forEach((node) => {
+        const textConnected = edges.some(
+          (e) => e.target === node.id &&
+                 (e.targetHandle === "text" || e.targetHandle?.startsWith("text-"))
+        );
+
+        if (!textConnected) {
+          errors.push(`Video node "${node.id}" missing text input`);
+        }
+      });
+
     // Check annotation nodes have image input (either connected or manually loaded)
     nodes
       .filter((n) => n.type === "annotation")