The open project button was only visible for unsaved projects. Now it
displays in both states so users can always load a different project.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add provider icons (Gemini, Replicate, fal.ai) as filter buttons
- Replace dropdown with horizontal icon button group
- Add green badge color for Gemini provider
- Add 'Recently Used' section at top of model list
- Filter recent models by capability (image/video)
- Show max 4 recent models with cover images
- Track model usage via trackModelUsage on selection
- Add getProviderDisplayName helper for consistent naming
Add comprehensive tests for dynamic input handles:
- Multiple image handles for multi-frame video models
- Placeholder handles with dimmed opacity
- Handle ordering (images before text)
- Gap spacing between handle groups
- Schema integration tests
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add comprehensive tests for dynamic input handles:
- Multiple image handles with schema-name attributes
- Multiple text handles with schema-name attributes
- Placeholder handle variations with dimmed opacity
- Handle ordering (images before text)
- Gap spacing between handle groups
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
GroupsOverlay tests (24 tests):
- Test empty state rendering (no groups)
- Test group background rendering in ViewportPortal
- Test position, size, and color application
- Test group controls header with name display
- Test name editing (click, Enter, Escape, blur)
- Test lock/unlock toggle functionality
- Test color picker display and color selection
- Test delete group functionality
- Test multiple groups rendering
ModelParameters tests (30 tests):
- Test initial rendering (Gemini bypass, empty modelId)
- Test loading state and schema fetching
- Test error handling (fetch failure, network error)
- Test empty schema handling (component hides)
- Test collapse/expand toggle functionality
- Test parameter count display
- Test string input rendering and onChange
- Test number input with min/max validation
- Test integer validation (decimal error)
- Test boolean checkbox with schema defaults
- Test enum/select rendering with options
- Test parameter name formatting (snake_case to Title)
- Test API key headers in fetch requests
- Test onInputsLoaded callback
- Test multiple parameter types rendering
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Test empty state rendering (returns null when no history)
- Test trigger button with count badge and title
- Test fan open/close toggle functionality
- Test max 10 items in fan view with overflow indicator
- Test sidebar display with all history items
- Test Clear All functionality calling clearGlobalHistory
- Test model display (Pro vs Standard labels)
- Test prompt display with truncation and empty state
- Test drag and drop with proper data transfer
- Test relative time formatting (just now, minutes, hours)
- Test image thumbnail rendering in fan and sidebar
- Test keyboard navigation (Escape to close)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add QuickstartTemplatesView tests for preset and community workflow loading
- Add PromptWorkflowView tests for prompt input, validation, and generation
- Add QuickstartBackButton tests for click behavior and disabled state
- Mock fetch for template and workflow APIs
- Test error handling and loading states
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add WelcomeModal tests for rendering, navigation, file loading, and view transitions
- Add QuickstartInitialView tests for option buttons, external links, and accessibility
- Mock fetch for community workflows API and getAllPresets template function
- Test file input handling with valid/invalid workflow files
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Test visibility (render/not render based on isOpen)
- Test textarea with initial prompt value and typing updates
- Test Submit button calls onSubmit with updated prompt
- Test Cancel button behavior with/without unsaved changes
- Test unsaved changes confirmation dialog
- Test Escape key and backdrop click behaviors
- Test font size dropdown persistence with localStorage
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
ProjectSetupModal tests:
- Add tests for visibility and tab navigation
- Add tests for new project vs settings mode
- Add tests for form validation (name, directory)
- Add tests for save/create behavior with directory validation
- Add tests for browse directory functionality
- Add tests for keyboard shortcuts (Enter, Escape)
- Add tests for Providers tab API key inputs
CostDialog tests:
- Add tests for basic rendering and sections
- Add tests for cost display formatting
- Add tests for per-model cost breakdown
- Add tests for empty state handling
- Add tests for reset costs functionality
- Add tests for close behavior
- Add tests for pricing reference display
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add tests for visibility (isOpen, modal count registration)
- Add tests for search functionality (debounced search, auto-focus)
- Add tests for provider filter (dropdown, API filtering)
- Add tests for capability filter (image vs video filtering)
- Add tests for model card rendering (name, description, badges)
- Add tests for model selection (callback mode, create node mode)
- Add tests for close behavior (button, Escape, backdrop click)
- Add tests for loading, error, and empty states
- Add tests for API headers with provider keys
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Toast tests:
- Add tests for basic rendering (message, close button)
- Add tests for type styling (info, success, warning, error)
- Add tests for type icons
- Add tests for close button functionality
- Add tests for auto-hide after 4 seconds
- Add tests for persistent toast behavior
- Add tests for details section (collapsed/expanded states)
- Add tests for useToast store (show/hide)
CostIndicator tests:
- Add tests for basic rendering (hidden when no nodes/costs)
- Add tests for zero cost display
- Add tests for non-zero cost formatting
- Add tests for CostDialog opening/closing
- Add tests for cost updates when nodes change
- Add tests for splitGrid node cost calculation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add tests for basic rendering (position, header, shortcuts)
- Add tests for node type filtering by handle type (source/target)
- Add tests for menu item click behavior
- Add tests for keyboard navigation (arrows, enter, escape)
- Add tests for click outside closing
- Add tests for mouse hover highlighting
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
shrimbly