- Create src/store/utils/nodeDefaults.ts with node creation utilities
- Move createDefaultNodeData function (90 lines)
- Move GROUP_COLORS and GROUP_COLOR_ORDER constants
- Consolidate defaultNodeDimensions (was duplicated in addNode and createGroup)
- Fix: createGroup's dimensions now includes generateVideo node type
- Re-export GROUP_COLORS from workflowStore for backward compatibility
Phase 16: Store Modularization
- 3 plans created
- 9 total tasks defined
- Ready for execution
Plans:
- 16-01: Extract localStorage helpers and node defaults
- 16-02: Extract execution logic into dedicated modules
- 16-03: Create Zustand slices and compose store
- Create PromptNode.test.tsx with React Testing Library
- Test textarea rendering and placeholder
- Test initial prompt value display
- Test updateNodeData callback on user input
- Mock Zustand store and wrap with ReactFlowProvider
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add jsdom, @testing-library/react, @testing-library/jest-dom, vite-tsconfig-paths
- Update vitest.config.ts with jsdom environment, react and tsconfigPaths plugins
- Create src/test/setup.ts with cleanup and jest-dom matchers
- Add vitest/globals type to tsconfig.json
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Always render image/text handles with placeholders for unused inputs
- Placeholder handles (dimmed 30%) preserve connections for models that
don't use that input type (e.g., text-to-image models)
- Normalize dynamic handle IDs to standard values (image, text, image-0)
- Update findCompatibleHandle to return normalized IDs
- Map normalized handles to schema names in getConnectedInputs
- Exclude image_size from image input detection
- Switch save-generation to hash suffix format for better readability
Co-Authored-By: Claude <noreply@anthropic.com>
- Add MD5 hashing of buffer content for deduplication
- Check for existing file by hash prefix before saving
- Use hash-prefixed filenames: {hash}_{prompt}.{ext}
- Add isDuplicate field to response JSON
- Log deduplication events for observability
- Fix isImageInput() to use word-boundary checks instead of substring
matching, preventing num_images from being misclassified as image input
- Fix stale node data in workflow execution by getting fresh data from
store instead of using captured array references
- Add missing parameters to regenerateNode request bodies for both
nanoBanana and generateVideo nodes
- Update fal.ai schema fetch to use Model Search API endpoint
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Changed DEFAULT_TTL from 10 minutes to 60 minutes
- Reduces API calls to provider model listing endpoints
- Models don't change frequently, longer TTL is appropriate
- Show save icon with red dot for unsaved projects
- Add folder icon for "Open project" on left side
- Show settings icon for unsaved projects
- Display "Untitled" as project name placeholder
- Always show "Not saved" status on right side
- Consistent icon layout between saved/unsaved states
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Gemini sparkle logo to ProviderBadge component
- Move provider badge to left of title as prefix
- Remove "Generate Image/Video" text, show only model name
- Add titlePrefix prop to BaseNode for prepending icons
- Increase badge size from w-3 to w-3.5 for better visibility
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Group file operations (save, open folder) together with subtle separator
- Separate settings button with visual spacing
- Add hover background states to icon buttons for better interactivity
- Improve unsaved indicator with ring outline for better visibility
- Use consistent padding (p-1.5) and rounded corners
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add ProviderBadge component showing Replicate/fal.ai icons
- Display badge in node header next to Browse button
- Gemini nodes show no badge (default provider)
- Reuse official SVG paths from FloatingActionBar
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 11: UI Polish
- 1 plan created
- 3 tasks defined (2 auto + 1 verification)
- Resolved UAT-001 (provider icons now use real logos)
- Ready for execution
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create 09-01-SUMMARY.md with implementation details
- Update STATE.md with current position and metrics
- Update ROADMAP.md to mark Phase 9 complete
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add isLoadingCarouselVideo state for loading indicator
- Add generationsPath from store for video loading
- Add loadVideoById callback to fetch videos from API
- Add carousel navigation handlers (handleCarouselPrevious/Next)
- Add hasCarouselVideos check for conditional display
- Add carousel UI with prev/next buttons and position indicator
- Add loading overlay during carousel navigation
- Update validation.ts with videoHistory fields
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add support for multiple file extensions (png, jpg, jpeg, webp, gif, mp4, webm, mov)
- Search for file by ID with any supported extension
- Return appropriate MIME type based on actual file extension
- Return video field for video files, image field for image files
- Include contentType field in response to indicate type
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add CarouselVideoItem type to types/index.ts
- Update GenerateVideoNodeData with videoHistory and selectedVideoHistoryIndex
- Add default values in createDefaultNodeData for generateVideo
- Add video history tracking in executeWorkflow for generateVideo
- Add video history tracking in regenerateNode for generateVideo
- Save videos with videoId for carousel support
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Import useToast and useRef for error handling
- Add useEffect to trigger persistent toast when error occurs
- Add red error overlay visible over previous output video
- Overlay shows error icon and directs user to toast for details
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Import useToast and useRef for error handling
- Add useEffect to trigger persistent toast when error occurs
- Add red error overlay visible over previous output image
- Overlay shows error icon and directs user to toast for details
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Move toast position from bottom-center to top-right
- Add persistent mode to disable auto-dismiss for errors
- Add expandable details section for full error messages
- Maintain backward compatibility with existing callers
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 08: Error Display
- 1 plan created
- 4 tasks defined (3 auto + 1 checkpoint)
- Toast notifications in top-right corner
- Error overlays on generate nodes
- Ready for execution
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>
- Updated .env.example to include new API keys for OpenAI, Replicate, and fal.ai.
- Modified API routes to prioritize user-provided API keys over environment variables for Gemini and OpenAI.
- Improved error messages for missing API keys to guide users on configuration.
- Enhanced ProjectSetupModal to support OpenAI provider and manage API key overrides.
- Updated workflow store to handle new provider settings and API key integration for OpenAI.
- Added functionality to auto-save generated images and videos to the specified directory.
- Introduced a model search dialog for selecting external models in GenerateImageNode and GenerateVideoNode.
- Updated node titles to reflect selected models dynamically.
- Improved parameter handling by expanding the ModelParameters component to notify parent nodes on schema load.
- Adjusted handle positions and styles for better alignment and visual consistency.
- Enhanced input validation and processing for dynamic inputs across the workflow.
Use calc() to offset handle positions by 5px (half of 10px handle size)
to center handles at their percentage positions. This ensures edge
connection points align with the visible handle dots and labels.
Avoid using CSS transform which breaks React Flow's handle detection.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use getHandleType() for dynamic handle recognition when dropping connections
- Add findCompatibleHandle() helper that checks inputSchema for dynamic handles
- Include generateVideo in handle mapping for menu selection
- Menu now correctly shows and connects to nodes with dynamic schema-based handles
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Handle colors: cyan (#22d3ee) for image, magenta (#d946ef) for text
- Labels positioned outside node boundary (left of inputs, right of outputs)
- Label text color matches handle color
- Inputs sorted: image handles at top, text handles at bottom
- Visual gap between image and text input groups
- Added CSS variables for handle colors (used by label styling)
- Output handles also have colored labels (Video/Image)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Render dynamic input handles from model schema (GenerateImage/VideoNode)
- Update connection validation with getHandleType() helper
- Add dynamicInputs to getConnectedInputs() return value
- Pass dynamicInputs through generation pipeline (workflowStore -> API)
- Update generateWithFal/Replicate to use dynamic inputs
- Process large images in dynamicInputs to URLs for external providers
- Support prompt from dynamicInputs when top-level prompt is empty
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add ModelInputDef type to node data interfaces
- Update ModelParameters to pass inputs via onInputsLoaded callback
- GenerateImageNode and GenerateVideoNode store input schema
This sets up the foundation for dynamic handle rendering.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
shrimbly