jeffemmett
/
flow-funding
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
11 Commits 1 Branch 0 Tags 186 KiB
Commit Graph

6 Commits

Author SHA1 Message Date
Jeff Emmett fb220642de Restructure flows: overflow sideways, spending downward 
- 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>
 2026-01-29 19:24:41 +00:00
Jeff Emmett 531eb7d373 Unified funnel system with pie charts and proportional edges 
- 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>
 2026-01-29 19:14:42 +00:00
Jeff Emmett 6bf9b0ed19 Replace rectangular nodes with funnel visualizations 
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>
 2026-01-29 18:45:03 +00:00
Jeff Emmett 8e43f9e383 Rebuild with n8n-style node-based interface 
Clean, modern interface using React Flow:
- SourceNode: Blue header, shows balance and flow rate
- ThresholdNode: Purple header with min/max slider controls
- RecipientNode: Shows funding progress with visual bar
- Animated edges showing flow direction
- Light theme matching n8n aesthetic
- Simulation toggle (pause/play)
- Legend panel explaining node types
- Zustand for state management

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-29 18:30:34 +00:00
Jeff Emmett 2ffeb9120a Remove unused React Flow components, simplify for funnel viz 
- Remove FlowCanvas, node components, edge components
- Remove @xyflow/react and d3 dependencies
- Clean up CSS (remove React Flow styles)
- Leaner build focused on FundingFunnel component

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-29 18:10:51 +00:00
Jeff Emmett 14ebf0853d Add flow visualization components and design spec 
- DESIGN.md: Complete visual design specification for TBFF
- FlowCanvas: Main React Flow canvas with interactive demo
- SourceNode: Treasury/funding source visualization
- RecipientNode: Project recipient with threshold progress
- ThresholdGate: Visual gate showing open/locked state
- AnimatedFlowEdge: Animated particles showing fund flow
- Real-time flow simulation (balances update live)

Visual features:
- Particle animation along flow paths
- Threshold progress bars with color states
- Dark theme optimized for data visualization
- Mini-map and zoom controls

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-29 18:01:38 +00:00