---
id: TASK-103
title: 'rFlows: Green flows, funnel coloring, full-page canvas, analytics popout'
status: Done
assignee: []
created_date: '2026-03-04 05:06'
labels:
  - rFlows
  - UX
  - frontend
dependencies: []
references:
  - modules/rflows/components/folk-flows-app.ts
  - modules/rflows/components/flows.css
  - modules/rflows/lib/presets.ts
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Overhaul the rFlows detail view UX:

1. **All flow edges → green shades** — Source inflow (#10b981), spending (#34d399), overflow (#6ee7b7). Ignores alloc.color for consistent visual language.
2. **Funnel 3-state coloring** — Critical (red, below min), Sustained (amber, between thresholds), Overflow (green, above max). Replaces previous 4-way sufficient/abundant/seeking/critical logic. Glow matches state color.
3. **Full-page canvas** — Removed tab system (Diagram/River/Table/Transactions). Canvas fills 100vh. Nav overlay (back link + title) floats inside canvas container.
4. **Analytics popout** — Left-side slide-in panel with Overview + Transactions sub-tabs. Toggled via toolbar button or Escape key. Reuses existing table/transaction renderers.
5. **Removed river tab** — Deleted renderRiverTab() and mountRiver(). folk-flow-river.ts kept on disk.
6. **Updated legend** — Edge colors as squares, funnel states as circles (Critical/Sustained/Thriving).
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [ ] #1 Canvas fills entire viewport (no tab bar, no max-width constraint)
- [ ] #2 All flow edges are shades of green
- [ ] #3 Funnels: red when critical, amber when sustained, green when overflow
- [ ] #4 Analytics button in toolbar opens left-side panel with overview + transactions
- [ ] #5 Back button in nav overlay returns to landing page
- [ ] #6 Simulation and wiring still work
- [ ] #7 Editor panel (right side) still opens for node editing
- [ ] #8 Escape closes analytics panel
<!-- AC:END -->

## Final Summary

<!-- SECTION:FINAL_SUMMARY:BEGIN -->
Committed 676aaa7 on dev, merged to main. Two files changed: folk-flows-app.ts (199 line diff — removed tab system, added analytics panel, updated edge/funnel color logic) and flows.css (68 line diff — fullpage layout, nav overlay, analytics panel styles). TypeScript compiles clean.
<!-- SECTION:FINAL_SUMMARY:END -->