---
id: TASK-108
title: rNetwork CRM — inline force-directed graph in Graph tab
status: Done
assignee: []
created_date: '2026-03-11 21:38'
updated_date: '2026-03-11 21:38'
labels:
  - rnetwork
  - frontend
  - graph
dependencies:
  - TASK-98
references:
  - modules/rnetwork/components/folk-crm-view.ts
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Replace the Graph tab's external link with an interactive SVG graph rendered directly inside folk-crm-view.ts using the CRM data already loaded (people, companies, opportunities). Companies appear as colored clusters with people orbiting around them. Cross-org opportunity links shown as dashed purple edges. Includes pan/zoom/drag interactions and auto fit-to-view.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 Graph tab renders inline SVG with company clusters and person nodes
- [x] #2 Force-directed layout with pan/zoom/drag interactions
- [x] #3 Cross-org edges from opportunities shown as dashed purple lines
- [x] #4 Auto fit-to-view on tab switch, empty state for no data
- [x] #5 Vite build passes with no TS errors
<!-- AC:END -->

## Final Summary

<!-- SECTION:FINAL_SUMMARY:BEGIN -->
Implemented in commit c36b0ab on dev, merged to main.\n\nAdded ~460 lines to folk-crm-view.ts:\n- buildGraphData() derives nodes/edges from CRM people, companies, opportunities\n- computeGraphLayout() runs 70-iteration force simulation\n- renderGraphTab() outputs SVG with cluster/edge/node layers + zoom controls + legend\n- Full pointer interactions: drag nodes, pan canvas, wheel zoom, click-to-select\n- updateGraphNodePosition() for incremental drag without re-render
<!-- SECTION:FINAL_SUMMARY:END -->