feat(ui): add organic human-cell biological membranes & real-time elastic stretch physics

[hassanafridi]

Summary & Motivation

This PR introduces an Organic Human-Cell Biological Membrane visualization for file clusters in the codebase graph, replacing rigid, geometric convex hulls with dynamic, fluid cellular boundaries inspired by biological cell membranes and amoebic pseudopodia.

Why this change?

1. Intuitive Architectural Boundaries: Standard geometric polygons and bounding boxes feel static and disconnected from the concept of module cohesion. By modeling folders as living biological cells and files as interconnected organelles, architectural boundaries feel organic and natural.
2. Engaging Tactile Feedback: When developers inspect dependencies or drag a file across the canvas, rigid hulls break the immersion. With this update, dragging a node away from its cluster stretches the membrane elastically with dynamic surface tension and waist tapering—giving immediate, delightful visual feedback on cluster membership and cohesion.
3. World-Class Visual Polish: CodeFlow should not just be informative—it should feel state-of-the-art. The glowing, bioluminescent membrane aesthetics elevate the entire visual experience.

---

📸 Visual Showcase

Note to Maintainer: Drag-and-drop a 5–10 second GIF / WebM recording or screenshots of the stretching membrane in action below!

Resting Cellular Membrane	Elastic Stretch & Pseudopod Neck Formation
find in the video attached	[find in the video attached]

---

🔬 Key Features & Technical Details

1. Organic Cellular Morphology (buildHumanCellMembrane)

• Catmull-Rom Spline Interpolation: Utilizes d3.curveCatmullRomClosed.alpha(0.5) sampling circle perimeters (samples = 16) around each constituent file node to synthesize seamless, organic continuous curves without sharp polygonal vertices.
• Single & Multi-Cell Morphology: Robust handling across scales—from single-node circular vesicles to massive, multi-file code modules.

2. Elastic Stretch & Dynamic Waist Tapering (buildStretchedClusterPath)

• Tension & Waist Calculation: When a node is dragged away from its cluster (minDist > rSum * 1.15), the algorithm calculates the surface tension based on distance. The waist radius (waistR) dynamically narrows and thins:
  $$\text{waistR} = \max(\text{minWaist}, \text{maxWaist} \times \max(0.18, 1 - (\text{stretchDist} / 280) \times 0.72))$$
• Tangent Arc Sweeping: Dynamically tracks min/max tangent angles to connect the cluster's base hull to the stretched node via smooth bridging arcs, mimicking cellular mitosis and fluid vesicle separation.
• Two-Cell Bridge (buildTwoCellBridge): Specialized connector topology for 2-node relationships with smooth bilateral neck pinching.

3. Real-Time Zero-Latency Drag Updates

• Integrated updateHullsRef.current() directly into the D3 drag lifecycle (drag.on('drag')).
• The cellular membrane deforms, stretches, and snaps back in real-time at 60 FPS without layout hitches or lingering artifacts.

4. Bioluminescent Styling

• Styled with translucent alpha fills (fill-opacity: 0.08), soft glowing border strokes (stroke-width: 2.5), and coordinated colored drop shadows (drop-shadow: 0 0 8px ${color}55) matching the folder's color scheme.

---

🧪 How to Test & Review

1. Clone or checkout the branch:

   git checkout feature/cell-membrane-ui
   npm start
   
   

codeflow.Open.Source.Architecture.Intelligence.-.Avast.Secure.Browser.2026-09-25.19-32-31.mp4

[vercel]

@hassanafridi is attempting to deploy a commit to the braedonsaunders' projects Team on Vercel.

A member of the Team first needs to authorize it.

[braedonsaunders]

Thanks for sending this.

The elastic membrane / stretch hull idea is interesting, but I can't take this PR as written.

A few blockers:

• It renames product branding from CodeFlow to "codeflow" across titles, logos, and user-facing strings. We don't want that.
• Most of the diff is unrelated CSS restyling (glows, shadows, reformatting) rather than the hull feature. That makes review hard and changes the look of the whole app without a separate discussion.
• package.json adds a duplicate "codeflow" bin key.

If you want to open a follow-up, keep it to the membrane helpers plus wiring into updateHulls / drag, with no branding or drive-by style changes. Happy to look at that.

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved moderate issues remain across performance, theming, accessibility, geometry, and package metadata.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 4 · 1

Open (5)

• Status pulse ignores prefers-reduced-motion · New
• Canvas toolbar hard-codes dark styling in light theme · New
• Drag events bypass hull throttling and can cause severe jank · New
• Duplicate codeflow key in package bin metadata · New
• New membrane geometry paths lack focused test coverage · New

What changed in this PR

Adds organic membrane rendering, elastic drag behavior, UI styling updates, and CLI branding changes.

Changes:

• Adds membrane and stretch-bridge geometry.
• Integrates live hull redraws during dragging.
• Refreshes themes, responsive styling, and package/CLI metadata.

File	Summary and findings
package.json	CLI metadata; duplicate codeflow bin key (moderate, 4 votes).
index.html	Membrane physics, drag integration, and UI refresh. Findings cover light-theme contrast (2 moderate, 1 vote each), fallback double-padding (moderate, 1), drag performance (moderate, 4), reduced motion (moderate, 4), missing geometry tests (nit, 3), toolbar theming (moderate, 2), and code-view drag updates (moderate, 1).
cli/​codeflow.mjs	CLI branding updates; no findings.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.