- Basic rendering with title and handles (text/image input, text output)
- Provider selector (Google, OpenAI) with model switching
- Model selector dropdown based on selected provider
- Temperature slider rendering and editing
- Loading state with spinner
- Error state display with fallback message
- Output text display with regenerate and clear buttons
- Custom title editing functionality
- Model fallback when current model is invalid for provider
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add comprehensive tests for GenerateVideoNode component
- Test fal.ai and Replicate provider badges (Gemini excluded)
- Verify Gemini is not available for video generation
- Test video output display with controls, autoplay, loop, muted
- Test video history carousel navigation
- Test loading and error states
- Test dynamic input handles from schema
- Test run button and custom title functionality
- Test Browse button opens ModelSearchDialog
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add comprehensive tests for GenerateImageNode component
- Test provider badge display for Gemini, fal.ai, and Replicate
- Test model selection, browse button, and ModelSearchDialog
- Test output image display, loading states, and error states
- Test image history carousel navigation
- Test legacy data migration from model to selectedModel
- Test dynamic input handles for external providers
- Test run button and custom title functionality
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
SplitGridNode tests (23):
- Basic rendering with title, input/output handles
- Grid configuration display (rows x cols)
- Empty state and unconfigured warning
- Source image display with grid overlay
- Settings modal open/close and auto-open behavior
- Split button functionality and disabled states
- Child node count display
- Loading and error states
- Custom title editing
GroupNode tests (28):
- Basic rendering with group name and color
- Color picker button and delete button
- Group name editing (Enter, Escape, blur)
- Color picker open/close and color selection
- Delete group functionality
- Node resizer visibility based on selection
- Header drag functionality
- All 6 group colors (neutral, blue, green, purple, orange, red)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 31 tests covering all OutputNode functionality
- Test empty state rendering with placeholder
- Test image content display with correct src
- Test all video detection paths:
- data.video present
- contentType === "video"
- data.image starts with "data:video/"
- data.image contains ".mp4" or ".webm"
- Test video controls (controls, loop, muted, autoPlay, playsInline)
- Test lightbox open/close functionality
- Test download for data URL and HTTP URL content
- Test custom title display and editing
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
PromptNode test extensions:
- Add test for expand button rendering
- Add test for incrementModalCount called when expand clicked
- Add test for text output handle presence
ImageInputNode tests (21 tests):
- Basic rendering (title, drop zone, handles)
- Image display (image src, filename, dimensions)
- File input change handler with FileReader mocking
- File validation (reject non-images, reject >10MB files)
- Accept PNG, JPEG, WebP file types
- Remove button functionality
- Drag and drop event handling
- Click to upload via drop zone
- Custom title and comment functionality
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 35 comprehensive tests for BaseNode component
- Test basic rendering (title, children, className, customTitle, titlePrefix, headerAction)
- Test title editing flow (click to edit, typing, submit on Enter, cancel on Escape, blur)
- Test comment functionality (add, edit, save, cancel, escape key)
- Test expand button rendering and click handler
- Test run button rendering, click handler, and disabled state
- Test lock badge display for nodes in locked groups
- Test visual states (selected, executing, error styling)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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
- 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>
- 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>
- 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>
- Add ModelInput type for connectable inputs (image/text handles)
- Update model schema API to return both parameters and inputs
- Categorize properties: image inputs, text inputs, and parameters
- Sort inputs by required status and type
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add onExpandChange callback to ModelParameters component
- Remove max-height constraint from expanded parameters
- GenerateImageNode/GenerateVideoNode calculate new height based on parameter count
- Node height grows when expanded, shrinks when collapsed
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use 'models' array instead of 'data' array
- Iterate paths to find POST endpoint (not always at '/')
- Resolve $ref schema references from components.schemas
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The previous /api endpoint returned 404 for all models. Now using
the correct Model Search API with OpenAPI expansion:
GET https://api.fal.ai/v1/models?endpoint_id={modelId}&expand=openapi-3.0
Also added fallback path traversal for alternate OpenAPI structures.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Many fal.ai models don't expose OpenAPI schemas at /api endpoint.
Return empty parameters instead of error so generation still works
and UI doesn't show error message.
- Mark NanoBananaNode alias as deprecated with migration guidance
- Mark saveNanoBananaDefaults as deprecated with alternative
- ModelSearchDialog already has video capability badges and filtering
- Add inline validation for number/integer parameters with min/max bounds
- Show red border and error text for out-of-range values
- Clear parameters when switching provider or model (schemas differ)
- Validation shows specific constraints (Min/Max values, integer requirement)
- Add modelsFetchError state with retry button in GenerateImage/VideoNode
- Show clear errors when model list fails to load (API key issues, connection)
- Improve API route error messages to include model name
- Add rate limit handling (429) with user-friendly messages
- Parse provider-specific error responses for better detail
- Improve timeout message for video generation
- Include parameters in requestPayload for nanoBanana and generateVideo nodes
- Add logging for custom parameters in Replicate and fal.ai provider functions
- Parameters already spread via ...input.parameters in existing provider code
- Create ModelParameters component with collapsible UI
- Fetches schema from /api/models/{modelId} endpoint
- Renders appropriate inputs based on parameter type (string, number, boolean, enum)
- Add parameters field to NanoBananaNodeData and GenerateVideoNodeData
- Integrate into GenerateImageNode and GenerateVideoNode
- Create /api/models/[modelId] endpoint for fetching model parameter schemas
- Add ModelParameter interface to lib/providers/types.ts
- Support both Replicate and fal.ai providers
- Filter out internal params, prioritize user-relevant ones
- 10-minute cache TTL for schema responses
shrimbly