| phase |
plan |
type |
| 06-video-and-polish |
4 |
execute |
Handle edge cases, improve error states, and complete final polish for multi-provider support.
Purpose: Ensure robust, production-ready multi-provider experience with clear error messages and graceful degradation.
Output: Polished multi-provider integration ready for users.
<execution_context>
~/.claude/get-shit-done/workflows/execute-phase.md
~/.claude/get-shit-done/templates/summary.md
~/.claude/get-shit-done/references/checkpoints.md
</execution_context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/ISSUES.md
Prior plans in this phase:
@.planning/phases/06-video-and-polish/06-01-SUMMARY.md
@.planning/phases/06-video-and-polish/06-02-SUMMARY.md
@.planning/phases/06-video-and-polish/06-03-SUMMARY.md
Key source files:
@src/components/nodes/GenerateImageNode.tsx
@src/components/nodes/GenerateVideoNode.tsx
@src/components/nodes/OutputNode.tsx
@src/app/api/generate/route.ts
@src/store/workflowStore.ts
Issues to address:
- UAT-001: Provider icons should use real logos (cosmetic, if time permits)
Edge cases to handle:
- Model list fails to load
- Generation times out (video generation can be slow)
- Large video files
- Invalid parameters
- Provider rate limits
Task 1: Improve error handling and loading states
src/components/nodes/GenerateImageNode.tsx,
src/components/nodes/GenerateVideoNode.tsx,
src/components/nodes/ModelParameters.tsx,
src/app/api/generate/route.ts
Enhance error handling across generation nodes:
1. In GenerateImageNode/GenerateVideoNode:
- Show clear error when model list fails: "Failed to load models. Check API key."
- Add retry button for model list fetch
- Show loading spinner when fetching models
- Display model fetch error in a toast or inline message
2. In ModelParameters:
- Handle schema fetch failure gracefully: "Parameters unavailable"
- Show loading state while fetching schema
- Cache schema in component state to avoid re-fetching
3. In API route.ts:
- Improve error messages: include model name in errors
- Handle timeout explicitly: "Generation timed out after 5 minutes. Video models may take longer - try again."
- Detect rate limit errors (429) and provide helpful message
- For Replicate: if prediction fails, include failure reason from API
- For fal.ai: parse error response body for details
4. Video-specific handling:
- Warn if video file is very large (>50MB): "Video generated but file is large ({size}MB)"
- If video fetch fails, try to return URL directly as fallback
Simulate errors (bad API key, timeout) and verify clear error messages appear
Clear error messages for all failure modes, retry capability, loading states visible
Task 2: Parameter validation and defaults
src/components/nodes/ModelParameters.tsx,
src/store/workflowStore.ts
Add input validation for model parameters:
1. In ModelParameters:
- Validate number inputs against min/max from schema
- Show validation error inline: red border, error text below
- Prevent invalid values from being saved
- For enum parameters: use select dropdown with options
- Set default values from schema when parameter is first shown
- Reset parameters when model changes
2. In workflowStore executeWorkflow:
- Filter out parameters with invalid values before API call
- Log warning if parameters were filtered
3. Common parameter handling:
- seed: accept integers only, positive
- num_inference_steps: typically 1-100, integer
- guidance_scale: typically 0-20, float
- width/height: typically 256-2048, multiples of 8
- negative_prompt: string, no validation
4. Clear parameters when switching providers:
- Parameters from one provider likely don't apply to another
- Reset parameters state when provider changes
Enter invalid parameter values, verify validation errors appear and prevent submission
Parameters validate against schema, invalid values prevented, defaults applied
Task 3: Final cleanup and testing
src/store/workflowStore.ts,
src/components/FloatingActionBar.tsx,
src/components/modals/ModelSearchDialog.tsx
Final polish and integration testing:
1. Update MODEL.md search dialog:
- Add video capability badges display
- Ensure video models appear when searching
- Filter by capability when opened from GenerateVideo icon (if applicable)
2. Update FloatingActionBar:
- Consider adding video icon for quick GenerateVideo node creation
- Or reuse existing provider icons (clicking them for video)
3. Test complete workflows:
- Text -> GenerateImage -> Output (existing, verify still works)
- Text -> GenerateVideo -> Output (new)
- Image -> GenerateImage (img2img) -> Output
- Image -> GenerateVideo (img2vid) -> Output
4. Verify backward compatibility:
- Load existing workflow with old nanoBanana nodes
- Confirm they still execute correctly
5. Clean up any TODO comments or temporary code from phase development
6. Update types to mark deprecated aliases:
- Add
@deprecated JSDoc to NanoBananaNode alias
All four workflow patterns execute successfully:
- Text to image with Replicate
- Text to video with fal.ai
- Image to image with fal.ai
- Image to video with Replicate (if model available)
All workflows functional, backward compatible, code cleaned up
Complete multi-provider video generation with custom parameters
1. Run: npm run dev
2. Test text-to-video workflow:
- Prompt node -> GenerateVideo (fal.ai, pick video model) -> Output
- Enter a prompt, run workflow
- Verify video plays in output node
3. Test custom parameters:
- Select external model in GenerateImage
- Expand "Parameters" section
- Modify a value (e.g., seed=42)
- Run generation, verify parameter affects output
4. Test error handling:
- Remove Replicate API key, try to select Replicate model
- Verify clear error message
5. Test backward compatibility:
- Load an existing workflow with NanoBanana nodes
- Run it, verify Gemini generation still works
6. Test video download:
- Generate a video, click download in output node
- Verify .mp4 file downloads correctly
Type "approved" to complete Phase 6, or describe issues
Before declaring plan complete:
- [ ] npm run build succeeds without errors
- [ ] All error states have clear messages
- [ ] Parameter validation works correctly
- [ ] All four workflow patterns tested
- [ ] Backward compatibility verified
- [ ] Human verification approved
<success_criteria>
- All tasks completed
- All verification checks pass
- Human verification approved
- No TypeScript errors
- Phase 6 complete - Video & Polish milestone achieved
</success_criteria>
After completion, create `.planning/phases/06-video-and-polish/06-04-SUMMARY.md`
Additionally, update:
- .planning/STATE.md: Mark Phase 6 complete
- .planning/ROADMAP.md: Check off all Phase 6 plans
- .planning/ISSUES.md: Resolve ISS-001 as addressed in 06-03
