- Added explicit 'spending-out' ID to bottom handle on funnels
- Spending edges now explicitly connect from bottom handle
- Enable edgesReconnectable so users can drag edges to different handles
- Added onReconnect handler for edge re-attachment
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Bulbous top section (overflow zone) with curved sides
- Straight middle section (healthy operating zone between min/max)
- Angled/tapered bottom section narrowing to spout (outcomes)
- Side handles positioned at overflow zone for funnel-to-funnel flows
- Bottom handle at narrow spout for outcome/deliverable flows
- Animated overflow arrows when overflowing
- Threshold lines with MIN/MAX labels
- Fluid fill with ripple effect animation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Edit modal now includes:
- + button next to "Outflows" to create new funnel node
- + button next to "Outcomes" to create new outcome node
- Hover X button to remove allocations
- Auto-redistribute percentages when adding/removing
- New nodes positioned relative to current funnel
Uses useReactFlow hook to dynamically add nodes to canvas.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Flow architecture:
- INFLOWS enter from TOP (emerald handles)
- OUTFLOWS leave from SIDES to other funnels (amber handles)
- OUTCOMES/DELIVERABLES flow from BOTTOM (blue handles)
Simplified default view:
- Clean funnel shape with liquid fill animation
- Compact value display
- Simple allocation bars (Out/Spend)
- Status badge (OK/LOW/OVER)
Double-click edit modal:
- Draggable MIN/MAX threshold handles on single line
- Current value indicator
- Draggable pie chart slices for allocation editing
- Outflows pie (to funnels) and Spending pie (to outcomes)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Overflow allocations now flow SIDEWAYS to other funnels (amber)
- Spending allocations flow DOWN to outcome nodes (blue/pink)
- Added OutcomeNode component for deliverables/outputs
- Double-click funnels to open edit modal for min/max thresholds
- Separate pie chart for spending, bar chart for overflow
- Particle animations show overflow flying sideways, spending dripping down
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- All nodes now use single FunnelNode type
- Dual-handle range slider for min/max on one line
- Min cannot exceed max (constrained)
- Pie chart showing outflow allocations
- Edge thickness proportional to allocation percentage
- Removed old SourceNode, RecipientNode, ThresholdNode
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
n8n-style interface now uses funnel-shaped threshold nodes:
- Funnel shape with narrowing bottom (critical zone)
- Straight walls between MIN and MAX (healthy zone)
- Overflow zone at top with animated particles spilling over sides
- Vertical flow layout: Source (top) → Funnels (middle) → Recipients (bottom)
- Inflow enters via top handle (blue)
- Outflow exits via bottom handle (pink)
- Overflow exits via side handles (amber) when above MAX
- Interactive MIN/MAX sliders on each funnel
- Color-coded zones: amber (overflow), green (healthy), red (critical)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Jeff Emmett