- Increase dialog max-width from 4xl to 6xl
- Increase max-height from 80vh to 85vh
- Change card layout to two-column grid
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace WorkflowPreview component with actual template screenshot image
- Remove unused presetWorkflows memo from TemplateExplorerView
- Pass previewImage prop instead of workflow to TemplateDetailModal
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- TemplateDetailModal: full details view with description, workflow preview,
metadata, and "Use this workflow" button
- TemplateCard: simplified - removed preview icon and tags row,
card click now opens detail modal
- TemplateExplorerView: wired up new flow where card opens detail modal
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace solid colored boxes with outlined nodes
- Add labels inside each node (Image Input, Prompt, etc.)
- Show model name for generate nodes (Gemini Pro, etc.)
- Use smoothstep edges for visible connections
- Simplify modal by removing redundant legend
- Restore image thumbnails as main preview in TemplateCard
- Add small icon button in top right to trigger workflow preview
- Create WorkflowPreviewModal for larger preview display
- Fix WorkflowPreview to properly show all nodes with fitView
- Add legend showing node type colors in modal
- Replace static previewImage with workflow prop in TemplateCard
- Render WorkflowPreview showing node layout and connections
- Remove getTemplateContent import (no longer needed)
- Pass workflow data from PRESET_TEMPLATES to cards
- overflow-hidden creates a scroll container that captures wheel events
- overflow-clip just clips visually without capturing events
- Applied to both modal container and content wrapper
- Add min-h-0 to flex containers to allow shrinking below content size
- Add flex-shrink-0 to header to prevent it from shrinking
- This fixes flexbox default min-height: auto preventing overflow scroll
- Remove carousel animation, use single static preview image
- Simplify TemplateCard props from previewImages[] to previewImage
- Ready for future GIF replacement
- Replace QuickstartTemplatesView with TemplateExplorerView
- Widen modal from max-w-3xl to max-w-4xl for sidebar layout
- Add max-h-[80vh] constraint for overflow handling
- Add search input with 200ms debounce for filtering by name/description
- Add category filter buttons (All, Product, Style, Composition, Community)
- Add tag pill buttons with multi-select OR logic
- Implement filtering logic: search AND category AND tags
- Add empty state with clear filters button
- Restructure layout: sidebar (w-48) + main grid area
- Update createPredictedCost helper for new breakdown format with provider, modelId, unit fields
- Add createMultiProviderCost helper for testing multi-provider scenarios (Gemini, fal.ai, Replicate)
- Add test cases for Known Costs section with provider grouping
- Add test cases for Pricing Unavailable section with Replicate models
- Add test cases for billing units (per image, per 5 seconds, etc.)
- Add test for Replicate help text with external link
- Add test for empty sections being hidden
- Add test for incurred cost tracking note
- Update Pricing Reference tests for new dynamic format
- All existing functionality tests preserved (close, reset, escape key)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Redesign CostDialog to show provider-grouped cost information
- Add two-section layout: Known Costs (Gemini, fal.ai) and Pricing Unavailable (Replicate)
- Add ProviderIcon component with colored dots for each provider
- Group breakdown items by provider with provider headers
- Show billing units (per image, per video, per second) for each model
- Add Replicate help text with link to replicate.com
- Update Incurred Cost section with note "Tracks Gemini and fal.ai only"
- Hide empty sections dynamically
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Grid layout with 2 columns on mobile, 3 on larger screens
- Uses TemplateCard for preset templates with metadata
- Community workflows section with custom cards
- Loads presets from getAllPresets() with node count calculation
- Fetches community workflows from /api/community-workflows
- Template selection via /api/quickstart POST and community API
- Loading states per template, error handling with dismissible alert
- Discord CTA for community contributions
- Update test data to use new multi-provider interface fields
- Add test for unknown pricing indicator
- Remove resolution-specific test that no longer applies
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Card layout with 48x48 icon area
- Template name and 2-line description with line-clamp
- Node count badge and category badge with color coding
- Tag pills display (max 4 shown)
- Loading state with spinner animation
- Disabled state with reduced opacity
- Hover states for interactive feedback
- Update calculatePredictedCost to produce CostBreakdownItem[] format
- Add unknownPricingCount to return value (was missing)
- CostDialog already using modelName property
The aspectRatio, resolution, and useGoogleSearch controls were only
shown when isGeminiOnly was true, but that was always false since
fal.ai is always available. Now these controls show based on whether
the currently selected model is a Gemini model.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When connecting to nodes with multiple input handles of the same type,
now finds the first unoccupied handle instead of always targeting the
first one. Returns null if all handles are occupied.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Security & API route fixes:
- Remove API key query param support in fal/models route to prevent credential leakage
- Fix MIME type fallback in save-generation route (now uses prefix-based fallback: image/* -> png, video/* -> mp4, unknown -> bin)
- Add timeout (60s) and size limits (500MB) for remote fetch in save-generation route using AbortController
CSS fix:
- Consolidate duplicate :root blocks in globals.css
- Change handle selector from data-handletype="prompt" to data-handletype="text"
- Update --handle-color-text CSS variable from #a3a3a3 to #3b82f6
Test file global mock isolation:
- Fix useAnnotationStore mock to support Zustand selector pattern
- Use vi.stubGlobal() instead of direct global assignments to prevent test leakage
- Restore global.Image in afterAll hook in AnnotationModal.test.tsx
- Wrap async Done assertion in waitFor() in AnnotationModal.test.tsx
- Use idiomatic fireEvent.dragOver() in AnnotationNode.test.tsx
- Fix global.confirm stub with proper beforeAll/afterAll lifecycle in CostDialog.test.tsx
- Import ReactNode type properly in EdgeToolbar.test.tsx
- Update save-generation route test to expect AbortController signal in fetch call
- Add Multi-Provider Support (Beta) section for Replicate and fal.ai
- Update Tech Stack and Environment Variables with new providers
- Add docs link to welcome modal (https://node-banana-docs.vercel.app/)
- Remove debug console.log statements from gridSplitter and WorkflowCanvas
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fixes issues with external provider models (e.g., seedream-4.5) where:
- Boolean/integer params with "image" in name were misclassified as image inputs
- Array params without items.type specification were incorrectly rejected
- Handle ID mismatch between node components (image-0) and store (image)
- dynamicInputs not passed to API in node regeneration code path
Changes:
- Update isImageInput() to check schema types, not just names
- Map both indexed (image-0) and legacy (image) handle IDs to schema names
- Add dynamicInputs to nanoBanana regeneration request body
- Add hidden backward-compat handles for edge routing
- Add comprehensive tests for schema classification and handle mapping
- Fix Toast test to use specific selector for close button
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added support for long-running video generation using a queue system with a 10-minute timeout.
- Updated maxDuration constant to reflect the new timeout for video generation.
- Enhanced API request handling to accommodate video generation, including error handling and polling for completion.
- Updated model retrieval tests to reflect the inclusion of additional models and improved provider filtering.
- Modified component tests to track model usage and reflect changes in the UI for provider selection.
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>
shrimbly