---
phase: 06-video-and-polish
plan: 01
type: execute
---

<objective>
Create GenerateVideo node supporting video-capable models from Replicate and fal.ai.

Purpose: Enable video generation workflows using the same multi-provider infrastructure built for images.
Output: Working GenerateVideoNode with provider/model selection and video output display.
</objective>

<execution_context>
~/.claude/get-shit-done/workflows/execute-phase.md
~/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md

# Prior phase context (established patterns):
@.planning/phases/03-generate-node-refactor/03-01-SUMMARY.md
@.planning/phases/03-generate-node-refactor/03-02-SUMMARY.md

# Key source files:
@src/components/nodes/GenerateImageNode.tsx
@src/app/api/generate/route.ts
@src/types/index.ts
@src/lib/providers/types.ts
@src/store/workflowStore.ts

**Tech stack available:** React, @xyflow/react, Zustand, Next.js API routes
**Established patterns:**
- Provider dropdown with conditional visibility based on API key
- Model selector fetching from /api/models with capabilities filter
- selectedModel object with {provider, modelId, displayName}
- Server-side provider dispatch in /api/generate
**Constraining decisions:**
- GenerateVideo as separate node type (not combined with GenerateImage)
- video capabilities: text-to-video, image-to-video
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create GenerateVideoNode component</name>
  <files>
    src/components/nodes/GenerateVideoNode.tsx,
    src/components/nodes/index.ts,
    src/types/index.ts,
    src/store/workflowStore.ts,
    src/components/WorkflowCanvas.tsx
  </files>
  <action>
Create GenerateVideoNode based on GenerateImageNode with these changes:
1. In types/index.ts:
   - Add "generateVideo" to NodeType union
   - Create GenerateVideoNodeData interface (copy NanoBananaNodeData, change outputImage to outputVideo: string | null, remove image-specific fields like aspectRatio, resolution, imageHistory)
   - Add to WorkflowNodeData union
2. In GenerateVideoNode.tsx:
   - Copy structure from GenerateImageNode
   - Change VIDEO_CAPABILITIES to ["text-to-video", "image-to-video"]
   - Fetch models with capabilities=text-to-video,image-to-video
   - Remove Gemini provider option (Gemini doesn't do video)
   - Show fal.ai always, Replicate when configured (like image node)
   - Display video output using HTML5 video element with controls
   - Remove aspect ratio/resolution selectors (video models have their own params)
3. In workflowStore.ts:
   - Add createDefaultNodeData case for "generateVideo"
   - Add defaultDimensions entry (same as nanoBanana: 200x280)
   - Add to getConnectedInputs to extract video from GenerateVideo nodes (check for outputVideo)
4. In WorkflowCanvas.tsx:
   - Add GenerateVideoNode to nodeTypes
   - Add minimap color (purple: "#9333ea")
5. In nodes/index.ts:
   - Export GenerateVideoNode
  </action>
  <verify>npm run build passes, no TypeScript errors</verify>
  <done>GenerateVideoNode renders, shows provider/model dropdowns, can be added to canvas</done>
</task>

<task type="auto">
  <name>Task 2: Add video generation to API route</name>
  <files>
    src/app/api/generate/route.ts,
    src/types/index.ts
  </files>
  <action>
Extend /api/generate to handle video generation:
1. Update GenerateResponse in types/index.ts:
   - Add optional video?: string field alongside image
   - Add optional contentType?: "image" | "video" field
2. In route.ts generateWithReplicate:
   - After fetching output, detect if output is video (check content-type header for video/*)
   - If video, return { type: "video", data: dataUrl } in outputs array
   - Video data URL format: data:video/mp4;base64,...
3. In route.ts generateWithFal:
   - fal.ai video models return { video: { url: "..." } } not images array
   - Check for result.video?.url in addition to result.images
   - If video URL found, fetch and convert to base64 with video mime type
4. In main POST handler:
   - Return video field in response when output type is video
   - Set contentType: "video" when returning video
5. Handle large video files:
   - Videos can be large, log warning if >10MB but still return
   - Consider returning URL directly for very large videos (>20MB) with a videoUrl field
  </action>
  <verify>
Test with curl: Create a prediction for a video model and verify video data returns
  </verify>
  <done>API returns video base64 or URL for video-capable models, contentType field indicates output type</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] npm run build succeeds without errors
- [ ] GenerateVideoNode appears in node palette
- [ ] Video model dropdown populates from fal.ai/Replicate
- [ ] API route handles video outputs correctly
</verification>

<success_criteria>
- All tasks completed
- All verification checks pass
- No TypeScript errors
- GenerateVideoNode can be added to canvas and configured
- Video generation API path is ready (execution tested in 06-02 with playback)
</success_criteria>

<output>
After completion, create `.planning/phases/06-video-and-polish/06-01-SUMMARY.md`
</output>