EditableEdge.test.tsx (17 tests):
- Basic rendering with path and interaction layer
- Edge colors for image, prompt, and pause states
- Pause indicator visibility
- Draggable handles in angular mode
- Selection state opacity
- Loading animation for target node
ReferenceEdge.test.tsx (13 tests):
- Basic rendering with dashed style
- Gray color gradient
- No interactive elements (read-only)
- Selection state opacity
- Connection to source and target nodes
EdgeToolbar.test.tsx (13 tests):
- Visibility based on edge selection
- Pause toggle button with correct icons
- Delete button functionality
- Toolbar positioning
- Button styling for pause states
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 31 tests for WorkflowCanvas covering:
- Basic rendering (ReactFlow, Background, Controls, MiniMap)
- Welcome modal visibility based on canvas state
- Node and edge type registration
- Drag and drop for nodes, images, and workflows
- Keyboard shortcuts (Ctrl+Enter, Ctrl+C, Shift+key node creation)
- Canvas configuration (zoom, delete keys, multi-selection)
- Group handling support
- Add ResizeObserver and DOMMatrixReadOnly mocks to test setup for React Flow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Basic rendering tests (title, icon, links)
- Unconfigured project state display
- Configured project state with CostIndicator
- Save state display (saving, saved timestamp)
- Unsaved changes indicator (red dot)
- New Project button modal trigger
- Open file button and file input
- Save button with disabled state
- Settings button modal trigger
- Open Project Folder button visibility and API call
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Basic rendering with title and handles (image input/output)
- Empty state with "Drop, click, or connect" message
- Image display (sourceImage, outputImage, priority logic)
- Edit overlay with annotation count display
- Modal opening via image click with existing annotations
- Remove button clearing all image data and annotations
- File upload with format/size validation (PNG, JPG, WebP; <10MB)
- Drag and drop handling
- Custom title editing functionality
Note: Tests focus on component shell and state management,
not internal Konva canvas interactions per plan guidance.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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 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>
- 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>
- 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>
- 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>
- 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 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>
- 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
- 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
- Check model capabilities when selecting from model browser
- Create generateVideo node for text-to-video or image-to-video models
- Create nanoBanana node for image generation models
- Pass selectedModel with provider, modelId, displayName to node
- Add video and contentType fields to OutputNodeData
- Detect video content from data URL prefix or contentType hint
- Render video element with controls, loop, muted autoplay
- Support both base64 data URLs and HTTP URLs for video
- Update lightbox to show video player in fullscreen
- Update placeholder text to 'Waiting for image or video'
- Added to TEXT_TARGET_OPTIONS for text-to-video
- Added to IMAGE_TARGET_OPTIONS for image-to-video
- Fixes UAT-001: node now accessible via connection menu
Add GenerateVideoNode for video generation using Replicate and fal.ai:
- Add GenerateVideoNodeData interface with video output field
- Add generateVideo to NodeType union
- Create GenerateVideoNode component with provider/model selection
- Register in WorkflowCanvas with purple minimap color (#9333ea)
- Add default dimensions and node data creation in store
- Update validation.ts for new node type
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract last segment from model ID (e.g., "effects" from "kling-video/v1.6/pro/effects")
- Append as suffix if not already in name: "Kling 1.6 - effects"
- Helps differentiate model variants with same display name
- Show all capability badges (txt→img, img→img, txt→vid, img→vid)
- Display model ID below name to differentiate similar models
- Larger cover images (20x20 instead of 16x16)
- Taller cards with 3-line description (was 2)
- Better visual differentiation for fal.ai model variants
- Add ModelSearchDialog with search, provider filter, and capability filter
- Integrate with /api/models endpoint using API key headers
- Display model grid with cover images, provider badges, and descriptions
- Update addNode to accept optional initialData for pre-configured nodes
- Replace placeholder in FloatingActionBar with actual dialog
shrimbly