diff --git a/.planning/phases/07-video-connections/07-01-PLAN.md b/.planning/phases/07-video-connections/07-01-PLAN.md new file mode 100644 index 00000000..8e57dbee --- /dev/null +++ b/.planning/phases/07-video-connections/07-01-PLAN.md @@ -0,0 +1,156 @@ +--- +phase: 07-video-connections +plan: 01 +type: 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. + + + +~/.claude/get-shit-done/workflows/execute-phase.md +./07-01-SUMMARY.md + + + +@.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.) + + + +- All tasks completed +- Build passes +- Video output can only connect to generateVideo or output nodes +- Image connections unaffected +- No TypeScript errors + + + +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) +