popiart-node-canvas/.planning/phases/07-video-connections/07-01-PLAN.md

phase	plan	type
07-video-connections	1	execute

Fix video handle connections to only allow valid targets (generateVideo, output nodes).

Purpose: Video output from GenerateVideoNode currently uses "image" handle type, allowing connections to any image-accepting node. However, video content can only be meaningfully used by generateVideo nodes (for video-to-video) or output nodes (for display). This creates confusion and broken workflows when video is connected to image-only nodes.

Output: Updated connection validation that enforces video→video/output only.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ./07-01-SUMMARY.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md

Key files: @src/components/WorkflowCanvas.tsx (connection validation: isValidConnection, getHandleType, getNodeHandles) @src/components/nodes/GenerateVideoNode.tsx (output handle at lines 294-299) @src/components/nodes/OutputNode.tsx (input handle at lines 78-83)

Current issue:

• GenerateVideoNode output uses id="image" and data-handletype="image" (line 294-299)
• isValidConnection only checks type matching (image↔image, text↔text)
• Video output can connect to any image input, but video content breaks non-video nodes

Design decision:

• Add "video" as a third handle type
• Video handles can connect to: generateVideo input, output node
• Video handles CANNOT connect to: nanoBanana, annotation, splitGrid, imageInput
• Keep backward compatibility: existing image connections remain valid

Task 1: Add video handle type to connection validation src/components/WorkflowCanvas.tsx Update the handle type system to support video:

1. Update getHandleType function to recognize video handles:

   • Return "video" if handleId === "video" or handleId.includes("video")
   • Return type should be "image" | "text" | "video" | null

2. Update isValidConnection function to add video-specific rules:

   • Video source can ONLY connect to:
     • generateVideo nodes (any handle)
     • output nodes
   • Get target node type from nodes array using connection.target
   • Add validation: if sourceType === "video" and target node is not generateVideo/output, reject

3. Update getNodeHandles function:

   • Change generateVideo from outputs: ["image"] to outputs: ["video"]
   • Keep output node with inputs: ["image"] (it accepts both image and video)

Note: The validation needs access to nodes array to check target node type. The function already has access via closure from the component scope. TypeScript compiles without errors: npm run build getHandleType returns "video" for video handles, isValidConnection rejects video→non-video/output connections, getNodeHandles shows video output for generateVideo

Task 2: Update GenerateVideoNode output handle src/components/nodes/GenerateVideoNode.tsx Update the output handle (around lines 294-310):

1. Change output Handle:

   • Change id="image" to id="video"
   • Change data-handletype="image" to data-handletype="video"

2. Keep the "Video" label as-is (it's already correct)

This change makes the handle semantically correct and triggers the new validation rules. TypeScript compiles, GenerateVideoNode renders with video handle GenerateVideoNode output handle has id="video" and data-handletype="video"

Task 3: Update getConnectedInputs for video data flow src/store/workflowStore.ts The `getConnectedInputs` function (around line 823) extracts output data from source nodes. Currently it returns generateVideo output as `type: "image"`. Update to handle video properly:

1. In getSourceOutput helper (around line 842), update the generateVideo case:

   • Return { type: "video", value: ... } instead of { type: "image", value: ... }

2. In the edge processing loop (around line 859):

   • Video type should be collected in images array (since video nodes consume it the same way)
   • OR add a new videos array to the return type if you want explicit separation

Recommendation: Keep video in images array for now since:

• generateVideo nodes treat video input the same as image input (for video-to-video)
• output node handles both image and video in contentSrc
• Separating would require changes to all consumers

The connection validation already prevents wrong connections, so data type is less critical. npm run build succeeds getSourceOutput returns type "video" for generateVideo nodes, data flow works correctly

Before declaring phase complete: - [ ] `npm run build` succeeds without errors - [ ] Create a generateVideo node and verify output handle shows as video (check data-handletype in DOM) - [ ] Attempt to connect video output to nanoBanana node - should be rejected - [ ] Attempt to connect video output to output node - should succeed - [ ] Attempt to connect video output to another generateVideo node - should succeed - [ ] Existing image connections still work (imageInput → nanoBanana, etc.)

<success_criteria>

• All tasks completed
• Build passes
• Video output can only connect to generateVideo or output nodes
• Image connections unaffected
• No TypeScript errors </success_criteria>

After completion, create `.planning/phases/07-video-connections/07-01-SUMMARY.md`:

Phase 7 Plan 1: Video Connections Summary

[One-liner: what shipped]

Accomplishments

• [Key outcomes]

Files Modified

• src/components/WorkflowCanvas.tsx - Updated connection validation
• src/components/nodes/GenerateVideoNode.tsx - Updated output handle
• src/store/workflowStore.ts - Updated data flow typing

Decisions Made

[Any decisions during implementation]

Issues Encountered

[Problems and resolutions, or "None"]

Next Phase Readiness

Phase 7 complete, ready for Phase 8 (Error Display)