---
id: TASK-82
title: Sankey-proportional edges + node satisfaction bars in rFunds diagram
status: Done
assignee: []
created_date: '2026-03-03 05:32'
labels:
  - rfunds
  - visualization
dependencies: []
references:
  - modules/rfunds/components/folk-funds-app.ts
  - modules/rfunds/components/funds.css
  - modules/rfunds/lib/simulation.ts
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Edge widths now reflect actual dollar flow (source rates, overflow excess, spending drain) instead of just allocation percentages. Zero-flow paths render as ghost edges. Edge labels show dollar amounts alongside percentages. Funnel nodes display an inflow satisfaction bar. Outcome progress bars enhanced with dollar labels.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [ ] #1 Edge widths proportional to actual dollar flow per edge
- [ ] #2 Ghost edges (dashed, low opacity) for zero-flow paths
- [ ] #3 Edge labels show dollar amounts: $2.5k (50%)
- [ ] #4 Funnel nodes show inflow satisfaction bar (green = received, grey = gap)
- [ ] #5 Outcome nodes have enhanced 8px progress bars with dollar labels
- [ ] #6 Clean tsc and vite build with no errors
<!-- AC:END -->

## Final Summary

<!-- SECTION:FINAL_SUMMARY:BEGIN -->
Implemented in commit e644797 on dev branch. Modified `folk-funds-app.ts` (renderAllEdges two-pass with EdgeInfo, computeInflowSatisfaction, renderFunnelNodeSvg/renderOutcomeNodeSvg updated) and `funds.css` (ghost edge + satisfaction bar styles). Deployed to production.
<!-- SECTION:FINAL_SUMMARY:END -->