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

11 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 aa8c714146 Fix basePath for /tbff deployment - hardcode at build time 2026-01-29 18:33: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 f613f9f873 Add Traefik priority to ensure /tbff path is matched 2026-01-29 18:23:32 +00:00
Jeff Emmett a755297c23 Add public directory for Docker build 2026-01-29 18:12:28 +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 4b0491e999 Add funnel-style TBFF visualization with draggable thresholds 
New FundingFunnel component with three distinct zones:
- Overflow zone (above MAX): Straight walls, excess redistribution
- Healthy zone (MIN to MAX): Straight walls, normal operations
- Critical zone (below MIN): Narrowing funnel, restricted outflow

Features:
- Draggable MIN/MAX threshold lines with real-time updates
- Animated inflow particles (blue) dropping from top
- Animated outflow particles (pink) from bottom spout
- Gradient liquid fill with glow effect
- Live balance simulation based on flow rates
- Status panel showing current balance, rates, progress
- Single/Multi-funnel view toggle
- Zone color coding (rose/emerald/amber)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-29 18:05:58 +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
Jeff Emmett eefe4dfcc2 Initial commit: Flow Funding project setup 
- Next.js 14 with TypeScript and Tailwind CSS
- React Flow / D3.js for flow visualizations
- Docker + Traefik labels for deployment at flowidity.io/tbff
- Basic project structure and placeholder page

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