Wrap each button in a flex justify-end container so they sit in the
bottom-right of the settings panel.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Match the existing panel button style (bg-neutral-700, border, compact
sizing) instead of full-width blue. Add play triangle icon for Run
buttons and checkmark icon for the Apply button.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add execution buttons at the bottom of each configurable node's settings
panel so users can trigger generation directly from where they configure
settings, instead of needing keyboard shortcuts or external run buttons.
- GenerateImage, GenerateVideo, Generate3D, GenerateAudio, LLM: "Run" button
- EaseCurve: "Apply" button
- ConditionalSwitch: no button (passive routing node)
- Buttons disable and show running state while workflow executes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The easingCurve prop (showing the actual easing function curve over the
bezier editor) was present in the old node-body editor but wasn't carried
over to the ControlPanel's EaseCurveControls.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Strip editor tab, tab bar, and all editor-related state/handlers from EaseCurveNode
since controls now live in the ControlPanel. Node body shows only the video preview
full-bleed. Fix ControlPanel presets popup to open leftward (right-anchored) so it
stays on-screen when panel is at the right viewport edge.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove nodrag/nopan from the text output area so the node can be
dragged from the body (text is read-only, not editable). Move
nodrag/nopan to the individual action buttons instead. Hide
copy/regenerate/clear buttons by default, showing them only on
hover of the text area to prevent overlapping content.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Switch to fullBleed BaseNode so the image preview fills the entire
node area. Move grid config, Settings, and Split controls into an
absolute-positioned overlay at the bottom with backdrop blur,
matching the pattern used by PromptConstructorNode and other
full-bleed nodes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add createPortal import from react-dom
- Wrap modal JSX in createPortal targeting document.body
- Modal now renders outside React Flow's DOM tree entirely
- Fixes z-index bleed-through from React Flow node elements
- Change fullBleed nodes from transparent to subtle bg-neutral-800/50 with border-neutral-700/40
- Makes empty GenerateImage, GenerateVideo, and LLMGenerate nodes visible on canvas
- Content still covers background when present (images/videos fill the area)
Remove provider and model dropdowns, replacing with model name +
provider display block and Browse button — same as image and video.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Always display parameters inline instead of behind a collapsible
"Parameters" header. The toggle added unnecessary interaction cost.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove provider and model dropdowns from the video control panel,
replacing them with the cleaner model name + provider display block
with Browse button — matching the image node's updated layout.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add hoveredNodeId to store, set from BaseNode mouse events, read in
FloatingNodeHeader. Controls now appear when hovering any part of
the node, not just the floating header strip.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump ControlPanel from z-[50] to z-[90] so the layered box-shadow
paints in front of the React Flow canvas stacking context, not
behind it. Still below z-[100] used by modals and toolbars.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply Tobias Ahlin / Josh Comeau layered shadow technique: each
layer doubles offset and blur (1/2/4/8/16/32px) with decreasing
opacity. Each layer covers a narrow distance band so no single
layer interpolates over a large range, eliminating banding.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CSS linear-gradient bands on large areas due to 8-bit color depth.
box-shadow is compositor-rendered and produces smooth falloff without
visible stepping artifacts.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the narrow hard-edged gradient strip with a wide, smooth
multi-stop gradient that extends behind the panel for a natural
shadow falloff instead of a stepped/hard edge.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- LLMGenerateNode: Remove inline provider/model/parameter controls
- LLMGenerateNode: Convert to full-bleed layout with fullBleed prop
- LLMGenerateNode: Show only text output area in node body
- LLMGenerateNode: Keep floating action buttons (copy, regenerate, clear)
- ControlPanel: Add Max Tokens slider to LLMControls (256-16384 range)
- ControlPanel: Add shadow/gradient overlay on left edge of panel
- WorkflowCanvas: Fix type errors with node.data union types (Rule 1 bug fix)
Implement custom drag handling on FloatingNodeHeader so users can
reposition nodes by clicking and dragging the header bar. Supports
multi-selection dragging and properly ignores interactive elements
(buttons, inputs). Adds cursor-grab to indicate draggability.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reduce vertical padding from py-2 to py-1 and offset from -36 to -26
so the title sits closer to the node top edge.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Handles were inside the content div that had overflow-clip, causing them
to be clipped. Move clipping to a wrapper around just the media content
so handles remain unclipped — same pattern as GenerateImage/VideoNode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The content div's `relative` positioning creates a stacking context that
paints over the handles. Adding zIndex: 10 matches the pattern used by
GenerateImageNode and GenerateVideoNode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use overflow-visible unconditionally on BaseNode outer wrapper so
handles are never clipped. Content clipping is already handled by each
node's content div (overflow-hidden/overflow-clip). Add rounded-lg to
OutputNode's content container for rounded corners on edge-to-edge media.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use overflow-visible instead of overflow-clip for fullBleed nodes so
handle circles and labels extend beyond the node boundary. Add
overflow-hidden rounded-lg to image/video content containers to
preserve rounded corners on media.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace dashed-border selector assertions with text-based assertions
since full-bleed nodes use a background fill instead of a dashed
border for their empty state.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Video fills the entire node with no padding or chrome. Carousel
controls overlay at the bottom with backdrop blur (matching
GenerateImageNode pattern). Removed inline parameters since they
are displayed in the floating panel. Hidden ModelParameters kept
for schema-loading side effect (dynamic handles). All handles use
z-index to stay visible over content.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Textarea fills the entire node with no visible border. Available
variables display as a fixed semi-transparent footer pinned at the
bottom. Unresolved variables warning overlays at the top. Autocomplete
dropdown remains functional. Handles use z-index to stay visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Textarea fills the entire node with no visible border or chrome.
Variable name badge overlays at the bottom-left. Handles use
z-index to stay visible over the content surface.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Handles were painted behind the full-bleed image content since they
share the same stacking context. Adding zIndex: 10 to all handles
and their labels ensures they render on top of the image.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The header width calculation was preferring node.style.width (set at
creation time, often stale) over node.measured.width (actual DOM size).
This caused headers to be narrower than nodes after image generation
or manual resizing. Now uses measured → style → default fallback chain,
matching the existing pattern used elsewhere in the file.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace gap-2 with justify-between so header controls (comment,
expand, run) stay flush-right against the node boundary on all widths.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use node.style.width (number or string), node.measured.width, or
default dimensions — in that priority order. Headers now match the
actual node width after user resize.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- FloatingNodeHeader: Controls (comment, expand, run) now sit flush-right
against the node edge with tighter spacing.
- ControlPanel: Remove "Model" label. Model name sits directly under the
settings title, separated by a horizontal divider.
- Add new-tab link icon next to provider name that opens model details page.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ControlPanel: Replace provider/model dropdowns with model name text +
Browse button. Fixed width, no horizontal scroll.
- GenerateImageNode: Carousel controls now overlay on image bottom with
semi-transparent dark background for legibility.
- BaseNode: Add fullBleed prop for borderless mode. Image IS the node -
no visible container, border, or padding.
- GenerateImageNode uses fullBleed mode. Empty state uses subtle fill
instead of dashed border.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove header props (title, customTitle, comment, etc.) from BaseNode calls
- Apply full-bleed content pattern with contentClassName
- Replace dashed border empty states with subtle fills (bg-neutral-900/40)
- Move floating UI elements to absolute positioning
Part of batch update for all 21 remaining node files.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Removed header props from encoder-not-supported BaseNode
- Added contentClassName for full-bleed pattern
- 2 more BaseNode instances in this file still need updating
- Note: Other node edits were reverted by linter/formatter
- Removed aspect ratio, resolution, and search toggles from node body
- Removed ModelParameters component from node body
- Parameters will be shown in ControlPanel (Plan 02 integration)
- Image preview now has room to fill node in full-bleed pattern
Task 1 partial progress: GenerateImageNode parameters removed, 24 more nodes need header props removed and full-bleed content applied
- ImageInputNode: remove header props, use contentClassName with overflow-clip, full-bleed image with object-cover
- OutputNode: same full-bleed pattern, floating download button overlays content
- nodeDimensions: add calculateNodeSizeForFullBleed for nodes without header chrome
- Empty states use subtle bg-neutral-900/40 fill with centered icons (no dashed borders)
Task 1 in progress - 23 more nodes need same pattern applied
- Created ControlPanel component rendering on right side of viewport
- Fixed position with pointer-events-none wrapper, auto scrolling
- Filters to single selected configurable node (7 types)
- Placeholder controls for each node type (Task 2 will implement)
- Integrated into WorkflowCanvas after ChatPanel
- Panel appears/disappears based on node selection
- Import ViewportPortal from @xyflow/react
- Add NODE_TITLES mapping for all node types
- Create getNodeTitle helper (checks selectedModel.displayName for generate nodes)
- Create getNodeTitlePrefix helper (returns ProviderBadge for nodes with provider)
- Wire up handleCustomTitleChange and handleCommentChange callbacks
- Render FloatingNodeHeader for each node inside ViewportPortal
- Headers positioned above nodes, width matches node width
- onExpand/onRun callbacks not wired yet (will be added in Plan 03)
- Comment editing and title editing fully functional
The server-reported availableProviders were only set on fresh API calls.
When models were served from localStorage cache, the provider filter
icons reverted to only showing Gemini/fal.ai. Now availableProviders
is stored in and restored from the model cache.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
shrimbly