backdrop-filter: blur() causes significant frame rate drops on Windows
due to DWM compositor contention and Chrome's GPU layer management.
Replaced with higher-opacity semi-transparent backgrounds that maintain
visual contrast without the GPU-intensive blur compositing.
https://claude.ai/code/session_01MvD1n4QeXutgwUpKJuDGHa
The hidden file input was outside the inner dialog div (which has
stopPropagation) but inside the backdrop div (which calls onClose).
When the OS file picker closed, the backdrop click handler fired,
unmounting the modal before FileReader could complete.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add click handler to Header.tsx logo/title that calls setShowQuickstart(true)
- Wrap logo and title in button element with hover feedback
- Add onClick to WelcomeModal backdrop that calls onClose
- Add stopPropagation to inner dialog to prevent backdrop close on modal clicks
- Remove isCanvasEmpty gate from WelcomeModal rendering in WorkflowCanvas.tsx
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Extract autocomplete logic to usePromptAutocomplete hook
- Add PromptConstructorEditorModal with portal rendering
- Sync PromptConstructor outputText reactively for downstream nodes
- Add headerButtons prop to BaseNode for custom header actions
- Rename Blank Canvas to New Project with ProjectSetupModal integration
- Auto-push generated images to connected OutputGallery nodes
- Deduplicate images in OutputGallery during workflow execution
- Move PromptNode variable button to header with hover animation
- Extract AvailableVariable interface to types/nodes.ts
- Update tests for onNewProject rename
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The proxy was downloading 80-275MB workflow files through a serverless
function, causing timeouts and failures. Now the proxy just returns the
presigned R2 URL and the client downloads directly from R2.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
## Template Explorer Enhancements
- Add rich metadata and thumbnails for community workflows
- Create communityWorkflows.ts config for workflow metadata
- Reuse TemplateCard for community workflows with tag filtering
- Search now includes workflow descriptions
## Comment Navigation System
- Add comment navigation icon in header with unviewed count badge
- Navigate between nodes with comments using prev/next controls
- Tooltips show comment preview on hover
## Output Node Improvements
- Add custom filename and createDirectory options for output saves
- Remove default React Flow styling from output nodes
- Fix video output node connections
- Preserve node height on resize
## Image Handling Fixes
- Resolve image history race condition and duplicate images on save
- Preserve image history IDs when saving to new directory
- Verify outputImageRef matches selected history index on save
- Persist useExternalImageStorage setting in workflow config
- Paste images directly into selected imageInput nodes
## Model & Generation Fixes
- Use selectedModel.modelId for Gemini generation
- Return 200 with notFound flag instead of 404 for missing files
## Other
- Add git-lfs tracking for large workflow files
- Remove deprecated example workflows
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Change categories from product/style/composition to simple/advanced
- Add provider filter to sidebar (currently shows Gemini)
- Display provider tags on template cards
- Update tests for new category structure
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Resize workflow screenshot thumbnails from 1024px to 288px
- Create resized primary thumbnails (288px) from large sample images
- Use static paths instead of dynamic content lookup
- 288px = 2x retina for 144px display
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Change thumbnail from 160x112 to 144x144 (square)
- Use object-contain instead of object-cover to prevent cropping/distortion
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add template thumbnails to public/template-thumbnails/
- Add hover images for model-product and style-transfer templates
- Update TemplateCard to support hover image with opacity transition
- Replace street-scene.jpg with new-bg-model-product.png in model-product
- Replace house-lake.jpg with style-transfer-reference.png in style-transfer
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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
- 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
- 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
- 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>
- Add welcome screen that appears on empty canvas with 6 preset templates
- Implement AI-powered workflow generation via Gemini LLM
- Create /api/quickstart endpoint for template and AI generation
- Add content level selector (empty/minimal/full)
- Add Quickstart button in Header for re-access when canvas has nodes
- Include JSON validation and repair utilities for LLM output
- Update CLAUDE.md with improved documentation
🤖 Generated with [Claude Code](https://claude.ai/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Claude