# Glow Edge System — Flow Editor

> **Date:** 2026-03-09

## Overview

Replace flat `smoothstep` edges in the troubleshooting flow editor with custom bezier edges featuring gradient strokes, soft glow, and directional animation on node selection.

## Default Edges (no selection)

- **Curve type:** Bezier (replacing right-angled `smoothstep`)
- **Stroke:** ~1.5px, subtle white/gray gradient with soft `drop-shadow` glow
- **Feel:** Clean, understated, dark-mode friendly

## Selected Node — Downstream Edges

- **Color:** Cyan brand gradient (`#06b6d4` → `#22d3ee`)
- **Animation:** Flowing dash animation moving downward (`stroke-dashoffset` keyframe)
- **Scope:** All edges from selected node through entire subtree (children, grandchildren, etc.)
- **Glow:** Soft cyan `drop-shadow` filter
- **Stroke:** 2px

## Selected Node — Upstream Edges

- **Color:** Amber gradient (`#f59e0b` → `#fbbf24`)
- **Animation:** Softer pulse/breathing opacity animation moving upward toward root
- **Scope:** All edges from selected node back to root
- **Glow:** Soft amber `drop-shadow` filter
- **Stroke:** 2px

## Cross-reference Edges

- Keep dashed + animated + cyan with arrows
- Use new bezier curves + glow treatment

## Implementation

- One custom `GlowEdge` component registered as the default edge type in React Flow
- `useTreeLayout` passes `edgeState: 'default' | 'downstream' | 'upstream'` in edge data based on `selectedNodeId`
- SVG `linearGradient` + `filter` defined once in a `<defs>` block
- CSS keyframe animation for flowing dash effect

## Files Touched

- **New:** `frontend/src/components/tree-editor/GlowEdge.tsx` (~60 lines)
- **Modified:** `useTreeLayout.ts` — add ancestor/descendant calculation, edge state
- **Modified:** `FlowCanvas.tsx` — register custom edge type
- **Modified:** `index.css` — keyframe animation for flowing dashes