fix(frontend): stabilize WAF rule canvas

Use React Flow controlled node state, support deleting nodes and edges, and show node properties only after selection.

frontend/app/(main)/waf/rules/editor/components/graph-validation.test.ts

@@ -2,7 +2,7 @@ import {describe, expect, it} from 'vitest';
 
 import type {WAFRuleGraph} from '@/lib/services/openflare';
 
-import {removeNodeFromGraph, validateGraph, wouldCreateCycle} from './graph-validation';
+import {removeEdgeFromGraph, removeNodeFromGraph, validateGraph, wouldCreateCycle} from './graph-validation';
 
 const validGraph = (): WAFRuleGraph => ({
   schema_version: 1,
@@ -110,6 +110,15 @@ it('removes incident edges when deleting a node', () => {
   expect(next.edges).toEqual([]);
 });
 
+it('removes a selected connection without changing nodes', () => {
+  const graph = validGraph();
+  const edgeId = graph.edges[0].id;
+  const next = removeEdgeFromGraph(graph, edgeId);
+  expect(next.nodes).toEqual(graph.nodes);
+  expect(next.edges).toHaveLength(graph.edges.length - 1);
+  expect(next.edges.some((edge) => edge.id === edgeId)).toBe(false);
+});
+
 it('detects whether a new connection creates a cycle', () => {
   expect(wouldCreateCycle(validGraph(), 'allow', 'start')).toBe(true);
   expect(wouldCreateCycle(validGraph(), 'start', 'block')).toBe(false);