Browse Source
Phase 7: Video Connections - 1 plan, 3 tasks - Add video handle type to connection validation - Update GenerateVideoNode output handle - Fix video data flow typing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>handoff-20260429-1057
shrimbly
6 months ago
1 changed files with 156 additions and 0 deletions
@ -0,0 +1,156 @@ |
|||||
|
--- |
||||
|
phase: 07-video-connections |
||||
|
plan: 01 |
||||
|
type: execute |
||||
|
--- |
||||
|
|
||||
|
<objective> |
||||
|
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. |
||||
|
</objective> |
||||
|
|
||||
|
<execution_context> |
||||
|
~/.claude/get-shit-done/workflows/execute-phase.md |
||||
|
./07-01-SUMMARY.md |
||||
|
</execution_context> |
||||
|
|
||||
|
<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 |
||||
|
</context> |
||||
|
|
||||
|
<tasks> |
||||
|
|
||||
|
<task type="auto"> |
||||
|
<name>Task 1: Add video handle type to connection validation</name> |
||||
|
<files>src/components/WorkflowCanvas.tsx</files> |
||||
|
<action> |
||||
|
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. |
||||
|
</action> |
||||
|
<verify>TypeScript compiles without errors: `npm run build`</verify> |
||||
|
<done>getHandleType returns "video" for video handles, isValidConnection rejects video→non-video/output connections, getNodeHandles shows video output for generateVideo</done> |
||||
|
</task> |
||||
|
|
||||
|
<task type="auto"> |
||||
|
<name>Task 2: Update GenerateVideoNode output handle</name> |
||||
|
<files>src/components/nodes/GenerateVideoNode.tsx</files> |
||||
|
<action> |
||||
|
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. |
||||
|
</action> |
||||
|
<verify>TypeScript compiles, GenerateVideoNode renders with video handle</verify> |
||||
|
<done>GenerateVideoNode output handle has id="video" and data-handletype="video"</done> |
||||
|
</task> |
||||
|
|
||||
|
<task type="auto"> |
||||
|
<name>Task 3: Update getConnectedInputs for video data flow</name> |
||||
|
<files>src/store/workflowStore.ts</files> |
||||
|
<action> |
||||
|
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. |
||||
|
</action> |
||||
|
<verify>npm run build succeeds</verify> |
||||
|
<done>getSourceOutput returns type "video" for generateVideo nodes, data flow works correctly</done> |
||||
|
</task> |
||||
|
|
||||
|
</tasks> |
||||
|
|
||||
|
<verification> |
||||
|
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.) |
||||
|
</verification> |
||||
|
|
||||
|
<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> |
||||
|
|
||||
|
<output> |
||||
|
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) |
||||
|
</output> |
||||
Loading…
Reference in new issue